Implement most of samples in docs

chartjs · Apr 25, 2021 · 2d0c9d1 · 2d0c9d1
1 parent fba21e0
commit 2d0c9d1
Show file tree

Hide file tree

Showing 11 changed files with 425 additions and 577 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -65,6 +65,9 @@ module.exports = {
       ],
       '/samples/': [
         'basic',
+        'over-scale-mode',
+        'bar',
+        'log',
       ],
     }
   }

diff --git a/docs/samples/bar.md b/docs/samples/bar.md
@@ -0,0 +1,89 @@
+# Bar Chart
+
+```js chart-editor
+// <block:data:1>
+const DATA_COUNT = 20;
+const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
+const data = {
+  labels: Utils.months({count: DATA_COUNT}),
+  datasets: [{
+    label: 'Dataset 1',
+    borderColor: Utils.randomColor(0.7),
+    backgroundColor: Utils.randomColor(0.5),
+    data: Utils.numbers(NUMBER_CFG),
+  }, {
+    label: 'Dataset 2',
+    borderColor: Utils.randomColor(0.7),
+    backgroundColor: Utils.randomColor(0.5),
+    data: Utils.numbers(NUMBER_CFG),
+  }, {
+    label: 'Dataset 3',
+    borderColor: Utils.randomColor(0.7),
+    backgroundColor: Utils.randomColor(0.5),
+    data: Utils.numbers(NUMBER_CFG),
+  }]
+};
+// </block:data>
+
+// <block:scales:2>
+const scaleOpts = {
+  grid: {
+    borderColor: Utils.randomColor(1),
+    color: 'rgba( 0, 0, 0, 0.1)',
+  },
+  title: {
+    display: true,
+    text: (ctx) => ctx.scale.axis + ' axis',
+  }
+};
+const scales = {
+  x: {
+    type: 'category',
+    min: 5,
+    max: 11,
+  },
+  y: {
+    type: 'linear'
+  },
+};
+Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));
+// </block:scales>
+
+// <block:config:0>
+const config = {
+  type: 'bar',
+  data: data,
+  options: {
+    scales: scales,
+    plugins: {
+      zoom: {
+        pan: {
+          enabled: true,
+          mode: 'xy',
+          speed: 2,
+          threshold: 5,
+        },
+        zoom: {
+          enabled: true,
+          mode: 'xy',
+        },
+      }
+    },
+  }
+};
+// </block:config>
+
+const actions = [
+  {
+    name: 'Reset zoom',
+    handler(chart) {
+      chart.resetZoom();
+    }
+  }
+];
+
+module.exports = {
+  actions,
+  config,
+};
+```
diff --git a/docs/samples/basic.md b/docs/samples/basic.md
@@ -36,7 +36,7 @@ const scaleOpts = {
   },
   title: {
     display: true,
-    text: (ctx) => ctx.scale.axis + ' axis'
+    text: (ctx) => ctx.scale.axis + ' axis',
   }
 };
 const scales = {
@@ -58,7 +58,7 @@ const zoomOptions = {
   },
   pan: {
     enabled: true,
-    mode: 'xy'
+    mode: 'xy',
   }
 };
 // </block>
@@ -76,6 +76,7 @@ const config = {
       zoom: zoomOptions,
       title: {
         display: true,
+        position: 'bottom',
         text: (ctx) => 'Zoom: ' + zoomStatus() + ', Pan: ' + panStatus()
       }
     },

diff --git a/docs/samples/log.md b/docs/samples/log.md
@@ -0,0 +1,184 @@
+# Logarithmic Scale
+
+```js chart-editor
+// <block:data:2>
+const data = {
+  datasets: [{
+    label: 'V(node2)',
+    borderColor: Utils.randomColor(0.4),
+    backgroundColor: Utils.randomColor(0.1),
+    pointBorderColor: Utils.randomColor(0.7),
+    pointBackgroundColor: Utils.randomColor(0.5),
+    pointBorderWidth: 1,
+    data: [{
+      x: 1,
+      y: -1.711e-2,
+    }, {
+      x: 1.26,
+      y: -2.708e-2,
+    }, {
+      x: 1.58,
+      y: -4.285e-2,
+    }, {
+      x: 2.0,
+      y: -6.772e-2,
+    }, {
+      x: 2.51,
+      y: -1.068e-1,
+    }, {
+      x: 3.16,
+      y: -1.681e-1,
+    }, {
+      x: 3.98,
+      y: -2.635e-1,
+    }, {
+      x: 5.01,
+      y: -4.106e-1,
+    }, {
+      x: 6.31,
+      y: -6.339e-1,
+    }, {
+      x: 7.94,
+      y: -9.659e-1,
+    }, {
+      x: 10.00,
+      y: -1.445,
+    }, {
+      x: 12.6,
+      y: -2.110,
+    }, {
+      x: 15.8,
+      y: -2.992,
+    }, {
+      x: 20.0,
+      y: -4.102,
+    }, {
+      x: 25.1,
+      y: -5.429,
+    }, {
+      x: 31.6,
+      y: -6.944,
+    }, {
+      x: 39.8,
+      y: -8.607,
+    }, {
+      x: 50.1,
+      y: -1.038e1,
+    }, {
+      x: 63.1,
+      y: -1.223e1,
+    }, {
+      x: 79.4,
+      y: -1.413e1,
+    }, {
+      x: 100.00,
+      y: -1.607e1,
+    }, {
+      x: 126,
+      y: -1.803e1,
+    }, {
+      x: 158,
+      y: -2e1,
+    }, {
+      x: 200,
+      y: -2.199e1,
+    }, {
+      x: 251,
+      y: -2.398e1,
+    }, {
+      x: 316,
+      y: -2.597e1,
+    }, {
+      x: 398,
+      y: -2.797e1,
+    }, {
+      x: 501,
+      y: -2.996e1,
+    }, {
+      x: 631,
+      y: -3.196e1,
+    }, {
+      x: 794,
+      y: -3.396e1,
+    }, {
+      x: 1000,
+      y: -3.596e1
+    }]
+  }]
+};
+// </block:data>
+
+// <block:scales:1>
+const scales = {
+  x: {
+    type: 'logarithmic',
+    ticks: {
+      callback: function(tick) {
+        const remain = tick / (Math.pow(10, Math.floor(Math.log10(tick))));
+        if (remain === 1 || remain === 2 || remain === 5) {
+          return tick.toString() + 'Hz';
+        }
+        return '';
+      },
+      maxRotation: 0
+    },
+    title: {
+      display: true,
+      text: 'Frequency',
+    },
+  }
+};
+// </block:scales>
+
+// <block:config:0>
+const config = {
+  type: 'scatter',
+  data: data,
+  options: {
+    scales: scales,
+    plugins: {
+      zoom: {
+        pan: {
+          enabled: true,
+          mode: 'xy',
+          rangeMin: {
+            x: 0.5,
+            y: -50
+          },
+          rangeMax: {
+            x: 2e3,
+            y: 10
+          }
+        },
+        zoom: {
+          enabled: true,
+          mode: 'xy',
+          rangeMin: {
+            x: 0.5,
+            y: -50
+          },
+          rangeMax: {
+            x: 2e3,
+            y: 10
+          }
+        },
+      }
+    },
+  }
+};
+// </block:config>
+
+const actions = [
+  {
+    name: 'Reset zoom',
+    handler(chart) {
+      chart.resetZoom();
+    }
+  }
+];
+
+module.exports = {
+  actions,
+  config,
+};
+```