fix esm build and add sample

sgratzl · sgratzl · commit 0a6bbee95a2b · 2020-05-18T21:23:05.000+02:00
diff --git a/README.md b/README.md
@@ -333,16 +333,29 @@ interface ITooltipItem {
 
 The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.
 
+Variant A:
+
 ```js
 import Chart from 'chart.js';
-import { BoxPlot } from '@sgratzl/chartjs-chart-boxplot';
+import { BoxPlotController } from '@sgratzl/chartjs-chart-boxplot';
 
 // register controller in chart.js and ensure the defaults are set
-BoxPlot.register();
+BoxPlotController.register();
 ...
 
 new Chart(ctx, {
-  type: BoxPlot.id,
+  type: BoxPlotController.id,
+  data: [...],
+});
+```
+
+Variant B:
+
+```js
+import Chart from 'chart.js';
+import { BoxPlotChart } from '@sgratzl/chartjs-chart-boxplot';
+
+new BoxPlotChart(ctx, {
   data: [...],
 });
 ```
diff --git a/samples/default_esm.html b/samples/default_esm.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Box Plot Chart</title>
+  </head>
+  <body>
+    <div id="container" style="width: 75%;">
+      <canvas id="canvas"></canvas>
+    </div>
+    <script defer src="https://unpkg.com/es-module-shims"></script>
+    <script type="importmap-shim">
+      {
+        "imports": {
+          "chart.js": "https://unpkg.com/chart.js@3.0.0-alpha/dist/Chart.esm.js",
+          "@sgratzl/chartjs-chart-boxplot": "../build/Chart.BoxPlot.esm.js"
+        }
+      }
+    </script>
+    <script type="module-shim">
+      import Chart from 'chart.js';
+      import { BoxPlotChart } from '@sgratzl/chartjs-chart-boxplot';
+
+      const chart = new BoxPlotChart(document.getElementById('canvas'), {
+        data: {
+          labels: ['A'],
+          datasets: [{
+            label: 'Test',
+            data: [
+              Array(100).fill(0).map(() => Math.random())
+            ]
+          }]
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/src/bundle.js b/src/bundle.js
@@ -1,8 +1,13 @@
 export * from '.';
 
-import { BoxPlot, HorizontalBoxPlot, Violin, HorizontalViolin } from './controllers';
+import {
+  BoxPlotController,
+  HorizontalBoxPlotController,
+  ViolinController,
+  HorizontalViolinController,
+} from './controllers';
 
-BoxPlot.register();
-HorizontalBoxPlot.register();
-Violin.register();
-HorizontalViolin.register();
+BoxPlotController.register();
+HorizontalBoxPlotController.register();
+ViolinController.register();
+HorizontalViolinController.register();
diff --git a/src/chart.js b/src/chart.js
@@ -0,0 +1,9 @@
+import ChartNS from 'chart.js';
+
+export const Chart = ChartNS;
+export const plugins = ChartNS.plugins;
+export const controllers = ChartNS.controllers;
+export const defaults = ChartNS.defaults;
+export const Element = ChartNS.Element;
+export const helpers = ChartNS.helpers;
+export const scaleService = ChartNS.scaleService;
diff --git a/src/controllers/base.js b/src/controllers/base.js
@@ -1,6 +1,6 @@
 ﻿import { interpolateNumberArray } from '../animation';
 import { outlierPositioner, patchInHoveredOutlier } from '../tooltip';
-import { controllers } from 'chart.js';
+import { controllers } from '../chart';
 import { defaultStatsOptions } from '../data';
 
 export function baseDefaults(keys) {
diff --git a/src/controllers/boxplot.js b/src/controllers/boxplot.js
@@ -1,9 +1,10 @@
 ﻿import { asBoxPlotStats } from '../data';
-import { controllers, helpers, defaults } from 'chart.js';
+import { Chart, controllers, helpers, defaults } from '../chart';
 import { baseDefaults, StatsBase } from './base';
 import { BoxAndWiskers, boxOptionsKeys } from '../elements';
+import { patchControllerConfig } from './utils';
 
-export class BoxPlot extends StatsBase {
+export class BoxPlotController extends StatsBase {
   _parseStats(value, config) {
     return asBoxPlotStats(value, config);
   }
@@ -24,13 +25,13 @@ export class BoxPlot extends StatsBase {
   }
 }
 
-BoxPlot.id = 'boxplot';
-BoxPlot.register = () => {
-  BoxPlot.prototype.dataElementType = BoxAndWiskers.register();
-  BoxPlot.prototype.dataElementOptions = controllers.bar.prototype.dataElementOptions.concat(boxOptionsKeys);
+BoxPlotController.id = 'boxplot';
+BoxPlotController.register = () => {
+  BoxPlotController.prototype.dataElementType = BoxAndWiskers.register();
+  BoxPlotController.prototype.dataElementOptions = controllers.bar.prototype.dataElementOptions.concat(boxOptionsKeys);
 
   defaults.set(
-    BoxPlot.id,
+    BoxPlotController.id,
     helpers.merge({}, [
       defaults.bar,
       baseDefaults(boxOptionsKeys),
@@ -49,11 +50,18 @@ BoxPlot.register = () => {
       },
     ])
   );
-  controllers[BoxPlot.id] = BoxPlot;
-  return BoxPlot;
+  controllers[BoxPlotController.id] = BoxPlotController;
+  return BoxPlotController;
 };
 
-export class HorizontalBoxPlot extends BoxPlot {
+export class BoxPlotChart extends Chart {
+  constructor(item, config) {
+    super(item, patchControllerConfig(config, BoxPlotController));
+  }
+}
+BoxPlotChart.id = BoxPlotController.id;
+
+export class HorizontalBoxPlotController extends BoxPlotController {
   getValueScaleId() {
     return this._cachedMeta.xAxisID;
   }
@@ -62,15 +70,15 @@ export class HorizontalBoxPlot extends BoxPlot {
   }
 }
 
-HorizontalBoxPlot.id = 'horizontalBoxplot';
-HorizontalBoxPlot.register = () => {
-  HorizontalBoxPlot.prototype.dataElementType = BoxAndWiskers.register();
-  HorizontalBoxPlot.prototype.dataElementOptions = controllers.horizontalBar.prototype.dataElementOptions.concat(
+HorizontalBoxPlotController.id = 'horizontalBoxplot';
+HorizontalBoxPlotController.register = () => {
+  HorizontalBoxPlotController.prototype.dataElementType = BoxAndWiskers.register();
+  HorizontalBoxPlotController.prototype.dataElementOptions = controllers.horizontalBar.prototype.dataElementOptions.concat(
     boxOptionsKeys
   );
 
   defaults.set(
-    HorizontalBoxPlot.id,
+    HorizontalBoxPlotController.id,
     helpers.merge({}, [
       defaults.horizontalBar,
       baseDefaults(boxOptionsKeys),
@@ -89,6 +97,13 @@ HorizontalBoxPlot.register = () => {
       },
     ])
   );
-  controllers[HorizontalBoxPlot.id] = HorizontalBoxPlot;
-  return HorizontalBoxPlot;
+  controllers[HorizontalBoxPlotController.id] = HorizontalBoxPlotController;
+  return HorizontalBoxPlotController;
 };
+
+export class HorizontalBoxPlotChart extends Chart {
+  constructor(item, config) {
+    super(item, patchControllerConfig(config, HorizontalBoxPlotController));
+  }
+}
+HorizontalBoxPlotChart.id = HorizontalBoxPlotController.id;
diff --git a/src/controllers/utils.js b/src/controllers/utils.js
@@ -0,0 +1,5 @@
+export function patchControllerConfig(config, controller) {
+  controller.register();
+  config.type = controller.id;
+  return config;
+}
diff --git a/src/controllers/violin.js b/src/controllers/violin.js
@@ -1,11 +1,12 @@
 ﻿import { asViolinStats } from '../data';
-import { controllers, defaults, helpers } from 'chart.js';
+import { Chart, controllers, defaults, helpers } from '../chart';
 import { StatsBase, baseDefaults } from './base';
 import { baseOptionKeys } from '../elements/base';
 import { ViolinElement } from '../elements';
 import { interpolateKdeCoords } from '../animation';
+import { patchControllerConfig } from './utils';
 
-export class Violin extends StatsBase {
+export class ViolinController extends StatsBase {
   _parseStats(value, config) {
     return asViolinStats(value, config);
   }
@@ -30,13 +31,13 @@ export class Violin extends StatsBase {
   }
 }
 
-Violin.id = 'violin';
-Violin.register = () => {
-  Violin.prototype.dataElementType = ViolinElement.register();
-  Violin.prototype.dataElementOptions = controllers.bar.prototype.dataElementOptions.concat(baseOptionKeys);
+ViolinController.id = 'violin';
+ViolinController.register = () => {
+  ViolinController.prototype.dataElementType = ViolinElement.register();
+  ViolinController.prototype.dataElementOptions = controllers.bar.prototype.dataElementOptions.concat(baseOptionKeys);
 
   defaults.set(
-    Violin.id,
+    ViolinController.id,
     helpers.merge({}, [
       defaults.bar,
       baseDefaults(baseOptionKeys),
@@ -60,11 +61,18 @@ Violin.register = () => {
       },
     ])
   );
-  controllers[Violin.id] = Violin;
-  return Violin;
+  controllers[ViolinController.id] = ViolinController;
+  return ViolinController;
 };
 
-export class HorizontalViolin extends Violin {
+export class ViolinChart extends Chart {
+  constructor(item, config) {
+    super(item, patchControllerConfig(config, ViolinController));
+  }
+}
+ViolinChart.id = ViolinController.id;
+
+export class HorizontalViolinController extends ViolinController {
   getValueScaleId() {
     return this._cachedMeta.xAxisID;
   }
@@ -73,15 +81,15 @@ export class HorizontalViolin extends Violin {
   }
 }
 
-HorizontalViolin.id = 'horizontalViolin';
-HorizontalViolin.register = () => {
-  HorizontalViolin.prototype.dataElementType = ViolinElement.register();
-  HorizontalViolin.prototype.dataElementOptions = controllers.horizontalBar.prototype.dataElementOptions.concat(
+HorizontalViolinController.id = 'horizontalViolin';
+HorizontalViolinController.register = () => {
+  HorizontalViolinController.prototype.dataElementType = ViolinElement.register();
+  HorizontalViolinController.prototype.dataElementOptions = controllers.horizontalBar.prototype.dataElementOptions.concat(
     baseOptionKeys
   );
 
   defaults.set(
-    HorizontalViolin.id,
+    HorizontalViolinController.id,
     helpers.merge({}, [
       defaults.horizontalBar,
       baseDefaults(baseOptionKeys),
@@ -105,6 +113,13 @@ HorizontalViolin.register = () => {
       },
     ])
   );
-  controllers[HorizontalViolin.id] = HorizontalViolin;
-  return HorizontalViolin;
+  controllers[HorizontalViolinController.id] = HorizontalViolinController;
+  return HorizontalViolinController;
 };
+
+export class HorizontalViolinChart extends Chart {
+  constructor(item, config) {
+    super(item, patchControllerConfig(config, HorizontalViolinController));
+  }
+}
+HorizontalViolinChart.id = HorizontalViolinController.id;
diff --git a/src/elements/base.js b/src/elements/base.js
@@ -1,7 +1,7 @@
-﻿import { defaults, Element, helpers } from 'chart.js';
+﻿import { defaults, Element, helpers } from '../chart';
 import { rnd } from '../data';
 
-export const baseDefaults = Object.assign({}, defaults.elements.rectangle, {
+export const baseDefaults = {
   borderWidth: 1,
 
   outlierStyle: 'circle',
@@ -18,23 +18,9 @@ export const baseDefaults = Object.assign({}, defaults.elements.rectangle, {
 
   hitPadding: 2,
   outlierHitRadius: 4,
-});
-
-export const baseOptionKeys = [
-  'outlierStyle',
-  'outlierRadius',
-  'outlierBackgroundColor',
-  'outlierBorderColor',
-  'outlierBorderWidth',
-  'outlierHitRadius',
-
-  'itemStyle',
-  'itemRadius',
-  'itemBackgroundColor',
-  'itemBorderColor',
-  'itemBorderWidth',
-  'hitPadding',
-];
+};
+
+export const baseOptionKeys = Object.keys(baseDefaults);
 
 export class StatsBase extends Element {
   isVertical() {
diff --git a/src/elements/boxandwhiskers.js b/src/elements/boxandwhiskers.js
@@ -1,4 +1,4 @@
-﻿import { defaults } from 'chart.js';
+﻿import { defaults } from '../chart';
 import { StatsBase, baseDefaults, baseOptionKeys } from './base';
 
 export const boxOptionsKeys = baseOptionKeys.concat(['medianColor', 'lowerBackgroundColor']);
@@ -187,9 +187,9 @@ export class BoxAndWiskers extends StatsBase {
 BoxAndWiskers._type = 'boxandwhiskers';
 BoxAndWiskers.register = () => {
   defaults.set('elements', {
-    [BoxAndWiskers._type]: Object.assign({}, baseDefaults, {
+    [BoxAndWiskers._type]: Object.assign({}, defaults.elements.rectangle, baseDefaults, {
       medianColor: 'transparent',
-      lowerBackgroundColor: 'transparent',
+      lowerBackgroundColor: 'transparsent',
     }),
   });
   return BoxAndWiskers;
diff --git a/src/elements/violin.js b/src/elements/violin.js
@@ -1,4 +1,4 @@
-﻿import { helpers, defaults } from 'chart.js';
+﻿import { helpers, defaults } from '../chart';
 import { StatsBase, baseDefaults } from './base';
 
 export class ViolinElement extends StatsBase {
@@ -93,7 +93,7 @@ export class ViolinElement extends StatsBase {
 ViolinElement._type = 'violin';
 ViolinElement.register = () => {
   defaults.set('elements', {
-    [ViolinElement._type]: baseDefaults,
+    [ViolinElement._type]: Object.assign({}, defaults.elements.rectangle, baseDefaults),
   });
   return ViolinElement;
 };
diff --git a/src/tooltip.js b/src/tooltip.js
@@ -1,4 +1,4 @@
-import { plugins } from 'chart.js';
+import { plugins } from './chart';
 
 export function patchInHoveredOutlier(item) {
   const value = item.value;
