Add sample on time scale (#462)

Author: kurkle

docs/.vuepress/config.js

@@ -68,6 +68,7 @@ module.exports = {
         'over-scale-mode',
         'bar',
         'log',
+        'time',
       ],
     }
   }

docs/samples/time.md

@@ -0,0 +1,117 @@
+# Time Scale
+
+```js chart-editor
+// <block:data:1>
+const NUMBER_CFG = {count: 500, min: 0, max: 1000};
+const data = {
+  datasets: [{
+    label: 'My First dataset',
+    borderColor: Utils.randomColor(0.4),
+    backgroundColor: Utils.randomColor(0.1),
+    pointBorderColor: Utils.randomColor(0.7),
+    pointBackgroundColor: Utils.randomColor(0.5),
+    pointBorderWidth: 1,
+    data: Utils.hourlyPoints(NUMBER_CFG),
+  }]
+};
+// </block:data>
+
+// <block:scales:2>
+const scales = {
+  x: {
+    position: 'bottom',
+    type: 'time',
+    ticks: {
+      autoSkip: true,
+      autoSkipPadding: 50,
+      maxRotation: 0
+    },
+    time: {
+      displayFormats: {
+        hour: 'HH:mm',
+        minute: 'HH:mm',
+        second: 'HH:mm:ss'
+      }
+    }
+  },
+  y: {
+    position: 'right',
+    ticks: {
+      callback: (val, index, ticks) => index === 0 || index === ticks.length - 1 ? null : val,
+    },
+    grid: {
+      borderColor: Utils.randomColor(1),
+      color: 'rgba( 0, 0, 0, 0.1)',
+    },
+    title: {
+      display: true,
+      text: (ctx) => ctx.scale.axis + ' axis',
+    }
+  },
+};
+// </block:scales>
+
+// <block:zoom:0>
+const zoomOptions = {
+  zoom: {
+    enabled: true,
+    mode: 'xy',
+  },
+  pan: {
+    enabled: true,
+    mode: 'xy',
+  }
+};
+// </block>
+
+const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
+const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
+
+// <block:config:1>
+const config = {
+  type: 'scatter',
+  data: data,
+  options: {
+    scales: scales,
+    plugins: {
+      zoom: zoomOptions,
+      title: {
+        display: true,
+        position: 'bottom',
+        text: (ctx) => 'Zoom: ' + zoomStatus() + ', Pan: ' + panStatus()
+      }
+    },
+    onClick(e) {
+      console.log(e.type);
+    }
+  }
+};
+// </block:config>
+
+const actions = [
+  {
+    name: 'Toggle zoom',
+    handler(chart) {
+      zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
+      chart.update();
+    }
+  }, {
+    name: 'Toggle pan',
+    handler(chart) {
+      zoomOptions.pan.enabled = !zoomOptions.pan.enabled;
+      chart.update();
+    },
+  }, {
+    name: 'Reset zoom',
+    handler(chart) {
+      chart.resetZoom();
+    }
+  }
+];
+
+module.exports = {
+  actions,
+  config,
+  output: 'Clicks are logged here'
+};
+```

docs/scripts/register.js

@@ -1,4 +1,5 @@
 import Chart from 'chart.js/auto';
+import 'chartjs-adapter-date-fns';
 import zoomPlugin from '../../dist/chartjs-plugin-zoom.esm.js';
 
 Chart.register(zoomPlugin);

docs/scripts/utils.js

@@ -1,4 +1,5 @@
 import {valueOrDefault} from 'chart.js/helpers';
+import {addHours} from 'date-fns';
 
 // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
 let _seed = Date.now();
@@ -79,3 +80,9 @@ export function months(config) {
 
   return values;
 }
+
+export function hourlyPoints(config) {
+  const ys = this.numbers(config);
+  const start = new Date().valueOf();
+  return ys.map((y, i) => ({x: addHours(start, i), y}));
+}

package-lock.json

@@ -36,10 +36,12 @@
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
     "chart.js": "^3.1.0",
+    "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-test-utils": "^0.2.2",
     "concurrently": "^6.0.2",
     "coveralls": "^3.1.0",
     "cross-env": "^7.0.3",
+    "date-fns": "^2.21.1",
     "eslint": "^7.24.0",
     "eslint-config-chartjs": "^0.3.0",
     "eslint-plugin-es": "^4.1.0",