feat: having a bar and error bars with time scale (#65)

* 🚧 Having a bar and error bars with time scale * ♻️ use a function to indicate that a scale is numeric * 🔥 Remove Timescale as default scale, so TimeScale must be registred before use it in barchart
sgratzl · Jul 14, 2023 · 0a9668d · 0a9668d
1 parent 1838ae8
commit 0a9668d
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 10 deletions.
diff --git a/src/controllers/BarWithErrorBarsController.spec.ts b/src/controllers/BarWithErrorBarsController.spec.ts
@@ -1,13 +1,14 @@
-import { registry, LinearScale, CategoryScale } from 'chart.js';
+import { registry, LinearScale, CategoryScale, TimeScale } from 'chart.js';
 import createChart from '../__tests__/createChart';
 import { BarWithErrorBarsController } from './BarWithErrorBarsController';
 import { BarWithErrorBar } from '../elements';
+import 'chartjs-adapter-date-fns';
 
 describe('bar', () => {
   beforeAll(() => {
     registry.addControllers(BarWithErrorBarsController);
     registry.addElements(BarWithErrorBar);
-    registry.addScales(LinearScale, CategoryScale);
+    registry.addScales(LinearScale, CategoryScale, TimeScale);
   });
   test('default', () => {
     return createChart({
@@ -43,4 +44,49 @@ describe('bar', () => {
       },
     }).toMatchImageSnapshot();
   });
+  test('time scale', () => {
+    return createChart({
+      type: BarWithErrorBarsController.id,
+      data: {
+        labels: ['A', 'B'],
+        datasets: [
+          {
+            data: [
+              {
+                x: '2017-12-25',
+                y: 4,
+                yMin: 1,
+                yMax: 6,
+              },
+              {
+                x: '2018-12-25',
+                y: 2,
+                yMin: 1,
+                yMax: 4,
+              },
+              {
+                x: '2019-12-25',
+                y: 3,
+                yMin: 2,
+                yMax: 5,
+              },
+            ],
+          },
+        ],
+      },
+      options: {
+        scales: {
+          x: {
+            type: 'time',
+            display: false,
+            min: '2017-01-01',
+            max: '2020-01-01',
+          },
+          y: {
+            display: false,
+          },
+        },
+      },
+    }).toMatchImageSnapshot();
+  });
 });
diff --git a/src/controllers/BarWithErrorBarsController.ts b/src/controllers/BarWithErrorBarsController.ts
@@ -16,7 +16,7 @@
   CartesianScaleTypeRegistry,
 } from 'chart.js';
 import { merge } from 'chart.js/helpers';
-import { calculateScale } from './utils';
+import { calculateScale, isNumericScale } from './utils';
 import type { IErrorBarOptions } from '../elements/render';
 import { BarWithErrorBar } from '../elements';
 import { generateBarTooltip } from './tooltip';
@@ -67,7 +67,13 @@ export class BarWithErrorBarsController extends BarController {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     parseErrorNumberData(parsed, meta.vScale!, data, start, count);
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    parseErrorLabelData(parsed, meta.iScale!, start, count);
+    const iScale = meta.iScale as Scale;
+    const hasNumberIScale = isNumericScale(iScale);
+    if (hasNumberIScale) {
+      parseErrorNumberData(parsed, meta.iScale!, data, start, count);
+    } else {
+      parseErrorLabelData(parsed, meta.iScale!, start, count);
+    }
   }
 
   /**

diff --git a/src/controllers/LineWithErrorBarsController.ts b/src/controllers/LineWithErrorBarsController.ts
@@ -16,7 +16,7 @@
   CartesianScaleTypeRegistry,
 } from 'chart.js';
 import { merge } from 'chart.js/helpers';
-import { calculateScale } from './utils';
+import { calculateScale, isNumericScale } from './utils';
 import type { IErrorBarOptions } from '../elements/render';
 import { PointWithErrorBar } from '../elements';
 import { generateBarTooltip } from './tooltip';
@@ -31,8 +31,6 @@ import {
 } from './base';
 import patchController from './patchController';
 
-const NUMERIC_SCALE_TYPES = ['linear', 'logarithmic', 'time', 'timeseries'];
-
 export class LineWithErrorBarsController extends LineController {
   /**
    * @hidden
@@ -73,7 +71,7 @@ export class LineWithErrorBarsController extends LineController {
     parseErrorNumberData(parsed, meta.vScale!, data, start, count);
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const iScale = meta.iScale as Scale;
-    const hasNumberIScale = NUMERIC_SCALE_TYPES.includes(iScale.type);
+    const hasNumberIScale = isNumericScale(iScale);
     if (hasNumberIScale) {
       parseErrorNumberData(parsed, meta.iScale!, data, start, count);
     } else {
@@ -111,7 +109,7 @@ export class LineWithErrorBarsController extends LineController {
     );
 
     const iScale = this._cachedMeta.iScale as Scale;
-    const hasNumberIScale = NUMERIC_SCALE_TYPES.includes(iScale.type);
+    const hasNumberIScale = isNumericScale(iScale);
     if (hasNumberIScale) {
       calculateScale(
         properties,

diff --git a/...ge_snapshots__/bar-with-error-bars-controller-spec-ts-bar-time-scale-1-snap.png b/...ge_snapshots__/bar-with-error-bars-controller-spec-ts-bar-time-scale-1-snap.png
diff --git a/src/controllers/utils.ts b/src/controllers/utils.ts
@@ -1,4 +1,4 @@
-import type { LinearScale, RadialLinearScale } from 'chart.js';
+import type { LinearScale, RadialLinearScale, Scale } from 'chart.js';
 import type { IErrorBarRDataPoint, IErrorBarXYDataPoint } from './base';
 
 export const allModelKeys = ['xMin', 'xMax', 'yMin', 'yMax'];
@@ -63,3 +63,9 @@ export function calculatePolarScale(
     }
   }
 }
+
+const NUMERIC_SCALE_TYPES = ['linear', 'logarithmic', 'time', 'timeseries'];
+
+export function isNumericScale(scale: Scale): boolean {
+  return NUMERIC_SCALE_TYPES.includes(scale.type);
+}