Skip to content

Commit f21d7e7

Browse files
sgratzlsgratzl
committed
fix esm build
1 parent 47b02ad commit f21d7e7

File tree

12 files changed

+197
-67
lines changed

12 files changed

+197
-67
lines changed

‎README.md

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -403,15 +403,29 @@ interface IProjectionScaleOptions {
403403

404404
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.
405405

406+
Variant A:
407+
406408
```js
407409
import Chart from 'chart.js';
408-
import { Choropleth } from 'chartjs-chart-geo';
410+
import { ChoroplethController } from 'chartjs-chart-geo';
409411

410412
// register controller in chart.js and ensure the defaults are set
411-
Choropleth.register();
413+
ChoroplethController.register();
412414

413415
const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
414-
type: Choropleth.id,
416+
type: ChoroplethController.id,
417+
data: {
418+
// ...
419+
},
420+
});
421+
```
422+
423+
Variant B:
424+
425+
```js
426+
import { ChoroplethChart } from 'chartjs-chart-geo';
427+
428+
const chart = new ChoroplethChart(document.getElementById('canvas').getContext('2d'), {
415429
data: {
416430
//...
417431
},

‎samples/default_esm.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Box Plot Chart</title>
5+
</head>
6+
<body>
7+
<div id="container" style="width: 75%;">
8+
<canvas id="canvas"></canvas>
9+
</div>
10+
<script defer src="https://unpkg.com/es-module-shims"></script>
11+
<script type="importmap-shim">
12+
{
13+
"imports": {
14+
"chart.js": "https://unpkg.com/chart.js@3.0.0-alpha/dist/Chart.esm.js",
15+
"chartjs-chart-geo": "../build/Chart.Geo.esm.js",
16+
"d3-geo": "https://unpkg.com/d3-geo?module",
17+
"d3-scale-chromatic": "https://unpkg.com/d3-scale-chromatic?module",
18+
"topojson-client": "https://unpkg.com/topojson-client?module"
19+
}
20+
}
21+
</script>
22+
<script type="module-shim">
23+
import Chart from 'chart.js';
24+
import { ChoroplethChart } from 'chartjs-chart-geo';
25+
import {feature} from 'topojson-client';
26+
27+
fetch('https://unpkg.com/us-atlas/states-10m.json')
28+
.then((r) => r.json())
29+
.then((us) => {
30+
const nation = feature(us, us.objects.nation).features[0];
31+
const states = feature(us, us.objects.states).features;
32+
33+
const chart = new ChoroplethChart(document.getElementById('canvas').getContext('2d'), {
34+
data: {
35+
labels: states.map((d) => d.properties.name),
36+
datasets: [
37+
{
38+
label: 'States',
39+
outline: nation,
40+
data: states.map((d) => ({
41+
feature: d,
42+
value: Math.random() * 10,
43+
})),
44+
},
45+
],
46+
},
47+
options: {
48+
legend: {
49+
display: false,
50+
},
51+
scales: {
52+
xy: {
53+
projection: 'albersUsa',
54+
},
55+
color: {
56+
quantize: 5,
57+
legend: {
58+
position: 'bottom-right',
59+
align: 'right',
60+
},
61+
},
62+
},
63+
},
64+
});
65+
});
66+
</script>
67+
</body>
68+
</html>

‎src/bundle.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
export * from '.';
22

3-
import { Choropleth, BubbleMap } from './controllers';
3+
import { ChoroplethController, BubbleMapController } from './controllers';
44
import { ColorLogarithmicScale, SizeLogarithmicScale } from './scales';
55

6-
Choropleth.register();
7-
BubbleMap.register();
6+
ChoroplethController.register();
7+
BubbleMapController.register();
88

99
ColorLogarithmicScale.register();
1010
SizeLogarithmicScale.register();

‎src/chart.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import ChartNS from 'chart.js';
2+
3+
export const Chart = ChartNS;
4+
// export const plugins = ChartNS.plugins;
5+
export const controllers = ChartNS.controllers;
6+
export const defaults = ChartNS.defaults;
7+
// export const helpers = ChartNS.helpers;
8+
export const scaleService = ChartNS.scaleService;
9+
10+
export const Scale = ChartNS.Scale;
11+
export const LinearScale = ChartNS.scaleService.getScaleConstructor('linear');
12+
export const LogarithmicScale = ChartNS.scaleService.getScaleConstructor('logarithmic');
13+
14+
export const DatasetController = ChartNS.DatasetController;
15+
// export const BarController = controllers.bar;
16+
export const BubbleController = controllers.bubble;
17+
// export const HorizontalBarController = controllers.horizontalBar;
18+
// export const LineController = controllers.line;
19+
// export const PolarAreaController = controllers.polarArea;
20+
// export const ScatterController = controllers.scatter;
21+
22+
export const Element = ChartNS.Element;
23+
// export const Rectangle = ChartNS.elements.Rectangle;
24+
export const Point = ChartNS.elements.Point;
25+
// export const Line = ChartNS.elements.Line;
26+
// export const Arc = ChartNS.elements.Arc;
27+
28+
export const merge = ChartNS.helpers.merge;
29+
export const drawPoint = ChartNS.helpers.canvas.drawPoint;
30+
// export const resolve = ChartNS.helpers.options.resolve;
31+
// export const color = ChartNS.helpers.color;
32+
export const valueOrDefault = ChartNS.helpers.valueOrDefault;
33+
export const clipArea = ChartNS.helpers.canvas.clipArea;
34+
export const unclipArea = ChartNS.helpers.canvas.unclipArea;

‎src/controllers/bubbleMap.js

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { helpers, elements, controllers, defaults } from 'chart.js';
2-
import { geoDefaults, Geo } from './geo';
1+
import { controllers, defaults, Point, BubbleController } from '../chart';
2+
import { geoDefaults, GeoController } from './geo';
33
import { SizeScale } from '../scales';
44
import { GeoFeature } from '../elements';
5+
import { merge } from '../chart';
6+
import { patchControllerConfig } from './utils';
57

6-
export class BubbleMap extends Geo {
8+
export class BubbleMapController extends GeoController {
79
linkScales() {
810
super.linkScales();
911
const dataset = this.getDataset();
@@ -66,17 +68,17 @@ export class BubbleMap extends Geo {
6668
}
6769
}
6870

69-
BubbleMap.prototype.dataElementType = elements.Point;
70-
BubbleMap.prototype.dataElementOptions = controllers.bubble.prototype.dataElementOptions;
71+
BubbleMapController.prototype.dataElementType = Point;
72+
BubbleMapController.prototype.dataElementOptions = BubbleController.prototype.dataElementOptions;
7173

72-
BubbleMap.id = 'bubbleMap';
73-
BubbleMap.register = () => {
74-
BubbleMap.prototype.datasetElementType = GeoFeature.register();
74+
BubbleMapController.id = 'bubbleMap';
75+
BubbleMapController.register = () => {
76+
BubbleMapController.prototype.datasetElementType = GeoFeature.register();
7577

76-
controllers[BubbleMap.id] = BubbleMap;
78+
controllers[BubbleMapController.id] = BubbleMapController;
7779
defaults.set(
78-
BubbleMap.id,
79-
helpers.merge({}, [
80+
BubbleMapController.id,
81+
merge({}, [
8082
geoDefaults(),
8183
{
8284
showOutline: true,
@@ -115,5 +117,12 @@ BubbleMap.register = () => {
115117
},
116118
])
117119
);
118-
return BubbleMap;
120+
return BubbleMapController;
119121
};
122+
123+
export class BubbleMapChart extends Chart {
124+
constructor(item, config) {
125+
super(item, patchControllerConfig(config, BubbleMapController));
126+
}
127+
}
128+
BubbleMapChart.id = BubbleMapController.id;

‎src/controllers/choropleth.js

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { helpers, controllers, defaults } from 'chart.js';
2-
import { geoDefaults, Geo } from './geo';
1+
import { controllers, defaults, merge } from '../chart';
2+
import { geoDefaults, GeoController } from './geo';
33
import { GeoFeature } from '../elements';
44
import { ColorScale } from '../scales';
5+
import { patchControllerConfig } from './utils';
56

6-
export class Choropleth extends Geo {
7+
export class ChoroplethController extends GeoController {
78
linkScales() {
89
super.linkScales();
910
const dataset = this.getDataset();
@@ -58,16 +59,16 @@ export class Choropleth extends Geo {
5859
}
5960
}
6061

61-
Choropleth.prototype.dataElementOptions = ['backgroundColor', 'borderColor', 'borderWidth'];
62+
ChoroplethController.prototype.dataElementOptions = ['backgroundColor', 'borderColor', 'borderWidth'];
6263

63-
Choropleth.id = 'choropleth';
64-
Choropleth.register = () => {
65-
Choropleth.prototype.datasetElementType = GeoFeature.register();
66-
Choropleth.prototype.dataElementType = GeoFeature.register();
67-
controllers[Choropleth.id] = Choropleth;
64+
ChoroplethController.id = 'choropleth';
65+
ChoroplethController.register = () => {
66+
ChoroplethController.prototype.datasetElementType = GeoFeature.register();
67+
ChoroplethController.prototype.dataElementType = GeoFeature.register();
68+
controllers[ChoroplethController.id] = ChoroplethController;
6869
defaults.set(
69-
Choropleth.id,
70-
helpers.merge({}, [
70+
ChoroplethController.id,
71+
merge({}, [
7172
geoDefaults(),
7273
{
7374
tooltips: {
@@ -103,5 +104,12 @@ Choropleth.register = () => {
103104
},
104105
])
105106
);
106-
return Choropleth;
107+
return ChoroplethController;
107108
};
109+
110+
export class ChoroplethChart extends Chart {
111+
constructor(item, config) {
112+
super(item, patchControllerConfig(config, ChoroplethController));
113+
}
114+
}
115+
ChoroplethChart.id = ChoroplethController.id;

‎src/controllers/geo.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DatasetController, helpers } from 'chart.js';
1+
import { DatasetController, clipArea, unclipArea, valueOrDefault } from '../chart';
22
import { geoGraticule, geoGraticule10 } from 'd3-geo';
33
import { ProjectionScale } from '../scales';
44

@@ -34,7 +34,7 @@ function patchDatasetElementOptions(options) {
3434
return r;
3535
}
3636

37-
export class Geo extends DatasetController {
37+
export class GeoController extends DatasetController {
3838
getProjectionScale() {
3939
return this.getScaleForId('xy');
4040
}
@@ -51,15 +51,15 @@ export class Geo extends DatasetController {
5151
}
5252

5353
showOutline() {
54-
return helpers.valueOrDefault(this.getDataset().showOutline, this.chart.options.showOutline);
54+
return valueOrDefault(this.getDataset().showOutline, this.chart.options.showOutline);
5555
}
5656

5757
clipMap() {
58-
return helpers.valueOrDefault(this.getDataset().clipMap, this.chart.options.clipMap);
58+
return valueOrDefault(this.getDataset().clipMap, this.chart.options.clipMap);
5959
}
6060

6161
getGraticule() {
62-
return helpers.valueOrDefault(this.getDataset().showGraticule, this.chart.options.showGraticule);
62+
return valueOrDefault(this.getDataset().showGraticule, this.chart.options.showGraticule);
6363
}
6464

6565
update(mode) {
@@ -150,7 +150,7 @@ export class Geo extends DatasetController {
150150
let enabled = false;
151151
if (clipMap === true || clipMap === 'outline' || clipMap === 'outline+graticule') {
152152
enabled = true;
153-
helpers.canvas.clipArea(chart.ctx, chart.chartArea);
153+
clipArea(chart.ctx, chart.chartArea);
154154
}
155155

156156
if (this.showOutline()) {
@@ -159,35 +159,35 @@ export class Geo extends DatasetController {
159159

160160
if (clipMap === true || clipMap === 'graticule' || clipMap === 'outline+graticule') {
161161
if (!enabled) {
162-
helpers.canvas.clipArea(chart.ctx, chart.chartArea);
162+
clipArea(chart.ctx, chart.chartArea);
163163
}
164164
} else if (enabled) {
165165
enabled = false;
166-
helpers.canvas.unclipArea(chart.ctx);
166+
unclipArea(chart.ctx);
167167
}
168168

169169
this.showGraticule();
170170

171171
if (clipMap === true || clipMap === 'items') {
172172
if (!enabled) {
173-
helpers.canvas.clipArea(chart.ctx, chart.chartArea);
173+
clipArea(chart.ctx, chart.chartArea);
174174
}
175175
} else if (enabled) {
176176
enabled = false;
177-
helpers.canvas.unclipArea(chart.ctx);
177+
unclipArea(chart.ctx);
178178
}
179179

180180
this.getMeta().data.forEach((elem) => elem.draw(chart.ctx));
181181

182182
if (enabled) {
183183
enabled = false;
184-
helpers.canvas.unclipArea(chart.ctx);
184+
unclipArea(chart.ctx);
185185
}
186186
}
187187
}
188188

189189
// Geo.prototype.datasetElementType = GeoFeature.register();
190-
Geo.prototype.datasetElementOptions = [
190+
GeoController.prototype.datasetElementOptions = [
191191
'outlineBackgroundColor',
192192
'outlineBorderColor',
193193
'outlineBorderWidth',

‎src/controllers/utils.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export function patchControllerConfig(config, controller) {
2+
controller.register();
3+
config.type = controller.id;
4+
return config;
5+
}

‎src/elements/geoFeature.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { defaults, Element } from 'chart.js';
1+
import { defaults, Element } from '../chart';
22
import { geoContains } from 'd3-geo';
33

44
export class GeoFeature extends Element {

‎src/scales/color.js

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { scaleService, helpers } from 'chart.js';
1+
import { scaleService, merge, LinearScale, LogarithmicScale } from '../chart';
22
import {
33
interpolateBlues,
44
interpolateBrBG,
@@ -170,21 +170,21 @@ function ColorScaleMixin(superClass) {
170170
}
171171
};
172172
}
173-
export class ColorScale extends ColorScaleMixin(scaleService.getScaleConstructor('linear')) {}
173+
export class ColorScale extends ColorScaleMixin(LinearScale) {}
174174

175175
const colorScaleDefaults = {
176176
interpolate: 'blues',
177177
missing: 'transparent',
178178
quantize: 0,
179179
};
180180
ColorScale.id = 'color';
181-
ColorScale.defaults = helpers.merge({}, [scaleService.getScaleDefaults('linear'), baseDefaults, colorScaleDefaults]);
181+
ColorScale.defaults = merge({}, [LinearScale.defaults, baseDefaults, colorScaleDefaults]);
182182
ColorScale.register = () => {
183183
scaleService.registerScale(ColorScale);
184184
return ColorScale;
185185
};
186186

187-
export class ColorLogarithmicScale extends ColorScaleMixin(scaleService.getScaleConstructor('logarithmic')) {
187+
export class ColorLogarithmicScale extends ColorScaleMixin(LogarithmicScale) {
188188
_getNormalizedValue(v) {
189189
if (v == null || Number.isNaN(v)) {
190190
return null;
@@ -194,11 +194,7 @@ export class ColorLogarithmicScale extends ColorScaleMixin(scaleService.getScale
194194
}
195195

196196
ColorLogarithmicScale.id = 'colorLogarithmic';
197-
ColorLogarithmicScale.defaults = helpers.merge({}, [
198-
scaleService.getScaleDefaults('logarithmic'),
199-
baseDefaults,
200-
colorScaleDefaults,
201-
]);
197+
ColorLogarithmicScale.defaults = merge({}, [LogarithmicScale.defaults, baseDefaults, colorScaleDefaults]);
202198
ColorLogarithmicScale.register = () => {
203199
scaleService.registerScale(ColorLogarithmicScale);
204200
return ColorLogarithmicScale;

0 commit comments

Comments
 (0)