From 0a9668dbe4ad483ef09407a11f2d229315087bc4 Mon Sep 17 00:00:00 2001 From: Bertrand Madet Date: Fri, 14 Jul 2023 02:47:21 +0200 Subject: [PATCH] feat: having a bar and error bars with time scale (#65) * :construction: Having a bar and error bars with time scale * :recycle: use a function to indicate that a scale is numeric * :fire: Remove Timescale as default scale, so TimeScale must be registred before use it in barchart --- .../BarWithErrorBarsController.spec.ts | 50 +++++++++++++++++- src/controllers/BarWithErrorBarsController.ts | 10 +++- .../LineWithErrorBarsController.ts | 8 ++- ...ntroller-spec-ts-bar-time-scale-1-snap.png | Bin 0 -> 1533 bytes src/controllers/utils.ts | 8 ++- 5 files changed, 66 insertions(+), 10 deletions(-) create mode 100644 src/controllers/__image_snapshots__/bar-with-error-bars-controller-spec-ts-bar-time-scale-1-snap.png diff --git a/src/controllers/BarWithErrorBarsController.spec.ts b/src/controllers/BarWithErrorBarsController.spec.ts index c3dd869..00b782f 100644 --- 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 index b253dfd..8def0bd 100644 --- 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 index 6328eeb..05ca548 100644 --- 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/src/controllers/__image_snapshots__/bar-with-error-bars-controller-spec-ts-bar-time-scale-1-snap.png b/src/controllers/__image_snapshots__/bar-with-error-bars-controller-spec-ts-bar-time-scale-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..018249e2d87db43d0c5f45cf7a06ec2f3a333a99 GIT binary patch literal 1533 zcmeAS@N?(olHy`uVBq!ia0y~yVAKI&4mO}jWo=(6kYY>nc6VX;4}uH!E}zW6z`DuP z#WAE}&f6P?Su*Jo4G-(fu10c9H(OC4zWMdJ-u?+nYu_iHV6AD9QGcM6P#}6KlXc~l z9Tx?UG^zD+Dk=8)l$qAeeXd#G_Sf#;qq~XA4u7Q-(OC{UPTlVt# z{yF<^zb%uOD{*W%e=~1;e%zjlkC!i1A8?M+-OF&GmQ!qkVuV9m0;6OTYYN98;T$`8 ziJRf{jU2PvSF^tUvO9n7^Pjx!w`(oF`Taj8E%sq~<-GW_pa1;5RQ*RdKjMRZX=UY3 z>Et)>=H+g`ZGPFrcK41Q6}vA)&40?veL_G-!FfXi&p{?5mchg6nY>iI!TA;z|Hz60@+`YT`ZQ1X%Sd8GXZ#aMZ{r6_o-a32-NIrl5{Qlf|^Zpfl&zZGs`el>3w)Ox19N+!i z+}!;A`gQB-YH#rV_uCM034d(<%boXp>GdD(O|1We-Axl;{pFcfyZ7$>`}Ezd0MJZJE9^>bP0l+XkK*L6T7 literal 0 HcmV?d00001 diff --git a/src/controllers/utils.ts b/src/controllers/utils.ts index 5cdb282..90eb659 100644 --- 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); +}