Improved types for defaults (#8025)

chartjs · Nov 8, 2020 · 7ad9181 · 7ad9181
1 parent 91fec4a
commit 7ad9181
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 144 deletions.
diff --git 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
@@ -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
@@ -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: <T>(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<AnimationOptions>;
-	datasets: {
-		animation: Scriptable<AnimationOptions>;
-	};
-}
-
 export interface ChartMeta<E extends Element = Element, DSE extends Element = Element> {
 	type: string;
 	controller: DatasetController;
@@ -232,14 +160,6 @@ export interface ChartMeta<E extends Element = Element, DSE extends Element = El
 	_parsed: any[];
 }
 
-export interface ParsingOptions {
-	parsing:
-	| {
-		[key: string]: string;
-	}
-	| false;
-}
-
 export interface ActiveDataPoint {
 	datasetIndex: number;
 	index: number;
@@ -413,32 +333,28 @@ export interface DatasetControllerChartComponent extends ChartComponent {
 	};
 }
 
-export interface Defaults {
-	readonly color: string;
-	readonly events: ('mousemove' | 'mouseout' | 'click' | 'touchstart' | 'touchmove')[];
-	readonly font: FontSpec;
-	readonly interaction: {
-		mode: InteractionMode | string;
-		intersect: boolean;
+export interface Defaults extends CoreChartOptions, ElementChartOptions {
+	controllers: {
+		[key in ChartType]: DeepPartial<
+			CoreChartOptions &
+			PluginChartOptions &
+			ElementChartOptions &
+			DatasetChartOptions<key>[key] &
+			ScaleChartOptions<key> &
+			ChartTypeRegistry[key]['chartOptions']
+			>;
 	};
-	readonly hover: {
-		onHover?: () => void;
-		mode?: InteractionMode | string;
-		intersect?: boolean;
+
+	scale: ScaleOptions;
+	scales: {
+		[key in ScaleType]: ScaleOptions<key>;
 	};
-	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<PluginChartOptions>;
 
 export interface Element<T = {}, O = {}> {
 	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
@@ -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<T> = { [P in keyof T]: Scriptable<T[P]> };
 export type ScriptableAndArray<T> = readonly T[] | Scriptable<T>;
 export type ScriptableAndArrayOptions<T> = { [P in keyof T]: ScriptableAndArray<T[P]> };
 
-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<AnimationOptions>;
+
+  datasets: {
+    animation: Scriptable<AnimationOptions>;
+  };
+
   /**
    * 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<number | ChartArea>;
   };
@@ -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: <T>(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.