From: Josh Kelley Date: Fri, 18 Dec 2020 17:46:54 +0000 (-0500) Subject: TypeScript updates (#8190) X-Git-Tag: v3.0.0-beta.8~54 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=efbaf2c0828949358b28b82e75ed40044378cb34;p=thirdparty%2FChart.js.git TypeScript updates (#8190) * Update type definitions and docs for legends * Fix types for onHover and onClick callbacks core.controller.js's implementation also passes the Chart instance as `this`. However, that isn't documented, and it's my impression that Chart.js is moving away from passing items as `this`, so I didn't declare it in the type definitions. * Allow multi-line ticks * Stricter DeepPartial definition The previous definition resolved to `{}` (which can allow primitives) if it was given a function, so it was far too broad for any `Scriptable<>` properties. * Grammar and writing style * Updates to animation docs Document the `fn` option, since it's in the type definitions. Fix callback usage to match example code. * Fix AnimationEvent parameter The onProgress and onComplete events were mistakenly declared as taking the standard DOM AnimationEvent. (Should Chart.js's AnimationEvent be renamed to ChartAnimationEvent to avoid any possible ambiguity?) * Allow false for disabling animations * Add comments explaining the layout and usage of Rollup --- diff --git a/docs/docs/configuration/animations.mdx b/docs/docs/configuration/animations.mdx index 8ef12785a..9dae35593 100644 --- a/docs/docs/configuration/animations.mdx +++ b/docs/docs/configuration/animations.mdx @@ -123,7 +123,7 @@ The default configuration is defined here: = T extends {} - ? { - [K in keyof T]?: DeepPartial; - } - : T; +// DeepPartial implementation taken from the utility-types NPM package, which is +// Copyright (c) 2016 Piotr Witek (http://piotrwitek.github.io) +// and used under the terms of the MIT license +export type DeepPartial = T extends Function + ? T + : T extends Array + ? _DeepPartialArray + : T extends object + ? _DeepPartialObject + : T | undefined; +interface _DeepPartialArray extends Array> {} +type _DeepPartialObject = { [P in keyof T]?: DeepPartial }; export type DistributiveArray = T extends unknown ? T[] : never diff --git a/types/plugins/index.d.ts b/types/plugins/index.d.ts index 3c2ee6b53..97db335da 100644 --- a/types/plugins/index.d.ts +++ b/types/plugins/index.d.ts @@ -41,59 +41,64 @@ export interface LegendItem { */ text: string; + /** + * Index of the associated dataset + */ + datasetIndex: number; + /** * Fill style of the legend box */ - fillStyle: CanvasLineCap; + fillStyle?: Color; /** * If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect */ - hidden: boolean; + hidden?: boolean; /** * For box border. * @see https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap */ - lineCap: CanvasLineCap; + lineCap?: CanvasLineCap; /** * For box border. * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash */ - lineDash: number[]; + lineDash?: number[]; /** * For box border. * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset */ - lineDashOffset: number; + lineDashOffset?: number; /** * For box border. * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin */ - lineJoin: CanvasLineJoin; + lineJoin?: CanvasLineJoin; /** * Width of box border */ - lineWidth: number; + lineWidth?: number; /** * Stroke style of the legend box */ - strokeStyle: Color; + strokeStyle?: Color; /** * Point style of the legend box (only used if usePointStyle is true) */ - pointStyle: PointStyle; + pointStyle?: PointStyle; /** * Rotation of the point in degrees (only used if usePointStyle is true) */ - rotation: number; + rotation?: number; } export interface LegendElement extends Element {} @@ -129,11 +134,11 @@ export interface LegendOptions { */ onClick(this: LegendElement, e: ChartEvent, legendItem: LegendItem, legend: LegendElement): void; /** - * A callback that is called when a 'mousemove' event is registered on top of a label item + * A callback that is called when a 'mousemove' event is registered on top of a label item */ onHover(this: LegendElement, e: ChartEvent, legendItem: LegendItem, legend: LegendElement): void; /** - * A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item. + * A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item. */ onLeave(this: LegendElement, e: ChartEvent, legendItem: LegendItem, legend: LegendElement): void; @@ -176,7 +181,7 @@ export interface LegendOptions { pointStyle: PointStyle; /** - * Label style will match corresponding point style (size is based on the mimimum value between boxWidth and font.size). + * Label style will match corresponding point style (size is based on the minimum value between boxWidth and font.size). * @default false */ usePointStyle: boolean;