From 38bf550558aaba0be19fe6a2b8c1117ec2eb2eaa Mon Sep 17 00:00:00 2001 From: Dan Onoshko Date: Fri, 16 Dec 2022 04:27:12 +0400 Subject: [PATCH] fix: unbind instance config from chart type (#10963) --- types/index.d.ts | 16 +++++---- types/tests/config_types.ts | 65 +++++++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 7 deletions(-) create mode 100644 types/tests/config_types.ts diff --git a/types/index.d.ts b/types/index.d.ts index 435d6bdb489..74d7e863515 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -488,7 +488,7 @@ export declare class Chart< readonly id: string; readonly canvas: HTMLCanvasElement; readonly ctx: CanvasRenderingContext2D; - readonly config: ChartConfiguration | ChartConfigurationCustomTypesPerDataset; + readonly config: ChartConfigurationInstance; readonly width: number; readonly height: number; readonly aspectRatio: number; @@ -498,11 +498,11 @@ export declare class Chart< readonly scales: { [key: string]: Scale }; readonly attached: boolean; - readonly legend?: LegendElement; // Only available if legend plugin is registered and enabled - readonly tooltip?: TooltipModel; // Only available if tooltip plugin is registered and enabled + readonly legend?: LegendElement; // Only available if legend plugin is registered and enabled + readonly tooltip?: TooltipModel; // Only available if tooltip plugin is registered and enabled - data: ChartData; - options: ChartOptions; + data: ChartData; + options: ChartOptions; constructor(item: ChartItem, config: ChartConfiguration | ChartConfigurationCustomTypesPerDataset); @@ -2186,7 +2186,7 @@ export interface LegendItem { textAlign?: TextAlign; } -export interface LegendElement extends Element>, LayoutItem { +export interface LegendElement extends Element>, LayoutItem { chart: Chart; ctx: CanvasRenderingContext2D; legendItems?: LegendItem[]; @@ -2420,7 +2420,7 @@ export interface TooltipLabelStyle { */ borderRadius?: number | BorderRadius; } -export interface TooltipModel extends Element> { +export interface TooltipModel extends Element> { readonly chart: Chart; // The items that we are rendering in the tooltip. See Tooltip Item Interface section @@ -3660,3 +3660,5 @@ export interface ChartConfigurationCustomTypesPerDataset< options?: ChartOptions; plugins?: Plugin[]; } + +export type ChartConfigurationInstance = ChartConfiguration | ChartConfigurationCustomTypesPerDataset & { type?: undefined } diff --git a/types/tests/config_types.ts b/types/tests/config_types.ts new file mode 100644 index 00000000000..e63691952a9 --- /dev/null +++ b/types/tests/config_types.ts @@ -0,0 +1,65 @@ +import { Chart } from '../../src/types.js'; + +const chart = new Chart('chart', { + type: 'bar', + data: { + labels: ['1', '2', '3'], + datasets: [{ + data: [1, 2, 3] + }, + { + data: [1, 2, 3] + }], + } +}); + +chart.config.type = 'line'; + +const chart2 = new Chart('chart', { + type: 'bar', + data: { + labels: ['1', '2', '3'], + datasets: [{ + type: 'line', + data: [1, 2, 3] + }, + { + type: 'line', + data: [1, 2, 3] + }], + } +}); + +chart2.config.type = 'line'; + +const chart3 = new Chart('chart', { + data: { + labels: ['1', '2', '3'], + datasets: [{ + type: 'bar', + data: [1, 2, 3] + }, + { + type: 'bar', + data: [1, 2, 3], + categoryPercentage: 10 + }], + } +}); + +chart3.config.type = 'line'; + +const chart4 = new Chart('chart', { + data: { + labels: ['1', '2', '3'], + datasets: [{ + type: 'bar', + data: [1, 2, 3] + }] + } +}); + +chart4.data.datasets.push({ + type: 'line', + data: [1, 2, 3] +});