diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index 64449af8f93..8d253d3157a 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -38,14 +38,14 @@ export { ScriptableAndArrayOptions } from './scriptable'; -export interface ScriptableContext { +export interface ScriptableContext { + active: boolean; chart: Chart; - parsed: unknown[]; - raw: unknown[]; dataIndex: number; dataset: ChartDataset; datasetIndex: number; - active: boolean; + parsed: TParsedData; + raw: unknown; } export interface ParsingOptions { @@ -96,8 +96,8 @@ export interface ControllerDatasetOptions extends ParsingOptions { export interface BarControllerDatasetOptions extends ControllerDatasetOptions, - ScriptableAndArrayOptions, - ScriptableAndArrayOptions { + ScriptableAndArrayOptions>, + ScriptableAndArrayOptions> { /** * The ID of the x axis to plot this dataset on. */ @@ -155,8 +155,8 @@ export const BarController: ChartComponent & { export interface BubbleControllerDatasetOptions extends ControllerDatasetOptions, - ScriptableAndArrayOptions, - ScriptableAndArrayOptions {} + ScriptableAndArrayOptions>, + ScriptableAndArrayOptions> {} export interface BubbleDataPoint { /** @@ -183,10 +183,10 @@ export const BubbleController: ChartComponent & { export interface LineControllerDatasetOptions extends ControllerDatasetOptions, - ScriptableAndArrayOptions, - ScriptableAndArrayOptions, - ScriptableOptions, - ScriptableOptions { + ScriptableAndArrayOptions>, + ScriptableAndArrayOptions>, + ScriptableOptions>, + ScriptableOptions> { /** * The ID of the x axis to plot this dataset on. */ @@ -241,8 +241,8 @@ export const ScatterController: ChartComponent & { export interface DoughnutControllerDatasetOptions extends ControllerDatasetOptions, - ScriptableAndArrayOptions, - ScriptableAndArrayOptions { + ScriptableAndArrayOptions>, + ScriptableAndArrayOptions> { /** * Sweep to allow arcs to cover. @@ -359,10 +359,10 @@ export const PolarAreaController: ChartComponent & { export interface RadarControllerDatasetOptions extends ControllerDatasetOptions, - ScriptableOptions, - ScriptableOptions, - ScriptableOptions, - ScriptableOptions { + ScriptableOptions>, + ScriptableOptions>, + ScriptableOptions>, + ScriptableOptions> { /** * The ID of the x axis to plot this dataset on. */ @@ -525,7 +525,11 @@ export declare enum UpdateModeEnum { export type UpdateMode = keyof typeof UpdateModeEnum; -export class DatasetController { +export class DatasetController< + TElement extends Element = Element, + TDatasetElement extends Element = Element, + TParsedData = unknown, +> { constructor(chart: Chart, datasetIndex: number); readonly chart: Chart; @@ -582,7 +586,7 @@ export class DatasetController, data: AnyObject[], start: number, count: number): AnyObject[]; protected parseArrayData(meta: ChartMeta, data: AnyObject[], start: number, count: number): AnyObject[]; protected parseObjectData(meta: ChartMeta, data: AnyObject[], start: number, count: number): AnyObject[]; - protected getParsed(index: number): AnyObject; + protected getParsed(index: number): TParsedData; protected applyStack(scale: Scale, parsed: unknown[]): number; protected updateRangeFromParsed( range: { min: number; max: number }, @@ -600,12 +604,14 @@ export interface DatasetControllerChartComponent extends ChartComponent { }; } -export interface Defaults extends CoreChartOptions, ElementChartOptions, PluginChartOptions { +// TParsedData defaults to unknown because global defaults are for any chart +// type, thus the data type can be many different possible values. +export interface Defaults extends CoreChartOptions, ElementChartOptions, PluginChartOptions { controllers: { [key in ChartType]: DeepPartial< - CoreChartOptions & + CoreChartOptions & ElementChartOptions & - PluginChartOptions & + PluginChartOptions & DatasetChartOptions[key] & ScaleChartOptions & ChartTypeRegistry[key]['chartOptions'] @@ -735,7 +741,8 @@ export const layouts: { update(chart: Chart, width: number, height: number): void; }; -export interface Plugin extends ExtendedPlugin { +// TParsedData defaults to unknown here since plugins can work for any chart type +export interface Plugin extends ExtendedPlugin { id: string; /** @@ -1340,9 +1347,9 @@ export interface HoverInteractionOptions extends CoreInteractionOptions { onHover(event: ChartEvent, elements: ActiveElement[], chart: Chart): void; } -export interface CoreChartOptions extends ParsingOptions, AnimationOptions { +export interface CoreChartOptions extends ParsingOptions, AnimationOptions { - datasets: AnimationOptions; + datasets: AnimationOptions; /** * The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. @@ -1425,7 +1432,7 @@ export interface CoreChartOptions extends ParsingOptions, AnimationOptions { onClick(event: ChartEvent, elements: ActiveElement[], chart: Chart): void; layout: { - padding: Scriptable; + padding: Scriptable>; }; } @@ -1462,39 +1469,39 @@ export type EasingFunction = | 'easeOutBounce' | 'easeInOutBounce'; -export type AnimationSpec = { +export type AnimationSpec = { /** * The number of milliseconds an animation takes. * @default 1000 */ - duration: Scriptable; + duration: Scriptable>; /** * Easing function to use * @default 'easeOutQuart' */ - easing: Scriptable; + easing: Scriptable>; /** * Running animation count + FPS display in upper left corner of the chart. * @default false */ - debug: Scriptable; + debug: Scriptable>; /** * Delay before starting the animations. * @default 0 */ - delay: Scriptable; + delay: Scriptable>; /** * If set to true, the animations loop endlessly. * @default false */ - loop: Scriptable; + loop: Scriptable>; } -export type AnimationsSpec = { - [name: string]: false | AnimationSpec & { +export type AnimationsSpec = { + [name: string]: false | AnimationSpec & { properties: string[]; /** @@ -1507,25 +1514,25 @@ export type AnimationsSpec = { /** * Start value for the animation. Current value is used when undefined */ - from: Scriptable; + from: Scriptable>; /** * */ - to: Scriptable; + to: Scriptable>; } } -export type TransitionSpec = { - animation: AnimationSpec; - animations: AnimationsSpec; +export type TransitionSpec = { + animation: AnimationSpec; + animations: AnimationsSpec; } -export type TransitionsSpec = { - [mode: string]: TransitionSpec +export type TransitionsSpec = { + [mode: string]: TransitionSpec } -export type AnimationOptions = { - animation: false | AnimationSpec & { +export type AnimationOptions = { + animation: false | AnimationSpec & { /** * Callback called on each step of an animation. */ @@ -1535,8 +1542,8 @@ export type AnimationOptions = { */ onComplete: (this: Chart, event: AnimationEvent) => void; }; - animations: AnimationsSpec; - transitions: TransitionsSpec; + animations: AnimationsSpec; + transitions: TransitionsSpec; }; export interface FontSpec { @@ -2195,9 +2202,9 @@ export interface TitleOptions { export type TooltipAlignment = 'start' | 'center' | 'end'; -export interface TooltipModel { +export interface TooltipModel { // The items that we are rendering in the tooltip. See Tooltip Item Interface section - dataPoints: TooltipItem[]; + dataPoints: TooltipItem[]; // Positioning xAlign: TooltipAlignment; @@ -2241,7 +2248,7 @@ export interface TooltipModel { opacity: number; // tooltip options - options: TooltipOptions; + options: TooltipOptions; } export const Tooltip: Plugin & { @@ -2253,28 +2260,28 @@ export const Tooltip: Plugin & { setActiveElements(active: ActiveDataPoint[], eventPosition: { x: number, y: number }): void; }; -export interface TooltipCallbacks { - beforeTitle(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; - title(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; - afterTitle(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; +export interface TooltipCallbacks { + beforeTitle(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; + title(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; + afterTitle(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; - beforeBody(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; - afterBody(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; + beforeBody(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; + afterBody(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; - beforeLabel(this: TooltipModel, tooltipItem: TooltipItem): string | string[]; - label(this: TooltipModel, tooltipItem: TooltipItem): string | string[]; - afterLabel(this: TooltipModel, tooltipItem: TooltipItem): string | string[]; + beforeLabel(this: TooltipModel, tooltipItem: TooltipItem): string | string[]; + label(this: TooltipModel, tooltipItem: TooltipItem): string | string[]; + afterLabel(this: TooltipModel, tooltipItem: TooltipItem): string | string[]; - labelColor(this: TooltipModel, tooltipItem: TooltipItem): { borderColor: Color; backgroundColor: Color }; - labelTextColor(this: TooltipModel, tooltipItem: TooltipItem): Color; - labelPointStyle(this: TooltipModel, tooltipItem: TooltipItem): { pointStyle: PointStyle; rotation: number }; + labelColor(this: TooltipModel, tooltipItem: TooltipItem): { borderColor: Color; backgroundColor: Color }; + labelTextColor(this: TooltipModel, tooltipItem: TooltipItem): Color; + labelPointStyle(this: TooltipModel, tooltipItem: TooltipItem): { pointStyle: PointStyle; rotation: number }; - beforeFooter(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; - footer(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; - afterFooter(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; + beforeFooter(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; + footer(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; + afterFooter(this: TooltipModel, tooltipItems: TooltipItem[]): string | string[]; } -export interface ExtendedPlugin { +export interface ExtendedPlugin { /** * @desc Called before drawing the `tooltip`. If any plugin returns `false`, * the tooltip drawing is cancelled until another `render` is triggered. @@ -2284,7 +2291,7 @@ export interface ExtendedPlugin { * @param {object} options - The plugin options. * @returns {boolean} `false` to cancel the chart tooltip drawing. */ - beforeTooltipDraw?(chart: Chart, args: { tooltip: TooltipModel }, options: O): boolean | void; + beforeTooltipDraw?(chart: Chart, args: { tooltip: TooltipModel }, options: O): boolean | void; /** * @desc Called after drawing the `tooltip`. Note that this hook will not * be called if the tooltip drawing has been previously cancelled. @@ -2293,9 +2300,9 @@ export interface ExtendedPlugin { * @param {Tooltip} args.tooltip - The tooltip. * @param {object} options - The plugin options. */ - afterTooltipDraw?(chart: Chart, args: { tooltip: TooltipModel }, options: O): void; + afterTooltipDraw?(chart: Chart, args: { tooltip: TooltipModel }, options: O): void; } -export interface TooltipOptions extends CoreInteractionOptions { +export interface TooltipOptions extends CoreInteractionOptions { /** * Are on-canvas tooltips enabled? * @default true @@ -2304,7 +2311,7 @@ export interface TooltipOptions extends CoreInteractionOptions { /** * See custom tooltip section. */ - custom(this: TooltipModel, args: { chart: Chart; tooltip: TooltipModel }): void; + custom(this: TooltipModel, args: { chart: Chart; tooltip: TooltipModel }): void; /** * The mode for positioning the tooltip */ @@ -2319,9 +2326,9 @@ export interface TooltipOptions extends CoreInteractionOptions { /** * Sort tooltip items. */ - itemSort: (a: TooltipItem, b: TooltipItem) => number; + itemSort: (a: TooltipItem, b: TooltipItem) => number; - filter: (e: TooltipItem) => boolean; + filter: (e: TooltipItem) => boolean; /** * Background color of the tooltip. @@ -2469,14 +2476,12 @@ export interface TooltipOptions extends CoreInteractionOptions { */ textDirection: string; - animation: AnimationSpec; - - animations: AnimationsSpec; - - callbacks: TooltipCallbacks; + animation: AnimationSpec; + animations: AnimationsSpec; + callbacks: TooltipCallbacks; } -export interface TooltipItem { +export interface TooltipItem { /** * The chart the tooltip is being shown on */ @@ -2490,7 +2495,7 @@ export interface TooltipItem { /** * Parsed data values for the given `dataIndex` and `datasetIndex` */ - parsed: unknown; + parsed: TParsedData; /** * Raw data values for the given `dataIndex` and `datasetIndex` @@ -2523,15 +2528,15 @@ export interface TooltipItem { element: Element; } -export interface PluginOptionsByType { +export interface PluginOptionsByType { decimation: DecimationOptions; filler: FillerOptions; legend: LegendOptions; title: TitleOptions; - tooltip: TooltipOptions; + tooltip: TooltipOptions; } -export interface PluginChartOptions { - plugins: Partial; +export interface PluginChartOptions { + plugins: Partial>; } export interface GridLineOptions { @@ -3118,53 +3123,87 @@ export interface ScaleTypeRegistry extends CartesianScaleTypeRegistry, RadialSca export type ScaleType = keyof ScaleTypeRegistry; +interface CartesianParsedData { + x: number; + y: number; +} + +interface BarParsedData extends CartesianParsedData { + // Only specified if floating bars are show + _custom?: { + barStart: number; + barEnd: number; + start: number; + end: number; + min: number; + max: number; + } +} + +interface BubbleParsedData extends CartesianParsedData { + // The bubble radius value + _custom: number; +} + +interface RadialParsedData { + r: number; +} + export interface ChartTypeRegistry { bar: { chartOptions: BarControllerChartOptions; datasetOptions: BarControllerDatasetOptions; defaultDataPoint: number; + parsedDataType: BarParsedData, scales: keyof CartesianScaleTypeRegistry; }; line: { chartOptions: LineControllerChartOptions; datasetOptions: LineControllerDatasetOptions & FillerControllerDatasetOptions; defaultDataPoint: ScatterDataPoint; + parsedDataType: CartesianParsedData; scales: keyof CartesianScaleTypeRegistry; }; scatter: { chartOptions: ScatterControllerChartOptions; datasetOptions: ScatterControllerDatasetOptions; defaultDataPoint: ScatterDataPoint; + parsedDataType: CartesianParsedData; scales: keyof CartesianScaleTypeRegistry; }; bubble: { chartOptions: EmptyObject; datasetOptions: BubbleControllerDatasetOptions; defaultDataPoint: BubbleDataPoint; + parsedDataType: BubbleParsedData; scales: keyof CartesianScaleTypeRegistry; }; pie: { chartOptions: PieControllerChartOptions; datasetOptions: PieControllerDatasetOptions; defaultDataPoint: PieDataPoint; + parsedDataType: number; scales: keyof CartesianScaleTypeRegistry; }; doughnut: { chartOptions: DoughnutControllerChartOptions; datasetOptions: DoughnutControllerDatasetOptions; defaultDataPoint: DoughnutDataPoint; + parsedDataType: number; scales: keyof CartesianScaleTypeRegistry; }; polarArea: { chartOptions: PolarAreaControllerChartOptions; datasetOptions: PolarAreaControllerDatasetOptions; defaultDataPoint: number; + parsedDataType: RadialParsedData; scales: keyof RadialScaleTypeRegistry; }; radar: { chartOptions: RadarControllerChartOptions; datasetOptions: RadarControllerDatasetOptions; defaultDataPoint: number; + parsedDataType: RadialParsedData; scales: keyof RadialScaleTypeRegistry; }; } @@ -3187,10 +3226,10 @@ export type ScaleChartOptions = { }; }; -export type ChartOptions = DeepPartial< - CoreChartOptions & +export type ChartOptions = DeepPartial< + CoreChartOptions & ElementChartOptions & - PluginChartOptions & + PluginChartOptions & DatasetChartOptions & ScaleChartOptions & ChartTypeRegistry[TType]['chartOptions'] @@ -3200,6 +3239,8 @@ export type DefaultDataPoint = ChartType extends TType ChartTypeRegistry[TType]['defaultDataPoint'] >; +export type ParsedDataType = ChartType extends TType ? unknown : ChartTypeRegistry[TType]['parsedDataType']; + export interface ChartDatasetProperties { type?: TType; data: TData; @@ -3224,10 +3265,11 @@ export interface ChartData< export interface ChartConfiguration< TType extends ChartType = ChartType, TData extends unknown[] = DefaultDataPoint, - TLabel = unknown + TLabel = unknown, + TParsedData extends unknown = ParsedDataType, > { type: TType; data: ChartData; - options?: ChartOptions; + options?: ChartOptions; plugins?: Plugin[]; } diff --git a/types/tests/controllers/line_scriptable_parsed_data.ts b/types/tests/controllers/line_scriptable_parsed_data.ts new file mode 100644 index 00000000000..da88d0ec2b5 --- /dev/null +++ b/types/tests/controllers/line_scriptable_parsed_data.ts @@ -0,0 +1,14 @@ +import { Chart } from '../../index.esm'; + +const chart = new Chart('id', { + type: 'line', + data: { + labels: [], + datasets: [{ + data: [], + backgroundColor: (context) => { + return context.parsed.y > 10 ? 'green' : 'red'; + } + }] + }, +}); diff --git a/types/tests/plugins/plugin.tooltip/tooltip_parsed_data.ts b/types/tests/plugins/plugin.tooltip/tooltip_parsed_data.ts new file mode 100644 index 00000000000..93b7a9004ba --- /dev/null +++ b/types/tests/plugins/plugin.tooltip/tooltip_parsed_data.ts @@ -0,0 +1,22 @@ +import { Chart } from '../../../index.esm'; + +const chart = new Chart('id', { + type: 'bar', + data: { + labels: [], + datasets: [{ + data: [] + }] + }, + options: { + plugins: { + tooltip: { + callbacks: { + label: (item) => { + return `Foo data ${item.parsed.y}`; + } + } + } + } + }, +}); diff --git a/types/tests/plugins/plugin.tooltip/tooltip_parsed_data_chart_defaults.ts b/types/tests/plugins/plugin.tooltip/tooltip_parsed_data_chart_defaults.ts new file mode 100644 index 00000000000..c5c37adddab --- /dev/null +++ b/types/tests/plugins/plugin.tooltip/tooltip_parsed_data_chart_defaults.ts @@ -0,0 +1,16 @@ +import { Chart } from '../../../index.esm'; + +Chart.defaults.controllers.bubble.plugins.tooltip.callbacks.label = (item) => { + const {x, y, _custom: r} = item.parsed; + return `${item.label}: (${x}, ${y}, ${r})`; +} + +const chart = new Chart('id', { + type: 'bubble', + data: { + labels: [], + datasets: [{ + data: [] + }] + }, +}); diff --git a/types/tests/tsconfig.json b/types/tests/tsconfig.json index 774512d1992..2c18b014b0f 100644 --- a/types/tests/tsconfig.json +++ b/types/tests/tsconfig.json @@ -6,7 +6,7 @@ "noEmit": true }, "include": [ - "*.ts", + "./**/*.ts", "../index.esm.d.ts" ] }