Merge pull request #7 from kurkle/vuepress-samples

Add derived-chart-type

Author: etimberg

docs/.vuepress/config.js

@@ -19,6 +19,7 @@ module.exports = {
         'ga': 'UA-28909194-3'
       }
     ],
+    /* COMMENTED OUT FOR SAMPLES DEV, BECAUSE KEEPS CRASHING ON HOT RELOAD
     [
       'vuepress-plugin-typedoc',
 
@@ -31,7 +32,7 @@ module.exports = {
           parentCategory: 'API',
         },
       },
-    ],
+    ],*/
   ],
   chainWebpack(config) {
     config.merge({
@@ -107,6 +108,7 @@ module.exports = {
           title: 'Advanced',
           children: [
             'advanced/derived-axis-type',
+            'advanced/derived-chart-type',
           ]
         },
         {

docs/samples/advanced/derived-axis-type.md

@@ -1,4 +1,4 @@
-# Derived Axis Type - Log2
+# Derived Axis Type
 
 ```js chart-editor
 // <block:setup:1>

docs/samples/advanced/derived-chart-type.md

@@ -0,0 +1,46 @@
+# Derived Chart Type
+
+```js chart-editor
+// <block:setup:1>
+const DATA_COUNT = 7;
+const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100, rmin: 1, rmax: 20};
+const data = {
+  datasets: [
+    {
+      label: 'My First dataset',
+      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
+      borderColor: Utils.CHART_COLORS.blue,
+      borderWidth: 1,
+      boxStrokeStyle: 'red',
+      data: Utils.bubbles(NUMBER_CFG)
+    }
+  ],
+};
+// </block:setup>
+
+// <block:config:0>
+const config = {
+  type: 'derivedBubble',
+  data: data,
+  options: {
+    responsive: true,
+    plugins: {
+      title: {
+        display: true,
+        text: 'Derived Chart Type'
+      },
+    }
+  }
+};
+
+// </block:config>
+
+module.exports = {
+  actions: [],
+  config: config,
+};
+```
+
+## DerivedBubble Implementation
+
+<<< @/docs/scripts/derived-bubble.js

docs/scripts/derived-bubble.js

@@ -0,0 +1,34 @@
+import {Chart, BubbleController} from 'chart.js';
+
+class Custom extends BubbleController {
+  draw() {
+    // Call bubble controller method to draw all the points
+    super.draw(arguments);
+
+    // Now we can do some custom drawing for this dataset.
+    // Here we'll draw a box around the first point in each dataset,
+    // using `boxStrokeStyle` dataset option for color
+    var meta = this.getMeta();
+    var pt0 = meta.data[0];
+
+    const {x, y} = pt0.getProps(['x', 'y']);
+    const {radius} = pt0.options;
+
+    var ctx = this.chart.ctx;
+    ctx.save();
+    ctx.strokeStyle = this.options.boxStrokeStyle;
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x - radius, y - radius, 2 * radius, 2 * radius);
+    ctx.restore();
+  }
+}
+Custom.id = 'derivedBubble';
+Custom.defaults = {
+  // Custom defaults. Bubble defaults are inherited.
+  boxStrokeStyle: 'red'
+};
+// Overrides are only inherited, but not merged if defined
+// Custom.overrides = Chart.overrides.bubble;
+
+// Stores the controller so that the chart initialization routine can look it up
+Chart.register(Custom);

docs/scripts/register.js

@@ -1,5 +1,6 @@
 import {Chart, registerables} from '../../dist/chart.esm';
 import Log2Axis from './log2';
+import './derived-bubble';
 
 Chart.register(...registerables);
 Chart.register(Log2Axis);

docs/scripts/utils.js

@@ -45,6 +45,13 @@ export function points(config) {
   return xs.map((x, i) => ({x, y: ys[i]}));
 }
 
+export function bubbles(config) {
+  return this.points(config).map(pt => {
+    pt.r = this.rand(config.rmin, config.rmax);
+    return pt;
+  });
+}
+
 export function labels(config) {
   var cfg = config || {};
   var min = cfg.min || 0;