From 014253287f3c753972c238a1c4f042bdc1d48b58 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 30 May 2022 20:39:45 +0200 Subject: [PATCH 1/3] allow for each dataset to be individually typed without a main type --- types/index.esm.d.ts | 39 +++++++++++++++++++++++++++++++---- types/tests/chart_types.ts | 42 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 types/tests/chart_types.ts diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index adbdca76587..913baee9274 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -485,7 +485,7 @@ export declare class Chart< readonly id: string; readonly canvas: HTMLCanvasElement; readonly ctx: CanvasRenderingContext2D; - readonly config: ChartConfiguration; + readonly config: ChartConfiguration | ChartConfigurationCustomTypesPerDataset; readonly width: number; readonly height: number; readonly aspectRatio: number; @@ -501,7 +501,7 @@ export declare class Chart< data: ChartData; options: ChartOptions; - constructor(item: ChartItem, config: ChartConfiguration); + constructor(item: ChartItem, config: ChartConfiguration | ChartConfigurationCustomTypesPerDataset); clear(): this; stop(): this; @@ -2087,9 +2087,9 @@ export class BasePlatform { isAttached(canvas: HTMLCanvasElement): boolean; /** * Updates config with platform specific requirements - * @param {ChartConfiguration} config + * @param {ChartConfiguration | ChartConfigurationCustomTypes} config */ - updateConfig(config: ChartConfiguration): void; + updateConfig(config: ChartConfiguration | ChartConfigurationCustomTypesPerDataset): void; } export class BasicPlatform extends BasePlatform {} @@ -3628,6 +3628,11 @@ export interface ChartDatasetProperties { data: TData; } +export interface ChartDatasetPropertiesCustomTypesPerDataset { + type: TType; + data: TData; +} + export type ChartDataset< TType extends ChartType = ChartType, TData = DefaultDataPoint @@ -3635,6 +3640,13 @@ export type ChartDataset< { [key in ChartType]: { type: key } & ChartTypeRegistry[key]['datasetOptions'] }[TType] > & ChartDatasetProperties; +export type ChartDatasetCustomTypesPerDataset< + TType extends ChartType = ChartType, + TData = DefaultDataPoint +> = DeepPartial< +{ [key in ChartType]: { type: key } & ChartTypeRegistry[key]['datasetOptions'] }[TType] +> & ChartDatasetPropertiesCustomTypesPerDataset; + /** * TData represents the data point type. If unspecified, a default is provided * based on the chart type. @@ -3649,6 +3661,15 @@ export interface ChartData< datasets: ChartDataset[]; } +export interface ChartDataCustomTypesPerDataset< + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown +> { + labels?: TLabel[]; + datasets: ChartDatasetCustomTypesPerDataset[]; +} + export interface ChartConfiguration< TType extends ChartType = ChartType, TData = DefaultDataPoint, @@ -3659,3 +3680,13 @@ export interface ChartConfiguration< options?: ChartOptions; plugins?: Plugin[]; } + +export interface ChartConfigurationCustomTypesPerDataset< + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown +> { + data: ChartDataCustomTypesPerDataset; + options?: ChartOptions; + plugins?: Plugin[]; +} diff --git a/types/tests/chart_types.ts b/types/tests/chart_types.ts new file mode 100644 index 00000000000..160172ff6ac --- /dev/null +++ b/types/tests/chart_types.ts @@ -0,0 +1,42 @@ +import { Chart } from '../index.esm'; + +const chart = new Chart('chart', { + type: 'bar', + data: { + labels: ['1', '2', '3'], + datasets: [{ + data: [1,2, 3] + }, + { + data: [1,2, 3] + }], + } +}); + +const chart2 = new Chart('chart', { + type: 'bar', + data: { + labels: ['1', '2', '3'], + datasets: [{ + type: 'line', + data: [1,2, 3] + }, + { + data: [1,2, 3] + }], + } +}); + +const chart3 = new Chart('chart', { + data: { + labels: ['1', '2', '3'], + datasets: [{ + type: 'bar', + data: [1,2, 3] + }, + { + type: 'bar', + data: [1,2, 3] + }], + } +}); From 630467ff4e58d96fee37909f694e868a7542850c Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 30 May 2022 20:53:28 +0200 Subject: [PATCH 2/3] fix lint issues --- types/tests/chart_types.ts | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/types/tests/chart_types.ts b/types/tests/chart_types.ts index 160172ff6ac..68775760ae0 100644 --- a/types/tests/chart_types.ts +++ b/types/tests/chart_types.ts @@ -4,11 +4,11 @@ const chart = new Chart('chart', { type: 'bar', data: { labels: ['1', '2', '3'], - datasets: [{ - data: [1,2, 3] + datasets: [{ + data: [1, 2, 3] }, - { - data: [1,2, 3] + { + data: [1, 2, 3] }], } }); @@ -18,11 +18,11 @@ const chart2 = new Chart('chart', { data: { labels: ['1', '2', '3'], datasets: [{ - type: 'line', - data: [1,2, 3] + type: 'line', + data: [1, 2, 3] }, - { - data: [1,2, 3] + { + data: [1, 2, 3] }], } }); @@ -31,12 +31,12 @@ const chart3 = new Chart('chart', { data: { labels: ['1', '2', '3'], datasets: [{ - type: 'bar', - data: [1,2, 3] + type: 'bar', + data: [1, 2, 3] }, - { - type: 'bar', - data: [1,2, 3] + { + type: 'bar', + data: [1, 2, 3] }], } }); From f0e13be426073b6aa78fa0c61d3c582099d55a84 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Tue, 31 May 2022 18:45:44 +0200 Subject: [PATCH 3/3] add extra test cases --- types/tests/chart_types.ts | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/types/tests/chart_types.ts b/types/tests/chart_types.ts index 68775760ae0..f05bda4da86 100644 --- a/types/tests/chart_types.ts +++ b/types/tests/chart_types.ts @@ -8,7 +8,8 @@ const chart = new Chart('chart', { data: [1, 2, 3] }, { - data: [1, 2, 3] + data: [1, 2, 3], + categoryPercentage: 10 }], } }); @@ -19,10 +20,18 @@ const chart2 = new Chart('chart', { labels: ['1', '2', '3'], datasets: [{ type: 'line', - data: [1, 2, 3] + data: [1, 2, 3], + // @ts-expect-error should not allow bar properties to be defined in a line dataset + categoryPercentage: 10 }, { + type: 'line', + pointBackgroundColor: 'red', data: [1, 2, 3] + }, + { + data: [1, 2, 3], + categoryPercentage: 10 }], } }); @@ -32,10 +41,28 @@ const chart3 = new Chart('chart', { labels: ['1', '2', '3'], datasets: [{ type: 'bar', - data: [1, 2, 3] + data: [1, 2, 3], + categoryPercentage: 10 }, { type: 'bar', + data: [1, 2, 3], + // @ts-expect-error should not allow line properties to be defined in a bar dataset + pointBackgroundColor: 'red', + }], + } +}); + +// @ts-expect-error all datasets should have a type property or a default fallback type should be set +const chart4 = new Chart('chart', { + data: { + labels: ['1', '2', '3'], + datasets: [{ + type: 'bar', + data: [1, 2, 3], + categoryPercentage: 10 + }, + { data: [1, 2, 3] }], }