Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 35 additions & 4 deletions types/index.esm.d.ts
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {}
Expand Down Expand Up @@ -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.
Expand All @@ -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>,
Expand All @@ -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>[];
}
69 changes: 69 additions & 0 deletions 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]
}],
}
});