diff --git a/src/types/index.d.ts b/src/types/index.d.ts index f312dc4114b..7a9a0ae4d5b 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -491,7 +491,7 @@ export declare class Chart< readonly id: string; readonly canvas: HTMLCanvasElement; readonly ctx: CanvasRenderingContext2D; - readonly config: ChartConfigurationInstance; + readonly config: ChartConfigurationInstance; readonly width: number; readonly height: number; readonly aspectRatio: number; @@ -504,7 +504,7 @@ export declare class Chart< 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; + data: ChartData; options: ChartOptions; constructor(item: ChartItem, config: ChartConfiguration | ChartConfigurationCustomTypesPerDataset); @@ -3605,29 +3605,39 @@ export type DefaultDataPoint = DistributiveArray = ChartTypeRegistry[TType]['parsedDataType']; -export interface ChartDatasetProperties { - type?: TType; - data: TData; -} +export type ChartDatasetProperties< + TType extends ChartType = ChartType, + TData = DefaultDataPoint +> = { + [type in ChartType]: { + type?: type; + data: DefaultDataPoint | TData; + } +}[TType] -export interface ChartDatasetPropertiesCustomTypesPerDataset { - type: TType; - data: TData; -} +export type ChartDatasetPropertiesCustomTypesPerDataset< + TType extends ChartType = ChartType, + TData = DefaultDataPoint +> = { + [type in ChartType]: { + type: type; + data: DefaultDataPoint | TData; + } +}[TType] export type ChartDataset< TType extends ChartType = ChartType, TData = DefaultDataPoint -> = DeepPartial< -{ [key in ChartType]: { type: key } & ChartTypeRegistry[key]['datasetOptions'] }[TType] -> & ChartDatasetProperties; +> = { + [type in ChartType]: DeepPartial & ChartDatasetProperties +}[TType]; export type ChartDatasetCustomTypesPerDataset< TType extends ChartType = ChartType, TData = DefaultDataPoint -> = DeepPartial< -{ [key in ChartType]: { type: key } & ChartTypeRegistry[key]['datasetOptions'] }[TType] -> & ChartDatasetPropertiesCustomTypesPerDataset; +> = { + [type in ChartType]: DeepPartial & ChartDatasetPropertiesCustomTypesPerDataset +}[TType]; /** * TData represents the data point type. If unspecified, a default is provided @@ -3640,7 +3650,7 @@ export interface ChartData< TLabel = unknown > { labels?: TLabel[]; - datasets: ChartDataset[]; + datasets: (ChartDataset | ChartDataset)[]; } export interface ChartDataCustomTypesPerDataset< @@ -3649,7 +3659,7 @@ export interface ChartDataCustomTypesPerDataset< TLabel = unknown > { labels?: TLabel[]; - datasets: ChartDatasetCustomTypesPerDataset[]; + datasets: (ChartDatasetCustomTypesPerDataset | ChartDatasetCustomTypesPerDataset)[]; } export interface ChartConfiguration< @@ -3673,4 +3683,8 @@ export interface ChartConfigurationCustomTypesPerDataset< plugins?: Plugin[]; } -export type ChartConfigurationInstance = ChartConfiguration | ChartConfigurationCustomTypesPerDataset & { type?: undefined } +export type ChartConfigurationInstance< + TData, + TLabel +> = ChartConfiguration +| ChartConfigurationCustomTypesPerDataset & { type?: undefined } diff --git a/test/types/config_types.ts b/test/types/config_types.ts index e63691952a9..45002074dd0 100644 --- a/test/types/config_types.ts +++ b/test/types/config_types.ts @@ -63,3 +63,51 @@ chart4.data.datasets.push({ type: 'line', data: [1, 2, 3] }); + +const chart5 = new Chart('chart', { + data: { + labels: ['1', '2', '3'], + datasets: [{ + type: 'line', + data: [{ + category: '1', + value: 1 + }] + }] + } +}); + +chart5.data.datasets.push({ + type: 'line', + data: [{ + category: '1', + value: 1 + }] +}); + +chart5.config.data.datasets.push({ + type: 'line', + data: [{ + category: '2', + value: 2 + }] +}); + +const dataset = chart5.data.datasets[0]; +// number | Point | [number, number] | BubbleDataPoint | { category: string, value: number } +const datapoint = dataset.data[0]; + +if (typeof datapoint === 'object' && 'category' in datapoint) { + // datapoint: { category: string, value: number } + datapoint.value = 2; +} + +if (dataset.type === 'line') { + // number | Point | { category: string, value: number } + const lineDatapoint = dataset.data[0]; + + if (typeof lineDatapoint === 'object' && 'category' in lineDatapoint) { + // datapoint: { category: string, value: number } + lineDatapoint.value = 2; + } +}