Allow for each dataset to be individually typed without a main type (#…

…10387)

* allow for each dataset to be individually typed without a main type
* fix lint issues
* add extra test cases

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<TType, TData, TLabel>;
+  readonly config: ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>;
   readonly width: number;
   readonly height: number;
   readonly aspectRatio: number;
@@ -501,7 +501,7 @@ export declare class Chart<
   data: ChartData<TType, TData, TLabel>;
   options: ChartOptions<TType>;
 
-  constructor(item: ChartItem, config: ChartConfiguration<TType, TData, TLabel>);
+  constructor(item: ChartItem, config: ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>);
 
   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,13 +3628,25 @@ export interface ChartDatasetProperties<TType extends ChartType, TData> {
   data: TData;
 }
 
+export interface ChartDatasetPropertiesCustomTypesPerDataset<TType extends ChartType, TData> {
+  type: TType;
+  data: TData;
+}
+
 export type ChartDataset<
   TType extends ChartType = ChartType,
   TData = DefaultDataPoint<TType>
 > = DeepPartial<
 { [key in ChartType]: { type: key } & ChartTypeRegistry[key]['datasetOptions'] }[TType]
 > & ChartDatasetProperties<TType, TData>;
 
+export type ChartDatasetCustomTypesPerDataset<
+  TType extends ChartType = ChartType,
+  TData = DefaultDataPoint<TType>
+> = DeepPartial<
+{ [key in ChartType]: { type: key } & ChartTypeRegistry[key]['datasetOptions'] }[TType]
+> & ChartDatasetPropertiesCustomTypesPerDataset<TType, TData>;
+
 /**
  * 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<TType, TData>[];
 }
 
+export interface ChartDataCustomTypesPerDataset<
+  TType extends ChartType = ChartType,
+  TData = DefaultDataPoint<TType>,
+  TLabel = unknown
+> {
+  labels?: TLabel[];
+  datasets: ChartDatasetCustomTypesPerDataset<TType, TData>[];
+}
+
 export interface ChartConfiguration<
   TType extends ChartType = ChartType,
   TData = DefaultDataPoint<TType>,
@@ -3659,3 +3680,13 @@ export interface ChartConfiguration<
   options?: ChartOptions<TType>;
   plugins?: Plugin<TType>[];
 }
+
+export interface ChartConfigurationCustomTypesPerDataset<
+  TType extends ChartType = ChartType,
+  TData = DefaultDataPoint<TType>,
+  TLabel = unknown
+> {
+  data: ChartDataCustomTypesPerDataset<TType, TData, TLabel>;
+  options?: ChartOptions<TType>;
+  plugins?: Plugin<TType>[];
+}

types/tests/chart_types.ts

@@ -0,0 +1,69 @@
+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],
+      categoryPercentage: 10
+    }],
+  }
+});
+
+const chart2 = new Chart('chart', {
+  type: 'bar',
+  data: {
+    labels: ['1', '2', '3'],
+    datasets: [{
+      type: 'line',
+      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
+    }],
+  }
+});
+
+const chart3 = new Chart('chart', {
+  data: {
+    labels: ['1', '2', '3'],
+    datasets: [{
+      type: 'bar',
+      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]
+    }],
+  }
+});