Merge branch 'dev'

sgratzl · May 10, 2021 · 3d9a21c · 3d9a21c
2 parents 009397f + d2a3e38
commit 3d9a21c
Show file tree

Hide file tree

Showing 10 changed files with 362 additions and 422 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "chartjs-chart-geo",
   "description": "Chart.js module for charting maps",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "author": {
     "name": "Samuel Gratzl",
     "email": "[email protected]",
@@ -36,7 +36,7 @@
     "src/**/*.ts"
   ],
   "peerDependencies": {
-    "chart.js": "^3.1.0"
+    "chart.js": "^3.2.1"
   },
   "dependencies": {
     "@types/d3-geo": "^2.0.0",
@@ -47,43 +47,43 @@
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^18.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@types/jest": "^26.0.22",
+    "@types/jest": "^26.0.23",
     "@types/jest-image-snapshot": "^4.3.0",
-    "@types/node": "^14.14.41",
+    "@types/node": "^15.0.2",
     "@types/seedrandom": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.1",
+    "@typescript-eslint/parser": "^4.22.1",
     "@yarnpkg/pnpify": "^2.4.0",
     "canvas": "^2.7.0",
     "canvas-5-polyfill": "^0.1.5",
     "chart.js": "3.0.0-rc.3",
-    "eslint": "^7.24.0",
+    "eslint": "^7.26.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-prettier": "^8.2.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.7.1",
+    "eslint-plugin-flowtype": "^5.7.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
-    "jest-image-snapshot": "^4.4.1",
-    "prettier": "^2.2.1",
-    "release-it": "^14.6.1",
+    "jest-image-snapshot": "^4.5.0",
+    "prettier": "^2.3.0",
+    "release-it": "^14.6.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.45.2",
+    "rollup": "^2.47.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-dts": "^3.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "seedrandom": "^3.0.5",
-    "ts-jest": "^26.5.5",
+    "ts-jest": "^26.5.6",
     "tslib": "^2.2.0",
-    "typedoc": "^0.20.35",
+    "typedoc": "^0.20.36",
     "typescript": "^4.2.4",
     "us-atlas": "^3.0.0",
     "world-atlas": "^2.0.2"

diff --git a/samples/albers.html b/samples/albers.html
@@ -26,7 +26,7 @@
                   outline: nation,
                   data: states.map((d) => ({
                     feature: d,
-                    value: Math.random() * 10,
+                    value: Math.random() * 11,
                   })),
                 },
               ],

diff --git a/src/controllers/BubbleMapController.ts b/src/controllers/BubbleMapController.ts
@@ -51,7 +51,7 @@ export class BubbleMapController extends GeoController<'bubbleMap', PointElement
   parse(start: number, count: number): void {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const rScale = this.getMeta().rScale!;
-    const data = (this.getDataset().data as unknown) as IBubbleMapDataPoint[];
+    const data = this.getDataset().data as unknown as IBubbleMapDataPoint[];
     const meta = this._cachedMeta;
     for (let i = start; i < start + count; i += 1) {
       const d = data[i];
@@ -71,7 +71,7 @@ export class BubbleMapController extends GeoController<'bubbleMap', PointElement
     const includeOptions = this.includeOptions(mode, sharedOptions);
     const scale = this.getProjectionScale();
 
-    ((this.getMeta().rScale as unknown) as SizeScale)._model = (firstOpts as unknown) as PointOptions; // for legend rendering styling
+    (this.getMeta().rScale as unknown as SizeScale)._model = firstOpts as unknown as PointOptions; // for legend rendering styling
 
     this.updateSharedOptions(sharedOptions, mode, firstOpts);
 
@@ -85,12 +85,12 @@ export class BubbleMapController extends GeoController<'bubbleMap', PointElement
         skip: Number.isNaN(parsed.x) || Number.isNaN(parsed.y),
       };
       if (includeOptions) {
-        properties.options = ((sharedOptions || this.resolveDataElementOptions(i, mode)) as unknown) as PointOptions;
+        properties.options = (sharedOptions || this.resolveDataElementOptions(i, mode)) as unknown as PointOptions;
         if (reset) {
           properties.options.radius = 0;
         }
       }
-      this.updateElement(elem, i, (properties as unknown) as Record<string, unknown>, mode);
+      this.updateElement(elem, i, properties as unknown as Record<string, unknown>, mode);
     }
   }
 

diff --git a/src/controllers/ChoroplethController.ts b/src/controllers/ChoroplethController.ts
@@ -77,14 +77,14 @@ export class ChoroplethController extends GeoController<'choropleth', GeoFeature
         y: center.y,
       };
       if (includeOptions) {
-        properties.options = ((sharedOptions || this.resolveDataElementOptions(i, mode)) as unknown) as PointOptions;
+        properties.options = (sharedOptions || this.resolveDataElementOptions(i, mode)) as unknown as PointOptions;
       }
-      this.updateElement(elem, i, (properties as unknown) as Record<string, unknown>, mode);
+      this.updateElement(elem, i, properties as unknown as Record<string, unknown>, mode);
     }
   }
 
   indexToColor(index: number): string {
-    const rScale = (this.getMeta().rScale as unknown) as ColorScale;
+    const rScale = this.getMeta().rScale as unknown as ColorScale;
     return rScale.getColorForValue(this.getParsed(index)[rScale.axis as 'r']);
   }
 

diff --git a/src/controllers/GeoController.ts b/src/controllers/GeoController.ts
@@ -54,11 +54,11 @@ export class GeoController<
   TElement extends Element & VisualElement
 > extends DatasetController<TYPE, TElement, GeoFeature> {
   getGeoDataset(): ChartDataset<'choropleth' | 'bubbleMap'> & IGeoControllerDatasetOptions {
-    return (super.getDataset() as unknown) as ChartDataset<'choropleth' | 'bubbleMap'> & IGeoControllerDatasetOptions;
+    return super.getDataset() as unknown as ChartDataset<'choropleth' | 'bubbleMap'> & IGeoControllerDatasetOptions;
   }
 
   getGeoOptions(): IGeoChartOptions {
-    return (this.chart.options as unknown) as IGeoChartOptions;
+    return this.chart.options as unknown as IGeoChartOptions;
   }
 
   getProjectionScale(): ProjectionScale {
@@ -159,10 +159,10 @@ export class GeoController<
     } else {
       const geo = geoGraticule();
       if (g.stepMajor) {
-        geo.stepMajor((g.stepMajor as unknown) as [number, number]);
+        geo.stepMajor(g.stepMajor as unknown as [number, number]);
       }
       if (g.stepMinor) {
-        geo.stepMinor((g.stepMinor as unknown) as [number, number]);
+        geo.stepMinor(g.stepMinor as unknown as [number, number]);
       }
       path(geo());
     }

diff --git a/src/elements/GeoFeature.ts b/src/elements/GeoFeature.ts
@@ -65,7 +65,7 @@ export class GeoFeature extends Element<IGeoFeatureProps, IGeoFeatureOptions> im
       (Number.isNaN(mouseX) || (mouseX >= bb.x && mouseX <= bb.x2)) &&
       (Number.isNaN(mouseY) || (mouseY >= bb.y && mouseY <= bb.y2));
 
-    const projection = (this.projectionScale.geoPath.projection() as unknown) as GeoProjection;
+    const projection = this.projectionScale.geoPath.projection() as unknown as GeoProjection;
     if (r && !Number.isNaN(mouseX) && !Number.isNaN(mouseY) && typeof projection.invert === 'function') {
       // test for real if within the bounds
       const longlat = projection.invert([mouseX, mouseY]);

diff --git a/src/scales/ColorScale.ts b/src/scales/ColorScale.ts
@@ -206,12 +206,11 @@ export class ColorScale extends LegendScale<IColorScaleOptions & LinearScaleOpti
   }
 
   _drawIndicator(): void {
-    const w = this.width;
-    const h = this.height;
-    const indicatorSize = this.options.legend.indicatorWidth;
+    const { indicatorWidth: indicatorSize } = this.options.legend;
     const reverse = (this as any)._reversePixels;
 
     if (this.isHorizontal()) {
+      const w = this.width;
       if (this.options.quantize > 0) {
         const stepWidth = w / this.options.quantize;
         const offset = !reverse ? (i: number) => i : (i: number) => w - stepWidth - i;
@@ -227,19 +226,22 @@ export class ColorScale extends LegendScale<IColorScaleOptions & LinearScaleOpti
           this.ctx.fillRect(offset(i), 0, 1, indicatorSize);
         }
       }
-    } else if (this.options.quantize > 0) {
-      const stepWidth = h / this.options.quantize;
-      const offset = !reverse ? (i: number) => i : (i: number) => h - stepWidth - i;
-      for (let i = 0; i < h; i += stepWidth) {
-        const v = (i + stepWidth / 2) / h;
-        this.ctx.fillStyle = this.getColor(v);
-        this.ctx.fillRect(0, offset(i), indicatorSize, stepWidth);
-      }
     } else {
-      const offset = !reverse ? (i: number) => i : (i: number) => h - 1 - i;
-      for (let i = 0; i < h; i += 1) {
-        this.ctx.fillStyle = this.getColor((i + 0.5) / h);
-        this.ctx.fillRect(0, offset(i), indicatorSize, 1);
+      const h = this.height;
+      if (this.options.quantize > 0) {
+        const stepWidth = h / this.options.quantize;
+        const offset = !reverse ? (i: number) => i : (i: number) => h - stepWidth - i;
+        for (let i = 0; i < h; i += stepWidth) {
+          const v = (i + stepWidth / 2) / h;
+          this.ctx.fillStyle = this.getColor(v);
+          this.ctx.fillRect(0, offset(i), indicatorSize, stepWidth);
+        }
+      } else {
+        const offset = !reverse ? (i: number) => i : (i: number) => h - 1 - i;
+        for (let i = 0; i < h; i += 1) {
+          this.ctx.fillStyle = this.getColor((i + 0.5) / h);
+          this.ctx.fillRect(0, offset(i), indicatorSize, 1);
+        }
       }
     }
   }

diff --git a/src/scales/LegendScale.ts b/src/scales/LegendScale.ts
@@ -10,7 +10,7 @@ import {
 export interface ILegendScaleOptions extends CartesianScaleOptions {
   /**
    * whether to render a color legend
-   * @default false (for compatibility reasons)
+   * @default true
    */
   display: boolean;
 
@@ -93,9 +93,12 @@ interface IPositionOption {
   position?: string;
 }
 
-function computeLegendMargin(
-  legend: ILegendScaleOptions['legend']
-): { left: number; top: number; right: number; bottom: number } {
+function computeLegendMargin(legend: ILegendScaleOptions['legend']): {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+} {
   const { indicatorWidth, align: pos, margin } = legend;
 
   const left = (typeof margin === 'number' ? margin : margin.left) + (pos === 'right' ? indicatorWidth : 0);
@@ -147,7 +150,7 @@ export class LegendScale<O extends ILegendScaleOptions & LinearScaleOptions> ext
 
   init(options: O): void {
     // eslint-disable-next-line no-param-reassign
-    ((options as unknown) as IPositionOption).position = 'chartArea';
+    (options as unknown as IPositionOption).position = 'chartArea';
     super.init(options);
     this.axis = 'r';
   }
@@ -195,6 +198,11 @@ export class LegendScale<O extends ILegendScaleOptions & LinearScaleOptions> ext
     return r;
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  _computeLabelArea(): void {
+    return undefined;
+  }
+
   draw(chartArea: ChartArea): void {
     if (!(this as any)._isVisible()) {
       return;
@@ -207,7 +215,7 @@ export class LegendScale<O extends ILegendScaleOptions & LinearScaleOptions> ext
 
     const bak = (this.options as IPositionOption).position;
     (this.options as IPositionOption).position = this.options.legend.align;
-    super.draw({ ...chartArea, bottom: this.height, right: this.width });
+    super.draw({ ...chartArea, bottom: this.height + 10, right: this.width });
     (this.options as IPositionOption).position = bak;
     const { indicatorWidth } = this.options.legend;
     switch (this.options.legend.align) {

diff --git a/src/scales/SizeScale.ts b/src/scales/SizeScale.ts
@@ -13,12 +13,6 @@ export interface ISizeScaleOptions extends ILegendScaleOptions {
   // support all options from linear scale -> https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#linear-cartesian-axis
   // e.g. for tick manipulation, ...
 
-  /**
-   * whether to render a color legend
-   * @default false (for compatibility reasons)
-   */
-  display: boolean;
-
   /**
    * radius range in pixel, the minimal data value will be mapped to the
    * first entry,  the maximal one to the second and a linear interpolation
@@ -40,50 +34,6 @@ export interface ISizeScaleOptions extends ILegendScaleOptions {
    * @default 1
    */
   missing: number;
-
-  /**
-   * the property name that stores the value in the data elements
-   * @default value
-   */
-  property: string;
-
-  legend: {
-    /**
-     * location of the legend on the chart area
-     * @default bottom-right
-     */
-    position: 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'top-right' | 'bottom-right';
-    /**
-     * alignment of the scale, e.g., `right` means that it is a vertical scale
-     * with the ticks on the right side
-     * @default bottom
-     */
-    align: 'left' | 'right' | 'top' | 'bottom';
-    /**
-     * length of the legend, i.e., for a horizontal scale the width
-     * if a value < 1 is given, is it assume to be a ratio of the corresponding
-     * chart area
-     * @default 90
-     */
-    length: number;
-    /**
-     * how wide the scale is, i.e., for a horizontal scale the height
-     * if a value < 1 is given, is it assume to be a ratio of the corresponding
-     * chart area
-     * @default 70
-     */
-    width: number;
-    /**
-     * how many pixels should be used for the color bar
-     * @default 42
-     */
-    indicatorWidth: number;
-    /**
-     * margin pixels such that it doesn't stick to the edge of the chart
-     * @default 8
-     */
-    margin: number;
-  };
 }
 
 const scaleDefaults = {