fix esm build

sgratzl · May 18, 2020 · f21d7e7 · f21d7e7
1 parent 47b02ad
commit f21d7e7
Show file tree

Hide file tree

Showing 12 changed files with 197 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -403,15 +403,29 @@ interface IProjectionScaleOptions {
 
 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 { Choropleth } from 'chartjs-chart-geo';
+import { ChoroplethController } from 'chartjs-chart-geo';
 
 // register controller in chart.js and ensure the defaults are set
-Choropleth.register();
+ChoroplethController.register();
 
 const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
-  type: Choropleth.id,
+  type: ChoroplethController.id,
+  data: {
+    // ...
+  },
+});
+```
+
+Variant B:
+
+```js
+import { ChoroplethChart } from 'chartjs-chart-geo';
+
+const chart = new ChoroplethChart(document.getElementById('canvas').getContext('2d'), {
   data: {
     //...
   },

diff --git a/samples/default_esm.html b/samples/default_esm.html
@@ -0,0 +1,68 @@
+<!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/[email protected]/dist/Chart.esm.js",
+          "chartjs-chart-geo": "../build/Chart.Geo.esm.js",
+          "d3-geo": "https://unpkg.com/d3-geo?module",
+          "d3-scale-chromatic": "https://unpkg.com/d3-scale-chromatic?module",
+          "topojson-client": "https://unpkg.com/topojson-client?module"
+        }
+      }
+    </script>
+    <script type="module-shim">
+      import Chart from 'chart.js';
+      import { ChoroplethChart } from 'chartjs-chart-geo';
+      import {feature} from 'topojson-client';
+
+      fetch('https://unpkg.com/us-atlas/states-10m.json')
+        .then((r) => r.json())
+        .then((us) => {
+          const nation = feature(us, us.objects.nation).features[0];
+          const states = feature(us, us.objects.states).features;
+
+          const chart = new ChoroplethChart(document.getElementById('canvas').getContext('2d'), {
+            data: {
+              labels: states.map((d) => d.properties.name),
+              datasets: [
+                {
+                  label: 'States',
+                  outline: nation,
+                  data: states.map((d) => ({
+                    feature: d,
+                    value: Math.random() * 10,
+                  })),
+                },
+              ],
+            },
+            options: {
+              legend: {
+                display: false,
+              },
+              scales: {
+                xy: {
+                  projection: 'albersUsa',
+                },
+                color: {
+                  quantize: 5,
+                  legend: {
+                    position: 'bottom-right',
+                    align: 'right',
+                  },
+                },
+              },
+            },
+          });
+        });
+    </script>
+  </body>
+</html>
diff --git a/src/bundle.js b/src/bundle.js
@@ -1,10 +1,10 @@
 export * from '.';
 
-import { Choropleth, BubbleMap } from './controllers';
+import { ChoroplethController, BubbleMapController } from './controllers';
 import { ColorLogarithmicScale, SizeLogarithmicScale } from './scales';
 
-Choropleth.register();
-BubbleMap.register();
+ChoroplethController.register();
+BubbleMapController.register();
 
 ColorLogarithmicScale.register();
 SizeLogarithmicScale.register();
diff --git a/src/chart.js b/src/chart.js
@@ -0,0 +1,34 @@
+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 helpers = ChartNS.helpers;
+export const scaleService = ChartNS.scaleService;
+
+export const Scale = ChartNS.Scale;
+export const LinearScale = ChartNS.scaleService.getScaleConstructor('linear');
+export const LogarithmicScale = ChartNS.scaleService.getScaleConstructor('logarithmic');
+
+export const DatasetController = ChartNS.DatasetController;
+// export const BarController = controllers.bar;
+export const BubbleController = controllers.bubble;
+// export const HorizontalBarController = controllers.horizontalBar;
+// export const LineController = controllers.line;
+// export const PolarAreaController = controllers.polarArea;
+// export const ScatterController = controllers.scatter;
+
+export const Element = ChartNS.Element;
+// export const Rectangle = ChartNS.elements.Rectangle;
+export const Point = ChartNS.elements.Point;
+// export const Line = ChartNS.elements.Line;
+// export const Arc = ChartNS.elements.Arc;
+
+export const merge = ChartNS.helpers.merge;
+export const drawPoint = ChartNS.helpers.canvas.drawPoint;
+// export const resolve = ChartNS.helpers.options.resolve;
+// export const color = ChartNS.helpers.color;
+export const valueOrDefault = ChartNS.helpers.valueOrDefault;
+export const clipArea = ChartNS.helpers.canvas.clipArea;
+export const unclipArea = ChartNS.helpers.canvas.unclipArea;
diff --git a/src/controllers/bubbleMap.js b/src/controllers/bubbleMap.js
@@ -1,9 +1,11 @@
-import { helpers, elements, controllers, defaults } from 'chart.js';
-import { geoDefaults, Geo } from './geo';
+import { controllers, defaults, Point, BubbleController } from '../chart';
+import { geoDefaults, GeoController } from './geo';
 import { SizeScale } from '../scales';
 import { GeoFeature } from '../elements';
+import { merge } from '../chart';
+import { patchControllerConfig } from './utils';
 
-export class BubbleMap extends Geo {
+export class BubbleMapController extends GeoController {
   linkScales() {
     super.linkScales();
     const dataset = this.getDataset();
@@ -66,17 +68,17 @@ export class BubbleMap extends Geo {
   }
 }
 
-BubbleMap.prototype.dataElementType = elements.Point;
-BubbleMap.prototype.dataElementOptions = controllers.bubble.prototype.dataElementOptions;
+BubbleMapController.prototype.dataElementType = Point;
+BubbleMapController.prototype.dataElementOptions = BubbleController.prototype.dataElementOptions;
 
-BubbleMap.id = 'bubbleMap';
-BubbleMap.register = () => {
-  BubbleMap.prototype.datasetElementType = GeoFeature.register();
+BubbleMapController.id = 'bubbleMap';
+BubbleMapController.register = () => {
+  BubbleMapController.prototype.datasetElementType = GeoFeature.register();
 
-  controllers[BubbleMap.id] = BubbleMap;
+  controllers[BubbleMapController.id] = BubbleMapController;
   defaults.set(
-    BubbleMap.id,
-    helpers.merge({}, [
+    BubbleMapController.id,
+    merge({}, [
       geoDefaults(),
       {
         showOutline: true,
@@ -115,5 +117,12 @@ BubbleMap.register = () => {
       },
     ])
   );
-  return BubbleMap;
+  return BubbleMapController;
 };
+
+export class BubbleMapChart extends Chart {
+  constructor(item, config) {
+    super(item, patchControllerConfig(config, BubbleMapController));
+  }
+}
+BubbleMapChart.id = BubbleMapController.id;
diff --git a/src/controllers/choropleth.js b/src/controllers/choropleth.js
@@ -1,9 +1,10 @@
-import { helpers, controllers, defaults } from 'chart.js';
-import { geoDefaults, Geo } from './geo';
+import { controllers, defaults, merge } from '../chart';
+import { geoDefaults, GeoController } from './geo';
 import { GeoFeature } from '../elements';
 import { ColorScale } from '../scales';
+import { patchControllerConfig } from './utils';
 
-export class Choropleth extends Geo {
+export class ChoroplethController extends GeoController {
   linkScales() {
     super.linkScales();
     const dataset = this.getDataset();
@@ -58,16 +59,16 @@ export class Choropleth extends Geo {
   }
 }
 
-Choropleth.prototype.dataElementOptions = ['backgroundColor', 'borderColor', 'borderWidth'];
+ChoroplethController.prototype.dataElementOptions = ['backgroundColor', 'borderColor', 'borderWidth'];
 
-Choropleth.id = 'choropleth';
-Choropleth.register = () => {
-  Choropleth.prototype.datasetElementType = GeoFeature.register();
-  Choropleth.prototype.dataElementType = GeoFeature.register();
-  controllers[Choropleth.id] = Choropleth;
+ChoroplethController.id = 'choropleth';
+ChoroplethController.register = () => {
+  ChoroplethController.prototype.datasetElementType = GeoFeature.register();
+  ChoroplethController.prototype.dataElementType = GeoFeature.register();
+  controllers[ChoroplethController.id] = ChoroplethController;
   defaults.set(
-    Choropleth.id,
-    helpers.merge({}, [
+    ChoroplethController.id,
+    merge({}, [
       geoDefaults(),
       {
         tooltips: {
@@ -103,5 +104,12 @@ Choropleth.register = () => {
       },
     ])
   );
-  return Choropleth;
+  return ChoroplethController;
 };
+
+export class ChoroplethChart extends Chart {
+  constructor(item, config) {
+    super(item, patchControllerConfig(config, ChoroplethController));
+  }
+}
+ChoroplethChart.id = ChoroplethController.id;
diff --git a/src/controllers/geo.js b/src/controllers/geo.js
@@ -1,4 +1,4 @@
-import { DatasetController, helpers } from 'chart.js';
+import { DatasetController, clipArea, unclipArea, valueOrDefault } from '../chart';
 import { geoGraticule, geoGraticule10 } from 'd3-geo';
 import { ProjectionScale } from '../scales';
 
@@ -34,7 +34,7 @@ function patchDatasetElementOptions(options) {
   return r;
 }
 
-export class Geo extends DatasetController {
+export class GeoController extends DatasetController {
   getProjectionScale() {
     return this.getScaleForId('xy');
   }
@@ -51,15 +51,15 @@ export class Geo extends DatasetController {
   }
 
   showOutline() {
-    return helpers.valueOrDefault(this.getDataset().showOutline, this.chart.options.showOutline);
+    return valueOrDefault(this.getDataset().showOutline, this.chart.options.showOutline);
   }
 
   clipMap() {
-    return helpers.valueOrDefault(this.getDataset().clipMap, this.chart.options.clipMap);
+    return valueOrDefault(this.getDataset().clipMap, this.chart.options.clipMap);
   }
 
   getGraticule() {
-    return helpers.valueOrDefault(this.getDataset().showGraticule, this.chart.options.showGraticule);
+    return valueOrDefault(this.getDataset().showGraticule, this.chart.options.showGraticule);
   }
 
   update(mode) {
@@ -150,7 +150,7 @@ export class Geo extends DatasetController {
     let enabled = false;
     if (clipMap === true || clipMap === 'outline' || clipMap === 'outline+graticule') {
       enabled = true;
-      helpers.canvas.clipArea(chart.ctx, chart.chartArea);
+      clipArea(chart.ctx, chart.chartArea);
     }
 
     if (this.showOutline()) {
@@ -159,35 +159,35 @@ export class Geo extends DatasetController {
 
     if (clipMap === true || clipMap === 'graticule' || clipMap === 'outline+graticule') {
       if (!enabled) {
-        helpers.canvas.clipArea(chart.ctx, chart.chartArea);
+        clipArea(chart.ctx, chart.chartArea);
       }
     } else if (enabled) {
       enabled = false;
-      helpers.canvas.unclipArea(chart.ctx);
+      unclipArea(chart.ctx);
     }
 
     this.showGraticule();
 
     if (clipMap === true || clipMap === 'items') {
       if (!enabled) {
-        helpers.canvas.clipArea(chart.ctx, chart.chartArea);
+        clipArea(chart.ctx, chart.chartArea);
       }
     } else if (enabled) {
       enabled = false;
-      helpers.canvas.unclipArea(chart.ctx);
+      unclipArea(chart.ctx);
     }
 
     this.getMeta().data.forEach((elem) => elem.draw(chart.ctx));
 
     if (enabled) {
       enabled = false;
-      helpers.canvas.unclipArea(chart.ctx);
+      unclipArea(chart.ctx);
     }
   }
 }
 
 // Geo.prototype.datasetElementType = GeoFeature.register();
-Geo.prototype.datasetElementOptions = [
+GeoController.prototype.datasetElementOptions = [
   'outlineBackgroundColor',
   'outlineBorderColor',
   'outlineBorderWidth',

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/elements/geoFeature.js b/src/elements/geoFeature.js
@@ -1,4 +1,4 @@
-import { defaults, Element } from 'chart.js';
+import { defaults, Element } from '../chart';
 import { geoContains } from 'd3-geo';
 
 export class GeoFeature extends Element {

diff --git a/src/scales/color.js b/src/scales/color.js
@@ -1,4 +1,4 @@
-import { scaleService, helpers } from 'chart.js';
+import { scaleService, merge, LinearScale, LogarithmicScale } from '../chart';
 import {
   interpolateBlues,
   interpolateBrBG,
@@ -170,21 +170,21 @@ function ColorScaleMixin(superClass) {
     }
   };
 }
-export class ColorScale extends ColorScaleMixin(scaleService.getScaleConstructor('linear')) {}
+export class ColorScale extends ColorScaleMixin(LinearScale) {}
 
 const colorScaleDefaults = {
   interpolate: 'blues',
   missing: 'transparent',
   quantize: 0,
 };
 ColorScale.id = 'color';
-ColorScale.defaults = helpers.merge({}, [scaleService.getScaleDefaults('linear'), baseDefaults, colorScaleDefaults]);
+ColorScale.defaults = merge({}, [LinearScale.defaults, baseDefaults, colorScaleDefaults]);
 ColorScale.register = () => {
   scaleService.registerScale(ColorScale);
   return ColorScale;
 };
 
-export class ColorLogarithmicScale extends ColorScaleMixin(scaleService.getScaleConstructor('logarithmic')) {
+export class ColorLogarithmicScale extends ColorScaleMixin(LogarithmicScale) {
   _getNormalizedValue(v) {
     if (v == null || Number.isNaN(v)) {
       return null;
@@ -194,11 +194,7 @@ export class ColorLogarithmicScale extends ColorScaleMixin(scaleService.getScale
 }
 
 ColorLogarithmicScale.id = 'colorLogarithmic';
-ColorLogarithmicScale.defaults = helpers.merge({}, [
-  scaleService.getScaleDefaults('logarithmic'),
-  baseDefaults,
-  colorScaleDefaults,
-]);
+ColorLogarithmicScale.defaults = merge({}, [LogarithmicScale.defaults, baseDefaults, colorScaleDefaults]);
 ColorLogarithmicScale.register = () => {
   scaleService.registerScale(ColorLogarithmicScale);
   return ColorLogarithmicScale;