Docs/clarify samples (#9960)

* add information to the samples root about using the samples

* Implement review feedback

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 39feb1d76005b6aefd0e87fd9bf1bc8ca361a114..75162ea83d79de43092d30789dc2e2e7af15de2a 100644 (file)
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -26,7 +26,7 @@ module.exports = {
     ['redirect', {
       redirectors: [
         // Default sample page when accessing /samples.
-        {base: '/samples', alternative: ['bar/vertical']},
+        {base: '/samples', alternative: ['information']},
       ],
     }],
     ['vuepress-plugin-code-copy', true],
@@ -130,6 +130,7 @@ module.exports = {
         title: 'API'
       },
       '/samples/': [
+        'information',
         {
           title: 'Bar Charts',
           children: [

diff --git a/docs/.vuepress/redirects b/docs/.vuepress/redirects
index 8f92552e5c536266650975be97c0373bbaa1ed21..5a396d6c5256ec45ca73696a050ba8da48055d02 100644 (file)
--- a/docs/.vuepress/redirects
+++ b/docs/.vuepress/redirects
@@ -1,3 +1,3 @@
 /charts/ /charts/line.html
 /general/ /general/data-structures.html
-/samples/ /samples/bar/vertical.html
\ No newline at end of file
+/samples/ /samples/information.html
\ No newline at end of file

diff --git a/docs/samples/information.md b/docs/samples/information.md
new file mode 100644 (file)
index 0000000..4f1d676
--- /dev/null
+++ b/docs/samples/information.md
@@ -0,0 +1,11 @@
+# Information
+
+## Out of the box working samples
+These samples are made for demonstration purposes only. They won't work out of the box if you copy paste them into your own website. This is because of how the docs are getting built. Some boilerplate code gets hidden.
+For a sample that can be copyed and pasted and used directly you can check the [usage page](../getting-started/usage.md).
+
+## Autogenerated data
+The data used in the samples is autogenerated using custom functions. These functions do not ship with the library, for more information about this you can check the [utils page](./utils.md).
+
+## Actions block
+The samples have an `actions` code block. These actions are not part of chart.js. They are internally transformed to seperate buttons together with onClick listeners by a plugin we use in the documentation. To implement such actions yourself you can make some buttons and add onClick event listeners to them. Then in these event listeners you can call your variable in which you made the chart and do the logic that the button is supposed to do.