Enable scriptable element chart options (#9012)

This commit is contained in:
Evert Timberg 2021-05-01 13:30:14 -04:00 committed by GitHub
parent ea7b8cb04f
commit 49e7edae49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 11 deletions

23
types/index.esm.d.ts vendored
View File

@ -604,7 +604,7 @@ export interface DatasetControllerChartComponent extends ChartComponent {
};
}
export interface Defaults extends CoreChartOptions<ChartType>, ElementChartOptions, PluginChartOptions<ChartType> {
export interface Defaults extends CoreChartOptions<ChartType>, ElementChartOptions<ChartType>, PluginChartOptions<ChartType> {
scale: ScaleOptionsByType;
scales: {
@ -641,7 +641,7 @@ export interface Defaults extends CoreChartOptions<ChartType>, ElementChartOptio
export type Overrides = {
[key in ChartType]:
CoreChartOptions<key> &
ElementChartOptions &
ElementChartOptions<key> &
PluginChartOptions<key> &
DatasetChartOptions<ChartType> &
ScaleChartOptions<key> &
@ -1887,16 +1887,17 @@ export const BarElement: ChartComponent & {
new (cfg: AnyObject): BarElement;
};
export interface ElementOptionsByType {
arc: ArcOptions & ArcHoverOptions;
bar: BarOptions & BarHoverOptions;
line: LineOptions & LineHoverOptions;
point: PointOptions & PointHoverOptions;
}
export interface ElementChartOptions {
elements: Partial<ElementOptionsByType>;
export interface ElementOptionsByType<TType extends ChartType> {
arc: ScriptableAndArrayOptions<ArcOptions & ArcHoverOptions, ScriptableContext<TType>>;
bar: ScriptableAndArrayOptions<BarOptions & BarHoverOptions, ScriptableContext<TType>>;
line: ScriptableAndArrayOptions<LineOptions & LineHoverOptions, ScriptableContext<TType>>;
point: ScriptableAndArrayOptions<PointOptions & PointHoverOptions, ScriptableContext<TType>>;
}
export type ElementChartOptions<TType extends ChartType = ChartType> = {
elements: ElementOptionsByType<TType>
};
export class BasePlatform {
/**
* Called at chart construction time, returns a context2d instance implementing
@ -3321,7 +3322,7 @@ export type ScaleChartOptions<TType extends ChartType = ChartType> = {
export type ChartOptions<TType extends ChartType = ChartType> = DeepPartial<
CoreChartOptions<TType> &
ElementChartOptions &
ElementChartOptions<TType> &
PluginChartOptions<TType> &
DatasetChartOptions<TType> &
ScaleChartOptions<TType> &

View File

@ -0,0 +1,49 @@
import { Chart } from '../../index.esm';
const chart = new Chart('id', {
type: 'line',
data: {
labels: [],
datasets: []
},
options: {
elements: {
line: {
borderWidth: () => 2,
},
point: {
pointStyle: (ctx) => 'star',
}
}
}
});
const chart2 = new Chart('id', {
type: 'bar',
data: {
labels: [],
datasets: []
},
options: {
elements: {
bar: {
borderWidth: (ctx) => 2,
}
}
}
});
const chart3 = new Chart('id', {
type: 'doughnut',
data: {
labels: [],
datasets: []
},
options: {
elements: {
arc: {
borderWidth: (ctx) => 3,
}
}
}
});