add to latest esm facade

upsetjs · Jul 27, 2020 · fa08977 · fa08977
1 parent bd8deb7
commit fa08977
Show file tree

Hide file tree

Showing 6 changed files with 575 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -37,19 +37,20 @@
     "last 2 Firefox versions"
   ],
   "peerDependencies": {
-    "@sgratzl/chartjs-esm-facade": "^3.0.0-alpha.2",
+    "@sgratzl/chartjs-esm-facade": "^3.0.0-alpha.20",
     "chart.js": "^3.0.0-alpha.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^14.0.0",
-    "@sgratzl/chartjs-esm-facade": "^3.0.0-alpha.2",
+    "@sgratzl/chartjs-esm-facade": "^3.0.0-alpha.20",
     "@types/d3-selection": "^1.4.2",
     "@types/jest": "^26.0.5",
     "@types/jest-image-snapshot": "^3.1.0",
     "@types/node": "^14.0.23",
     "@typescript-eslint/eslint-plugin": "^3.6.1",
     "@typescript-eslint/parser": "^3.6.1",
     "@yarnpkg/pnpify": "^2.1.0",
+    "canvas": "^2.6.1",
     "chart.js": "^3.0.0-alpha.2",
     "eslint": "^7.5.0",
     "eslint-config-prettier": "^6.11.0",
@@ -60,6 +61,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-image-snapshot": "^4.0.2",
     "prettier": "^2.0.5",
     "release-it": "^13.6.5",

diff --git a/src/controllers/EulerDiagramController.ts b/src/controllers/EulerDiagramController.ts
@@ -1,6 +1,6 @@
-import { Chart, ChartConfiguration, ContextType } from '@sgratzl/chartjs-esm-facade';
+import { Chart, IChartDataset, IChartConfiguration, ChartItem } from '@sgratzl/chartjs-esm-facade';
 import { IVennDiagramLayout } from '../model/layout';
-import { VennDiagramController } from './VennDiagramController';
+import { VennDiagramController, IVennDiagramControllerDatasetOptions } from './VennDiagramController';
 import euler from '../model/euler';
 import { IBoundingBox } from '../model/interfaces';
 import patchController from './patchController';
@@ -16,10 +16,21 @@ export class EulerDiagramController extends VennDiagramController {
   }
 }
 
-export class EulerDiagramChart extends Chart {
+export type IEulerDiagramControllerDatasetOptions = IVennDiagramControllerDatasetOptions;
+
+export type IEulerDiagramControllerDataset<T = number> = IChartDataset<T, IEulerDiagramControllerDatasetOptions>;
+
+export type IEulerDiagramControllerConfiguration<T = number, L = string> = IChartConfiguration<
+  'euler',
+  T,
+  L,
+  IEulerDiagramControllerDataset<T>
+>;
+
+export class EulerDiagramChart<T = number, L = string> extends Chart<T, L, IEulerDiagramControllerConfiguration<T, L>> {
   static readonly id = EulerDiagramController.id;
 
-  constructor(item: ContextType, config: Omit<ChartConfiguration, 'type'>) {
-    super(item, patchController(config, EulerDiagramController, ArcSlice));
+  constructor(item: ChartItem, config: Omit<IEulerDiagramControllerConfiguration<T, L>, 'type'>) {
+    super(item, patchController('euler', config, EulerDiagramController, ArcSlice));
   }
 }
diff --git a/src/controllers/VennDiagramController.ts b/src/controllers/VennDiagramController.ts
@@ -4,8 +4,12 @@ import {
   BarController,
   ITooltipItem,
   UpdateMode,
-  ContextType,
-  ChartConfiguration,
+  ChartItem,
+  ScriptableAndArrayOptions,
+  IControllerDatasetOptions,
+  ICommonHoverOptions,
+  IChartDataset,
+  IChartConfiguration,
 } from '@sgratzl/chartjs-esm-facade';
 import { ArcSlice, IArcSliceOptions } from '../elements';
 import layout, { IVennDiagramLayout } from '../model/layout';
@@ -128,10 +132,24 @@ export class VennDiagramController extends DatasetController<ArcSlice> {
   }
 }
 
-export class VennDiagramChart extends Chart {
+export interface IVennDiagramControllerDatasetOptions
+  extends IControllerDatasetOptions,
+    ScriptableAndArrayOptions<IArcSliceOptions>,
+    ScriptableAndArrayOptions<ICommonHoverOptions> {}
+
+export type IVennDiagramControllerDataset<T = number> = IChartDataset<T, IVennDiagramControllerDatasetOptions>;
+
+export type IVennDiagramControllerConfiguration<T = number, L = string> = IChartConfiguration<
+  'venn',
+  T,
+  L,
+  IVennDiagramControllerDataset<T>
+>;
+
+export class VennDiagramChart<T = number, L = string> extends Chart<T, L, IVennDiagramControllerConfiguration<T, L>> {
   static readonly id = VennDiagramController.id;
 
-  constructor(item: ContextType, config: Omit<ChartConfiguration, 'type'>) {
-    super(item, patchController(config, VennDiagramController, ArcSlice));
+  constructor(item: ChartItem, config: Omit<IVennDiagramControllerConfiguration<T, L>, 'type'>) {
+    super(item, patchController('venn', config, VennDiagramController, ArcSlice));
   }
 }
diff --git a/src/controllers/patchController.ts b/src/controllers/patchController.ts
@@ -1,15 +1,16 @@
-import { IRegistryElement, registry, ChartConfiguration } from '@sgratzl/chartjs-esm-facade';
+import { IChartComponentLike, registry, IDatasetControllerChartComponent } from '@sgratzl/chartjs-esm-facade';
 
-export default function patchController(
-  config: Omit<ChartConfiguration, 'type'>,
-  controller: IRegistryElement,
-  elements: IRegistryElement | IRegistryElement[] = [],
-  scales: IRegistryElement | IRegistryElement[] = []
-): ChartConfiguration {
+export default function patchController<T, TYPE>(
+  type: TYPE,
+  config: T,
+  controller: IDatasetControllerChartComponent,
+  elements: IChartComponentLike = [],
+  scales: IChartComponentLike = []
+): T & { type: TYPE } {
   registry.addControllers(controller);
   registry.addControllers(elements);
   registry.addScales(scales);
-  const r = config as ChartConfiguration;
-  r.type = controller.id;
-  return r;
+  const c = config as any;
+  c.type = type;
+  return c;
 }
diff --git a/src/elements/ArcSlice.ts b/src/elements/ArcSlice.ts
@@ -1,16 +1,11 @@
-import { Element, Rectangle, IVisualElement } from '@sgratzl/chartjs-esm-facade';
+import { Element, Rectangle, IVisualElement, ICommonOptions } from '@sgratzl/chartjs-esm-facade';
 import { ITextArcSlice, ICircle, IEllipse, isEllipse } from '../model/interfaces';
 import { generateArcSlicePath } from '../model/generate';
 import { dist, DEG2RAD } from '../model/math';
 
-export interface IArcSliceOptions {
-  backgroundColor: string;
-  borderColor: string;
-  borderWidth: number;
-}
+export interface IArcSliceOptions extends ICommonOptions {}
 
 export interface IArcSliceProps extends ITextArcSlice {
-  options?: IArcSliceOptions;
   refs: (ICircle | IEllipse)[];
 }
 
@@ -104,16 +99,43 @@ export class ArcSlice extends Element<IArcSliceProps, IArcSliceOptions> implemen
     const props = this.getProps(['x1', 'y1', 'arcs', 'refs']);
 
     ctx.beginPath();
-    const path = new Path2D(generateArcSlicePath(props, props.refs));
+    let path: Path2D | undefined = undefined;
+    if (window.Path2D) {
+      path = new Path2D(generateArcSlicePath(props, props.refs));
+    } else {
+      // try old school
+      // M ${s.x1 - p},${s.y1 - p} ${s.arcs
+      //   .map((arc) => {
+      //     return `A ${rx - p} ${ry - p} ${rot} ${arc.large ? 1 : 0} ${arc.sweep ? 1 : 0} ${arc.x2 - p} ${arc.y2 - p}`;
+      //   }
+      ctx.beginPath();
+      ctx.moveTo(props.x1, props.y1);
+      for (const arc of props.arcs) {
+        const ref = props.refs[arc.ref];
+        const rx = isEllipse(ref) ? ref.rx : ref.r;
+        const ry = isEllipse(ref) ? ref.ry : ref.r;
+        const rot = isEllipse(ref) ? ref.rotation : 0;
+        // TODO angles
+        ctx.ellipse(ref.cx, ref.cy, rx, ry, rot, 0, Math.PI * 2, !arc.sweep);
+      }
+    }
 
     if (options.backgroundColor) {
       ctx.fillStyle = options.backgroundColor;
-      ctx.fill(path);
+      if (path) {
+        ctx.fill(path);
+      } else {
+        ctx.fill();
+      }
     }
     if (options.borderColor) {
       ctx.strokeStyle = options.borderColor;
       ctx.lineWidth = options.borderWidth;
-      ctx.stroke(path);
+      if (path) {
+        ctx.stroke(path);
+      } else {
+        ctx.stroke();
+      }
     }
 
     ctx.restore();