From: emmcbd <42184090+emmcbd@users.noreply.github.com> Date: Sun, 8 Nov 2020 14:52:41 +0000 (+0100) Subject: Improved types for defaults (#8025) X-Git-Tag: 3.0.0-beta.6 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7ad91817e7bd488c404a099c31b881b594267e3b;p=thirdparty%2FChart.js.git Improved types for defaults (#8025) --- diff --git a/src/core/core.defaults.js b/src/core/core.defaults.js index 9793a880d..ac088cc8d 100644 --- a/src/core/core.defaults.js +++ b/src/core/core.defaults.js @@ -56,9 +56,8 @@ export class Defaults { this.showLine = true; this.plugins = {}; this.scale = undefined; - this.doughnut = undefined; this.scales = {}; - this.controllers = undefined; + this.controllers = {}; } /** * @param {string} scope diff --git a/types/controllers/index.d.ts b/types/controllers/index.d.ts index ebcc5e70f..0c3da62d7 100644 --- a/types/controllers/index.d.ts +++ b/types/controllers/index.d.ts @@ -13,9 +13,25 @@ import { BarOptions, } from '../elements'; -export interface ControllerDatasetOptions { +export interface ParsingOptions { /** - * How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} + * How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally. + */ + parsing: + { + [key: string]: string; + } + | false; + + /** + * Chart.js is fastest if you provide data with indices that are unique, sorted, and consistent across datasets and provide the normalized: true option to let Chart.js know that you have done so. + */ + normalized: boolean; +} + +export interface ControllerDatasetOptions extends ParsingOptions { + /** + * How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} */ clip: number | ChartArea; /** diff --git a/types/core/index.d.ts b/types/core/index.d.ts index 8986f241b..a1e036c5d 100644 --- a/types/core/index.d.ts +++ b/types/core/index.d.ts @@ -1,7 +1,7 @@ import { BasePlatform } from '../platform'; import { Color, - EasingFunction, + CoreChartOptions, ChartArea, ChartComponent, FontSpec, @@ -11,14 +11,21 @@ import { ChartEvent, } from './interfaces'; import { + DeepPartial, DefaultDataPoint, ChartConfiguration, ChartData, ChartDataset, ChartOptions, ChartType, - ScaleOptions + ChartTypeRegistry, + DatasetChartOptions, + ScaleChartOptions, + ScaleOptions, + ScaleType } from '../interfaces'; +import { ElementChartOptions } from '../elements'; +import { PluginOptions, PluginChartOptions } from '../plugins'; export interface DateAdapterBase { /** @@ -118,85 +125,6 @@ export class Animations { update(target: any, values: any): undefined | boolean; } -export interface AnimationCommonSpec { - /** - * The number of milliseconds an animation takes. - * @default 1000 - */ - duration: number; - /** - * Easing function to use - * @default 'easeOutQuart' - */ - easing: EasingFunction; - - /** - * Running animation count + FPS display in upper left corner of the chart. - * @default false - */ - debug: boolean; - - /** - * Delay before starting the animations. - * @default 0 - */ - delay: number; - - /** - * If set to true, the animations loop endlessly. - * @default false - */ - loop: boolean; -} - -export interface AnimationPropertySpec extends AnimationCommonSpec { - properties: string[]; - - /** - * Type of property, determines the interpolator used. Possible values: 'number', 'color' and 'boolean'. Only really needed for 'color', because typeof does not get that right. - */ - type: 'color' | 'number' | 'boolean'; - - fn: (from: T, to: T, factor: number) => T; - - /** - * Start value for the animation. Current value is used when undefined - */ - from: Color | number | boolean; - /** - * - */ - to: Color | number | boolean; -} - -export type AnimationSpecContainer = AnimationCommonSpec & { - [prop: string]: AnimationPropertySpec; -}; - -export type AnimationOptions = AnimationSpecContainer & { - /** - * Callback called on each step of an animation. - */ - onProgress: (this: Chart, event: AnimationEvent) => void; - /** - *Callback called when all animations are completed. - */ - onComplete: (this: Chart, event: AnimationEvent) => void; - - active: AnimationSpecContainer; - hide: AnimationSpecContainer; - reset: AnimationSpecContainer; - resize: AnimationSpecContainer; - show: AnimationSpecContainer; -}; - -export interface ChartAnimationOptions { - animation: Scriptable; - datasets: { - animation: Scriptable; - }; -} - export interface ChartMeta { type: string; controller: DatasetController; @@ -232,14 +160,6 @@ export interface ChartMeta[key] & + ScaleChartOptions & + ChartTypeRegistry[key]['chartOptions'] + >; }; - readonly hover: { - onHover?: () => void; - mode?: InteractionMode | string; - intersect?: boolean; + + scale: ScaleOptions; + scales: { + [key in ScaleType]: ScaleOptions; }; - readonly maintainAspectRatio: boolean; - readonly onClick?: () => void; - readonly onHover?: () => void; - readonly responsive: boolean; - readonly plugins: { [key: string]: any }; - readonly scale?: ScaleOptions; - readonly doughnut: any; - readonly scales: { [key: string]: ScaleOptions }; - readonly controllers: { [key: string]: any }; + plugins: PluginOptions; set(scope: string, values: any): any; get(scope: string): any; + /** * Routes the named defaults to fallback to another scope/name. * This routing is useful when those target values, like defaults.color, are changed runtime. @@ -459,7 +375,7 @@ export interface Defaults { route(scope: string, name: string, targetScope: string, targetName: string): void; } -export const defaults: Defaults; +export const defaults: Defaults & DeepPartial; export interface Element { readonly x: number; @@ -545,7 +461,7 @@ export const Interaction: { modes: InteractionModeMap; }; -export type LayoutPosition = 'left' | 'top' | 'right' | 'chartArea'; +export type LayoutPosition = 'left' | 'top' | 'right' | 'bottom' | 'chartArea'; export interface LayoutItem { /** diff --git a/types/core/interfaces.d.ts b/types/core/interfaces.d.ts index 244698c65..5edf7ad76 100644 --- a/types/core/interfaces.d.ts +++ b/types/core/interfaces.d.ts @@ -1,5 +1,6 @@ import { Chart, Element, InteractionMode } from '.'; import { ChartDataset } from '../interfaces'; +import { ParsingOptions } from '../controllers'; export type Color = string | CanvasGradient | CanvasPattern; @@ -47,13 +48,6 @@ export interface ChartArea { bottom: number; } -export interface Padding { - top: number; - left: number; - right: number; - bottom: number; -} - export interface ScriptableContext { chart: Chart; dataPoint: any; @@ -68,7 +62,7 @@ export type ScriptableOptions = { [P in keyof T]: Scriptable }; export type ScriptableAndArray = readonly T[] | Scriptable; export type ScriptableAndArrayOptions = { [P in keyof T]: ScriptableAndArray }; -export interface HoverInteractionOptions { +export interface CoreInteractionOptions { /** * Sets which elements appear in the tooltip. See Interaction Modes for details. * @default 'nearest' @@ -86,11 +80,20 @@ export interface HoverInteractionOptions { axis: 'x' | 'y' | 'xy'; } -export interface ElementOptions { - // TODO +export interface HoverInteractionOptions extends CoreInteractionOptions { + /** + * Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart. + */ + onHover(event: ChartEvent, elements: Element[]): void; } -export interface CoreChartOptions { +export interface CoreChartOptions extends ParsingOptions { + animation: Scriptable; + + datasets: { + animation: Scriptable; + }; + /** * base color * @see Defaults.color @@ -129,6 +132,8 @@ export interface CoreChartOptions { */ devicePixelRatio: number; + interaction: CoreInteractionOptions; + hover: HoverInteractionOptions; /** @@ -141,13 +146,12 @@ export interface CoreChartOptions { * Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart. */ onHover(event: ChartEvent, elements: Element[]): void; + /** * Called if the event is of type 'mouseup' or 'click'. Passed the event, an array of active elements, and the chart. */ onClick(event: ChartEvent, elements: Element[]): void; - elements: { [key: string]: ElementOptions }; - layout: { padding: Scriptable; }; @@ -186,6 +190,78 @@ export type EasingFunction = | 'easeOutBounce' | 'easeInOutBounce'; +export interface AnimationCommonSpec { + /** + * The number of milliseconds an animation takes. + * @default 1000 + */ + duration: number; + /** + * Easing function to use + * @default 'easeOutQuart' + */ + easing: EasingFunction; + + /** + * Running animation count + FPS display in upper left corner of the chart. + * @default false + */ + debug: boolean; + + /** + * Delay before starting the animations. + * @default 0 + */ + delay: number; + + /** + * If set to true, the animations loop endlessly. + * @default false + */ + loop: boolean; +} + +export interface AnimationPropertySpec extends AnimationCommonSpec { + properties: string[]; + + /** + * Type of property, determines the interpolator used. Possible values: 'number', 'color' and 'boolean'. Only really needed for 'color', because typeof does not get that right. + */ + type: 'color' | 'number' | 'boolean'; + + fn: (from: T, to: T, factor: number) => T; + + /** + * Start value for the animation. Current value is used when undefined + */ + from: Color | number | boolean; + /** + * + */ + to: Color | number | boolean; +} + +export type AnimationSpecContainer = AnimationCommonSpec & { + [prop: string]: AnimationPropertySpec; +}; + +export type AnimationOptions = AnimationSpecContainer & { + /** + * Callback called on each step of an animation. + */ + onProgress: (this: Chart, event: AnimationEvent) => void; + /** + *Callback called when all animations are completed. + */ + onComplete: (this: Chart, event: AnimationEvent) => void; + + active: AnimationSpecContainer; + hide: AnimationSpecContainer; + reset: AnimationSpecContainer; + resize: AnimationSpecContainer; + show: AnimationSpecContainer; +}; + export interface FontSpec { /** * Default font color for all text. diff --git a/types/interfaces.d.ts b/types/interfaces.d.ts index 3630c0d6b..7d2ff4dbd 100644 --- a/types/interfaces.d.ts +++ b/types/interfaces.d.ts @@ -22,13 +22,8 @@ import { } from './controllers'; import { CoreChartOptions } from './core/interfaces'; import { ElementChartOptions } from './elements'; -import { - TooltipChartOptions, - FillerControllerDatasetOptions, - LegendChartOptions, - TitleChartOptions, -} from './plugins'; -import { ChartAnimationOptions, ParsingOptions as ParsingOptions, Plugin } from './core'; +import { FillerControllerDatasetOptions, PluginChartOptions } from './plugins'; +import { Plugin } from './core'; import { LinearScaleOptions, LogarithmicScaleOptions, @@ -145,11 +140,7 @@ export type ScaleChartOptions = { export type ChartOptions = DeepPartial< CoreChartOptions & - ParsingOptions & - TooltipChartOptions & - LegendChartOptions & - TitleChartOptions & - ChartAnimationOptions & + PluginChartOptions & ElementChartOptions & DatasetChartOptions & ScaleChartOptions & @@ -169,7 +160,6 @@ export type ChartDataset< TYPE extends ChartType = ChartType, DATA extends unknown[] = DefaultDataPoint > = DeepPartial< - ParsingOptions & { [key in ChartType]: { type: key } & ChartTypeRegistry[key]['datasetOptions'] }[TYPE] > & ChartDatasetProperties; diff --git a/types/plugins/index.d.ts b/types/plugins/index.d.ts index 24a59b5cf..3d458df3f 100644 --- a/types/plugins/index.d.ts +++ b/types/plugins/index.d.ts @@ -1,5 +1,5 @@ -import { ActiveDataPoint, ActiveElement, Chart, Element, AnimationSpecContainer, InteractionMode, LayoutPosition, Plugin } from '../core'; -import { Color, ChartArea, FontSpec, Scriptable, TextAlign, ChartEvent, HoverInteractionOptions } from '../core/interfaces'; +import { ActiveDataPoint, ActiveElement, Chart, Element, InteractionMode, LayoutPosition, Plugin } from '../core'; +import { AnimationSpecContainer, Color, ChartArea, FontSpec, Scriptable, TextAlign, ChartEvent, CoreInteractionOptions } from '../core/interfaces'; import { PointStyle } from '../elements'; import { ChartData, ChartDataset } from '../interfaces'; @@ -342,7 +342,7 @@ export interface TooltipPlugin { afterTooltipDraw?(chart: Chart, args: { tooltip: TooltipModel }, options: O): void; } -export interface TooltipOptions extends HoverInteractionOptions { +export interface TooltipOptions extends CoreInteractionOptions { /** * Are on-canvas tooltips enabled? * @default true @@ -551,3 +551,13 @@ export interface TooltipItem { */ element: Element; } + +export interface PluginOptions { + filler: FillerOptions; + legend: LegendOptions; + title: TitleOptions; + tooltip: TooltipOptions; +} + +export interface PluginChartOptions extends LegendChartOptions, TitleChartOptions, TooltipChartOptions { +}