chartist 1.4.0 → 2.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -101
- package/dist/_settings.scss +1 -89
- package/dist/chartist.min.css +2 -0
- package/dist/chartist.min.js +2 -0
- package/dist/compat.cjs +588 -0
- package/dist/compat.cjs.map +1 -0
- package/dist/compat.d.cts +119 -0
- package/dist/compat.d.ts +118 -0
- package/dist/compat.js +567 -0
- package/dist/compat.js.map +1 -0
- package/dist/compat.min.js +2 -0
- package/dist/compat.min.js.map +1 -0
- package/dist/compat.umd.js +2 -0
- package/dist/compat.umd.js.map +1 -0
- package/dist/index.cjs +5592 -3484
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +749 -2
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +4897 -0
- package/dist/index.d.ts +4896 -8
- package/dist/index.js +5562 -3479
- package/dist/index.js.map +1 -1
- package/dist/index.min.css +2 -0
- package/dist/index.min.css.map +1 -0
- package/dist/index.min.js +2 -0
- package/dist/index.min.js.map +1 -0
- package/dist/index.scss +1 -204
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/scss/_settings.scss +125 -0
- package/dist/scss/index.scss +254 -0
- package/dist/scss/themes/accessible.scss +53 -0
- package/dist/themes/accessible.css +34 -0
- package/dist/themes/accessible.min.css +1 -0
- package/package.json +238 -12
- package/dist/axes/AutoScaleAxis.d.ts +0 -12
- package/dist/axes/AutoScaleAxis.d.ts.map +0 -1
- package/dist/axes/Axis.d.ts +0 -40
- package/dist/axes/Axis.d.ts.map +0 -1
- package/dist/axes/FixedScaleAxis.d.ts +0 -11
- package/dist/axes/FixedScaleAxis.d.ts.map +0 -1
- package/dist/axes/StepAxis.d.ts +0 -9
- package/dist/axes/StepAxis.d.ts.map +0 -1
- package/dist/axes/index.d.ts +0 -6
- package/dist/axes/index.d.ts.map +0 -1
- package/dist/axes/types.d.ts +0 -5
- package/dist/axes/types.d.ts.map +0 -1
- package/dist/charts/BarChart/BarChart.d.ts +0 -50
- package/dist/charts/BarChart/BarChart.d.ts.map +0 -1
- package/dist/charts/BarChart/BarChart.types.d.ts +0 -66
- package/dist/charts/BarChart/BarChart.types.d.ts.map +0 -1
- package/dist/charts/BarChart/index.d.ts +0 -3
- package/dist/charts/BarChart/index.d.ts.map +0 -1
- package/dist/charts/BaseChart.d.ts +0 -47
- package/dist/charts/BaseChart.d.ts.map +0 -1
- package/dist/charts/LineChart/LineChart.d.ts +0 -97
- package/dist/charts/LineChart/LineChart.d.ts.map +0 -1
- package/dist/charts/LineChart/LineChart.types.d.ts +0 -83
- package/dist/charts/LineChart/LineChart.types.d.ts.map +0 -1
- package/dist/charts/LineChart/index.d.ts +0 -3
- package/dist/charts/LineChart/index.d.ts.map +0 -1
- package/dist/charts/PieChart/PieChart.d.ts +0 -101
- package/dist/charts/PieChart/PieChart.d.ts.map +0 -1
- package/dist/charts/PieChart/PieChart.types.d.ts +0 -95
- package/dist/charts/PieChart/PieChart.types.d.ts.map +0 -1
- package/dist/charts/PieChart/index.d.ts +0 -3
- package/dist/charts/PieChart/index.d.ts.map +0 -1
- package/dist/charts/index.d.ts +0 -6
- package/dist/charts/index.d.ts.map +0 -1
- package/dist/charts/types.d.ts +0 -11
- package/dist/charts/types.d.ts.map +0 -1
- package/dist/core/constants.d.ts +0 -13
- package/dist/core/constants.d.ts.map +0 -1
- package/dist/core/creation.d.ts +0 -61
- package/dist/core/creation.d.ts.map +0 -1
- package/dist/core/data/bounds.d.ts +0 -14
- package/dist/core/data/bounds.d.ts.map +0 -1
- package/dist/core/data/data.d.ts +0 -23
- package/dist/core/data/data.d.ts.map +0 -1
- package/dist/core/data/highLow.d.ts +0 -13
- package/dist/core/data/highLow.d.ts.map +0 -1
- package/dist/core/data/index.d.ts +0 -7
- package/dist/core/data/index.d.ts.map +0 -1
- package/dist/core/data/normalize.d.ts +0 -11
- package/dist/core/data/normalize.d.ts.map +0 -1
- package/dist/core/data/segments.d.ts +0 -29
- package/dist/core/data/segments.d.ts.map +0 -1
- package/dist/core/data/serialize.d.ts +0 -12
- package/dist/core/data/serialize.d.ts.map +0 -1
- package/dist/core/index.d.ts +0 -8
- package/dist/core/index.d.ts.map +0 -1
- package/dist/core/lang.d.ts +0 -23
- package/dist/core/lang.d.ts.map +0 -1
- package/dist/core/math.d.ts +0 -42
- package/dist/core/math.d.ts.map +0 -1
- package/dist/core/optionsProvider.d.ts +0 -15
- package/dist/core/optionsProvider.d.ts.map +0 -1
- package/dist/core/types.d.ts +0 -266
- package/dist/core/types.d.ts.map +0 -1
- package/dist/event/EventEmitter.d.ts +0 -27
- package/dist/event/EventEmitter.d.ts.map +0 -1
- package/dist/event/index.d.ts +0 -2
- package/dist/event/index.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/interpolation/cardinal.d.ts +0 -30
- package/dist/interpolation/cardinal.d.ts.map +0 -1
- package/dist/interpolation/index.d.ts +0 -6
- package/dist/interpolation/index.d.ts.map +0 -1
- package/dist/interpolation/monotoneCubic.d.ts +0 -30
- package/dist/interpolation/monotoneCubic.d.ts.map +0 -1
- package/dist/interpolation/none.d.ts +0 -22
- package/dist/interpolation/none.d.ts.map +0 -1
- package/dist/interpolation/simple.d.ts +0 -30
- package/dist/interpolation/simple.d.ts.map +0 -1
- package/dist/interpolation/step.d.ts +0 -26
- package/dist/interpolation/step.d.ts.map +0 -1
- package/dist/svg/Svg.d.ts +0 -201
- package/dist/svg/Svg.d.ts.map +0 -1
- package/dist/svg/SvgList.d.ts +0 -31
- package/dist/svg/SvgList.d.ts.map +0 -1
- package/dist/svg/SvgPath.d.ts +0 -125
- package/dist/svg/SvgPath.d.ts.map +0 -1
- package/dist/svg/animation.d.ts +0 -37
- package/dist/svg/animation.d.ts.map +0 -1
- package/dist/svg/index.d.ts +0 -6
- package/dist/svg/index.d.ts.map +0 -1
- package/dist/svg/types.d.ts +0 -55
- package/dist/svg/types.d.ts.map +0 -1
- package/dist/utils/extend.d.ts +0 -10
- package/dist/utils/extend.d.ts.map +0 -1
- package/dist/utils/functional.d.ts +0 -31
- package/dist/utils/functional.d.ts.map +0 -1
- package/dist/utils/index.d.ts +0 -5
- package/dist/utils/index.d.ts.map +0 -1
- package/dist/utils/types.d.ts +0 -7
- package/dist/utils/types.d.ts.map +0 -1
- package/dist/utils/utils.d.ts +0 -31
- package/dist/utils/utils.d.ts.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,4896 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
//#endregion
|
|
2
|
+
//#region src/core/constants.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* This object contains all namespaces used within Chartist.
|
|
5
|
+
*/
|
|
6
|
+
export declare const namespaces: Record<string, string>;
|
|
7
|
+
/**
|
|
8
|
+
* Precision level used internally in Chartist for rounding. If you require more decimal places you can increase this number.
|
|
9
|
+
*/
|
|
10
|
+
export declare const precision = 8;
|
|
11
|
+
/**
|
|
12
|
+
* A map with characters to escape for strings to be safely used as attribute values.
|
|
13
|
+
*/
|
|
14
|
+
export declare const escapingMap: Record<string, string>;
|
|
15
|
+
//#endregion
|
|
16
|
+
//#region src/core/lang.d.ts
|
|
17
|
+
/**
|
|
18
|
+
* Converts a number to a string with a unit. If a string is passed then this will be returned unmodified.
|
|
19
|
+
* @return Returns the passed number value with unit.
|
|
20
|
+
*/
|
|
21
|
+
export declare function ensureUnit<T>(value: T, unit: string): string | T;
|
|
22
|
+
/**
|
|
23
|
+
* Converts a number or string to a quantity object.
|
|
24
|
+
* @return Returns an object containing the value as number and the unit as string.
|
|
25
|
+
*/
|
|
26
|
+
export declare function quantity<T>(input: T): {
|
|
27
|
+
value: number;
|
|
28
|
+
unit: string | undefined;
|
|
29
|
+
} | {
|
|
30
|
+
value: number;
|
|
31
|
+
unit?: undefined;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* Generates a-z from a number 0 to 26
|
|
35
|
+
* @param n A number from 0 to 26 that will result in a letter a-z
|
|
36
|
+
* @return A character from a-z based on the input number n
|
|
37
|
+
*/
|
|
38
|
+
export declare function alphaNumerate(n: number): string;
|
|
39
|
+
//#endregion
|
|
40
|
+
//#region src/utils/types.d.ts
|
|
41
|
+
/** Narrows a union `T` to the members that have the key `K` (an optional `K` becomes required). */
|
|
42
|
+
export type FilterByKey<T, K extends string> = T extends Record<K, unknown> ? T : T extends Partial<Record<K, unknown>> ? T & { [key in K]: T[K]; } : never;
|
|
43
|
+
/** `T` with the keys `K` required, and the keys `V` required down one level. */
|
|
44
|
+
export type RequiredKeys<T, K extends keyof T, V extends keyof T = never> = T & Required<Pick<T, K | V>> & { [key in V]: Required<T[V]>; };
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region src/utils/extend.d.ts
|
|
47
|
+
/**
|
|
48
|
+
* Merges the sources into `target`, deeply, and returns `target`. Plain
|
|
49
|
+
* objects merge key by key; arrays and other values replace what's there.
|
|
50
|
+
* Keys of the target's prototype are skipped, against prototype pollution.
|
|
51
|
+
* @param target The object the sources are merged into (changed in place).
|
|
52
|
+
* @returns `target`, with the sources' properties.
|
|
53
|
+
*/
|
|
54
|
+
export declare function extend<T>(target: T): T;
|
|
55
|
+
export declare function extend<T, A>(target: T, a: A): T & A;
|
|
56
|
+
export declare function extend<T, A, B>(target: T, a: A, b: B): T & A & B;
|
|
57
|
+
//#endregion
|
|
58
|
+
//#region src/utils/functional.d.ts
|
|
59
|
+
/**
|
|
60
|
+
* Helps to simplify functional style code
|
|
61
|
+
* @param n This exact value will be returned by the noop function
|
|
62
|
+
* @return The same value that was provided to the n parameter
|
|
63
|
+
*/
|
|
64
|
+
export declare const noop: <T>(n: T) => T;
|
|
65
|
+
/**
|
|
66
|
+
* Functional style helper to produce array with given length initialized with undefined values
|
|
67
|
+
*/
|
|
68
|
+
export declare function times(length: number): undefined[];
|
|
69
|
+
export declare function times<T = unknown>(length: number, filler: (index: number) => T): T[];
|
|
70
|
+
/**
|
|
71
|
+
* Sum helper to be used in reduce functions
|
|
72
|
+
*/
|
|
73
|
+
export declare const sum: (previous: number, current: number) => number;
|
|
74
|
+
/**
|
|
75
|
+
* Map for multi dimensional arrays where their nested arrays will be mapped in serial. The output array will have the length of the largest nested array. The callback function is called with variable arguments where each argument is the nested array value (or undefined if there are no more values).
|
|
76
|
+
*
|
|
77
|
+
* For example:
|
|
78
|
+
* @example
|
|
79
|
+
* ```ts
|
|
80
|
+
* const data = [[1, 2], [3], []];
|
|
81
|
+
* serialMap(data, cb);
|
|
82
|
+
*
|
|
83
|
+
* // where cb will be called 2 times
|
|
84
|
+
* // 1. call arguments: (1, 3, undefined)
|
|
85
|
+
* // 2. call arguments: (2, undefined, undefined)
|
|
86
|
+
* ```
|
|
87
|
+
*/
|
|
88
|
+
export declare const serialMap: <T, K>(array: T[][], callback: (...args: T[]) => K) => K[];
|
|
89
|
+
//#endregion
|
|
90
|
+
//#region src/utils/utils.d.ts
|
|
91
|
+
/**
|
|
92
|
+
* This function safely checks if an objects has an owned property.
|
|
93
|
+
* @param target The object where to check for a property
|
|
94
|
+
* @param property The property name
|
|
95
|
+
* @returns Returns true if the object owns the specified property
|
|
96
|
+
*/
|
|
97
|
+
export declare function safeHasProperty<T, K extends string>(target: T, property: K): target is FilterByKey<T, K>;
|
|
98
|
+
/**
|
|
99
|
+
* Checks if a value can be safely coerced to a number. This includes all values except null which result in finite numbers when coerced. This excludes NaN, since it's not finite.
|
|
100
|
+
*/
|
|
101
|
+
export declare function isNumeric(value: number): true;
|
|
102
|
+
export declare function isNumeric(value: unknown): boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Returns true on all falsey values except the numeric value 0.
|
|
105
|
+
*/
|
|
106
|
+
export declare function isFalseyButZero(value: unknown): value is undefined | null | false | '';
|
|
107
|
+
/**
|
|
108
|
+
* Returns a number if the passed parameter is a valid number or the function will return undefined. On all other values than a valid number, this function will return undefined.
|
|
109
|
+
*/
|
|
110
|
+
export declare function getNumberOrUndefined(value: number): number;
|
|
111
|
+
export declare function getNumberOrUndefined(value: unknown): number | undefined;
|
|
112
|
+
/**
|
|
113
|
+
* Checks if value is array of arrays or not.
|
|
114
|
+
*/
|
|
115
|
+
export declare function isArrayOfArrays(data: unknown): data is unknown[][];
|
|
116
|
+
/**
|
|
117
|
+
* Loop over array.
|
|
118
|
+
*/
|
|
119
|
+
export declare function each<T>(list: T[], callback: (item: T, index: number, itemIndex: number) => void, reverse?: boolean): void;
|
|
120
|
+
//#endregion
|
|
121
|
+
//#region src/event/EventEmitter.d.ts
|
|
122
|
+
/** A listener of one event: gets the event's payload. */
|
|
123
|
+
export type EventListener<T = any> = (data: T) => void;
|
|
124
|
+
/** A listener of every event (`'*'`): gets the event's name and payload. */
|
|
125
|
+
export type AllEventsListener<T = any> = (event: string, data: T) => void;
|
|
126
|
+
/** The 1.x event emitter: `on`, `off` and `emit` by event name, with `'*'` for all events. */
|
|
127
|
+
export declare class EventEmitter {
|
|
128
|
+
private readonly listeners;
|
|
129
|
+
private readonly allListeners;
|
|
130
|
+
/**
|
|
131
|
+
* Add an event handler for a specific event
|
|
132
|
+
* @param event The event name
|
|
133
|
+
* @param listener A event handler function
|
|
134
|
+
*/
|
|
135
|
+
on(event: '*', listener: AllEventsListener): void;
|
|
136
|
+
on(event: string, listener: EventListener): void;
|
|
137
|
+
/**
|
|
138
|
+
* Remove an event handler of a specific event name or remove all event handlers for a specific event.
|
|
139
|
+
* @param event The event name where a specific or all handlers should be removed
|
|
140
|
+
* @param [listener] An optional event handler function. If specified only this specific handler will be removed and otherwise all handlers are removed.
|
|
141
|
+
*/
|
|
142
|
+
off(event: '*', listener?: AllEventsListener): void;
|
|
143
|
+
off(event: string, listener?: EventListener): void;
|
|
144
|
+
/**
|
|
145
|
+
* Use this function to emit an event. All handlers that are listening for this event will be triggered with the data parameter.
|
|
146
|
+
* @param event The event name that should be triggered
|
|
147
|
+
* @param data Arbitrary data that will be passed to the event handler callback functions
|
|
148
|
+
*/
|
|
149
|
+
emit<T = any>(event: string, data: T): void;
|
|
150
|
+
}
|
|
151
|
+
//#endregion
|
|
152
|
+
//#region src/svg/SvgList.d.ts
|
|
153
|
+
type SvgMethods = Exclude<keyof Svg, 'constructor' | 'parent' | 'querySelector' | 'querySelectorAll' | 'replace' | 'append' | 'classes' | 'height' | 'width'>;
|
|
154
|
+
type SvgListMethods = { [method in SvgMethods]: (...args: Parameters<Svg[method]>) => SvgList; };
|
|
155
|
+
/**
|
|
156
|
+
* A list of {@link Svg} wrappers that calls an `Svg` method on all of them
|
|
157
|
+
* at once, such as `addClass` or `animate`. Each method returns the list,
|
|
158
|
+
* for chaining. {@link Svg.querySelectorAll} returns one.
|
|
159
|
+
*/
|
|
160
|
+
export declare class SvgList implements SvgListMethods {
|
|
161
|
+
private svgElements;
|
|
162
|
+
/**
|
|
163
|
+
* Wraps each element of the list in an {@link Svg}.
|
|
164
|
+
* @param nodeList An Array of SVG DOM nodes or a SVG DOM NodeList (as returned by document.querySelectorAll)
|
|
165
|
+
*/
|
|
166
|
+
constructor(nodeList: ArrayLike<Element>);
|
|
167
|
+
private call;
|
|
168
|
+
/** Sets attributes on every element, as {@link Svg.attr} does. */
|
|
169
|
+
attr(...args: Parameters<Svg['attr']>): this;
|
|
170
|
+
/** Adds a child element to every element, as {@link Svg.elem} does. */
|
|
171
|
+
elem(...args: Parameters<Svg['elem']>): this;
|
|
172
|
+
/** Calls {@link Svg.root} on every element; returns the list, not the roots. */
|
|
173
|
+
root(...args: Parameters<Svg['root']>): this;
|
|
174
|
+
/** Calls {@link Svg.getNode} on every element; returns the list, not the nodes. */
|
|
175
|
+
getNode(...args: Parameters<Svg['getNode']>): this;
|
|
176
|
+
/** Adds a `foreignObject` with the content to every element, as {@link Svg.foreignObject} does. */
|
|
177
|
+
foreignObject(...args: Parameters<Svg['foreignObject']>): this;
|
|
178
|
+
/** Adds a text node to every element, as {@link Svg.text} does. */
|
|
179
|
+
text(...args: Parameters<Svg['text']>): this;
|
|
180
|
+
/** Removes the children of every element, as {@link Svg.empty} does. */
|
|
181
|
+
empty(...args: Parameters<Svg['empty']>): this;
|
|
182
|
+
/** Removes every element from its parent, as {@link Svg.remove} does. */
|
|
183
|
+
remove(...args: Parameters<Svg['remove']>): this;
|
|
184
|
+
/** Adds classes to every element, as {@link Svg.addClass} does. */
|
|
185
|
+
addClass(...args: Parameters<Svg['addClass']>): this;
|
|
186
|
+
/** Removes classes from every element, as {@link Svg.removeClass} does. */
|
|
187
|
+
removeClass(...args: Parameters<Svg['removeClass']>): this;
|
|
188
|
+
/** Removes all classes from every element, as {@link Svg.removeAllClasses} does. */
|
|
189
|
+
removeAllClasses(...args: Parameters<Svg['removeAllClasses']>): this;
|
|
190
|
+
/** Animates attributes of every element with SMIL, as {@link Svg.animate} does. */
|
|
191
|
+
animate(...args: Parameters<Svg['animate']>): this;
|
|
192
|
+
}
|
|
193
|
+
//#endregion
|
|
194
|
+
//#region src/svg/Svg.d.ts
|
|
195
|
+
/**
|
|
196
|
+
* Wraps an SVG element for chaining: set attributes and classes, add child
|
|
197
|
+
* elements, and animate attributes with SMIL. Wrap an element of a rendered
|
|
198
|
+
* chart (from `elementOf` in a `mount` listener), or create a new one by
|
|
199
|
+
* name.
|
|
200
|
+
*
|
|
201
|
+
* @example
|
|
202
|
+
* ```ts
|
|
203
|
+
* import { barChart, findAll, Svg, type ChartPlugin } from 'chartist';
|
|
204
|
+
*
|
|
205
|
+
* // Bars grow from the axis, animated from a plugin's mount listener.
|
|
206
|
+
* const growBars: ChartPlugin = {
|
|
207
|
+
* name: 'grow-bars',
|
|
208
|
+
* install(chart) {
|
|
209
|
+
* chart.on('mount', ({ scene, elementOf }) => {
|
|
210
|
+
* for (const bar of findAll(scene, { role: 'bar' })) {
|
|
211
|
+
* const element = elementOf(bar);
|
|
212
|
+
* if (element) {
|
|
213
|
+
* new Svg(element).animate({
|
|
214
|
+
* y2: {
|
|
215
|
+
* begin: bar.ctx.valueIndex * 120,
|
|
216
|
+
* dur: 700,
|
|
217
|
+
* from: bar.attrs.y1,
|
|
218
|
+
* to: bar.attrs.y2,
|
|
219
|
+
* easing: 'easeOutQuint'
|
|
220
|
+
* }
|
|
221
|
+
* });
|
|
222
|
+
* }
|
|
223
|
+
* }
|
|
224
|
+
* });
|
|
225
|
+
* }
|
|
226
|
+
* };
|
|
227
|
+
*
|
|
228
|
+
* barChart('#chart', { series: [[5, 4, 3, 7]] }, { plugins: [growBars] });
|
|
229
|
+
* ```
|
|
230
|
+
*/
|
|
231
|
+
export declare class Svg {
|
|
232
|
+
/**
|
|
233
|
+
* The easing curves for {@link Svg.animate}, as 1.x had them on the class.
|
|
234
|
+
* @deprecated Use the {@link easings} export.
|
|
235
|
+
*/
|
|
236
|
+
static readonly Easing: {
|
|
237
|
+
easeInSine: number[];
|
|
238
|
+
easeOutSine: number[];
|
|
239
|
+
easeInOutSine: number[];
|
|
240
|
+
easeInQuad: number[];
|
|
241
|
+
easeOutQuad: number[];
|
|
242
|
+
easeInOutQuad: number[];
|
|
243
|
+
easeInCubic: number[];
|
|
244
|
+
easeOutCubic: number[];
|
|
245
|
+
easeInOutCubic: number[];
|
|
246
|
+
easeInQuart: number[];
|
|
247
|
+
easeOutQuart: number[];
|
|
248
|
+
easeInOutQuart: number[];
|
|
249
|
+
easeInQuint: number[];
|
|
250
|
+
easeOutQuint: number[];
|
|
251
|
+
easeInOutQuint: number[];
|
|
252
|
+
easeInExpo: number[];
|
|
253
|
+
easeOutExpo: number[];
|
|
254
|
+
easeInOutExpo: number[];
|
|
255
|
+
easeInCirc: number[];
|
|
256
|
+
easeOutCirc: number[];
|
|
257
|
+
easeInOutCirc: number[];
|
|
258
|
+
easeInBack: number[];
|
|
259
|
+
easeOutBack: number[];
|
|
260
|
+
easeInOutBack: number[];
|
|
261
|
+
};
|
|
262
|
+
private _node;
|
|
263
|
+
/**
|
|
264
|
+
* Creates an SVG element and wraps it, or wraps an existing element.
|
|
265
|
+
* @param name The name of the SVG element to create or an SVG dom element which should be wrapped into Svg
|
|
266
|
+
* @param attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added.
|
|
267
|
+
* @param className This class or class list will be added to the SVG element
|
|
268
|
+
* @param parent The parent SVG wrapper object where this newly created wrapper and it's element will be attached to as child
|
|
269
|
+
* @param insertFirst If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element
|
|
270
|
+
*/
|
|
271
|
+
constructor(name: string | Element, attributes?: Attributes, className?: string, parent?: Svg, insertFirst?: boolean);
|
|
272
|
+
/**
|
|
273
|
+
* Set attributes on the current SVG element of the wrapper you're currently working on.
|
|
274
|
+
* @param attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. If this parameter is a String then the function is used as a getter and will return the attribute value.
|
|
275
|
+
* @param ns If specified, the attribute will be obtained using getAttributeNs. In order to write namepsaced attributes you can use the namespace:attribute notation within the attributes object.
|
|
276
|
+
* @return The current wrapper object will be returned so it can be used for chaining or the attribute value if used as getter function.
|
|
277
|
+
*/
|
|
278
|
+
attr(attributes: string, ns?: string): string | null;
|
|
279
|
+
attr(attributes: Attributes): this;
|
|
280
|
+
/**
|
|
281
|
+
* Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.
|
|
282
|
+
* @param name The name of the SVG element that should be created as child element of the currently selected element wrapper
|
|
283
|
+
* @param attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added.
|
|
284
|
+
* @param className This class or class list will be added to the SVG element
|
|
285
|
+
* @param insertFirst If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element
|
|
286
|
+
* @return Returns a Svg wrapper object that can be used to modify the containing SVG data
|
|
287
|
+
*/
|
|
288
|
+
elem(name: string, attributes?: Attributes, className?: string, insertFirst?: boolean): Svg;
|
|
289
|
+
/**
|
|
290
|
+
* Wraps the element's parent.
|
|
291
|
+
* @returns The parent in a new `Svg`, or `null` if there is none or it isn't an SVG element.
|
|
292
|
+
*/
|
|
293
|
+
parent(): Svg | null;
|
|
294
|
+
/**
|
|
295
|
+
* This method returns a Svg wrapper around the root SVG element of the current tree.
|
|
296
|
+
* @return The root SVG element wrapped in a Svg element
|
|
297
|
+
*/
|
|
298
|
+
root(): Svg;
|
|
299
|
+
/**
|
|
300
|
+
* Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Svg wrapper.
|
|
301
|
+
* @param selector A CSS selector that is used to query for child SVG elements
|
|
302
|
+
* @return The SVG wrapper for the element found or null if no element was found
|
|
303
|
+
*/
|
|
304
|
+
querySelector(selector: string): Svg | null;
|
|
305
|
+
/**
|
|
306
|
+
* Finds all descendants of the element that match a CSS selector.
|
|
307
|
+
* @param selector A CSS selector that is used to query for child SVG elements
|
|
308
|
+
* @returns The elements found in an {@link SvgList} (empty if none match).
|
|
309
|
+
*/
|
|
310
|
+
querySelectorAll(selector: string): SvgList;
|
|
311
|
+
/**
|
|
312
|
+
* Returns the underlying SVG node for the current element.
|
|
313
|
+
*/
|
|
314
|
+
getNode<T extends Element = Element>(): T;
|
|
315
|
+
/**
|
|
316
|
+
* This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM.
|
|
317
|
+
* @param content The DOM Node, or HTML string that will be converted to a DOM Node, that is then placed into and wrapped by the foreignObject
|
|
318
|
+
* @param attributes An object with properties that will be added as attributes to the foreignObject element that is created. Attributes with undefined values will not be added.
|
|
319
|
+
* @param className This class or class list will be added to the SVG element
|
|
320
|
+
* @param insertFirst Specifies if the foreignObject should be inserted as first child
|
|
321
|
+
* @return New wrapper object that wraps the foreignObject element
|
|
322
|
+
*/
|
|
323
|
+
foreignObject(content: string | Node, attributes?: Attributes, className?: string, insertFirst?: boolean): Svg;
|
|
324
|
+
/**
|
|
325
|
+
* This method adds a new text element to the current Svg wrapper.
|
|
326
|
+
* @param t The text that should be added to the text element that is created
|
|
327
|
+
* @return The same wrapper object that was used to add the newly created element
|
|
328
|
+
*/
|
|
329
|
+
text(t: string): this;
|
|
330
|
+
/**
|
|
331
|
+
* This method will clear all child nodes of the current wrapper object.
|
|
332
|
+
* @return The same wrapper object that got emptied
|
|
333
|
+
*/
|
|
334
|
+
empty(): this;
|
|
335
|
+
/**
|
|
336
|
+
* Removes the element from its parent.
|
|
337
|
+
* @returns The parent it had, wrapped in a new `Svg`, or `null` if it had
|
|
338
|
+
* none or the parent isn't an SVG element.
|
|
339
|
+
*/
|
|
340
|
+
remove(): Svg | null;
|
|
341
|
+
/**
|
|
342
|
+
* This method will replace the element with a new element that can be created outside of the current DOM.
|
|
343
|
+
* @param newElement The new Svg object that will be used to replace the current wrapper object
|
|
344
|
+
* @return The wrapper of the new element
|
|
345
|
+
*/
|
|
346
|
+
replace(newElement: Svg): Svg;
|
|
347
|
+
/**
|
|
348
|
+
* This method will append an element to the current element as a child.
|
|
349
|
+
* @param element The Svg element that should be added as a child
|
|
350
|
+
* @param insertFirst Specifies if the element should be inserted as first child
|
|
351
|
+
* @return The wrapper of the appended object
|
|
352
|
+
*/
|
|
353
|
+
append(element: Svg, insertFirst?: boolean): this;
|
|
354
|
+
/**
|
|
355
|
+
* Returns an array of class names that are attached to the current wrapper element. This method can not be chained further.
|
|
356
|
+
* @return A list of classes or an empty array if there are no classes on the current element
|
|
357
|
+
*/
|
|
358
|
+
classes(): string[];
|
|
359
|
+
/**
|
|
360
|
+
* Adds one or a space separated list of classes to the current element and ensures the classes are only existing once.
|
|
361
|
+
* @param names A white space separated list of class names
|
|
362
|
+
* @return The wrapper of the current element
|
|
363
|
+
*/
|
|
364
|
+
addClass(names: string): this;
|
|
365
|
+
/**
|
|
366
|
+
* Removes one or a space separated list of classes from the current element.
|
|
367
|
+
* @param names A white space separated list of class names
|
|
368
|
+
* @return The wrapper of the current element
|
|
369
|
+
*/
|
|
370
|
+
removeClass(names: string): this;
|
|
371
|
+
/**
|
|
372
|
+
* Removes all classes from the current element.
|
|
373
|
+
* @return The wrapper of the current element
|
|
374
|
+
*/
|
|
375
|
+
removeAllClasses(): this;
|
|
376
|
+
/**
|
|
377
|
+
* Get element height using `clientHeight`
|
|
378
|
+
* @return The elements height in pixels
|
|
379
|
+
*/
|
|
380
|
+
height(): number;
|
|
381
|
+
/**
|
|
382
|
+
* Get element width using `clientWidth`
|
|
383
|
+
* @return The elements width in pixels
|
|
384
|
+
*/
|
|
385
|
+
width(): number;
|
|
386
|
+
/**
|
|
387
|
+
* Animates attributes of the element with SMIL: adds an `<animate>`
|
|
388
|
+
* element per attribute. Each {@link AnimationDefinition} holds SMIL
|
|
389
|
+
* attributes (usually `begin`, `dur`, `from` and `to`, see
|
|
390
|
+
* https://www.w3.org/TR/SVG11/animate.html), plus an optional `easing`: a
|
|
391
|
+
* name from {@link easings} or four numbers of a cubic Bézier curve.
|
|
392
|
+
*
|
|
393
|
+
* An animations object could look like this:
|
|
394
|
+
* ```ts
|
|
395
|
+
* element.animate({
|
|
396
|
+
* opacity: {
|
|
397
|
+
* dur: 1000,
|
|
398
|
+
* from: 0,
|
|
399
|
+
* to: 1
|
|
400
|
+
* },
|
|
401
|
+
* x1: {
|
|
402
|
+
* dur: '1000ms',
|
|
403
|
+
* from: 100,
|
|
404
|
+
* to: 200,
|
|
405
|
+
* easing: 'easeOutQuart'
|
|
406
|
+
* },
|
|
407
|
+
* y1: {
|
|
408
|
+
* dur: '2s',
|
|
409
|
+
* from: 0,
|
|
410
|
+
* to: 100
|
|
411
|
+
* }
|
|
412
|
+
* });
|
|
413
|
+
* ```
|
|
414
|
+
*
|
|
415
|
+
* `dur` and `begin` given as numbers are milliseconds.
|
|
416
|
+
*
|
|
417
|
+
* **Guided mode** (the default) makes one-off animations behave: the
|
|
418
|
+
* attribute is set to `from` right away, even before a delayed start; the
|
|
419
|
+
* animation starts after `begin` ms (a timeout, not the document's
|
|
420
|
+
* timeline); and when it ends, the attribute keeps `to` and the
|
|
421
|
+
* `<animate>` element is removed. Pass `guided: false` to write the
|
|
422
|
+
* `<animate>` elements as given. An attribute with an array of
|
|
423
|
+
* definitions never runs guided.
|
|
424
|
+
* @param animations The attributes to animate, each with a definition, or
|
|
425
|
+
* an array of definitions to run several animations on one attribute.
|
|
426
|
+
* @param guided Runs the animations in guided mode (see above).
|
|
427
|
+
* @param eventEmitter Gets `animationBegin` and `animationEnd` events
|
|
428
|
+
* ({@link AnimationEvent}) when an animation starts and ends. With the
|
|
429
|
+
* compat plugin, elements of a chart send them to the chart by default.
|
|
430
|
+
* @returns The same wrapper, for chaining.
|
|
431
|
+
*/
|
|
432
|
+
animate(animations: Record<string, AnimationDefinition | AnimationDefinition[]>, guided?: boolean, eventEmitter?: EventEmitter): this;
|
|
433
|
+
}
|
|
434
|
+
//#endregion
|
|
435
|
+
//#region src/svg/types.d.ts
|
|
436
|
+
/** The end point every path command has. */
|
|
437
|
+
export interface BasePathParams {
|
|
438
|
+
/** The x of the command's end point. */
|
|
439
|
+
x: number;
|
|
440
|
+
/** The y of the command's end point. */
|
|
441
|
+
y: number;
|
|
442
|
+
}
|
|
443
|
+
/** The parameters of a move command (`M`): the point to move to. */
|
|
444
|
+
export type MoveParams = BasePathParams;
|
|
445
|
+
/** The parameters of a line command (`L`): the point to draw to. */
|
|
446
|
+
export type LineParams = BasePathParams;
|
|
447
|
+
/** The parameters of a cubic Bézier curve command (`C`). */
|
|
448
|
+
export interface CurveParams extends BasePathParams {
|
|
449
|
+
/** The x of the first control point. */
|
|
450
|
+
x1: number;
|
|
451
|
+
/** The y of the first control point. */
|
|
452
|
+
y1: number;
|
|
453
|
+
/** The x of the second control point. */
|
|
454
|
+
x2: number;
|
|
455
|
+
/** The y of the second control point. */
|
|
456
|
+
y2: number;
|
|
457
|
+
}
|
|
458
|
+
/** The parameters of an elliptical arc command (`A`), as in SVG. */
|
|
459
|
+
export interface ArcParams extends BasePathParams {
|
|
460
|
+
/** The x radius of the ellipse. */
|
|
461
|
+
rx: number;
|
|
462
|
+
/** The y radius of the ellipse. */
|
|
463
|
+
ry: number;
|
|
464
|
+
/** The rotation of the ellipse's x axis, in degrees. */
|
|
465
|
+
xAr: number;
|
|
466
|
+
/** The large arc flag: `1` takes the longer way around, `0` the shorter. */
|
|
467
|
+
lAf: number;
|
|
468
|
+
/** The sweep flag: `1` draws the arc clockwise, `0` counterclockwise. */
|
|
469
|
+
sf: number;
|
|
470
|
+
}
|
|
471
|
+
/** The parameters of any path command. */
|
|
472
|
+
export type PathParams = MoveParams | LineParams | CurveParams | ArcParams;
|
|
473
|
+
/** A command of an {@link SvgPath}: its letter, its parameters and the data of its point. */
|
|
474
|
+
export type PathCommand<T extends PathParams = PathParams> = {
|
|
475
|
+
/** The command letter: `M`, `L`, `C` or `A` (lowercase when relative). */
|
|
476
|
+
command: string;
|
|
477
|
+
/** The value of the chart point the command draws to, if any. */
|
|
478
|
+
data?: SegmentData;
|
|
479
|
+
} & T;
|
|
480
|
+
/** The options of an {@link SvgPath}. */
|
|
481
|
+
export interface SvgPathOptions {
|
|
482
|
+
/** The decimals numbers are rounded to when the path is stringified; `0` doesn't round. */
|
|
483
|
+
accuracy?: number;
|
|
484
|
+
}
|
|
485
|
+
/**
|
|
486
|
+
* SVG attributes by name, for {@link Svg.attr}. `undefined` values are
|
|
487
|
+
* skipped; names with a prefix such as `ct:value` use its namespace.
|
|
488
|
+
*/
|
|
489
|
+
export type Attributes = Record<string, number | string | undefined | null>;
|
|
490
|
+
/**
|
|
491
|
+
* One SMIL animation of an attribute, for {@link Svg.animate}: the
|
|
492
|
+
* attributes of its `<animate>` element, plus an `easing`.
|
|
493
|
+
*/
|
|
494
|
+
export interface AnimationDefinition {
|
|
495
|
+
/** The `id` of the `<animate>` element, to start other animations relative to it. */
|
|
496
|
+
id?: string;
|
|
497
|
+
/**
|
|
498
|
+
* The easing: a name from {@link easings} or four numbers of a cubic
|
|
499
|
+
* Bézier curve. Sets `calcMode`, `keySplines` and `keyTimes` for you.
|
|
500
|
+
*/
|
|
501
|
+
easing?: number[] | keyof typeof easings;
|
|
502
|
+
/** How values are interpolated (SMIL `calcMode`); an `easing` sets `'spline'`. */
|
|
503
|
+
calcMode?: 'discrete' | 'linear' | 'paced' | 'spline';
|
|
504
|
+
/** Whether the animation can restart while it's running (SMIL `restart`). */
|
|
505
|
+
restart?: 'always' | 'whenNotActive' | 'never';
|
|
506
|
+
/** How many times the animation repeats, or `'indefinite'`. */
|
|
507
|
+
repeatCount?: number | 'indefinite';
|
|
508
|
+
/** How long the animation repeats in total, or `'indefinite'`. */
|
|
509
|
+
repeatDur?: string | 'indefinite';
|
|
510
|
+
/** The Bézier control points of a `'spline'` animation (SMIL `keySplines`); an `easing` sets them. */
|
|
511
|
+
keySplines?: string;
|
|
512
|
+
/** The times of the key values, from `0` to `1` (SMIL `keyTimes`); an `easing` sets them. */
|
|
513
|
+
keyTimes?: string;
|
|
514
|
+
/** `'freeze'` keeps the last value after the animation, `'remove'` resets it. Guided mode sets `'freeze'`. */
|
|
515
|
+
fill?: string;
|
|
516
|
+
/** The minimum active duration (SMIL `min`). */
|
|
517
|
+
min?: number | string;
|
|
518
|
+
/** The maximum active duration (SMIL `max`). */
|
|
519
|
+
max?: number | string;
|
|
520
|
+
/** When the animation starts: ms as a number, or a SMIL time such as `'1s'`. */
|
|
521
|
+
begin?: number | string;
|
|
522
|
+
/** When the animation ends (SMIL `end`). */
|
|
523
|
+
end?: number | string;
|
|
524
|
+
/** How long the animation runs: ms as a number, or a SMIL time such as `'2s'`. */
|
|
525
|
+
dur: number | string;
|
|
526
|
+
/** The value the attribute starts at. */
|
|
527
|
+
from: number | string;
|
|
528
|
+
/** The value the attribute ends at. */
|
|
529
|
+
to: number | string;
|
|
530
|
+
}
|
|
531
|
+
/**
|
|
532
|
+
* The payload of the `animationBegin` and `animationEnd` events that
|
|
533
|
+
* {@link Svg.animate} emits when it gets an event emitter.
|
|
534
|
+
*/
|
|
535
|
+
export interface AnimationEvent {
|
|
536
|
+
/** The animated element. */
|
|
537
|
+
element: Svg;
|
|
538
|
+
/** The `<animate>` element. */
|
|
539
|
+
animate: Element;
|
|
540
|
+
/** The animation's definition, as given. */
|
|
541
|
+
params: AnimationDefinition;
|
|
542
|
+
}
|
|
543
|
+
//#endregion
|
|
544
|
+
//#region src/svg/animation.d.ts
|
|
545
|
+
/**
|
|
546
|
+
* The named easing curves for {@link Svg.animate}, from `easeInSine` to
|
|
547
|
+
* `easeInOutBack`: each the four numbers of a cubic Bézier curve. Name one
|
|
548
|
+
* as an animation's `easing`, or pass four numbers of your own, such as
|
|
549
|
+
* `easing: [0.25, 0.1, 0.25, 1]`.
|
|
550
|
+
*
|
|
551
|
+
* @example
|
|
552
|
+
* ```ts
|
|
553
|
+
* import { lineChart, findAll, Svg, type ChartPlugin } from 'chartist';
|
|
554
|
+
*
|
|
555
|
+
* // Points drop in from the top and bounce a little at the end.
|
|
556
|
+
* const dropIn: ChartPlugin = {
|
|
557
|
+
* name: 'drop-in',
|
|
558
|
+
* install(chart) {
|
|
559
|
+
* chart.on('mount', ({ scene, elementOf }) => {
|
|
560
|
+
* for (const point of findAll(scene, { role: 'point' })) {
|
|
561
|
+
* const element = elementOf(point);
|
|
562
|
+
* const { y } = point.ctx;
|
|
563
|
+
* if (element) {
|
|
564
|
+
* new Svg(element).animate({
|
|
565
|
+
* y1: { dur: 600, from: 0, to: y, easing: 'easeOutBack' },
|
|
566
|
+
* y2: { dur: 600, from: 0, to: y, easing: 'easeOutBack' }
|
|
567
|
+
* });
|
|
568
|
+
* }
|
|
569
|
+
* }
|
|
570
|
+
* });
|
|
571
|
+
* }
|
|
572
|
+
* };
|
|
573
|
+
*
|
|
574
|
+
* lineChart('#chart', { series: [[5, 2, 4, 3]] }, { plugins: [dropIn] });
|
|
575
|
+
* ```
|
|
576
|
+
*/
|
|
577
|
+
export declare const easings: {
|
|
578
|
+
easeInSine: number[];
|
|
579
|
+
easeOutSine: number[];
|
|
580
|
+
easeInOutSine: number[];
|
|
581
|
+
easeInQuad: number[];
|
|
582
|
+
easeOutQuad: number[];
|
|
583
|
+
easeInOutQuad: number[];
|
|
584
|
+
easeInCubic: number[];
|
|
585
|
+
easeOutCubic: number[];
|
|
586
|
+
easeInOutCubic: number[];
|
|
587
|
+
easeInQuart: number[];
|
|
588
|
+
easeOutQuart: number[];
|
|
589
|
+
easeInOutQuart: number[];
|
|
590
|
+
easeInQuint: number[];
|
|
591
|
+
easeOutQuint: number[];
|
|
592
|
+
easeInOutQuint: number[];
|
|
593
|
+
easeInExpo: number[];
|
|
594
|
+
easeOutExpo: number[];
|
|
595
|
+
easeInOutExpo: number[];
|
|
596
|
+
easeInCirc: number[];
|
|
597
|
+
easeOutCirc: number[];
|
|
598
|
+
easeInOutCirc: number[];
|
|
599
|
+
easeInBack: number[];
|
|
600
|
+
easeOutBack: number[];
|
|
601
|
+
easeInOutBack: number[];
|
|
602
|
+
};
|
|
603
|
+
//#endregion
|
|
604
|
+
//#region src/svg/SvgPath.d.ts
|
|
605
|
+
/**
|
|
606
|
+
* Builds and changes the `d` of an SVG `path`: move, line, curve and arc
|
|
607
|
+
* commands, with a cursor where new commands go. Lines, areas and slices
|
|
608
|
+
* are `SvgPath`s, and interpolations such as {@link Interpolation.cardinal}
|
|
609
|
+
* return one. Each command can carry the data of its point, which the
|
|
610
|
+
* chart reads back for its points.
|
|
611
|
+
*
|
|
612
|
+
* @example
|
|
613
|
+
* ```ts
|
|
614
|
+
* import { SvgPath } from 'chartist';
|
|
615
|
+
*
|
|
616
|
+
* const path = new SvgPath()
|
|
617
|
+
* .move(0, 100)
|
|
618
|
+
* .line(50, 20)
|
|
619
|
+
* .curve(70, 0, 90, 0, 100, 40);
|
|
620
|
+
*
|
|
621
|
+
* path.stringify(); // 'M0,100L50,20C70,0,90,0,100,40'
|
|
622
|
+
*
|
|
623
|
+
* // 10px to the right, at half the height
|
|
624
|
+
* path.translate(10, 0).scale(1, 0.5);
|
|
625
|
+
* ```
|
|
626
|
+
*/
|
|
627
|
+
export declare class SvgPath {
|
|
628
|
+
private readonly close;
|
|
629
|
+
/**
|
|
630
|
+
* Joins paths into a new path, in the order given. The new path shares
|
|
631
|
+
* the commands of the paths (they aren't copied).
|
|
632
|
+
* @param paths A list of paths to be joined together. The order is important.
|
|
633
|
+
* @param close If the newly created path should be a closed path
|
|
634
|
+
* @param options Path options for the newly created path.
|
|
635
|
+
*/
|
|
636
|
+
static join(paths: SvgPath[], close?: boolean, options?: SvgPathOptions): SvgPath;
|
|
637
|
+
/** The path's commands, in order: each with its letter, its coordinates and the data of its point. */
|
|
638
|
+
pathElements: PathCommand[];
|
|
639
|
+
private pos;
|
|
640
|
+
private options;
|
|
641
|
+
/**
|
|
642
|
+
* Creates an empty path.
|
|
643
|
+
* @param close Closes the path when it's stringified (a `Z` at the end).
|
|
644
|
+
* @param options The path's options, such as the rounding `accuracy`.
|
|
645
|
+
*/
|
|
646
|
+
constructor(close?: boolean, options?: SvgPathOptions);
|
|
647
|
+
/**
|
|
648
|
+
* Gets or sets the current position (cursor) inside of the path. You can move around the cursor freely but limited to 0 or the count of existing elements. All modifications with element functions will insert new elements at the position of this cursor.
|
|
649
|
+
* @param pos If a number is passed then the cursor is set to this position in the path element array.
|
|
650
|
+
* @return If the position parameter was passed then the return value will be the path object for easy call chaining. If no position parameter was passed then the current position is returned.
|
|
651
|
+
*/
|
|
652
|
+
position(pos: number): this;
|
|
653
|
+
position(): number;
|
|
654
|
+
/**
|
|
655
|
+
* Removes elements from the path starting at the current position.
|
|
656
|
+
* @param count Number of path elements that should be removed from the current position.
|
|
657
|
+
* @return The current path object for easy call chaining.
|
|
658
|
+
*/
|
|
659
|
+
remove(count: number): this;
|
|
660
|
+
/**
|
|
661
|
+
* Use this function to add a new move SVG path element.
|
|
662
|
+
* @param x The x coordinate for the move element.
|
|
663
|
+
* @param y The y coordinate for the move element.
|
|
664
|
+
* @param relative If set to true the move element will be created with relative coordinates (lowercase letter)
|
|
665
|
+
* @param data Any data that should be stored with the element object that will be accessible in pathElement
|
|
666
|
+
* @return The current path object for easy call chaining.
|
|
667
|
+
*/
|
|
668
|
+
move(x: number, y: number, relative?: boolean, data?: SegmentData): this;
|
|
669
|
+
/**
|
|
670
|
+
* Use this function to add a new line SVG path element.
|
|
671
|
+
* @param x The x coordinate for the line element.
|
|
672
|
+
* @param y The y coordinate for the line element.
|
|
673
|
+
* @param relative If set to true the line element will be created with relative coordinates (lowercase letter)
|
|
674
|
+
* @param data Any data that should be stored with the element object that will be accessible in pathElement
|
|
675
|
+
* @return The current path object for easy call chaining.
|
|
676
|
+
*/
|
|
677
|
+
line(x: number, y: number, relative?: boolean, data?: SegmentData): this;
|
|
678
|
+
/**
|
|
679
|
+
* Use this function to add a new curve SVG path element.
|
|
680
|
+
* @param x1 The x coordinate for the first control point of the bezier curve.
|
|
681
|
+
* @param y1 The y coordinate for the first control point of the bezier curve.
|
|
682
|
+
* @param x2 The x coordinate for the second control point of the bezier curve.
|
|
683
|
+
* @param y2 The y coordinate for the second control point of the bezier curve.
|
|
684
|
+
* @param x The x coordinate for the target point of the curve element.
|
|
685
|
+
* @param y The y coordinate for the target point of the curve element.
|
|
686
|
+
* @param relative If set to true the curve element will be created with relative coordinates (lowercase letter)
|
|
687
|
+
* @param data Any data that should be stored with the element object that will be accessible in pathElement
|
|
688
|
+
* @return The current path object for easy call chaining.
|
|
689
|
+
*/
|
|
690
|
+
curve(x1: number, y1: number, x2: number, y2: number, x: number, y: number, relative?: boolean, data?: SegmentData): this;
|
|
691
|
+
/**
|
|
692
|
+
* Use this function to add a new non-bezier curve SVG path element.
|
|
693
|
+
* @param rx The radius to be used for the x-axis of the arc.
|
|
694
|
+
* @param ry The radius to be used for the y-axis of the arc.
|
|
695
|
+
* @param xAr Defines the orientation of the arc
|
|
696
|
+
* @param lAf Large arc flag
|
|
697
|
+
* @param sf Sweep flag
|
|
698
|
+
* @param x The x coordinate for the target point of the curve element.
|
|
699
|
+
* @param y The y coordinate for the target point of the curve element.
|
|
700
|
+
* @param relative If set to true the curve element will be created with relative coordinates (lowercase letter)
|
|
701
|
+
* @param data Any data that should be stored with the element object that will be accessible in pathElement
|
|
702
|
+
* @return The current path object for easy call chaining.
|
|
703
|
+
*/
|
|
704
|
+
arc(rx: number, ry: number, xAr: number, lAf: number, sf: number, x: number, y: number, relative?: boolean, data?: SegmentData): this;
|
|
705
|
+
/**
|
|
706
|
+
* Parses the `d` of an SVG path and inserts its commands at the cursor. A
|
|
707
|
+
* closing `Z` at the end is dropped: the `close` of the path object decides
|
|
708
|
+
* that.
|
|
709
|
+
* @param path An SVG path of move (`M`), line (`L`), curve (`C`) and arc (`A`) commands, absolute or relative.
|
|
710
|
+
* @return The current path object for easy call chaining.
|
|
711
|
+
*/
|
|
712
|
+
parse(path: string): this;
|
|
713
|
+
/**
|
|
714
|
+
* Writes the path as a string for the `d` attribute of a `path` element.
|
|
715
|
+
* Numbers are rounded to the `accuracy` option's decimals (no rounding
|
|
716
|
+
* with `0`), and a closed path ends with `Z`.
|
|
717
|
+
*/
|
|
718
|
+
stringify(): string;
|
|
719
|
+
/**
|
|
720
|
+
* Scales all elements in the current SVG path object. There is an individual parameter for each coordinate. Scaling will also be done for control points of curves, affecting the given coordinate.
|
|
721
|
+
* @param x The number which will be used to scale the x, x1 and x2 of all path elements.
|
|
722
|
+
* @param y The number which will be used to scale the y, y1 and y2 of all path elements.
|
|
723
|
+
* @return The current path object for easy call chaining.
|
|
724
|
+
*/
|
|
725
|
+
scale(x: number, y: number): this;
|
|
726
|
+
/**
|
|
727
|
+
* Translates all elements in the current SVG path object. The translation is relative and there is an individual parameter for each coordinate. Translation will also be done for control points of curves, affecting the given coordinate.
|
|
728
|
+
* @param x The number which will be used to translate the x, x1 and x2 of all path elements.
|
|
729
|
+
* @param y The number which will be used to translate the y, y1 and y2 of all path elements.
|
|
730
|
+
* @return The current path object for easy call chaining.
|
|
731
|
+
*/
|
|
732
|
+
translate(x: number, y: number): this;
|
|
733
|
+
/**
|
|
734
|
+
* This function will run over all existing path elements and then loop over their attributes. The callback function will be called for every path element attribute that exists in the current path.
|
|
735
|
+
* The method signature of the callback function looks like this:
|
|
736
|
+
* ```javascript
|
|
737
|
+
* function(pathElement, paramName, pathElementIndex, paramIndex, pathElements)
|
|
738
|
+
* ```
|
|
739
|
+
* If something else than undefined is returned by the callback function, this value will be used to replace the old value. This allows you to build custom transformations of path objects that can't be achieved using the basic transformation functions scale and translate.
|
|
740
|
+
* @param transformFnc The callback function for the transformation. Check the signature in the function description.
|
|
741
|
+
* @return The current path object for easy call chaining.
|
|
742
|
+
*/
|
|
743
|
+
transform(transformFnc: <T extends PathParams = PathParams>(cmd: PathCommand<T>, param: keyof T, cmdIndex: number, paramIndex: number, cmds: PathCommand<T>[]) => number | void): this;
|
|
744
|
+
/**
|
|
745
|
+
* This function clones a whole path object with all its properties. This is a deep clone and path element objects will also be cloned.
|
|
746
|
+
* @param close Optional option to set the new cloned path to closed. If not specified or false, the original path close option will be used.
|
|
747
|
+
*/
|
|
748
|
+
clone(close?: boolean): SvgPath;
|
|
749
|
+
/**
|
|
750
|
+
* Splits the path into new paths, each starting at the given command,
|
|
751
|
+
* such as `'M'` to get the separate pieces of a line with holes. The new
|
|
752
|
+
* paths share the commands, are open and have the default options.
|
|
753
|
+
* @param command The command letter to split at.
|
|
754
|
+
*/
|
|
755
|
+
splitByCommand(command: string): SvgPath[];
|
|
756
|
+
}
|
|
757
|
+
//#endregion
|
|
758
|
+
//#region src/axes/Axis.d.ts
|
|
759
|
+
/** The names an axis uses per dimension: its position, length and direction, and its edges in the {@link ChartRect}. */
|
|
760
|
+
export declare const axisUnits: {
|
|
761
|
+
readonly x: {
|
|
762
|
+
readonly pos: "x";
|
|
763
|
+
readonly len: "width";
|
|
764
|
+
readonly dir: "horizontal";
|
|
765
|
+
readonly rectStart: "x1";
|
|
766
|
+
readonly rectEnd: "x2";
|
|
767
|
+
readonly rectOffset: "y2";
|
|
768
|
+
};
|
|
769
|
+
readonly y: {
|
|
770
|
+
readonly pos: "y";
|
|
771
|
+
readonly len: "height";
|
|
772
|
+
readonly dir: "vertical";
|
|
773
|
+
readonly rectStart: "y2";
|
|
774
|
+
readonly rectEnd: "y1";
|
|
775
|
+
readonly rectOffset: "x1";
|
|
776
|
+
};
|
|
777
|
+
};
|
|
778
|
+
/** The units of the X axis: `axisUnits.x`. */
|
|
779
|
+
export type XAxisUnits = typeof axisUnits.x;
|
|
780
|
+
/** The units of the Y axis: `axisUnits.y`. */
|
|
781
|
+
export type YAxisUnits = typeof axisUnits.y;
|
|
782
|
+
/** The units of either axis. */
|
|
783
|
+
export type AxisUnits = XAxisUnits | YAxisUnits;
|
|
784
|
+
/**
|
|
785
|
+
* The base class of the 1.x axes: projects values to px along the drawing
|
|
786
|
+
* area and draws its grid lines and labels.
|
|
787
|
+
*/
|
|
788
|
+
export declare abstract class Axis {
|
|
789
|
+
readonly units: AxisUnits;
|
|
790
|
+
private readonly chartRect;
|
|
791
|
+
private readonly ticks;
|
|
792
|
+
readonly counterUnits: AxisUnits;
|
|
793
|
+
readonly range: {
|
|
794
|
+
min: number;
|
|
795
|
+
max: number;
|
|
796
|
+
} | undefined;
|
|
797
|
+
readonly axisLength: number;
|
|
798
|
+
private readonly gridOffset;
|
|
799
|
+
constructor(units: AxisUnits, chartRect: ChartRect, ticks: Label[]);
|
|
800
|
+
abstract projectValue(value: NormalizedSeriesPrimitiveValue | Label, index?: number, series?: NormalizedSeries): number;
|
|
801
|
+
createGridAndLabels(gridGroup: Svg, labelGroup: Svg, chartOptions: OptionsWithDefaults, eventEmitter: EventEmitter): void;
|
|
802
|
+
}
|
|
803
|
+
//#endregion
|
|
804
|
+
//#region src/axes/AutoScaleAxis.d.ts
|
|
805
|
+
/** The 1.x axis with a scale fitted to the values, in round steps at least `scaleMinSpace` px apart. */
|
|
806
|
+
export declare class AutoScaleAxis extends Axis {
|
|
807
|
+
private readonly bounds;
|
|
808
|
+
readonly range: {
|
|
809
|
+
min: number;
|
|
810
|
+
max: number;
|
|
811
|
+
};
|
|
812
|
+
constructor(axisUnit: AxisUnits, data: NormalizedSeries[], chartRect: ChartRect, options: AxisOptions);
|
|
813
|
+
projectValue(value: NormalizedSeriesPrimitiveValue): number;
|
|
814
|
+
}
|
|
815
|
+
//#endregion
|
|
816
|
+
//#region src/axes/FixedScaleAxis.d.ts
|
|
817
|
+
/** The 1.x axis with fixed ticks: the `ticks` option, or `divisor` equal steps from low to high, with a tick at both ends. */
|
|
818
|
+
export declare class FixedScaleAxis extends Axis {
|
|
819
|
+
readonly range: {
|
|
820
|
+
min: number;
|
|
821
|
+
max: number;
|
|
822
|
+
};
|
|
823
|
+
constructor(axisUnit: AxisUnits, data: NormalizedSeries[], chartRect: ChartRect, options: AxisOptions);
|
|
824
|
+
projectValue(value: NormalizedSeriesPrimitiveValue): number;
|
|
825
|
+
}
|
|
826
|
+
//#endregion
|
|
827
|
+
//#region src/axes/StepAxis.d.ts
|
|
828
|
+
/** The 1.x axis with one step per tick, such as the labels of a line chart's X axis. */
|
|
829
|
+
export declare class StepAxis extends Axis {
|
|
830
|
+
private readonly stepLength;
|
|
831
|
+
readonly stretch: boolean;
|
|
832
|
+
constructor(axisUnit: AxisUnits, _data: unknown, chartRect: ChartRect, options: AxisOptions);
|
|
833
|
+
projectValue(_value: unknown, index: number): number;
|
|
834
|
+
}
|
|
835
|
+
//#endregion
|
|
836
|
+
//#region src/axes/types.d.ts
|
|
837
|
+
/** The 1.x axis classes an axis's `type` option takes: {@link AutoScaleAxis}, {@link FixedScaleAxis} or {@link StepAxis}. */
|
|
838
|
+
export type AxisType = typeof AutoScaleAxis | typeof FixedScaleAxis | typeof StepAxis;
|
|
839
|
+
//#endregion
|
|
840
|
+
//#region src/core/types.d.ts
|
|
841
|
+
/** Space in px between the chart's edges and its drawing area, per side. */
|
|
842
|
+
export interface ChartPadding {
|
|
843
|
+
/** Space above the drawing area, in px. */
|
|
844
|
+
top: number;
|
|
845
|
+
/** Space right of the drawing area, in px. */
|
|
846
|
+
right: number;
|
|
847
|
+
/** Space below the drawing area, in px. */
|
|
848
|
+
bottom: number;
|
|
849
|
+
/** Space left of the drawing area, in px. */
|
|
850
|
+
left: number;
|
|
851
|
+
}
|
|
852
|
+
/**
|
|
853
|
+
* The drawing area of a 1.x chart in px: `x1`, `y1` is its bottom left
|
|
854
|
+
* corner and `x2`, `y2` its top right (SVG y grows downward, so `y1` is the
|
|
855
|
+
* larger one).
|
|
856
|
+
*/
|
|
857
|
+
export interface ChartRect {
|
|
858
|
+
/** The left edge of the drawing area, in px. */
|
|
859
|
+
x1: number;
|
|
860
|
+
/** The right edge of the drawing area, in px. */
|
|
861
|
+
x2: number;
|
|
862
|
+
/** The bottom edge of the drawing area, in px. */
|
|
863
|
+
y1: number;
|
|
864
|
+
/** The top edge of the drawing area, in px. */
|
|
865
|
+
y2: number;
|
|
866
|
+
/** The chart padding on each side, in px. */
|
|
867
|
+
padding: ChartPadding;
|
|
868
|
+
/** The width of the drawing area (`x2 - x1`), in px. */
|
|
869
|
+
width(): number;
|
|
870
|
+
/** The height of the drawing area (`y1 - y2`), in px. */
|
|
871
|
+
height(): number;
|
|
872
|
+
}
|
|
873
|
+
/**
|
|
874
|
+
* A 1.x plugin: a function that gets the chart object (and its options)
|
|
875
|
+
* and registers listeners with `chart.on('draw', …)`. It runs with the
|
|
876
|
+
* `compat` plugin from `chartist/compat`, whose `fromLegacyPlugin()` also
|
|
877
|
+
* turns it into a v2 plugin.
|
|
878
|
+
*/
|
|
879
|
+
export type Plugin = (chart: any, options?: any) => void;
|
|
880
|
+
/**
|
|
881
|
+
* Anything you attach to a series or value as `meta`, such as a tooltip
|
|
882
|
+
* text. Chartist doesn't read it: it hands it back in events and writes it
|
|
883
|
+
* to the `ct:meta` attribute.
|
|
884
|
+
*/
|
|
885
|
+
export type Meta = any;
|
|
886
|
+
/** The size of an SVG `viewBox`. */
|
|
887
|
+
export interface ViewBox {
|
|
888
|
+
/** The viewBox width, in SVG units. */
|
|
889
|
+
width: number;
|
|
890
|
+
/** The viewBox height, in SVG units. */
|
|
891
|
+
height: number;
|
|
892
|
+
}
|
|
893
|
+
/**
|
|
894
|
+
* The options all 1.x charts share: size, value range, padding, axes, class
|
|
895
|
+
* names and plugins. {@link LineChartOptions}, {@link BarChartOptions} and
|
|
896
|
+
* {@link PieChartOptions} build on them.
|
|
897
|
+
*/
|
|
898
|
+
export interface Options<TXAxisOptions = AxisOptions, TYAxisOptions = TXAxisOptions> {
|
|
899
|
+
/**
|
|
900
|
+
* The chart's width: px as a number, or a CSS length such as `'100%'`.
|
|
901
|
+
* Without it, the chart takes the width of its container.
|
|
902
|
+
*/
|
|
903
|
+
width?: number | string;
|
|
904
|
+
/**
|
|
905
|
+
* The chart's height: px as a number, or a CSS length such as `'300px'`.
|
|
906
|
+
* Without it, the chart takes the height of its container.
|
|
907
|
+
*/
|
|
908
|
+
height?: number | string;
|
|
909
|
+
/**
|
|
910
|
+
* The lowest value the value axis shows, instead of the data's lowest.
|
|
911
|
+
* Values below it are drawn outside the drawing area.
|
|
912
|
+
*/
|
|
913
|
+
low?: number;
|
|
914
|
+
/**
|
|
915
|
+
* The highest value the value axis shows, instead of the data's highest.
|
|
916
|
+
* Values above it are drawn outside the drawing area.
|
|
917
|
+
*/
|
|
918
|
+
high?: number;
|
|
919
|
+
/**
|
|
920
|
+
* A value the value axis always includes, such as 0, so it shows even
|
|
921
|
+
* when all values are above or below it. Bar charts use 0.
|
|
922
|
+
*/
|
|
923
|
+
referenceValue?: number;
|
|
924
|
+
/**
|
|
925
|
+
* Space in px between the chart's edges and its drawing area (labels sit
|
|
926
|
+
* in it): one number for every side, or an object with some sides.
|
|
927
|
+
*/
|
|
928
|
+
chartPadding?: number | Partial<ChartPadding>;
|
|
929
|
+
/** Options of the X axis. */
|
|
930
|
+
axisX?: TXAxisOptions;
|
|
931
|
+
/** Options of the Y axis. */
|
|
932
|
+
axisY?: TYAxisOptions;
|
|
933
|
+
/**
|
|
934
|
+
* The class names of the chart's elements, to style a chart with your
|
|
935
|
+
* own classes instead of Chartist's.
|
|
936
|
+
*/
|
|
937
|
+
classNames?: Record<string, string>;
|
|
938
|
+
/**
|
|
939
|
+
* 1.x plugin functions (they run with the compat plugin) and v2 plugins
|
|
940
|
+
* such as `compat`.
|
|
941
|
+
*/
|
|
942
|
+
plugins?: (Plugin | [Plugin, any] | {
|
|
943
|
+
readonly name: string;
|
|
944
|
+
install(chart: any, options?: any): void;
|
|
945
|
+
})[];
|
|
946
|
+
/**
|
|
947
|
+
* A `viewBox` for the SVG, so the drawing scales with its box instead of
|
|
948
|
+
* being drawn for its size. Text scales too: adjust it with responsive
|
|
949
|
+
* options.
|
|
950
|
+
*/
|
|
951
|
+
viewBox?: ViewBox;
|
|
952
|
+
}
|
|
953
|
+
/** The options of one axis of a line or bar chart. */
|
|
954
|
+
export interface AxisOptions {
|
|
955
|
+
/**
|
|
956
|
+
* The axis type: `StepAxis` (one step per label), `AutoScaleAxis` (a
|
|
957
|
+
* scale fitted to the values) or `FixedScaleAxis` (fixed ticks).
|
|
958
|
+
*/
|
|
959
|
+
type?: AxisType;
|
|
960
|
+
/** The lowest value this axis shows, instead of the data's lowest. */
|
|
961
|
+
low?: number;
|
|
962
|
+
/** The highest value this axis shows, instead of the data's highest. */
|
|
963
|
+
high?: number;
|
|
964
|
+
/** A value this axis always includes, such as 0. */
|
|
965
|
+
referenceValue?: number;
|
|
966
|
+
/** Room in px for the axis labels, between the drawing area and the chart's edge. */
|
|
967
|
+
offset?: number;
|
|
968
|
+
/**
|
|
969
|
+
* Where the labels go: `start` (left or top) or `end` (right or
|
|
970
|
+
* bottom).
|
|
971
|
+
*/
|
|
972
|
+
position?: 'start' | 'end';
|
|
973
|
+
/** Moves the labels by `x` and `y` px from where they'd go. */
|
|
974
|
+
labelOffset?: {
|
|
975
|
+
x: number;
|
|
976
|
+
y: number;
|
|
977
|
+
};
|
|
978
|
+
/** Draws the axis labels. */
|
|
979
|
+
showLabel?: boolean;
|
|
980
|
+
/** Draws the grid lines of the axis. */
|
|
981
|
+
showGrid?: boolean;
|
|
982
|
+
/**
|
|
983
|
+
* Turns each label (and its index) into the text to show. Return `null`
|
|
984
|
+
* or `undefined` to leave a label out.
|
|
985
|
+
*/
|
|
986
|
+
labelInterpolationFnc?(value: Label, index: number): Label | null | undefined;
|
|
987
|
+
/**
|
|
988
|
+
* The minimum space in px between two grid lines of a scale: the scale
|
|
989
|
+
* takes fewer, larger steps to keep it.
|
|
990
|
+
*/
|
|
991
|
+
scaleMinSpace?: number;
|
|
992
|
+
/** Only whole numbers on the scale. */
|
|
993
|
+
onlyInteger?: boolean;
|
|
994
|
+
/**
|
|
995
|
+
* The ticks: the labels of a step axis, or the values of a fixed scale
|
|
996
|
+
* axis.
|
|
997
|
+
*/
|
|
998
|
+
ticks?: Label[];
|
|
999
|
+
/**
|
|
1000
|
+
* Step axis: spreads the ticks over the whole axis, so the last one lands
|
|
1001
|
+
* on its end (line charts with `fullWidth` set it).
|
|
1002
|
+
*/
|
|
1003
|
+
stretch?: boolean;
|
|
1004
|
+
/**
|
|
1005
|
+
* Fixed scale axis without `ticks`: the number of equal steps between
|
|
1006
|
+
* its low and high, with a tick at each end.
|
|
1007
|
+
*/
|
|
1008
|
+
divisor?: number;
|
|
1009
|
+
/**
|
|
1010
|
+
* The value range of a scale as `{ high, low }`, instead of the one
|
|
1011
|
+
* computed from the data.
|
|
1012
|
+
*/
|
|
1013
|
+
highLow?: {
|
|
1014
|
+
high: number;
|
|
1015
|
+
low: number;
|
|
1016
|
+
};
|
|
1017
|
+
}
|
|
1018
|
+
/** {@link Options} after the defaults are applied: the axes and class names are set. */
|
|
1019
|
+
export type OptionsWithDefaults = RequiredKeys<Options<RequiredKeys<AxisOptions, 'offset' | 'labelOffset' | 'labelInterpolationFnc'>, RequiredKeys<AxisOptions, 'offset' | 'labelOffset' | 'labelInterpolationFnc'>>, 'axisX' | 'axisY' | 'classNames'>;
|
|
1020
|
+
/**
|
|
1021
|
+
* The 1.x responsive options: `[mediaQuery, options]` pairs, applied over
|
|
1022
|
+
* the chart's options while the media query matches.
|
|
1023
|
+
*/
|
|
1024
|
+
export type ResponsiveOptions<T = Options> = [string, T][];
|
|
1025
|
+
/** The scale {@link getBounds} computes for an axis: its range and steps. */
|
|
1026
|
+
export interface Bounds {
|
|
1027
|
+
/** The highest value to show. */
|
|
1028
|
+
high: number;
|
|
1029
|
+
/** The lowest value to show. */
|
|
1030
|
+
low: number;
|
|
1031
|
+
/** `high - low`. */
|
|
1032
|
+
valueRange: number;
|
|
1033
|
+
/** The order of magnitude of the value range. */
|
|
1034
|
+
oom: number;
|
|
1035
|
+
/** The distance between two ticks. */
|
|
1036
|
+
step: number;
|
|
1037
|
+
/** The first tick: `low` rounded down to a step. */
|
|
1038
|
+
min: number;
|
|
1039
|
+
/** The last tick: `high` rounded up to a step. */
|
|
1040
|
+
max: number;
|
|
1041
|
+
/** `max - min`. */
|
|
1042
|
+
range: number;
|
|
1043
|
+
/** The number of steps between `min` and `max`. */
|
|
1044
|
+
numberOfSteps: number;
|
|
1045
|
+
/** The tick values, from `min` to `max`. */
|
|
1046
|
+
values: number[];
|
|
1047
|
+
}
|
|
1048
|
+
/** A run of points without holes, as {@link splitIntoSegments} returns it. */
|
|
1049
|
+
export interface Segment {
|
|
1050
|
+
/** The points' coordinates in px, as `[x1, y1, x2, y2, …]`. */
|
|
1051
|
+
pathCoordinates: number[];
|
|
1052
|
+
/** The value of each point, in the same order. */
|
|
1053
|
+
valueData: SegmentData[];
|
|
1054
|
+
}
|
|
1055
|
+
/** A point's value, its index in the series and its meta. */
|
|
1056
|
+
export interface SegmentData {
|
|
1057
|
+
/** The normalized value. */
|
|
1058
|
+
value: NormalizedSeriesValue;
|
|
1059
|
+
/** The value's index in its series. */
|
|
1060
|
+
valueIndex: number;
|
|
1061
|
+
/** The value's `meta`, if it has one. */
|
|
1062
|
+
meta?: Meta;
|
|
1063
|
+
}
|
|
1064
|
+
/** An axis dimension: `'x'` or `'y'`. */
|
|
1065
|
+
export type AxisName = 'x' | 'y';
|
|
1066
|
+
/**
|
|
1067
|
+
* A value with coordinates: `{ x, y }`, or only `x` or `y`. Line charts
|
|
1068
|
+
* draw `{ x, y }` values on two scale axes (scatter plots).
|
|
1069
|
+
*/
|
|
1070
|
+
export type Multi = {
|
|
1071
|
+
x: number | string | Date | null;
|
|
1072
|
+
y: number | string | Date | null;
|
|
1073
|
+
} | {
|
|
1074
|
+
x: number | string | Date | null;
|
|
1075
|
+
} | {
|
|
1076
|
+
y: number | string | Date | null;
|
|
1077
|
+
};
|
|
1078
|
+
/** A {@link Multi} value after normalizing: its coordinates as numbers. */
|
|
1079
|
+
export type NormalizedMulti = {
|
|
1080
|
+
x: number;
|
|
1081
|
+
y: number;
|
|
1082
|
+
} | {
|
|
1083
|
+
x: number;
|
|
1084
|
+
} | {
|
|
1085
|
+
y: number;
|
|
1086
|
+
};
|
|
1087
|
+
/** A label of an axis step or a pie slice. */
|
|
1088
|
+
export type Label = string | number | Date;
|
|
1089
|
+
/**
|
|
1090
|
+
* Every shape `series` can take: a {@link FlatSeries} (pies, distributed
|
|
1091
|
+
* bars), or a list of {@link Series} arrays and {@link SeriesObject}s.
|
|
1092
|
+
*/
|
|
1093
|
+
export type AllSeriesTypes = FlatSeries | (Series | SeriesObject)[];
|
|
1094
|
+
/**
|
|
1095
|
+
* Chart data: the series, and labels for the positions of their values (or
|
|
1096
|
+
* for the slices of a pie).
|
|
1097
|
+
*/
|
|
1098
|
+
export interface Data<T extends AllSeriesTypes = AllSeriesTypes> {
|
|
1099
|
+
/**
|
|
1100
|
+
* One label per value position: the steps of the X axis in line and bar
|
|
1101
|
+
* charts, the slices in pie charts.
|
|
1102
|
+
*/
|
|
1103
|
+
labels?: Label[] | undefined;
|
|
1104
|
+
/**
|
|
1105
|
+
* The values: an array per series (or a series object with a name, class
|
|
1106
|
+
* name and meta), or one flat array for pies and distributed bars.
|
|
1107
|
+
*/
|
|
1108
|
+
series: T;
|
|
1109
|
+
}
|
|
1110
|
+
/**
|
|
1111
|
+
* A series as an array of values: `[5, 2, 4]`. Use a {@link SeriesObject}
|
|
1112
|
+
* to give it a name, class name or meta.
|
|
1113
|
+
*/
|
|
1114
|
+
export type Series<T = SeriesPrimitiveValue> = SeriesValue<T>[];
|
|
1115
|
+
/**
|
|
1116
|
+
* A series with a name, class name or meta:
|
|
1117
|
+
* `{ name: 'Sales', data: [5, 2, 4] }`.
|
|
1118
|
+
*/
|
|
1119
|
+
export interface SeriesObject<T = SeriesPrimitiveValue> {
|
|
1120
|
+
/**
|
|
1121
|
+
* The series' name. Line charts look up per-series options in `series`
|
|
1122
|
+
* by it.
|
|
1123
|
+
*/
|
|
1124
|
+
name?: string;
|
|
1125
|
+
/** A class name for the series' group, instead of `ct-series-a`, `-b`, … */
|
|
1126
|
+
className?: string;
|
|
1127
|
+
/** Anything to attach to the series, handed back in events. */
|
|
1128
|
+
meta?: Meta;
|
|
1129
|
+
/** The series' values. */
|
|
1130
|
+
data: SeriesValue<T>[];
|
|
1131
|
+
}
|
|
1132
|
+
/** A value of a series: a plain value, or `{ value, meta }`. */
|
|
1133
|
+
export type SeriesValue<T = SeriesPrimitiveValue> = SeriesObjectValue<T> | T;
|
|
1134
|
+
/**
|
|
1135
|
+
* A plain value of a series: a number (numeric strings are read as
|
|
1136
|
+
* numbers), a {@link Multi} `{ x, y }`, or `null` or `undefined` for a hole.
|
|
1137
|
+
*/
|
|
1138
|
+
export type SeriesPrimitiveValue = number | string | boolean | Date | Multi | null | undefined;
|
|
1139
|
+
/** A value with meta: `{ value: 5, meta: 'Tuesday' }`. */
|
|
1140
|
+
export interface SeriesObjectValue<T = SeriesPrimitiveValue> {
|
|
1141
|
+
/** Anything to attach to the value, handed back in events. */
|
|
1142
|
+
meta?: Meta;
|
|
1143
|
+
/** The value. */
|
|
1144
|
+
value: T;
|
|
1145
|
+
}
|
|
1146
|
+
/**
|
|
1147
|
+
* One flat array of values, one per slice or bar: the series of a pie
|
|
1148
|
+
* chart, or of a bar chart with `distributeSeries`.
|
|
1149
|
+
*/
|
|
1150
|
+
export type FlatSeries<T = FlatSeriesPrimitiveValue> = FlatSeriesValue<T>[];
|
|
1151
|
+
/**
|
|
1152
|
+
* A value of a {@link FlatSeries}: a plain value, `{ value, meta }`, or a
|
|
1153
|
+
* {@link FlatSeriesObjectValue} with a name and class name for its slice.
|
|
1154
|
+
*/
|
|
1155
|
+
export type FlatSeriesValue<T = FlatSeriesPrimitiveValue> = SeriesValue<T> | FlatSeriesObjectValue<T>;
|
|
1156
|
+
/**
|
|
1157
|
+
* A plain value of a {@link FlatSeries}: a number (numeric strings are read
|
|
1158
|
+
* as numbers), or `null` or `undefined` for a hole.
|
|
1159
|
+
*/
|
|
1160
|
+
export type FlatSeriesPrimitiveValue = number | string | null | undefined;
|
|
1161
|
+
/**
|
|
1162
|
+
* A value of a flat series that is its own series, such as a pie slice:
|
|
1163
|
+
* `{ value: 20, name: 'Rent', className: 'rent' }`.
|
|
1164
|
+
*/
|
|
1165
|
+
export interface FlatSeriesObjectValue<T = FlatSeriesPrimitiveValue> {
|
|
1166
|
+
/** The name of the value's series. */
|
|
1167
|
+
name?: string;
|
|
1168
|
+
/** A class name for the value's series group, such as a slice's. */
|
|
1169
|
+
className?: string;
|
|
1170
|
+
/** Anything to attach to the value, handed back in events. */
|
|
1171
|
+
meta?: Meta;
|
|
1172
|
+
/** The value. */
|
|
1173
|
+
value: T;
|
|
1174
|
+
}
|
|
1175
|
+
/**
|
|
1176
|
+
* Every shape a normalized `series` can take: a
|
|
1177
|
+
* {@link NormalizedFlatSeries} or a list of {@link NormalizedSeries}.
|
|
1178
|
+
*/
|
|
1179
|
+
export type AllNormalizedSeriesTypes = NormalizedFlatSeries | NormalizedSeries[];
|
|
1180
|
+
/**
|
|
1181
|
+
* Chart data after {@link normalizeData}: labels filled in, and every
|
|
1182
|
+
* series an array of numbers, `{ x, y }` numbers or holes.
|
|
1183
|
+
*/
|
|
1184
|
+
export interface NormalizedData<T extends AllNormalizedSeriesTypes = AllNormalizedSeriesTypes> extends Data {
|
|
1185
|
+
/** One label per value position, empty strings where none was given. */
|
|
1186
|
+
labels: Label[];
|
|
1187
|
+
/** The normalized series. */
|
|
1188
|
+
series: T;
|
|
1189
|
+
}
|
|
1190
|
+
/** A series after normalizing: its values without meta or series object. */
|
|
1191
|
+
export type NormalizedSeries = NormalizedSeriesValue[];
|
|
1192
|
+
/** A normalized value: a number, `{ x, y }` numbers, or `undefined` for a hole. */
|
|
1193
|
+
export type NormalizedSeriesValue = NormalizedSeriesPrimitiveValue;
|
|
1194
|
+
/** A normalized value: a number, `{ x, y }` numbers, or `undefined` for a hole. */
|
|
1195
|
+
export type NormalizedSeriesPrimitiveValue = number | NormalizedMulti | undefined;
|
|
1196
|
+
/** A {@link FlatSeries} after normalizing: one number per slice or bar. */
|
|
1197
|
+
export type NormalizedFlatSeries = number[];
|
|
1198
|
+
/**
|
|
1199
|
+
* The payload of the 1.x `created` event, emitted once a chart is drawn:
|
|
1200
|
+
* its SVG, drawing area, axes and options.
|
|
1201
|
+
*/
|
|
1202
|
+
export interface CreatedEvent<TOptions = Options> {
|
|
1203
|
+
/** The drawing area, in px. */
|
|
1204
|
+
chartRect: ChartRect;
|
|
1205
|
+
/** The X axis, a 1.x {@link Axis} object. */
|
|
1206
|
+
axisX: Axis;
|
|
1207
|
+
/** The Y axis, a 1.x {@link Axis} object. */
|
|
1208
|
+
axisY: Axis;
|
|
1209
|
+
/** The chart's SVG element, wrapped in {@link Svg}. */
|
|
1210
|
+
svg: Svg;
|
|
1211
|
+
/** The options the chart was drawn with, defaults and responsive options applied. */
|
|
1212
|
+
options: TOptions;
|
|
1213
|
+
}
|
|
1214
|
+
/**
|
|
1215
|
+
* The fields every 1.x `draw` event shares. A `draw` listener gets one per
|
|
1216
|
+
* element drawn; check `type` to tell them apart.
|
|
1217
|
+
*/
|
|
1218
|
+
export interface DrawEvent {
|
|
1219
|
+
/** What was drawn: `'point'`, `'line'`, `'bar'`, `'grid'`, … */
|
|
1220
|
+
type: string;
|
|
1221
|
+
/** The drawn element, wrapped in {@link Svg}: change or animate it here. */
|
|
1222
|
+
element: Svg;
|
|
1223
|
+
/** The group the element is in, wrapped in {@link Svg}. */
|
|
1224
|
+
group: Svg;
|
|
1225
|
+
/** The drawing area, in px. */
|
|
1226
|
+
chartRect: ChartRect;
|
|
1227
|
+
/** The X axis, a 1.x {@link Axis} object. */
|
|
1228
|
+
axisX: Axis;
|
|
1229
|
+
/** The Y axis, a 1.x {@link Axis} object. */
|
|
1230
|
+
axisY: Axis;
|
|
1231
|
+
/** The `meta` of the value (or of the series, for lines and areas). */
|
|
1232
|
+
meta: Meta;
|
|
1233
|
+
/** The index of the value in its series (of the series, for lines and areas). */
|
|
1234
|
+
index: number;
|
|
1235
|
+
/** The series as given in the data: an array or a series object. */
|
|
1236
|
+
series: FlatSeriesValue | Series | SeriesObject;
|
|
1237
|
+
/** The index of the series in the data. */
|
|
1238
|
+
seriesIndex: number;
|
|
1239
|
+
}
|
|
1240
|
+
/**
|
|
1241
|
+
* The payload of the 1.x `data` event, emitted before a chart draws new
|
|
1242
|
+
* data. Listeners may change `data` in place to transform it.
|
|
1243
|
+
*/
|
|
1244
|
+
export interface DataEvent {
|
|
1245
|
+
/** `'initial'` for the first data, `'update'` for data set later. */
|
|
1246
|
+
type: 'initial' | 'update';
|
|
1247
|
+
/** The data the chart is about to draw (a copy, safe to change). */
|
|
1248
|
+
data: Data;
|
|
1249
|
+
}
|
|
1250
|
+
/**
|
|
1251
|
+
* The payload of the 1.x `optionsChanged` event, emitted when a responsive
|
|
1252
|
+
* option starts or stops applying.
|
|
1253
|
+
*/
|
|
1254
|
+
export interface OptionsChangedEvent<T = Options> {
|
|
1255
|
+
/** The options before the change. */
|
|
1256
|
+
previousOptions: T;
|
|
1257
|
+
/** The options now in effect. */
|
|
1258
|
+
currentOptions: T;
|
|
1259
|
+
}
|
|
1260
|
+
/**
|
|
1261
|
+
* The 1.x `draw` event of a grid line, one per tick of each axis. `x1`,
|
|
1262
|
+
* `y1`, `x2`, `y2` are the line's ends in px.
|
|
1263
|
+
*/
|
|
1264
|
+
export interface GridDrawEvent extends Omit<DrawEvent, 'chartRect' | 'axisX' | 'axisY' | 'meta' | 'series' | 'seriesIndex'> {
|
|
1265
|
+
/** Always `'grid'`. */
|
|
1266
|
+
type: 'grid';
|
|
1267
|
+
/** The axis the grid line belongs to. */
|
|
1268
|
+
axis: Axis;
|
|
1269
|
+
/** The x of the line's start, in px. */
|
|
1270
|
+
x1: number;
|
|
1271
|
+
/** The y of the line's start, in px. */
|
|
1272
|
+
y1: number;
|
|
1273
|
+
/** The x of the line's end, in px. */
|
|
1274
|
+
x2: number;
|
|
1275
|
+
/** The y of the line's end, in px. */
|
|
1276
|
+
y2: number;
|
|
1277
|
+
}
|
|
1278
|
+
/**
|
|
1279
|
+
* The 1.x `draw` event of the grid background, the `rect` behind the
|
|
1280
|
+
* drawing area (with `showGridBackground`).
|
|
1281
|
+
*/
|
|
1282
|
+
export interface GridBackgroundDrawEvent {
|
|
1283
|
+
/** Always `'gridBackground'`. */
|
|
1284
|
+
type: 'gridBackground';
|
|
1285
|
+
/** The grid group the background is in. */
|
|
1286
|
+
group: Svg;
|
|
1287
|
+
/** The background `rect`. */
|
|
1288
|
+
element: Svg;
|
|
1289
|
+
}
|
|
1290
|
+
/**
|
|
1291
|
+
* The 1.x `draw` event of an axis label, one per tick. The label is a
|
|
1292
|
+
* `foreignObject` with a `span`, placed at `x`, `y` with the given size.
|
|
1293
|
+
*/
|
|
1294
|
+
export interface LabelDrawEvent extends Omit<DrawEvent, 'chartRect' | 'axisX' | 'axisY' | 'meta' | 'series' | 'seriesIndex'> {
|
|
1295
|
+
/** Always `'label'`. */
|
|
1296
|
+
type: 'label';
|
|
1297
|
+
/** The axis the label belongs to. */
|
|
1298
|
+
axis: Axis;
|
|
1299
|
+
/** The label as shown, after `labelInterpolationFnc`. */
|
|
1300
|
+
text: Label;
|
|
1301
|
+
/** The x of the label's box, in px. */
|
|
1302
|
+
x: number;
|
|
1303
|
+
/** The y of the label's box, in px. */
|
|
1304
|
+
y: number;
|
|
1305
|
+
/** The width of the label's box, in px. */
|
|
1306
|
+
width: number;
|
|
1307
|
+
/** The height of the label's box, in px. */
|
|
1308
|
+
height: number;
|
|
1309
|
+
}
|
|
1310
|
+
/** The 1.x `draw` events of the axes: grid lines, the grid background and labels. */
|
|
1311
|
+
export type AxesDrawEvent = GridDrawEvent | GridBackgroundDrawEvent | LabelDrawEvent;
|
|
1312
|
+
//#endregion
|
|
1313
|
+
//#region src/core/math.d.ts
|
|
1314
|
+
/** A tiny number, about the gap between 1 and the next float: the tolerance of float comparisons. */
|
|
1315
|
+
export declare const EPSILON = 2.221e-16;
|
|
1316
|
+
/**
|
|
1317
|
+
* Calculate the order of magnitude for the chart scale
|
|
1318
|
+
* @param value The value Range of the chart
|
|
1319
|
+
* @return The order of magnitude
|
|
1320
|
+
*/
|
|
1321
|
+
export declare function orderOfMagnitude(value: number): number;
|
|
1322
|
+
/**
|
|
1323
|
+
* Project a data length into screen coordinates (pixels)
|
|
1324
|
+
* @param axisLength The svg element for the chart
|
|
1325
|
+
* @param length Single data value from a series array
|
|
1326
|
+
* @param bounds All the values to set the bounds of the chart
|
|
1327
|
+
* @return The projected data length in pixels
|
|
1328
|
+
*/
|
|
1329
|
+
export declare function projectLength(axisLength: number, length: number, bounds: Bounds): number;
|
|
1330
|
+
/**
|
|
1331
|
+
* Rounds a value to a number of digits after the decimal point, to remove
|
|
1332
|
+
* float errors such as `0.30000000000000004`. `0` digits round to whole
|
|
1333
|
+
* numbers.
|
|
1334
|
+
* @param value The value to round
|
|
1335
|
+
* @param [digits] The digits after the decimal point; without it, the
|
|
1336
|
+
* global precision (8)
|
|
1337
|
+
* @returns The rounded value
|
|
1338
|
+
*/
|
|
1339
|
+
export declare function roundWithPrecision(value: number, digits?: number): number;
|
|
1340
|
+
/**
|
|
1341
|
+
* Pollard Rho Algorithm to find smallest factor of an integer value. There are more efficient algorithms for factorization, but this one is quite efficient and not so complex.
|
|
1342
|
+
* @param num An integer number where the smallest factor should be searched for
|
|
1343
|
+
* @returns The smallest integer factor of the parameter num.
|
|
1344
|
+
*/
|
|
1345
|
+
export declare function rho(num: number): number;
|
|
1346
|
+
/**
|
|
1347
|
+
* Calculate cartesian coordinates of polar coordinates
|
|
1348
|
+
* @param centerX X-axis coordinates of center point of circle segment
|
|
1349
|
+
* @param centerY X-axis coordinates of center point of circle segment
|
|
1350
|
+
* @param radius Radius of circle segment
|
|
1351
|
+
* @param angleInDegrees Angle of circle segment in degrees
|
|
1352
|
+
* @return Coordinates of point on circumference
|
|
1353
|
+
*/
|
|
1354
|
+
export declare function polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number): {
|
|
1355
|
+
x: number;
|
|
1356
|
+
y: number;
|
|
1357
|
+
};
|
|
1358
|
+
//#endregion
|
|
1359
|
+
//#region src/core/data/bounds.d.ts
|
|
1360
|
+
/**
|
|
1361
|
+
* Calculate and retrieve all the bounds for the chart and return them in one array
|
|
1362
|
+
* @param axisLength The length of the Axis used for
|
|
1363
|
+
* @param highLow An object containing a high and low property indicating the value range of the chart.
|
|
1364
|
+
* @param scaleMinSpace The minimum projected length a step should result in
|
|
1365
|
+
* @param onlyInteger
|
|
1366
|
+
* @return All the values to set the bounds of the chart
|
|
1367
|
+
*/
|
|
1368
|
+
export declare function getBounds(axisLength: number, highLow: {
|
|
1369
|
+
high: number;
|
|
1370
|
+
low: number;
|
|
1371
|
+
}, scaleMinSpace: number, onlyInteger?: boolean): Bounds;
|
|
1372
|
+
//#endregion
|
|
1373
|
+
//#region src/core/data/data.d.ts
|
|
1374
|
+
/**
|
|
1375
|
+
* Get meta data of a specific value in a series.
|
|
1376
|
+
*/
|
|
1377
|
+
export declare function getMetaData(seriesData: FlatSeriesValue | Series | SeriesObject, index: number): any;
|
|
1378
|
+
/**
|
|
1379
|
+
* Checks if a value is considered a hole in the data series.
|
|
1380
|
+
* @returns True if the value is considered a data hole
|
|
1381
|
+
*/
|
|
1382
|
+
export declare function isDataHoleValue(value: unknown): value is null | undefined;
|
|
1383
|
+
/**
|
|
1384
|
+
* Checks if value is array of series objects.
|
|
1385
|
+
*/
|
|
1386
|
+
export declare function isArrayOfSeries(value: unknown): value is (Series | SeriesObject)[];
|
|
1387
|
+
/**
|
|
1388
|
+
* Checks if provided value object is multi value (contains x or y properties)
|
|
1389
|
+
*/
|
|
1390
|
+
export declare function isMultiValue(value: unknown): value is Multi;
|
|
1391
|
+
/**
|
|
1392
|
+
* Gets a value from a dimension `value.x` or `value.y` while returning value directly if it's a valid numeric value. If the value is not numeric and it's falsey this function will return `defaultValue`.
|
|
1393
|
+
*/
|
|
1394
|
+
export declare function getMultiValue(value: Multi | number | unknown, dimension?: AxisName): number | undefined;
|
|
1395
|
+
//#endregion
|
|
1396
|
+
//#region src/core/data/highLow.d.ts
|
|
1397
|
+
/**
|
|
1398
|
+
* Get highest and lowest value of data array. This Array contains the data that will be visualized in the chart.
|
|
1399
|
+
* @param data The array that contains the data to be visualized in the chart
|
|
1400
|
+
* @param options The Object that contains the chart options
|
|
1401
|
+
* @param dimension Axis dimension 'x' or 'y' used to access the correct value and high / low configuration
|
|
1402
|
+
* @param extent A range to include beyond the data, such as the sums of stacked bars
|
|
1403
|
+
* @return An object that contains the highest and lowest value that will be visualized on the chart.
|
|
1404
|
+
*/
|
|
1405
|
+
export declare function getHighLow(data: NormalizedSeries[], options: Options, dimension?: AxisName, extent?: {
|
|
1406
|
+
readonly low: number;
|
|
1407
|
+
readonly high: number;
|
|
1408
|
+
}): {
|
|
1409
|
+
high: number;
|
|
1410
|
+
low: number;
|
|
1411
|
+
};
|
|
1412
|
+
//#endregion
|
|
1413
|
+
//#region src/core/data/normalize.d.ts
|
|
1414
|
+
/**
|
|
1415
|
+
* Ensures that the data object passed as second argument to the charts is present and correctly initialized.
|
|
1416
|
+
* @param data The data object that is passed as second argument to the charts
|
|
1417
|
+
* @return The normalized data object
|
|
1418
|
+
*/
|
|
1419
|
+
export declare function normalizeData(data: Data<FlatSeries>, reverse?: boolean, multi?: false): NormalizedData<NormalizedFlatSeries>;
|
|
1420
|
+
export declare function normalizeData(data: Data<(Series | SeriesObject)[]>, reverse: boolean | undefined, multi: true | AxisName): NormalizedData<NormalizedSeries[]>;
|
|
1421
|
+
export declare function normalizeData(data: Data<FlatSeries | (Series | SeriesObject)[]>, reverse: boolean | undefined, multi: boolean | AxisName, distributed: true): NormalizedData<NormalizedSeries[]>;
|
|
1422
|
+
export declare function normalizeData(data: Data<FlatSeries | (Series | SeriesObject)[]>, reverse?: boolean, multi?: boolean | AxisName): NormalizedData<NormalizedFlatSeries | NormalizedSeries[]>;
|
|
1423
|
+
//#endregion
|
|
1424
|
+
//#region src/core/data/segments.d.ts
|
|
1425
|
+
/**
|
|
1426
|
+
* Splits a list of coordinates and associated values into segments. Each returned segment contains a pathCoordinates
|
|
1427
|
+
* valueData property describing the segment.
|
|
1428
|
+
*
|
|
1429
|
+
* With the default options, segments consist of contiguous sets of points that do not have an undefined value. Any
|
|
1430
|
+
* points with undefined values are discarded.
|
|
1431
|
+
*
|
|
1432
|
+
* **Options**
|
|
1433
|
+
* The following options are used to determine how segments are formed
|
|
1434
|
+
* ```javascript
|
|
1435
|
+
* var options = {
|
|
1436
|
+
* // If fillHoles is true, undefined values are simply discarded without creating a new segment. Assuming other options are default, this returns single segment.
|
|
1437
|
+
* fillHoles: false,
|
|
1438
|
+
* // If increasingX is true, the coordinates in all segments have strictly increasing x-values.
|
|
1439
|
+
* increasingX: false
|
|
1440
|
+
* };
|
|
1441
|
+
* ```
|
|
1442
|
+
*
|
|
1443
|
+
* @param pathCoordinates List of point coordinates to be split in the form [x1, y1, x2, y2 ... xn, yn]
|
|
1444
|
+
* @param valueData List of associated point values in the form [v1, v2 .. vn]
|
|
1445
|
+
* @param options Options set by user
|
|
1446
|
+
* @return List of segments, each containing a pathCoordinates and valueData property.
|
|
1447
|
+
*/
|
|
1448
|
+
export declare function splitIntoSegments(pathCoordinates: number[], valueData: SegmentData[], options?: {
|
|
1449
|
+
increasingX?: boolean;
|
|
1450
|
+
fillHoles?: boolean;
|
|
1451
|
+
}): Segment[];
|
|
1452
|
+
//#endregion
|
|
1453
|
+
//#region src/core/data/serialize.d.ts
|
|
1454
|
+
/**
|
|
1455
|
+
* This function serializes arbitrary data to a string. In case of data that can't be easily converted to a string, this function will create a wrapper object and serialize the data using JSON.stringify. The outcoming string will always be escaped using Chartist.escapingMap.
|
|
1456
|
+
* If called with null or undefined the function will return immediately with null or undefined.
|
|
1457
|
+
*/
|
|
1458
|
+
export declare function serialize(data: number | string | object): string;
|
|
1459
|
+
export declare function serialize(data: number | string | object | null | undefined | unknown): string | null | undefined;
|
|
1460
|
+
/**
|
|
1461
|
+
* This function de-serializes a string previously serialized with Chartist.serialize. The string will always be unescaped using Chartist.escapingMap before it's returned. Based on the input value the return type can be Number, String or Object. JSON.parse is used with try / catch to see if the unescaped string can be parsed into an Object and this Object will be returned on success.
|
|
1462
|
+
*/
|
|
1463
|
+
export declare function deserialize<T extends object | number | string = object>(data: string): T;
|
|
1464
|
+
export declare function deserialize<T extends object | number | string = object>(data: string | null | undefined): T | null | undefined;
|
|
1465
|
+
//#endregion
|
|
1466
|
+
//#region src/core/creation.d.ts
|
|
1467
|
+
/**
|
|
1468
|
+
* Create or reinitialize the SVG element for the chart
|
|
1469
|
+
* @param container The containing DOM Node object that will be used to plant the SVG element
|
|
1470
|
+
* @param width Set the width of the SVG element. Default is 100%
|
|
1471
|
+
* @param height Set the height of the SVG element. Default is 100%
|
|
1472
|
+
* @param className Specify a class to be added to the SVG element
|
|
1473
|
+
* @return The created/reinitialized SVG element
|
|
1474
|
+
*/
|
|
1475
|
+
export declare function createSvg(container: Element, width?: number | string, height?: number | string, className?: string, viewBox?: ViewBox): Svg;
|
|
1476
|
+
/**
|
|
1477
|
+
* Turns a padding option into a full {@link ChartPadding}: a number pads
|
|
1478
|
+
* every side, an object keeps its numeric sides and sets the missing ones
|
|
1479
|
+
* to 0, and `undefined` gives 0 on every side.
|
|
1480
|
+
* @returns A new padding object with `top`, `right`, `bottom` and `left`.
|
|
1481
|
+
*/
|
|
1482
|
+
export declare function normalizePadding(padding: number | Partial<ChartPadding> | undefined): {
|
|
1483
|
+
top: number;
|
|
1484
|
+
right: number;
|
|
1485
|
+
bottom: number;
|
|
1486
|
+
left: number;
|
|
1487
|
+
};
|
|
1488
|
+
/**
|
|
1489
|
+
* Initialize chart drawing rectangle (area where chart is drawn) x1,y1 = bottom left / x2,y2 = top right
|
|
1490
|
+
* @param svg The svg element for the chart
|
|
1491
|
+
* @param options The Object that contains all the optional values for the chart
|
|
1492
|
+
* @return The chart rectangles coordinates inside the svg element plus the rectangles measurements
|
|
1493
|
+
*/
|
|
1494
|
+
export declare function createChartRect(svg: Svg, options: Options): {
|
|
1495
|
+
x1: number;
|
|
1496
|
+
x2: number;
|
|
1497
|
+
y1: number;
|
|
1498
|
+
y2: number;
|
|
1499
|
+
padding: {
|
|
1500
|
+
top: number;
|
|
1501
|
+
right: number;
|
|
1502
|
+
bottom: number;
|
|
1503
|
+
left: number;
|
|
1504
|
+
};
|
|
1505
|
+
width(): number;
|
|
1506
|
+
height(): number;
|
|
1507
|
+
};
|
|
1508
|
+
/**
|
|
1509
|
+
* Creates a grid line based on a projected value.
|
|
1510
|
+
*/
|
|
1511
|
+
export declare function createGrid(position: number, index: number, axis: Axis, offset: number, length: number, group: Svg, classes: string[], eventEmitter: EventEmitter): void;
|
|
1512
|
+
/**
|
|
1513
|
+
* Creates a grid background rect and emits the draw event.
|
|
1514
|
+
*/
|
|
1515
|
+
export declare function createGridBackground(gridGroup: Svg, chartRect: ChartRect, className: string, eventEmitter: EventEmitter): void;
|
|
1516
|
+
/**
|
|
1517
|
+
* Creates a label based on a projected value and an axis.
|
|
1518
|
+
*/
|
|
1519
|
+
export declare function createLabel(position: number, length: number, index: number, label: Label, axis: Axis, axisOffset: number, labelOffset: {
|
|
1520
|
+
x: number;
|
|
1521
|
+
y: number;
|
|
1522
|
+
}, group: Svg, classes: string[], eventEmitter: EventEmitter): void;
|
|
1523
|
+
//#endregion
|
|
1524
|
+
//#region src/core/optionsProvider.d.ts
|
|
1525
|
+
/** What {@link optionsProvider} returns: the current options, and a way to stop listening to media queries. */
|
|
1526
|
+
export interface OptionsProvider<T = unknown> {
|
|
1527
|
+
removeMediaQueryListeners(): void;
|
|
1528
|
+
getCurrentOptions(): T;
|
|
1529
|
+
}
|
|
1530
|
+
/**
|
|
1531
|
+
* Provides options handling functionality with callback for options changes triggered by responsive options and media query matches
|
|
1532
|
+
* @param options Options set by user
|
|
1533
|
+
* @param responsiveOptions Optional functions to add responsive behavior to chart
|
|
1534
|
+
* @param eventEmitter The event emitter that will be used to emit the options changed events
|
|
1535
|
+
* @return The consolidated options object from the defaults, base and matching responsive options
|
|
1536
|
+
*/
|
|
1537
|
+
export declare function optionsProvider<T = unknown>(options: T, responsiveOptions: ResponsiveOptions<T> | undefined, eventEmitter: EventEmitter): OptionsProvider<T>;
|
|
1538
|
+
//#endregion
|
|
1539
|
+
//#region src/charts/types.d.ts
|
|
1540
|
+
/** The 1.x events every chart class emits and their payloads, by event name. */
|
|
1541
|
+
export interface BaseChartEventsTypes<TCreateEvent = CreatedEvent, TDrawEvents = DrawEvent> {
|
|
1542
|
+
data: DataEvent;
|
|
1543
|
+
options: OptionsChangedEvent;
|
|
1544
|
+
animationBegin: AnimationEvent;
|
|
1545
|
+
animationEnd: AnimationEvent;
|
|
1546
|
+
created: TCreateEvent;
|
|
1547
|
+
draw: TDrawEvents;
|
|
1548
|
+
}
|
|
1549
|
+
//#endregion
|
|
1550
|
+
//#region src/charts/BaseChart.d.ts
|
|
1551
|
+
/**
|
|
1552
|
+
* The base class of the 1.x chart classes ({@link LineChart},
|
|
1553
|
+
* {@link BarChart}, {@link PieChart}): the container, `update`, `detach`,
|
|
1554
|
+
* `on` and `off`.
|
|
1555
|
+
*/
|
|
1556
|
+
export declare abstract class BaseChart<TEventsTypes = BaseChartEventsTypes> {
|
|
1557
|
+
protected data: Data;
|
|
1558
|
+
private readonly defaultOptions;
|
|
1559
|
+
private options;
|
|
1560
|
+
private readonly responsiveOptions?;
|
|
1561
|
+
protected svg?: Svg;
|
|
1562
|
+
protected readonly container: Element;
|
|
1563
|
+
protected readonly eventEmitter: EventEmitter;
|
|
1564
|
+
private readonly resizeListener;
|
|
1565
|
+
private initializeTimeoutId;
|
|
1566
|
+
private optionsProvider?;
|
|
1567
|
+
constructor(query: string | Element | null, data: Data, defaultOptions: Options, options: Options, responsiveOptions?: ResponsiveOptions<Options> | undefined);
|
|
1568
|
+
abstract createChart(options: Options): void;
|
|
1569
|
+
/**
|
|
1570
|
+
* Updates the chart which currently does a full reconstruction of the SVG DOM
|
|
1571
|
+
* @param data Optional data you'd like to set for the chart before it will update. If not specified the update method will use the data that is already configured with the chart.
|
|
1572
|
+
* @param options Optional options you'd like to add to the previous options for the chart before it will update. If not specified the update method will use the options that have been already configured with the chart.
|
|
1573
|
+
* @param override If set to true, the passed options will be used to extend the options that have been configured already. Otherwise the chart default options will be used as the base
|
|
1574
|
+
*/
|
|
1575
|
+
update(data?: Data, options?: Options, override?: boolean): this;
|
|
1576
|
+
/**
|
|
1577
|
+
* This method can be called on the API object of each chart and will un-register all event listeners that were added to other components. This currently includes a window.resize listener as well as media query listeners if any responsive options have been provided. Use this function if you need to destroy and recreate Chartist charts dynamically.
|
|
1578
|
+
*/
|
|
1579
|
+
detach(): this;
|
|
1580
|
+
/**
|
|
1581
|
+
* Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.
|
|
1582
|
+
* @param event Name of the event. Check the examples for supported events.
|
|
1583
|
+
* @param listener The handler function that will be called when an event with the given name was emitted. This function will receive a data argument which contains event data. See the example for more details.
|
|
1584
|
+
*/
|
|
1585
|
+
on<T extends keyof TEventsTypes>(event: T, listener: EventListener<TEventsTypes[T]>): this;
|
|
1586
|
+
on(event: '*', listener: AllEventsListener): this;
|
|
1587
|
+
on(event: string, listener: EventListener): this;
|
|
1588
|
+
/**
|
|
1589
|
+
* Use this function to un-register event handlers. If the handler function parameter is omitted all handlers for the given event will be un-registered.
|
|
1590
|
+
* @param event Name of the event for which a handler should be removed
|
|
1591
|
+
* @param listener The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list.
|
|
1592
|
+
*/
|
|
1593
|
+
off<T extends keyof TEventsTypes>(event: T, listener?: EventListener<TEventsTypes[T]>): this;
|
|
1594
|
+
off(event: '*', listener?: AllEventsListener): this;
|
|
1595
|
+
off(event: string, listener?: EventListener): this;
|
|
1596
|
+
initialize(): void;
|
|
1597
|
+
}
|
|
1598
|
+
//#endregion
|
|
1599
|
+
//#region src/charts/LineChart/LineChart.types.d.ts
|
|
1600
|
+
/** Turns a series' points into the path of its line (see `Interpolation`). */
|
|
1601
|
+
export type LineInterpolation = (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
1602
|
+
/** The data of a line chart: series of values, and labels for the X axis. */
|
|
1603
|
+
export type LineChartData = Data<(Series | SeriesObject)[]>;
|
|
1604
|
+
/** The options of a line chart (1.x `LineChart`, and `lineChart`). */
|
|
1605
|
+
export interface LineChartOptions<TXAxisOptions = AxisOptions, TYAxisOptions = TXAxisOptions> extends Options<TXAxisOptions, TYAxisOptions> {
|
|
1606
|
+
/**
|
|
1607
|
+
* The class names of the chart's elements. Change them to style the
|
|
1608
|
+
* chart with your own CSS instead of Chartist's.
|
|
1609
|
+
*/
|
|
1610
|
+
classNames?: {
|
|
1611
|
+
/** The chart's SVG element. */
|
|
1612
|
+
chart?: string;
|
|
1613
|
+
/** Each axis label. */
|
|
1614
|
+
label?: string;
|
|
1615
|
+
/** The group of an axis's labels. */
|
|
1616
|
+
labelGroup?: string;
|
|
1617
|
+
/** The group of each series. */
|
|
1618
|
+
series?: string;
|
|
1619
|
+
/** Each line. */
|
|
1620
|
+
line?: string;
|
|
1621
|
+
/** Each point. */
|
|
1622
|
+
point?: string;
|
|
1623
|
+
/** Each area. */
|
|
1624
|
+
area?: string;
|
|
1625
|
+
/** Each grid line. */
|
|
1626
|
+
grid?: string;
|
|
1627
|
+
/** The group of the grid lines. */
|
|
1628
|
+
gridGroup?: string;
|
|
1629
|
+
/** The grid background (with `showGridBackground`). */
|
|
1630
|
+
gridBackground?: string;
|
|
1631
|
+
/** Labels and grid lines of the vertical axis. */
|
|
1632
|
+
vertical?: string;
|
|
1633
|
+
/** Labels and grid lines of the horizontal axis. */
|
|
1634
|
+
horizontal?: string;
|
|
1635
|
+
/** Labels at the start of their axis (left or top). */
|
|
1636
|
+
start?: string;
|
|
1637
|
+
/** Labels at the end of their axis (right or bottom). */
|
|
1638
|
+
end?: string;
|
|
1639
|
+
};
|
|
1640
|
+
/** Draws the lines. */
|
|
1641
|
+
showLine?: boolean;
|
|
1642
|
+
/** Draws a point at each value. */
|
|
1643
|
+
showPoint?: boolean;
|
|
1644
|
+
/** Fills the area between each line and `areaBase`. */
|
|
1645
|
+
showArea?: boolean;
|
|
1646
|
+
/** The value the areas close at, usually 0. */
|
|
1647
|
+
areaBase?: number;
|
|
1648
|
+
/**
|
|
1649
|
+
* How a line runs between its points: `true` smooths it with
|
|
1650
|
+
* `Interpolation.monotoneCubic`, `false` draws straight segments
|
|
1651
|
+
* (`Interpolation.none`), or pass an interpolation such as
|
|
1652
|
+
* `Interpolation.cardinal()`, `Interpolation.step()` or your own.
|
|
1653
|
+
*/
|
|
1654
|
+
lineSmooth?: boolean | LineInterpolation;
|
|
1655
|
+
/** Fills the grid area with a background (class `ct-grid-background`). */
|
|
1656
|
+
showGridBackground?: boolean;
|
|
1657
|
+
/**
|
|
1658
|
+
* Stretches the X axis so the last value lands on the right edge, without
|
|
1659
|
+
* a last grid line. The last label may need chart padding to fit.
|
|
1660
|
+
*/
|
|
1661
|
+
fullWidth?: boolean;
|
|
1662
|
+
/** Reverses the labels, the order of the series and each series' values. */
|
|
1663
|
+
reverseData?: boolean;
|
|
1664
|
+
/** Options per series, by series name: line options for one series. */
|
|
1665
|
+
series?: Record<string, Omit<LineChartOptions<TXAxisOptions, TYAxisOptions>, 'series'>>;
|
|
1666
|
+
}
|
|
1667
|
+
/** {@link LineChartOptions} after the defaults are applied: the 1.x `LineChart` works with these. */
|
|
1668
|
+
export type LineChartOptionsWithDefaults = RequiredKeys<LineChartOptions<RequiredKeys<AxisOptions, 'offset' | 'position' | 'labelOffset' | 'showLabel' | 'showGrid' | 'labelInterpolationFnc'>, RequiredKeys<AxisOptions, 'offset' | 'position' | 'labelOffset' | 'showLabel' | 'showGrid' | 'labelInterpolationFnc' | 'scaleMinSpace'>>, 'showLine' | 'showPoint' | 'areaBase' | 'lineSmooth' | 'chartPadding' | 'axisX' | 'axisY', 'classNames'>;
|
|
1669
|
+
/** The payload of a line chart's 1.x `created` event. */
|
|
1670
|
+
export type LineChartCreatedEvent = CreatedEvent<LineChartOptions>;
|
|
1671
|
+
/**
|
|
1672
|
+
* The 1.x `draw` event of a line chart's point, one per value. The point is a
|
|
1673
|
+
* very short `line` element at `x`, `y` (CSS gives it a round cap).
|
|
1674
|
+
*/
|
|
1675
|
+
export interface PointDrawEvent extends DrawEvent {
|
|
1676
|
+
/** Always `'point'`. */
|
|
1677
|
+
type: 'point';
|
|
1678
|
+
/** The point's normalized value: `{ x, y }` numbers, or a number. */
|
|
1679
|
+
value: NormalizedSeriesValue;
|
|
1680
|
+
/** The point's x, in px. */
|
|
1681
|
+
x: number;
|
|
1682
|
+
/** The point's y, in px. */
|
|
1683
|
+
y: number;
|
|
1684
|
+
}
|
|
1685
|
+
/**
|
|
1686
|
+
* The 1.x `draw` event of a line, one per series. `index` is the series'
|
|
1687
|
+
* index and `meta` the series' meta.
|
|
1688
|
+
*/
|
|
1689
|
+
export interface LineDrawEvent extends DrawEvent {
|
|
1690
|
+
/** Always `'line'`. */
|
|
1691
|
+
type: 'line';
|
|
1692
|
+
/** All normalized values of the series. */
|
|
1693
|
+
values: NormalizedSeries;
|
|
1694
|
+
/** The line's path as drawn (a copy, safe to change). */
|
|
1695
|
+
path: SvgPath;
|
|
1696
|
+
}
|
|
1697
|
+
/**
|
|
1698
|
+
* The 1.x `draw` event of an area (with `showArea`), one per series and
|
|
1699
|
+
* segment. `index` is the series' index and `meta` the series' meta.
|
|
1700
|
+
*/
|
|
1701
|
+
export interface AreaDrawEvent extends DrawEvent {
|
|
1702
|
+
/** Always `'area'`. */
|
|
1703
|
+
type: 'area';
|
|
1704
|
+
/** All normalized values of the series. */
|
|
1705
|
+
values: NormalizedSeries;
|
|
1706
|
+
/** The area's path as drawn (a copy, safe to change). */
|
|
1707
|
+
path: SvgPath;
|
|
1708
|
+
}
|
|
1709
|
+
/** The 1.x events of a {@link LineChart} and their payloads, by event name. */
|
|
1710
|
+
export type LineChartEventsTypes = BaseChartEventsTypes<LineChartCreatedEvent, AxesDrawEvent | PointDrawEvent | LineDrawEvent | AreaDrawEvent>;
|
|
1711
|
+
//#endregion
|
|
1712
|
+
//#region src/render/measure.d.ts
|
|
1713
|
+
/** The size of a measured text, as a {@link MeasureText} function returns it. */
|
|
1714
|
+
interface TextMetrics {
|
|
1715
|
+
/** The text's width in px. */
|
|
1716
|
+
readonly width: number;
|
|
1717
|
+
/** The text's height in px: one line. */
|
|
1718
|
+
readonly height: number;
|
|
1719
|
+
/** The font size in px the text was measured with, when known. */
|
|
1720
|
+
readonly fontSize?: number;
|
|
1721
|
+
}
|
|
1722
|
+
/**
|
|
1723
|
+
* How labels are drawn: HTML in a `foreignObject` (1.x) or SVG `text`.
|
|
1724
|
+
* @experimental
|
|
1725
|
+
*/
|
|
1726
|
+
type LabelMode = 'html' | 'svg';
|
|
1727
|
+
/** What a {@link MeasureText} function gets with the text to measure. */
|
|
1728
|
+
interface MeasureTextOptions {
|
|
1729
|
+
/** Class names of the text, for renderers that apply CSS. */
|
|
1730
|
+
readonly classes?: readonly string[];
|
|
1731
|
+
/**
|
|
1732
|
+
* Font size in px. Without it, the browser measures with the CSS font
|
|
1733
|
+
* size and the estimate uses 12, the size of 1.x `.ct-label`.
|
|
1734
|
+
*/
|
|
1735
|
+
readonly fontSize?: number;
|
|
1736
|
+
/** Classes of the chart's root svg, so chart-type CSS applies. */
|
|
1737
|
+
readonly rootClass?: string;
|
|
1738
|
+
/** Where to measure (the chart container), so its CSS applies. */
|
|
1739
|
+
readonly container?: Element;
|
|
1740
|
+
}
|
|
1741
|
+
/**
|
|
1742
|
+
* Measures how much space a text takes, in px, so labels can be wrapped
|
|
1743
|
+
* and aligned. In the browser, Chartist measures with the page's fonts;
|
|
1744
|
+
* `toScene()` estimates (0.6 em per character, 1.2 em per line) unless you
|
|
1745
|
+
* pass your own in its size.
|
|
1746
|
+
*
|
|
1747
|
+
* @example
|
|
1748
|
+
* ```ts
|
|
1749
|
+
* import type { MeasureText } from 'chartist';
|
|
1750
|
+
*
|
|
1751
|
+
* // Wider glyphs than the estimate, for a wide font.
|
|
1752
|
+
* export const measureText: MeasureText = (text, options = {}) => {
|
|
1753
|
+
* const fontSize = options.fontSize ?? 12;
|
|
1754
|
+
* return { width: text.length * fontSize * 0.7, height: fontSize * 1.25 };
|
|
1755
|
+
* };
|
|
1756
|
+
* ```
|
|
1757
|
+
*/
|
|
1758
|
+
type MeasureText = (text: string, options?: MeasureTextOptions) => TextMetrics;
|
|
1759
|
+
/**
|
|
1760
|
+
* Estimates text size without a DOM: an average glyph is 0.6 em wide, and a
|
|
1761
|
+
* line is 1.2 em high, at `fontSize` or else 12 px. `toScene()` measures
|
|
1762
|
+
* with it unless you pass your own, which can build on it.
|
|
1763
|
+
*
|
|
1764
|
+
* @example
|
|
1765
|
+
* ```ts
|
|
1766
|
+
* import { estimateText, type MeasureText } from 'chartist';
|
|
1767
|
+
*
|
|
1768
|
+
* // Bold labels: a tenth wider than the estimate.
|
|
1769
|
+
* export const measureText: MeasureText = (text, options) => {
|
|
1770
|
+
* const size = estimateText(text, options);
|
|
1771
|
+
* return { ...size, width: size.width * 1.1 };
|
|
1772
|
+
* };
|
|
1773
|
+
* ```
|
|
1774
|
+
* @experimental
|
|
1775
|
+
*/
|
|
1776
|
+
export declare const estimateText: MeasureText;
|
|
1777
|
+
//#endregion
|
|
1778
|
+
//#region src/layers/line.d.ts
|
|
1779
|
+
/**
|
|
1780
|
+
* The line options you can set per series: in the `overrides` of
|
|
1781
|
+
* {@link line}, or the `series` option of `lineChart`.
|
|
1782
|
+
*/
|
|
1783
|
+
interface LineSeriesOptions {
|
|
1784
|
+
/**
|
|
1785
|
+
* How a line runs between its points: `true` smooths it with
|
|
1786
|
+
* `Interpolation.monotoneCubic`, `false` draws straight segments
|
|
1787
|
+
* (`Interpolation.none`), or pass an interpolation such as
|
|
1788
|
+
* `Interpolation.cardinal()`, `Interpolation.step()` or your own.
|
|
1789
|
+
*/
|
|
1790
|
+
readonly lineSmooth?: boolean | LineInterpolation;
|
|
1791
|
+
/** Draws a point at each value. */
|
|
1792
|
+
readonly showPoint?: boolean;
|
|
1793
|
+
/** Draws the lines. */
|
|
1794
|
+
readonly showLine?: boolean;
|
|
1795
|
+
/** Fills the area between each line and `areaBase`. */
|
|
1796
|
+
readonly showArea?: boolean;
|
|
1797
|
+
/**
|
|
1798
|
+
* The value the areas close at, usually 0. It's kept within the Y axis
|
|
1799
|
+
* range.
|
|
1800
|
+
*/
|
|
1801
|
+
readonly areaBase?: number;
|
|
1802
|
+
}
|
|
1803
|
+
/**
|
|
1804
|
+
* The options of the {@link line} layer. Without them, it draws every
|
|
1805
|
+
* series as a smooth line with points and no area, on the first X and Y
|
|
1806
|
+
* axis.
|
|
1807
|
+
* @experimental
|
|
1808
|
+
*/
|
|
1809
|
+
interface LineLayerOptions extends LineSeriesOptions {
|
|
1810
|
+
/** Series to draw, by index or name; default: all series. */
|
|
1811
|
+
readonly series?: readonly (number | string)[];
|
|
1812
|
+
/** The id of the X axis to draw on; default: the first X axis. */
|
|
1813
|
+
readonly x?: string;
|
|
1814
|
+
/** The id of the Y axis to draw on; default: the first Y axis. */
|
|
1815
|
+
readonly y?: string;
|
|
1816
|
+
/**
|
|
1817
|
+
* Point position on a step axis: `start` of each step (1.x) or its
|
|
1818
|
+
* `center`, where bars are centered.
|
|
1819
|
+
*/
|
|
1820
|
+
readonly align?: 'start' | 'center';
|
|
1821
|
+
/** Option overrides per series name (the 1.x `series` option). */
|
|
1822
|
+
readonly overrides?: Readonly<Record<string, LineSeriesOptions>>;
|
|
1823
|
+
/**
|
|
1824
|
+
* Draws the series in reverse order (1.x `reverseData`). Can't be
|
|
1825
|
+
* combined with `series`.
|
|
1826
|
+
*/
|
|
1827
|
+
readonly reverseData?: boolean;
|
|
1828
|
+
/**
|
|
1829
|
+
* Replaces the classes of what the layer draws: `series` (`ct-series`),
|
|
1830
|
+
* `line` (`ct-line`), `point` (`ct-point`) and `area` (`ct-area`).
|
|
1831
|
+
*/
|
|
1832
|
+
readonly classNames?: {
|
|
1833
|
+
readonly series?: string;
|
|
1834
|
+
readonly line?: string;
|
|
1835
|
+
readonly point?: string;
|
|
1836
|
+
readonly area?: string;
|
|
1837
|
+
};
|
|
1838
|
+
}
|
|
1839
|
+
/**
|
|
1840
|
+
* Creates a layer that draws series as lines, with points and optional
|
|
1841
|
+
* areas, in the markup of the 1.x line chart (`g.ct-series` with
|
|
1842
|
+
* `path.ct-line`, `line.ct-point` and `path.ct-area`). It needs an X and a
|
|
1843
|
+
* Y axis, from {@link cartesianAxes}.
|
|
1844
|
+
*
|
|
1845
|
+
* @example
|
|
1846
|
+
* ```ts
|
|
1847
|
+
* import {
|
|
1848
|
+
* autoScaleAxis,
|
|
1849
|
+
* axisGrid,
|
|
1850
|
+
* axisLabels,
|
|
1851
|
+
* cartesianAxes,
|
|
1852
|
+
* chart,
|
|
1853
|
+
* line,
|
|
1854
|
+
* stepAxis
|
|
1855
|
+
* } from 'chartist';
|
|
1856
|
+
*
|
|
1857
|
+
* const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
|
|
1858
|
+
*
|
|
1859
|
+
* chart('#chart', {
|
|
1860
|
+
* data: {
|
|
1861
|
+
* labels: days,
|
|
1862
|
+
* series: [
|
|
1863
|
+
* { name: 'visits', data: [12, 9, 7, 8, 5] },
|
|
1864
|
+
* { name: 'sales', data: [2, 1, 3.5, 7, 3] }
|
|
1865
|
+
* ]
|
|
1866
|
+
* },
|
|
1867
|
+
* axes: cartesianAxes([
|
|
1868
|
+
* { id: 'day', side: 'bottom', type: stepAxis(), ticks: days },
|
|
1869
|
+
* { id: 'count', side: 'left', type: autoScaleAxis(), low: 0 }
|
|
1870
|
+
* ]),
|
|
1871
|
+
* layers: [
|
|
1872
|
+
* axisGrid(),
|
|
1873
|
+
* line({ showArea: true, overrides: { sales: { showArea: false } } }),
|
|
1874
|
+
* axisLabels()
|
|
1875
|
+
* ]
|
|
1876
|
+
* });
|
|
1877
|
+
* ```
|
|
1878
|
+
* @experimental
|
|
1879
|
+
*/
|
|
1880
|
+
export declare function line(options?: LineLayerOptions): Layer;
|
|
1881
|
+
//#endregion
|
|
1882
|
+
//#region src/scene/roles.d.ts
|
|
1883
|
+
/** A position in the chart's SVG, in px from its top left corner. */
|
|
1884
|
+
interface Point {
|
|
1885
|
+
/** Px from the left edge of the SVG. */
|
|
1886
|
+
readonly x: number;
|
|
1887
|
+
/** Px from the top edge of the SVG. */
|
|
1888
|
+
readonly y: number;
|
|
1889
|
+
}
|
|
1890
|
+
/**
|
|
1891
|
+
* The context of nodes that belong to no series, such as grid lines. It
|
|
1892
|
+
* says so, so `ctx.seriesIndex` reads as `number | undefined` on any node.
|
|
1893
|
+
*/
|
|
1894
|
+
interface NoSeries {
|
|
1895
|
+
/** Always absent: the node belongs to no series. */
|
|
1896
|
+
readonly seriesIndex?: undefined;
|
|
1897
|
+
/** Always absent: the node stands for no value. */
|
|
1898
|
+
readonly valueIndex?: undefined;
|
|
1899
|
+
}
|
|
1900
|
+
/**
|
|
1901
|
+
* What every node of a series knows about its series: series groups,
|
|
1902
|
+
* points, lines, areas, bars and slices.
|
|
1903
|
+
*/
|
|
1904
|
+
interface SeriesContext {
|
|
1905
|
+
/** The series as given in the data (array, or object with `data`). */
|
|
1906
|
+
readonly series: unknown;
|
|
1907
|
+
/** The series' index in the chart's data, across layers. */
|
|
1908
|
+
readonly seriesIndex: number;
|
|
1909
|
+
/** The series' `meta`, if it's a series object with one. */
|
|
1910
|
+
readonly meta: unknown;
|
|
1911
|
+
}
|
|
1912
|
+
/**
|
|
1913
|
+
* The context of a `series` node: the `g` element that holds one series'
|
|
1914
|
+
* lines, areas, points, bars or slice. It knows its series, but no value.
|
|
1915
|
+
*/
|
|
1916
|
+
interface SeriesGroupContext extends SeriesContext {
|
|
1917
|
+
/** Always absent: the group stands for the whole series. */
|
|
1918
|
+
readonly valueIndex?: undefined;
|
|
1919
|
+
}
|
|
1920
|
+
/** What a node of one value knows about it: its index and its value. */
|
|
1921
|
+
interface ValueContext {
|
|
1922
|
+
/** The value's index in its series, from 0. */
|
|
1923
|
+
readonly valueIndex: number;
|
|
1924
|
+
/** The normalized value: a number, `{ x, y }` numbers, or a hole. */
|
|
1925
|
+
readonly value: NormalizedSeriesValue;
|
|
1926
|
+
}
|
|
1927
|
+
/**
|
|
1928
|
+
* The context of a `point` node: one value of a line chart's series, and
|
|
1929
|
+
* where it's drawn. `x` and `y` are the point's position in px in the SVG.
|
|
1930
|
+
* Line values are normalized to `{ x, y }` (or a hole), so the value is
|
|
1931
|
+
* `ctx.value.y`.
|
|
1932
|
+
*/
|
|
1933
|
+
interface PointContext extends SeriesContext, ValueContext, Point {}
|
|
1934
|
+
/**
|
|
1935
|
+
* The context of a `bar` node: one value of a bar chart's series, and the
|
|
1936
|
+
* line it's drawn as, from the base (`x1`, `y1`) to the value (`x2`,
|
|
1937
|
+
* `y2`), in px in the SVG. A stacked bar starts where the one below it
|
|
1938
|
+
* ends. Bars are clipped to the chart area.
|
|
1939
|
+
*/
|
|
1940
|
+
interface BarContext extends SeriesContext, ValueContext {
|
|
1941
|
+
/** The X of the bar's base, in px. */
|
|
1942
|
+
readonly x1: number;
|
|
1943
|
+
/** The Y of the bar's base, in px. */
|
|
1944
|
+
readonly y1: number;
|
|
1945
|
+
/** The X of the bar's end (the value), in px. */
|
|
1946
|
+
readonly x2: number;
|
|
1947
|
+
/** The Y of the bar's end (the value), in px. */
|
|
1948
|
+
readonly y2: number;
|
|
1949
|
+
}
|
|
1950
|
+
/**
|
|
1951
|
+
* The context of a `line` or `area` node: the path of a whole series of a
|
|
1952
|
+
* line chart, with all its values.
|
|
1953
|
+
*/
|
|
1954
|
+
interface PathContext extends SeriesContext {
|
|
1955
|
+
/** Always absent: the path stands for the whole series. */
|
|
1956
|
+
readonly valueIndex?: undefined;
|
|
1957
|
+
/** All values of the series. */
|
|
1958
|
+
readonly values: NormalizedSeries;
|
|
1959
|
+
/** The path as drawn (a copy, safe to change). */
|
|
1960
|
+
readonly path: SvgPath;
|
|
1961
|
+
}
|
|
1962
|
+
/**
|
|
1963
|
+
* The context of a `slice` node: a pie or donut slice, which is one series
|
|
1964
|
+
* with one value, and its geometry in px and degrees.
|
|
1965
|
+
*/
|
|
1966
|
+
interface SliceContext extends SeriesContext {
|
|
1967
|
+
/** The slice's value. */
|
|
1968
|
+
readonly value: number;
|
|
1969
|
+
/** Always 0: a slice's series has one value. */
|
|
1970
|
+
readonly valueIndex: 0;
|
|
1971
|
+
/** Same as `seriesIndex`, as in 1.x draw events. */
|
|
1972
|
+
readonly index: number;
|
|
1973
|
+
/** The sum of all slices (or the `total` option). */
|
|
1974
|
+
readonly totalDataSum: number;
|
|
1975
|
+
/** The slice's outline as drawn (a copy, safe to change). */
|
|
1976
|
+
readonly path: SvgPath;
|
|
1977
|
+
/** The center of the pie, in px in the SVG. */
|
|
1978
|
+
readonly center: Point;
|
|
1979
|
+
/** The pie's radius in px (for a donut, to the middle of its ring). */
|
|
1980
|
+
readonly radius: number;
|
|
1981
|
+
/** Where the slice starts, in degrees clockwise from the top. */
|
|
1982
|
+
readonly startAngle: number;
|
|
1983
|
+
/** Where the slice ends, in degrees clockwise from the top. */
|
|
1984
|
+
readonly endAngle: number;
|
|
1985
|
+
}
|
|
1986
|
+
/**
|
|
1987
|
+
* The context of a `grid` node: the grid line of an axis at one tick,
|
|
1988
|
+
* across the chart area. Its ends are in px in the SVG.
|
|
1989
|
+
*/
|
|
1990
|
+
interface GridContext extends NoSeries {
|
|
1991
|
+
/** The axis the line belongs to; `axis.dimension` is `x` or `y`. */
|
|
1992
|
+
readonly axis: ScaleAxis;
|
|
1993
|
+
/** The tick's index. */
|
|
1994
|
+
readonly index: number;
|
|
1995
|
+
/** The X of the line's start, in px. */
|
|
1996
|
+
readonly x1: number;
|
|
1997
|
+
/** The Y of the line's start, in px. */
|
|
1998
|
+
readonly y1: number;
|
|
1999
|
+
/** The X of the line's end, in px. */
|
|
2000
|
+
readonly x2: number;
|
|
2001
|
+
/** The Y of the line's end, in px. */
|
|
2002
|
+
readonly y2: number;
|
|
2003
|
+
}
|
|
2004
|
+
/**
|
|
2005
|
+
* The context of an axis `label` node: the label of an axis at one tick,
|
|
2006
|
+
* and the box it's laid out in, in px in the SVG.
|
|
2007
|
+
*/
|
|
2008
|
+
interface AxisLabelContext extends NoSeries {
|
|
2009
|
+
/** `axis` for axis labels; check it to tell them from pie labels. */
|
|
2010
|
+
readonly kind: 'axis';
|
|
2011
|
+
/** The axis the label belongs to; `axis.dimension` is `x` or `y`. */
|
|
2012
|
+
readonly axis: ScaleAxis;
|
|
2013
|
+
/** The tick's index. */
|
|
2014
|
+
readonly index: number;
|
|
2015
|
+
/** The label after `labelInterpolationFnc`. */
|
|
2016
|
+
readonly text: Label;
|
|
2017
|
+
/** The left edge of the label's box, in px. */
|
|
2018
|
+
readonly x: number;
|
|
2019
|
+
/** The top edge of the label's box, in px. */
|
|
2020
|
+
readonly y: number;
|
|
2021
|
+
/**
|
|
2022
|
+
* The width of the label's box in px. On the X axis, the space to the
|
|
2023
|
+
* next tick.
|
|
2024
|
+
*/
|
|
2025
|
+
readonly width: number;
|
|
2026
|
+
/**
|
|
2027
|
+
* The height of the label's box in px. On the Y axis, the space to the
|
|
2028
|
+
* next tick.
|
|
2029
|
+
*/
|
|
2030
|
+
readonly height: number;
|
|
2031
|
+
}
|
|
2032
|
+
/**
|
|
2033
|
+
* The context of a pie `label` node: a slice's label on a pie or donut.
|
|
2034
|
+
* `x` and `y` are where the label is anchored, in px in the SVG.
|
|
2035
|
+
*/
|
|
2036
|
+
interface PieLabelContext extends SeriesContext, Point {
|
|
2037
|
+
/** `pie` for slice labels; check it to tell them from axis labels. */
|
|
2038
|
+
readonly kind: 'pie';
|
|
2039
|
+
/** Always 0, as for the slice. */
|
|
2040
|
+
readonly valueIndex: 0;
|
|
2041
|
+
/** Same as `seriesIndex`, as in 1.x draw events. */
|
|
2042
|
+
readonly index: number;
|
|
2043
|
+
/** The label as drawn. */
|
|
2044
|
+
readonly text: string;
|
|
2045
|
+
}
|
|
2046
|
+
/**
|
|
2047
|
+
* The attributes of a `line` element: points, bars and grid lines. A point
|
|
2048
|
+
* is a line of 0.01 px, which the CSS draws as a dot with a round cap.
|
|
2049
|
+
*/
|
|
2050
|
+
interface LineAttrs {
|
|
2051
|
+
/** The X of the line's start, in px. */
|
|
2052
|
+
readonly x1: number;
|
|
2053
|
+
/** The Y of the line's start, in px. */
|
|
2054
|
+
readonly y1: number;
|
|
2055
|
+
/** The X of the line's end, in px. */
|
|
2056
|
+
readonly x2: number;
|
|
2057
|
+
/** The Y of the line's end, in px. */
|
|
2058
|
+
readonly y2: number;
|
|
2059
|
+
/** The value as written to the output, for points and bars. */
|
|
2060
|
+
readonly 'ct:value'?: string | number;
|
|
2061
|
+
/** The value's `meta`, serialized, for points and bars that have one. */
|
|
2062
|
+
readonly 'ct:meta'?: string;
|
|
2063
|
+
}
|
|
2064
|
+
/** The attributes of a `path` element: lines, areas and slices. */
|
|
2065
|
+
interface PathAttrs {
|
|
2066
|
+
/** The path data, as in SVG's `d` attribute. */
|
|
2067
|
+
readonly d: string;
|
|
2068
|
+
/** The value as written to the output, for slices. */
|
|
2069
|
+
readonly 'ct:value'?: string | number;
|
|
2070
|
+
/** The series' `meta`, serialized, for slices that have one. */
|
|
2071
|
+
readonly 'ct:meta'?: string;
|
|
2072
|
+
}
|
|
2073
|
+
/** The attributes of a series' `g` element. */
|
|
2074
|
+
interface SeriesAttrs {
|
|
2075
|
+
/** The series' `name`, if it has one. */
|
|
2076
|
+
readonly 'ct:series-name'?: string;
|
|
2077
|
+
/** The series' `meta`, serialized, if it has one (line and bar charts). */
|
|
2078
|
+
readonly 'ct:meta'?: string;
|
|
2079
|
+
}
|
|
2080
|
+
/** The attributes of a `rect` element: the grid background. */
|
|
2081
|
+
interface RectAttrs {
|
|
2082
|
+
/** The left edge, in px. */
|
|
2083
|
+
readonly x: number;
|
|
2084
|
+
/** The top edge, in px. */
|
|
2085
|
+
readonly y: number;
|
|
2086
|
+
/** The width in px. */
|
|
2087
|
+
readonly width: number;
|
|
2088
|
+
/** The height in px. */
|
|
2089
|
+
readonly height: number;
|
|
2090
|
+
}
|
|
2091
|
+
/**
|
|
2092
|
+
* The roles of scene nodes, and for each its data context (`ctx`) and
|
|
2093
|
+
* attributes (`attrs`). Checking `node.role` narrows a {@link SceneNode} to
|
|
2094
|
+
* its role, so `ctx` has that role's fields.
|
|
2095
|
+
*
|
|
2096
|
+
* The built-in layers and axes use the roles below; the class names are
|
|
2097
|
+
* their defaults. A plugin that adds nodes with a role of its own declares
|
|
2098
|
+
* it here with TypeScript's module augmentation; {@link node} and
|
|
2099
|
+
* {@link findAll} then accept it, and its `compose` listeners see it.
|
|
2100
|
+
*
|
|
2101
|
+
* @example
|
|
2102
|
+
* ```ts
|
|
2103
|
+
* import { node, type ChartPlugin } from 'chartist';
|
|
2104
|
+
*
|
|
2105
|
+
* declare module 'chartist' {
|
|
2106
|
+
* interface NodeRoles {
|
|
2107
|
+
* marker: {
|
|
2108
|
+
* ctx: { readonly seriesIndex: number; readonly label: string };
|
|
2109
|
+
* attrs: { readonly cx: number; readonly cy: number };
|
|
2110
|
+
* };
|
|
2111
|
+
* }
|
|
2112
|
+
* }
|
|
2113
|
+
*
|
|
2114
|
+
* // A marker on the last point of each series.
|
|
2115
|
+
* export const markers: ChartPlugin = {
|
|
2116
|
+
* name: 'markers',
|
|
2117
|
+
* install(chart) {
|
|
2118
|
+
* chart.on('compose', current => {
|
|
2119
|
+
* if (current.role !== 'series') {
|
|
2120
|
+
* return;
|
|
2121
|
+
* }
|
|
2122
|
+
* const last = current.children.at(-1);
|
|
2123
|
+
* if (last?.role !== 'point') {
|
|
2124
|
+
* return;
|
|
2125
|
+
* }
|
|
2126
|
+
* const { x, y, seriesIndex } = last.ctx;
|
|
2127
|
+
* return current.append(
|
|
2128
|
+
* node('circle', { cx: x, cy: y, r: 6 }, 'ct-marker', {
|
|
2129
|
+
* role: 'marker',
|
|
2130
|
+
* ctx: { seriesIndex, label: 'last' }
|
|
2131
|
+
* })
|
|
2132
|
+
* );
|
|
2133
|
+
* });
|
|
2134
|
+
* }
|
|
2135
|
+
* };
|
|
2136
|
+
* ```
|
|
2137
|
+
*/
|
|
2138
|
+
interface NodeRoles {
|
|
2139
|
+
/** A value of a line chart: a `line` of 0.01 px (class `ct-point`). */
|
|
2140
|
+
point: {
|
|
2141
|
+
ctx: PointContext;
|
|
2142
|
+
attrs: LineAttrs;
|
|
2143
|
+
};
|
|
2144
|
+
/** A value of a bar chart: a `line` (class `ct-bar`). */
|
|
2145
|
+
bar: {
|
|
2146
|
+
ctx: BarContext;
|
|
2147
|
+
attrs: LineAttrs;
|
|
2148
|
+
};
|
|
2149
|
+
/** A series' line in a line chart: a `path` (class `ct-line`). */
|
|
2150
|
+
line: {
|
|
2151
|
+
ctx: PathContext;
|
|
2152
|
+
attrs: PathAttrs;
|
|
2153
|
+
};
|
|
2154
|
+
/** A series' filled area in a line chart: a `path` (class `ct-area`). */
|
|
2155
|
+
area: {
|
|
2156
|
+
ctx: PathContext;
|
|
2157
|
+
attrs: PathAttrs;
|
|
2158
|
+
};
|
|
2159
|
+
/**
|
|
2160
|
+
* A pie or donut slice: a `path` (class `ct-slice-pie` or
|
|
2161
|
+
* `ct-slice-donut`).
|
|
2162
|
+
*/
|
|
2163
|
+
slice: {
|
|
2164
|
+
ctx: SliceContext;
|
|
2165
|
+
attrs: PathAttrs;
|
|
2166
|
+
};
|
|
2167
|
+
/** The `g` element that holds a series' nodes (class `ct-series`). */
|
|
2168
|
+
series: {
|
|
2169
|
+
ctx: SeriesGroupContext;
|
|
2170
|
+
attrs: SeriesAttrs;
|
|
2171
|
+
};
|
|
2172
|
+
/** A grid line of an axis at a tick: a `line` (class `ct-grid`). */
|
|
2173
|
+
grid: {
|
|
2174
|
+
ctx: GridContext;
|
|
2175
|
+
attrs: LineAttrs;
|
|
2176
|
+
};
|
|
2177
|
+
/** The `rect` behind the chart area (class `ct-grid-background`). */
|
|
2178
|
+
gridBackground: {
|
|
2179
|
+
ctx: NoSeries;
|
|
2180
|
+
attrs: RectAttrs;
|
|
2181
|
+
};
|
|
2182
|
+
/**
|
|
2183
|
+
* An axis label (a `foreignObject` with a `span`, or SVG `text`) or a
|
|
2184
|
+
* pie label (SVG `text`). Check `ctx.kind` to tell them apart.
|
|
2185
|
+
*/
|
|
2186
|
+
label: {
|
|
2187
|
+
ctx: AxisLabelContext | PieLabelContext;
|
|
2188
|
+
attrs: object;
|
|
2189
|
+
};
|
|
2190
|
+
}
|
|
2191
|
+
/** A role name, such as `point` or `bar`: a key of {@link NodeRoles}. */
|
|
2192
|
+
type NodeRole = keyof NodeRoles;
|
|
2193
|
+
//#endregion
|
|
2194
|
+
//#region src/scene/node.d.ts
|
|
2195
|
+
/**
|
|
2196
|
+
* The value of a node attribute. Numbers are written as they are, e.g.
|
|
2197
|
+
* `x1="12.5"`.
|
|
2198
|
+
*/
|
|
2199
|
+
type AttrValue = string | number;
|
|
2200
|
+
/**
|
|
2201
|
+
* Data attached to a node without a role, e.g. by a plugin. Never rendered.
|
|
2202
|
+
* Any fields are allowed; the ones below have a meaning to Chartist.
|
|
2203
|
+
*/
|
|
2204
|
+
interface NodeContext {
|
|
2205
|
+
/**
|
|
2206
|
+
* The index of the series the node belongs to. With it, the node gets a
|
|
2207
|
+
* `key` and {@link findAll} can find it by series.
|
|
2208
|
+
*/
|
|
2209
|
+
readonly seriesIndex?: number;
|
|
2210
|
+
/** The index of the value in its series the node stands for. */
|
|
2211
|
+
readonly valueIndex?: number;
|
|
2212
|
+
/** The value the node stands for. */
|
|
2213
|
+
readonly value?: unknown;
|
|
2214
|
+
/** The `meta` of the value or series, as given in the data. */
|
|
2215
|
+
readonly meta?: unknown;
|
|
2216
|
+
/** Any other data you want to keep with the node. */
|
|
2217
|
+
readonly [key: string]: unknown;
|
|
2218
|
+
}
|
|
2219
|
+
/**
|
|
2220
|
+
* What a node means, next to how it looks: its key, role and data
|
|
2221
|
+
* context. None of it is rendered.
|
|
2222
|
+
*/
|
|
2223
|
+
interface NodeMeta {
|
|
2224
|
+
/** A stable id, e.g. `0/1/3` (layer, series, value). */
|
|
2225
|
+
readonly key?: string;
|
|
2226
|
+
/** What the node draws, e.g. `point` or `bar`: a key of {@link NodeRoles}. */
|
|
2227
|
+
readonly role?: NodeRole;
|
|
2228
|
+
/** The node's data: what its role declares, or anything for plain nodes. */
|
|
2229
|
+
readonly ctx?: object;
|
|
2230
|
+
}
|
|
2231
|
+
/** The fields every node has, whatever its role. */
|
|
2232
|
+
interface SceneNodeFields {
|
|
2233
|
+
/** SVG element name, e.g. `g`, `path`, `line`. */
|
|
2234
|
+
readonly name: string;
|
|
2235
|
+
/**
|
|
2236
|
+
* The element's attributes, without `class`. Names with a `ct:` prefix
|
|
2237
|
+
* (`ct:value`, `ct:meta`) are written in the Chartist namespace.
|
|
2238
|
+
*/
|
|
2239
|
+
readonly attrs: Readonly<Record<string, AttrValue>>;
|
|
2240
|
+
/** The element's class names, each once, in the order they were added. */
|
|
2241
|
+
readonly classes: readonly string[];
|
|
2242
|
+
/** The child nodes, in document order. */
|
|
2243
|
+
readonly children: readonly SceneNode[];
|
|
2244
|
+
/** Text content, set with `text()`. */
|
|
2245
|
+
readonly content?: string;
|
|
2246
|
+
/**
|
|
2247
|
+
* A stable id that survives updates. The pipeline keys data nodes that
|
|
2248
|
+
* have none: `layer/series/value` for a value's node (e.g. `0/1/3`),
|
|
2249
|
+
* `layer/series` for a series' node.
|
|
2250
|
+
*/
|
|
2251
|
+
readonly key?: string;
|
|
2252
|
+
}
|
|
2253
|
+
/**
|
|
2254
|
+
* The builder methods of every node. Each returns a changed copy of the
|
|
2255
|
+
* same type and leaves the node it's called on as it was.
|
|
2256
|
+
*/
|
|
2257
|
+
interface SceneNodeMethods {
|
|
2258
|
+
/** Sets attributes; `undefined` or `null` removes one. */
|
|
2259
|
+
attr(attributes: Record<string, AttrValue | undefined | null>): this;
|
|
2260
|
+
/** Adds space-separated class names that aren't present yet. */
|
|
2261
|
+
addClass(names: string): this;
|
|
2262
|
+
/** Removes space-separated class names. */
|
|
2263
|
+
removeClass(names: string): this;
|
|
2264
|
+
/** Adds a child at the end, or at the start with `insertFirst`. */
|
|
2265
|
+
append(child: SceneNode, insertFirst?: boolean): this;
|
|
2266
|
+
/** Removes a direct child (by identity). */
|
|
2267
|
+
remove(child: SceneNode): this;
|
|
2268
|
+
/** Replaces a direct child (by identity). */
|
|
2269
|
+
replace(child: SceneNode, next: SceneNode): this;
|
|
2270
|
+
/** Sets the text content. */
|
|
2271
|
+
text(content: string): this;
|
|
2272
|
+
/** Removes all children and text content. */
|
|
2273
|
+
empty(): this;
|
|
2274
|
+
}
|
|
2275
|
+
/**
|
|
2276
|
+
* A node of a role, such as `RoleNode<'point'>`: its context and
|
|
2277
|
+
* attributes are the ones {@link NodeRoles} declares for that role.
|
|
2278
|
+
* {@link findAll} with a `role` returns these.
|
|
2279
|
+
*/
|
|
2280
|
+
type RoleNode<R extends NodeRole> = SceneNodeFields & SceneNodeMethods & {
|
|
2281
|
+
/** What the node draws, e.g. `point`. */
|
|
2282
|
+
readonly role: R;
|
|
2283
|
+
/**
|
|
2284
|
+
* The node's data, as its role declares it. `seriesIndex` and
|
|
2285
|
+
* `valueIndex` read as `number | undefined` on any node, declared or
|
|
2286
|
+
* not.
|
|
2287
|
+
*/
|
|
2288
|
+
readonly ctx: NodeRoles[R]['ctx'] & {
|
|
2289
|
+
readonly seriesIndex?: number;
|
|
2290
|
+
readonly valueIndex?: number;
|
|
2291
|
+
};
|
|
2292
|
+
/**
|
|
2293
|
+
* The element's attributes, typed as the built-in layers set them;
|
|
2294
|
+
* `attr()` can change them.
|
|
2295
|
+
*/
|
|
2296
|
+
readonly attrs: Readonly<Record<string, AttrValue>> & NodeRoles[R]['attrs'];
|
|
2297
|
+
};
|
|
2298
|
+
/** A node without a role: groups, decorations, anything a plugin adds. */
|
|
2299
|
+
type PlainNode = SceneNodeFields & SceneNodeMethods & {
|
|
2300
|
+
/** Always absent: plain nodes have no role. */
|
|
2301
|
+
readonly role?: undefined;
|
|
2302
|
+
/** Data you attach to the node, if any. */
|
|
2303
|
+
readonly ctx?: NodeContext;
|
|
2304
|
+
};
|
|
2305
|
+
/**
|
|
2306
|
+
* A scene node: a node of one of the roles in {@link NodeRoles}, or a plain
|
|
2307
|
+
* one. Check `role` to narrow it, e.g. `if (node.role === 'point') node.ctx.x`.
|
|
2308
|
+
*
|
|
2309
|
+
* Nodes are immutable: the builder methods ({@link SceneNodeMethods}) return
|
|
2310
|
+
* a new node. The `compose` and `scene` phase events pass nodes to your
|
|
2311
|
+
* listeners, and the renderers turn them into SVG.
|
|
2312
|
+
*/
|
|
2313
|
+
type SceneNode = { [R in NodeRole]: RoleNode<R>; }[NodeRole] | PlainNode;
|
|
2314
|
+
/**
|
|
2315
|
+
* What {@link node} takes as `meta` for a node of role `R`: the role, a key,
|
|
2316
|
+
* and the role's context (required when the role declares fields).
|
|
2317
|
+
*/
|
|
2318
|
+
type RoleMeta<R extends NodeRole> = {
|
|
2319
|
+
/** The node's role, e.g. `point`. */
|
|
2320
|
+
readonly role: R;
|
|
2321
|
+
/** A stable id; the pipeline sets one for data nodes that have none. */
|
|
2322
|
+
readonly key?: string;
|
|
2323
|
+
} & (object extends NodeRoles[R]['ctx'] ? {
|
|
2324
|
+
readonly ctx?: NodeRoles[R]['ctx'];
|
|
2325
|
+
} : {
|
|
2326
|
+
readonly ctx: NodeRoles[R]['ctx'];
|
|
2327
|
+
});
|
|
2328
|
+
/**
|
|
2329
|
+
* Creates a scene node: an SVG element with attributes and classes, and,
|
|
2330
|
+
* for a node with a role, its data context. Use it in `compose` listeners
|
|
2331
|
+
* and custom layers to add or replace elements. With a `role` in `meta`,
|
|
2332
|
+
* the node is typed as that role's node and the context is checked.
|
|
2333
|
+
*
|
|
2334
|
+
* @param name SVG element name, e.g. `circle`, `g` or `text`
|
|
2335
|
+
* @param attributes Attributes; `undefined` and `null` values are skipped
|
|
2336
|
+
* @param className Space-separated class names
|
|
2337
|
+
* @param meta Role, data context and key of the node
|
|
2338
|
+
* @returns A new node without children
|
|
2339
|
+
* @example
|
|
2340
|
+
* ```ts
|
|
2341
|
+
* import { lineChart, node } from 'chartist';
|
|
2342
|
+
*
|
|
2343
|
+
* // Circles instead of the line chart's points.
|
|
2344
|
+
* lineChart(
|
|
2345
|
+
* '#chart',
|
|
2346
|
+
* { series: [[1, 3, 2, 4]] },
|
|
2347
|
+
* {
|
|
2348
|
+
* plugins: [
|
|
2349
|
+
* {
|
|
2350
|
+
* name: 'circles',
|
|
2351
|
+
* install(chart) {
|
|
2352
|
+
* chart.on('compose', current => {
|
|
2353
|
+
* if (current.role !== 'point') {
|
|
2354
|
+
* return;
|
|
2355
|
+
* }
|
|
2356
|
+
* const { x, y } = current.ctx;
|
|
2357
|
+
* return node('circle', { cx: x, cy: y, r: 5 }, 'ct-circle', {
|
|
2358
|
+
* role: 'point',
|
|
2359
|
+
* ctx: current.ctx,
|
|
2360
|
+
* key: current.key
|
|
2361
|
+
* });
|
|
2362
|
+
* });
|
|
2363
|
+
* }
|
|
2364
|
+
* }
|
|
2365
|
+
* ]
|
|
2366
|
+
* }
|
|
2367
|
+
* );
|
|
2368
|
+
* ```
|
|
2369
|
+
*/
|
|
2370
|
+
export declare function node<R extends NodeRole>(name: string, attributes: Record<string, AttrValue | undefined | null>, className: string, meta: RoleMeta<R>): RoleNode<R>;
|
|
2371
|
+
export declare function node(name: string, attributes?: Record<string, AttrValue | undefined | null>, className?: string, meta?: {
|
|
2372
|
+
readonly key?: string;
|
|
2373
|
+
readonly ctx?: NodeContext;
|
|
2374
|
+
}): PlainNode;
|
|
2375
|
+
//#endregion
|
|
2376
|
+
//#region src/scales/svgLabels.d.ts
|
|
2377
|
+
/**
|
|
2378
|
+
* How an SVG text label sits in its label box, as set in the `align`
|
|
2379
|
+
* option of {@link axisLabels}.
|
|
2380
|
+
* @experimental
|
|
2381
|
+
*/
|
|
2382
|
+
interface LabelAlign {
|
|
2383
|
+
/** Aligns the text to the box's left (`start`), center or right (`end`). */
|
|
2384
|
+
readonly horizontal: 'start' | 'middle' | 'end';
|
|
2385
|
+
/** Aligns the lines of text to the box's top, middle or bottom. */
|
|
2386
|
+
readonly vertical: 'top' | 'middle' | 'bottom';
|
|
2387
|
+
}
|
|
2388
|
+
//#endregion
|
|
2389
|
+
//#region src/scales/grid.d.ts
|
|
2390
|
+
/** The classes of an axis's grid lines and labels. */
|
|
2391
|
+
interface AxisClassNames {
|
|
2392
|
+
/** Each grid line (`ct-grid`). */
|
|
2393
|
+
readonly grid: string;
|
|
2394
|
+
/** Each label (`ct-label`). */
|
|
2395
|
+
readonly label: string;
|
|
2396
|
+
/** Grid lines and labels of an X axis (`ct-horizontal`). */
|
|
2397
|
+
readonly horizontal: string;
|
|
2398
|
+
/** Grid lines and labels of a Y axis (`ct-vertical`). */
|
|
2399
|
+
readonly vertical: string;
|
|
2400
|
+
/** Labels of an axis at the top or left (`ct-start`). */
|
|
2401
|
+
readonly start: string;
|
|
2402
|
+
/** Labels of an axis at the bottom or right (`ct-end`). */
|
|
2403
|
+
readonly end: string;
|
|
2404
|
+
}
|
|
2405
|
+
//#endregion
|
|
2406
|
+
//#region src/responsive/responsive.d.ts
|
|
2407
|
+
/**
|
|
2408
|
+
* Responsive entries: `[condition, overrides]` pairs, merged in order when
|
|
2409
|
+
* their condition matches. A plain string is a window media query (1.x); a
|
|
2410
|
+
* `container()` condition is a CSS container query, evaluated with
|
|
2411
|
+
* `Element.matchContainer()` (native or the `match-container` polyfill).
|
|
2412
|
+
*/
|
|
2413
|
+
/**
|
|
2414
|
+
* A container query condition for a responsive entry, created with
|
|
2415
|
+
* {@link container}.
|
|
2416
|
+
* @experimental
|
|
2417
|
+
*/
|
|
2418
|
+
interface ContainerCondition {
|
|
2419
|
+
/** Always `container`: tells the condition from a media query string. */
|
|
2420
|
+
readonly type: 'container';
|
|
2421
|
+
/** A `@container` condition, e.g. `(width < 400px)`. */
|
|
2422
|
+
readonly query: string;
|
|
2423
|
+
}
|
|
2424
|
+
/**
|
|
2425
|
+
* When a responsive entry applies: a window media query string, such as
|
|
2426
|
+
* `(max-width: 640px)` (as in 1.x), or a {@link container} condition.
|
|
2427
|
+
* @experimental
|
|
2428
|
+
*/
|
|
2429
|
+
type ResponsiveCondition = string | ContainerCondition;
|
|
2430
|
+
/**
|
|
2431
|
+
* A responsive entry: a condition and the overrides that apply while it
|
|
2432
|
+
* matches, e.g. `['(max-width: 640px)', { showPoint: false }]`. Matching
|
|
2433
|
+
* entries apply in order, so later ones win.
|
|
2434
|
+
* @experimental
|
|
2435
|
+
*/
|
|
2436
|
+
type ResponsiveEntry<T> = readonly [ResponsiveCondition, T];
|
|
2437
|
+
/**
|
|
2438
|
+
* Marks a responsive entry as a container query, evaluated against the
|
|
2439
|
+
* chart container or an ancestor with a CSS `container-type`. Needs
|
|
2440
|
+
* `Element.matchContainer()`; until browsers ship it, load the
|
|
2441
|
+
* `match-container` polyfill. Without it, Chartist warns once and ignores
|
|
2442
|
+
* container entries; in `toScene()`, they never match.
|
|
2443
|
+
*
|
|
2444
|
+
* Works in the responsive entries of `chart()` and of the presets.
|
|
2445
|
+
*
|
|
2446
|
+
* @param query The condition you'd write after `@container` in CSS
|
|
2447
|
+
* @example
|
|
2448
|
+
* ```ts
|
|
2449
|
+
* import 'match-container';
|
|
2450
|
+
* import { container, lineChart } from 'chartist';
|
|
2451
|
+
*
|
|
2452
|
+
* lineChart(
|
|
2453
|
+
* '#chart',
|
|
2454
|
+
* {
|
|
2455
|
+
* labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
|
|
2456
|
+
* series: [[12, 9, 7, 8, 5]]
|
|
2457
|
+
* },
|
|
2458
|
+
* { low: 0 },
|
|
2459
|
+
* [
|
|
2460
|
+
* [
|
|
2461
|
+
* container('(width < 400px)'),
|
|
2462
|
+
* {
|
|
2463
|
+
* showPoint: false,
|
|
2464
|
+
* axisX: { labelInterpolationFnc: value => String(value)[0] }
|
|
2465
|
+
* }
|
|
2466
|
+
* ]
|
|
2467
|
+
* ]
|
|
2468
|
+
* );
|
|
2469
|
+
* ```
|
|
2470
|
+
* @experimental
|
|
2471
|
+
*/
|
|
2472
|
+
export declare function container(query: string): ContainerCondition;
|
|
2473
|
+
/**
|
|
2474
|
+
* Watches the conditions of a {@link ResponsiveSet}'s entries, as its
|
|
2475
|
+
* `watch()` returns it: which entries match, and when that changes.
|
|
2476
|
+
* @experimental
|
|
2477
|
+
*/
|
|
2478
|
+
interface ResponsiveWatcher {
|
|
2479
|
+
/** Indexes of the matching entries, as of the last `check()`. */
|
|
2480
|
+
readonly matching: readonly number[];
|
|
2481
|
+
/** Re-reads all conditions; true if the matching set changed. */
|
|
2482
|
+
check(): boolean;
|
|
2483
|
+
/** Stops watching: no more `onChange` calls, and no listeners left. */
|
|
2484
|
+
stop(): void;
|
|
2485
|
+
}
|
|
2486
|
+
/**
|
|
2487
|
+
* Responsive entries for `chart()`, with the watcher that evaluates them.
|
|
2488
|
+
* Created by `responsive()`, so charts without responsive entries don't
|
|
2489
|
+
* bundle the watcher.
|
|
2490
|
+
* @experimental
|
|
2491
|
+
*/
|
|
2492
|
+
interface ResponsiveSet<T> {
|
|
2493
|
+
/** The entries as given to `responsive()`. */
|
|
2494
|
+
readonly entries: readonly ResponsiveEntry<T>[];
|
|
2495
|
+
/**
|
|
2496
|
+
* Starts watching the entries' conditions; `chart()` calls it. Calls
|
|
2497
|
+
* `onChange` when the set of matching entries changes.
|
|
2498
|
+
* @param host The chart's container, for container conditions
|
|
2499
|
+
* @param onChange Called after the matching entries changed
|
|
2500
|
+
*/
|
|
2501
|
+
watch(host: Element | undefined, onChange: () => void): ResponsiveWatcher;
|
|
2502
|
+
}
|
|
2503
|
+
/**
|
|
2504
|
+
* Responsive overrides for `chart()`: `[condition, overrides]` entries with
|
|
2505
|
+
* a media query string or a `container()` condition. Matching overrides are
|
|
2506
|
+
* shallow-merged over the config in order, so later entries win and an
|
|
2507
|
+
* override replaces a whole option (e.g. all `layers`).
|
|
2508
|
+
*
|
|
2509
|
+
* When the matching entries change, the chart emits a `responsive` event
|
|
2510
|
+
* with the config before and after, and renders again.
|
|
2511
|
+
*
|
|
2512
|
+
* @param entries `[condition, overrides]` pairs; the overrides are a
|
|
2513
|
+
* partial config: padding, axes, layers, size and the like
|
|
2514
|
+
* @example
|
|
2515
|
+
* ```ts
|
|
2516
|
+
* import {
|
|
2517
|
+
* autoScaleAxis,
|
|
2518
|
+
* axisGrid,
|
|
2519
|
+
* axisLabels,
|
|
2520
|
+
* cartesianAxes,
|
|
2521
|
+
* chart,
|
|
2522
|
+
* line,
|
|
2523
|
+
* responsive,
|
|
2524
|
+
* stepAxis
|
|
2525
|
+
* } from 'chartist';
|
|
2526
|
+
*
|
|
2527
|
+
* const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
|
|
2528
|
+
*
|
|
2529
|
+
* chart('#chart', {
|
|
2530
|
+
* data: { labels, series: [[12, 9, 7, 8, 5]] },
|
|
2531
|
+
* axes: cartesianAxes([
|
|
2532
|
+
* { id: 'x', side: 'bottom', type: stepAxis(), ticks: labels },
|
|
2533
|
+
* { id: 'y', side: 'left', type: autoScaleAxis(), low: 0 }
|
|
2534
|
+
* ]),
|
|
2535
|
+
* layers: [axisGrid(), line({ showArea: true }), axisLabels()],
|
|
2536
|
+
* responsive: responsive([
|
|
2537
|
+
* [
|
|
2538
|
+
* '(max-width: 640px)',
|
|
2539
|
+
* {
|
|
2540
|
+
* padding: 5,
|
|
2541
|
+
* layers: [axisGrid(), line({ showPoint: false }), axisLabels()]
|
|
2542
|
+
* }
|
|
2543
|
+
* ]
|
|
2544
|
+
* ])
|
|
2545
|
+
* });
|
|
2546
|
+
* ```
|
|
2547
|
+
* @experimental
|
|
2548
|
+
*/
|
|
2549
|
+
export declare function responsive<T>(entries: readonly ResponsiveEntry<T>[]): ResponsiveSet<T>;
|
|
2550
|
+
//#endregion
|
|
2551
|
+
//#region src/presets/preset.d.ts
|
|
2552
|
+
/**
|
|
2553
|
+
* What a preset passes to plugins as `ResolvedConfig.preset`: its kind, the
|
|
2554
|
+
* current 1.x options and 1.x-style updates.
|
|
2555
|
+
*/
|
|
2556
|
+
interface PresetState<TData = unknown, TOptions = unknown, TKind extends string = string> {
|
|
2557
|
+
/** Which preset: `line`, `bar` or `pie`. */
|
|
2558
|
+
readonly kind: TKind;
|
|
2559
|
+
/**
|
|
2560
|
+
* The current options: the given ones over the defaults, with the
|
|
2561
|
+
* matching responsive options applied.
|
|
2562
|
+
*/
|
|
2563
|
+
readonly options: TOptions;
|
|
2564
|
+
/** The current data. */
|
|
2565
|
+
readonly data: TData;
|
|
2566
|
+
/**
|
|
2567
|
+
* Changes the data, the options or both and redraws, as 1.x `update()`:
|
|
2568
|
+
* the options extend the current ones, or with `override`, the defaults.
|
|
2569
|
+
*/
|
|
2570
|
+
update(data?: TData, options?: TOptions, override?: boolean): void;
|
|
2571
|
+
/** Stops the chart's responsive updates, as 1.x `detach()`. */
|
|
2572
|
+
detach(): void;
|
|
2573
|
+
}
|
|
2574
|
+
/**
|
|
2575
|
+
* The handle `lineChart`, `barChart` and `pieChart` return: a
|
|
2576
|
+
* {@link ChartHandle} that also changes the chart's options.
|
|
2577
|
+
* `update({ data })` changes the preset's data too, so responsive changes
|
|
2578
|
+
* redraw with it.
|
|
2579
|
+
*
|
|
2580
|
+
* @example
|
|
2581
|
+
* ```ts
|
|
2582
|
+
* import { lineChart } from 'chartist';
|
|
2583
|
+
*
|
|
2584
|
+
* const chart = lineChart('#chart', { series: [[1, 3, 2, 5]] });
|
|
2585
|
+
*
|
|
2586
|
+
* // Areas from now on; the other options stay.
|
|
2587
|
+
* chart.setOptions({ showArea: true });
|
|
2588
|
+
* ```
|
|
2589
|
+
* @experimental
|
|
2590
|
+
*/
|
|
2591
|
+
interface PresetHandle<TOptions> extends ChartHandle {
|
|
2592
|
+
/**
|
|
2593
|
+
* Changes the options and redraws: they extend the current options, or
|
|
2594
|
+
* with `{ replace: true }`, the defaults, dropping the options given
|
|
2595
|
+
* before. Matching responsive options still apply on top. `plugins` and
|
|
2596
|
+
* `on` can't change. Coming from 1.x, `setOptions(options)` is
|
|
2597
|
+
* `update(undefined, options, true)` and
|
|
2598
|
+
* `setOptions(options, { replace: true })` is `update(undefined, options)`.
|
|
2599
|
+
* @param options The options to change.
|
|
2600
|
+
* @param how `replace: true` starts from the defaults instead of the
|
|
2601
|
+
* current options.
|
|
2602
|
+
*/
|
|
2603
|
+
setOptions(options: Omit<TOptions, 'plugins' | 'on'>, how?: {
|
|
2604
|
+
readonly replace?: boolean;
|
|
2605
|
+
}): this;
|
|
2606
|
+
}
|
|
2607
|
+
/** Internal: a preset with 1.x-style data and option updates. */
|
|
2608
|
+
interface PresetController<TData, TOptions> {
|
|
2609
|
+
readonly handle: PresetHandle<TOptions>;
|
|
2610
|
+
/** Replaces the data (1.x `update(data)`); call `render()` after. */
|
|
2611
|
+
setData(data: TData): void;
|
|
2612
|
+
/** 1.x option update: extends the defaults, or the current options. */
|
|
2613
|
+
setOptions(options: TOptions, override?: boolean): void;
|
|
2614
|
+
render(): void;
|
|
2615
|
+
options(): TOptions;
|
|
2616
|
+
data(): TData;
|
|
2617
|
+
}
|
|
2618
|
+
/** 1.x axis options whose `type` may also be a v2 axis factory. */
|
|
2619
|
+
type PresetAxisOptions = Omit<AxisOptions, 'type'> & {
|
|
2620
|
+
/** A v2 axis factory or a 1.x axis class. */
|
|
2621
|
+
readonly type?: AxisSetup['type'];
|
|
2622
|
+
};
|
|
2623
|
+
/**
|
|
2624
|
+
* Responsive options of presets: the 1.x media query pairs, plus container
|
|
2625
|
+
* conditions (`container()`). Matching entries extend the options in order.
|
|
2626
|
+
* @experimental
|
|
2627
|
+
*/
|
|
2628
|
+
type PresetResponsiveOptions<T> = readonly ResponsiveEntry<T>[];
|
|
2629
|
+
//#endregion
|
|
2630
|
+
//#region src/presets/lineChart.d.ts
|
|
2631
|
+
/**
|
|
2632
|
+
* Options of `lineChart`: the 1.x `LineChart` options; axis types may also
|
|
2633
|
+
* be v2 axis factories.
|
|
2634
|
+
* @experimental
|
|
2635
|
+
*/
|
|
2636
|
+
type LineChartPresetOptions = Omit<LineChartOptions, 'axisX' | 'axisY' | 'plugins' | 'series'> & {
|
|
2637
|
+
/** v2 plugins; convert 1.x plugins with `fromLegacyPlugin`. */
|
|
2638
|
+
readonly plugins?: readonly PluginEntry[];
|
|
2639
|
+
/**
|
|
2640
|
+
* Phase listeners by phase name (or `'*'` for all phases), as `on` in
|
|
2641
|
+
* the config of `chart()`. They're registered before the first render,
|
|
2642
|
+
* so they see it too.
|
|
2643
|
+
*/
|
|
2644
|
+
readonly on?: PhaseListeners;
|
|
2645
|
+
/** Options per series name: only these five apply per series. */
|
|
2646
|
+
readonly series?: Readonly<Record<string, LineSeriesOptions>>;
|
|
2647
|
+
/** Options of the X axis; its `type` may also be a v2 axis factory. */
|
|
2648
|
+
readonly axisX?: PresetAxisOptions & Omit<NonNullable<LineChartOptions['axisX']>, 'type'>;
|
|
2649
|
+
/** Options of the Y axis; its `type` may also be a v2 axis factory. */
|
|
2650
|
+
readonly axisY?: PresetAxisOptions & Omit<NonNullable<LineChartOptions['axisY']>, 'type'>;
|
|
2651
|
+
/** HTML (1.x) or SVG text labels; default: the renderer's mode. */
|
|
2652
|
+
readonly labels?: LabelMode;
|
|
2653
|
+
};
|
|
2654
|
+
/** What the line preset passes to plugins as `ResolvedConfig.preset`. */
|
|
2655
|
+
type LinePresetState = PresetState<LineChartData, LineChartPresetOptions, 'line'>;
|
|
2656
|
+
/**
|
|
2657
|
+
* Creates a line chart with the 1.x options and output, rendered
|
|
2658
|
+
* synchronously. Plugins must be v2 plugins; convert 1.x plugins with
|
|
2659
|
+
* `fromLegacyPlugin` from `chartist/compat`.
|
|
2660
|
+
* @experimental
|
|
2661
|
+
*/
|
|
2662
|
+
export declare function lineChart(target: string | Element, data: LineChartData, options?: LineChartPresetOptions, responsiveOptions?: PresetResponsiveOptions<LineChartPresetOptions>): PresetHandle<LineChartPresetOptions>;
|
|
2663
|
+
//#endregion
|
|
2664
|
+
//#region src/charts/BarChart/BarChart.types.d.ts
|
|
2665
|
+
/** The data of a bar chart: series of values, and labels for the bar groups. */
|
|
2666
|
+
export type BarChartData = Data;
|
|
2667
|
+
/** The options of a bar chart (1.x `BarChart`, and `barChart`). */
|
|
2668
|
+
export interface BarChartOptions<TXAxisOptions = AxisOptions, TYAxisOptions = TXAxisOptions> extends Options<TXAxisOptions, TYAxisOptions> {
|
|
2669
|
+
/**
|
|
2670
|
+
* The class names of the chart's elements. Change them to style the
|
|
2671
|
+
* chart with your own CSS instead of Chartist's.
|
|
2672
|
+
*/
|
|
2673
|
+
classNames?: {
|
|
2674
|
+
/** The chart's SVG element. */
|
|
2675
|
+
chart?: string;
|
|
2676
|
+
/** The chart's SVG element, with `horizontalBars`. */
|
|
2677
|
+
horizontalBars?: string;
|
|
2678
|
+
/** Each axis label. */
|
|
2679
|
+
label?: string;
|
|
2680
|
+
/** The group of an axis's labels. */
|
|
2681
|
+
labelGroup?: string;
|
|
2682
|
+
/** The group of each series. */
|
|
2683
|
+
series?: string;
|
|
2684
|
+
/** Each bar. */
|
|
2685
|
+
bar?: string;
|
|
2686
|
+
/** Each grid line. */
|
|
2687
|
+
grid?: string;
|
|
2688
|
+
/** The group of the grid lines. */
|
|
2689
|
+
gridGroup?: string;
|
|
2690
|
+
/** The grid background (with `showGridBackground`). */
|
|
2691
|
+
gridBackground?: string;
|
|
2692
|
+
/** Labels and grid lines of the vertical axis. */
|
|
2693
|
+
vertical?: string;
|
|
2694
|
+
/** Labels and grid lines of the horizontal axis. */
|
|
2695
|
+
horizontal?: string;
|
|
2696
|
+
/** Labels at the start of their axis (left or top). */
|
|
2697
|
+
start?: string;
|
|
2698
|
+
/** Labels at the end of their axis (right or bottom). */
|
|
2699
|
+
end?: string;
|
|
2700
|
+
};
|
|
2701
|
+
/** The distance in px between the bars of a group (one bar per series). */
|
|
2702
|
+
seriesBarDistance?: number;
|
|
2703
|
+
/** Stacks the bars of a group on each other; `stackMode` says how. */
|
|
2704
|
+
stackBars?: boolean;
|
|
2705
|
+
/**
|
|
2706
|
+
* How stacked bars stack: `accumulate` adds up each group's values (the
|
|
2707
|
+
* value axis fits the totals), `accumulate-relative` stacks positive
|
|
2708
|
+
* values up and negative values down, and `true` draws every bar from
|
|
2709
|
+
* zero, overlapping.
|
|
2710
|
+
*/
|
|
2711
|
+
stackMode?: 'accumulate' | 'accumulate-relative' | boolean;
|
|
2712
|
+
/**
|
|
2713
|
+
* Draws horizontal bars. The axes swap: the Y axis shows the labels and
|
|
2714
|
+
* the X axis the values, so swap their options too.
|
|
2715
|
+
*/
|
|
2716
|
+
horizontalBars?: boolean;
|
|
2717
|
+
/**
|
|
2718
|
+
* Treats one flat array of values as one series per value, each in its
|
|
2719
|
+
* own color: a profile rather than values over time.
|
|
2720
|
+
*/
|
|
2721
|
+
distributeSeries?: boolean;
|
|
2722
|
+
/** Reverses the labels, the order of the series and each series' values. */
|
|
2723
|
+
reverseData?: boolean;
|
|
2724
|
+
/** Fills the grid area with a background (class `ct-grid-background`). */
|
|
2725
|
+
showGridBackground?: boolean;
|
|
2726
|
+
}
|
|
2727
|
+
/** {@link BarChartOptions} after the defaults are applied: the 1.x `BarChart` works with these. */
|
|
2728
|
+
export type BarChartOptionsWithDefaults = RequiredKeys<BarChartOptions<RequiredKeys<AxisOptions, 'offset' | 'position' | 'labelOffset' | 'showLabel' | 'showGrid' | 'labelInterpolationFnc' | 'scaleMinSpace'>, RequiredKeys<AxisOptions, 'offset' | 'position' | 'labelOffset' | 'showLabel' | 'showGrid' | 'labelInterpolationFnc' | 'scaleMinSpace'>>, 'referenceValue' | 'chartPadding' | 'seriesBarDistance' | 'stackMode' | 'axisX' | 'axisY', 'classNames'>;
|
|
2729
|
+
/** The payload of a bar chart's 1.x `created` event. */
|
|
2730
|
+
export type BarChartCreatedEvent = CreatedEvent<BarChartOptions>;
|
|
2731
|
+
/**
|
|
2732
|
+
* The 1.x `draw` event of a bar, one per value. The bar is a `line` element
|
|
2733
|
+
* from its base (`x1`, `y1`) to its value (`x2`, `y2`).
|
|
2734
|
+
*/
|
|
2735
|
+
export interface BarDrawEvent extends DrawEvent {
|
|
2736
|
+
/** Always `'bar'`. */
|
|
2737
|
+
type: 'bar';
|
|
2738
|
+
/** The bar's normalized value: a number, or `{ x, y }` numbers. */
|
|
2739
|
+
value: number | NormalizedMulti;
|
|
2740
|
+
/** The x of the bar's base, in px. */
|
|
2741
|
+
x1: number;
|
|
2742
|
+
/** The y of the bar's base, in px. */
|
|
2743
|
+
y1: number;
|
|
2744
|
+
/** The x of the bar's end (its value), in px. */
|
|
2745
|
+
x2: number;
|
|
2746
|
+
/** The y of the bar's end (its value), in px. */
|
|
2747
|
+
y2: number;
|
|
2748
|
+
}
|
|
2749
|
+
/** The 1.x events of a {@link BarChart} and their payloads, by event name. */
|
|
2750
|
+
export type BarChartEventsTypes = BaseChartEventsTypes<BarChartCreatedEvent, AxesDrawEvent | BarDrawEvent>;
|
|
2751
|
+
//#endregion
|
|
2752
|
+
//#region src/presets/barChart.d.ts
|
|
2753
|
+
/**
|
|
2754
|
+
* Options of `barChart`: the 1.x `BarChart` options; axis types may also be
|
|
2755
|
+
* v2 axis factories.
|
|
2756
|
+
* @experimental
|
|
2757
|
+
*/
|
|
2758
|
+
type BarChartPresetOptions = Omit<BarChartOptions, 'axisX' | 'axisY' | 'plugins' | 'stackMode'> & {
|
|
2759
|
+
/** v2 plugins; convert 1.x plugins with `fromLegacyPlugin`. */
|
|
2760
|
+
readonly plugins?: readonly PluginEntry[];
|
|
2761
|
+
/**
|
|
2762
|
+
* Phase listeners by phase name (or `'*'` for all phases), as `on` in
|
|
2763
|
+
* the config of `chart()`. They're registered before the first render,
|
|
2764
|
+
* so they see it too.
|
|
2765
|
+
*/
|
|
2766
|
+
readonly on?: PhaseListeners;
|
|
2767
|
+
/**
|
|
2768
|
+
* How stacked bars stack: `accumulate` (default), `accumulate-relative`
|
|
2769
|
+
* (positives up, negatives down), or `overlap` (also `true`): every bar
|
|
2770
|
+
* from zero.
|
|
2771
|
+
*/
|
|
2772
|
+
readonly stackMode?: 'accumulate' | 'accumulate-relative' | 'overlap' | boolean;
|
|
2773
|
+
/** Options of the X axis; its `type` may also be a v2 axis factory. */
|
|
2774
|
+
readonly axisX?: PresetAxisOptions & Omit<NonNullable<BarChartOptions['axisX']>, 'type'>;
|
|
2775
|
+
/** Options of the Y axis; its `type` may also be a v2 axis factory. */
|
|
2776
|
+
readonly axisY?: PresetAxisOptions & Omit<NonNullable<BarChartOptions['axisY']>, 'type'>;
|
|
2777
|
+
/** HTML (1.x) or SVG text labels; default: the renderer's mode. */
|
|
2778
|
+
readonly labels?: LabelMode;
|
|
2779
|
+
};
|
|
2780
|
+
/** What the bar preset passes to plugins as `ResolvedConfig.preset`. */
|
|
2781
|
+
type BarPresetState = PresetState<BarChartData, BarChartPresetOptions, 'bar'>;
|
|
2782
|
+
/**
|
|
2783
|
+
* Creates a bar chart with the 1.x options and output, rendered
|
|
2784
|
+
* synchronously. Plugins must be v2 plugins; convert 1.x plugins with
|
|
2785
|
+
* `fromLegacyPlugin` from `chartist/compat`.
|
|
2786
|
+
* @experimental
|
|
2787
|
+
*/
|
|
2788
|
+
export declare function barChart(target: string | Element, data: BarChartData, options?: BarChartPresetOptions, responsiveOptions?: PresetResponsiveOptions<BarChartPresetOptions>): PresetHandle<BarChartPresetOptions>;
|
|
2789
|
+
//#endregion
|
|
2790
|
+
//#region src/charts/PieChart/PieChart.types.d.ts
|
|
2791
|
+
/** The data of a pie chart: one value per slice, and labels for the slices. */
|
|
2792
|
+
export type PieChartData = Data<FlatSeries>;
|
|
2793
|
+
/** Which way pie labels anchor: see `labelDirection` in {@link PieChartOptions}. */
|
|
2794
|
+
export type LabelDirection = 'implode' | 'neutral' | 'explode';
|
|
2795
|
+
/** The `text-anchor` of a pie label: `'start'`, `'middle'` or `'end'`. */
|
|
2796
|
+
export type AnchorPosition = 'start' | 'middle' | 'end';
|
|
2797
|
+
/** Where pie labels go: see `labelPosition` in {@link PieChartOptions}. */
|
|
2798
|
+
export type RadialLabelPosition = 'inside' | 'center' | 'outside';
|
|
2799
|
+
/** A point in px, such as the center of a pie. */
|
|
2800
|
+
export interface Dot {
|
|
2801
|
+
/** The x, in px. */
|
|
2802
|
+
x: number;
|
|
2803
|
+
/** The y, in px. */
|
|
2804
|
+
y: number;
|
|
2805
|
+
}
|
|
2806
|
+
/** The options of a pie or donut chart (1.x `PieChart`, and `pieChart`). */
|
|
2807
|
+
export interface PieChartOptions extends Omit<Options, 'axisX' | 'axisY'> {
|
|
2808
|
+
/**
|
|
2809
|
+
* The class names of the chart's elements. Change them to style the
|
|
2810
|
+
* chart with your own CSS instead of Chartist's.
|
|
2811
|
+
*/
|
|
2812
|
+
classNames?: {
|
|
2813
|
+
/** The chart's SVG element, for pies. */
|
|
2814
|
+
chartPie?: string;
|
|
2815
|
+
/** The chart's SVG element, for donuts. */
|
|
2816
|
+
chartDonut?: string;
|
|
2817
|
+
/** The group of each series. */
|
|
2818
|
+
series?: string;
|
|
2819
|
+
/** Each pie slice. */
|
|
2820
|
+
slicePie?: string;
|
|
2821
|
+
/** Each donut slice. */
|
|
2822
|
+
sliceDonut?: string;
|
|
2823
|
+
/** Each axis label. */
|
|
2824
|
+
label?: string;
|
|
2825
|
+
};
|
|
2826
|
+
/** Where the first slice starts, in degrees clockwise from the top. */
|
|
2827
|
+
startAngle?: number;
|
|
2828
|
+
/**
|
|
2829
|
+
* The value a full circle stands for. With a total above the sum of the
|
|
2830
|
+
* values, the pie stays open, as for a gauge.
|
|
2831
|
+
*/
|
|
2832
|
+
total?: number;
|
|
2833
|
+
/** Draws a donut: rings instead of filled slices. */
|
|
2834
|
+
donut?: boolean;
|
|
2835
|
+
/**
|
|
2836
|
+
* The width of a donut's ring: px as a number, or a share of the radius as
|
|
2837
|
+
* a string (`'30%'`). Without it, the stylesheet sets the width
|
|
2838
|
+
* (`--ct-donut-width`, 60px by default), and the ring is laid out for
|
|
2839
|
+
* 60 px.
|
|
2840
|
+
*/
|
|
2841
|
+
donutWidth?: number | string;
|
|
2842
|
+
/** Draws a label for each slice. */
|
|
2843
|
+
showLabel?: boolean;
|
|
2844
|
+
/**
|
|
2845
|
+
* Moves the labels away from the center (positive) or toward it
|
|
2846
|
+
* (negative), in px.
|
|
2847
|
+
*/
|
|
2848
|
+
labelOffset?: number;
|
|
2849
|
+
/**
|
|
2850
|
+
* Where labels go: `inside` (halfway out on a pie, on the middle of a
|
|
2851
|
+
* donut's ring, plus `labelOffset`), `outside` (at the outer edge) or
|
|
2852
|
+
* `center` (in the middle; move them with `labelOffset`).
|
|
2853
|
+
*/
|
|
2854
|
+
labelPosition?: RadialLabelPosition;
|
|
2855
|
+
/**
|
|
2856
|
+
* Turns each slice's label (or value) and index into the text to show.
|
|
2857
|
+
* Return `null` or `undefined` to leave a label out.
|
|
2858
|
+
*/
|
|
2859
|
+
labelInterpolationFnc?(value: Label, index: number): Label | null | undefined;
|
|
2860
|
+
/**
|
|
2861
|
+
* Which way labels anchor: `neutral`, `explode` (away from the center,
|
|
2862
|
+
* for labels outside the pie) or `implode` (toward it).
|
|
2863
|
+
*/
|
|
2864
|
+
labelDirection?: LabelDirection;
|
|
2865
|
+
/** Leaves out the slices and labels of empty values. */
|
|
2866
|
+
ignoreEmptyValues?: boolean;
|
|
2867
|
+
/**
|
|
2868
|
+
* Moves labels apart so they don't overlap, using this offset in px. The
|
|
2869
|
+
* overlap is judged by the length of the drawn label text. 0 leaves them
|
|
2870
|
+
* where they are.
|
|
2871
|
+
*/
|
|
2872
|
+
preventOverlappingLabelOffset?: number;
|
|
2873
|
+
}
|
|
2874
|
+
/** {@link PieChartOptions} after the defaults are applied: the 1.x `PieChart` works with these. */
|
|
2875
|
+
export type PieChartOptionsWithDefaults = RequiredKeys<PieChartOptions, 'chartPadding' | 'startAngle' | 'showLabel' | 'labelOffset' | 'labelPosition' | 'labelInterpolationFnc' | 'labelDirection' | 'preventOverlappingLabelOffset', 'classNames'>;
|
|
2876
|
+
/** The payload of a pie chart's 1.x `created` event: as for other charts, without axes. */
|
|
2877
|
+
export type PieChartCreatedEvent = Omit<CreatedEvent<PieChartOptions>, 'axisX' | 'axisY'>;
|
|
2878
|
+
/**
|
|
2879
|
+
* The 1.x `draw` event of a pie or donut slice, one per value. `index` is
|
|
2880
|
+
* the slice's index and `series` its value as given in the data.
|
|
2881
|
+
*/
|
|
2882
|
+
export interface SliceDrawEvent extends Omit<DrawEvent, 'axisX' | 'axisY' | 'seriesIndex'> {
|
|
2883
|
+
/** Always `'slice'`. */
|
|
2884
|
+
type: 'slice';
|
|
2885
|
+
/** The slice's value. */
|
|
2886
|
+
value: NormalizedSeriesValue;
|
|
2887
|
+
/** The value of the full circle: the sum of all values, or the `total` option. */
|
|
2888
|
+
totalDataSum: number;
|
|
2889
|
+
/** The slice's path as drawn (a copy, safe to change). */
|
|
2890
|
+
path: SvgPath;
|
|
2891
|
+
/** The center of the pie, in px. */
|
|
2892
|
+
center: Dot;
|
|
2893
|
+
/** The radius of the pie, in px. */
|
|
2894
|
+
radius: number;
|
|
2895
|
+
/** Where the slice starts, in degrees clockwise from the top. */
|
|
2896
|
+
startAngle: number;
|
|
2897
|
+
/** Where the slice ends, in degrees clockwise from the top. */
|
|
2898
|
+
endAngle: number;
|
|
2899
|
+
}
|
|
2900
|
+
/**
|
|
2901
|
+
* The 1.x `draw` event of a pie slice's label. `index` is the slice's
|
|
2902
|
+
* index; the label is a `text` element anchored at `x`, `y`.
|
|
2903
|
+
*/
|
|
2904
|
+
export interface SliceLabelDrawEvent extends Omit<DrawEvent, 'axisX' | 'axisY' | 'seriesIndex'> {
|
|
2905
|
+
/** Always `'label'`. */
|
|
2906
|
+
type: 'label';
|
|
2907
|
+
/** The label as shown, after `labelInterpolationFnc`. */
|
|
2908
|
+
text: string;
|
|
2909
|
+
/** The x the label is anchored at, in px. */
|
|
2910
|
+
x: number;
|
|
2911
|
+
/** The y the label is anchored at, in px. */
|
|
2912
|
+
y: number;
|
|
2913
|
+
}
|
|
2914
|
+
/** The 1.x events of a {@link PieChart} and their payloads, by event name. */
|
|
2915
|
+
export type PieChartEventsTypes = BaseChartEventsTypes<PieChartCreatedEvent, SliceDrawEvent | SliceLabelDrawEvent>;
|
|
2916
|
+
//#endregion
|
|
2917
|
+
//#region src/presets/pieChart.d.ts
|
|
2918
|
+
/**
|
|
2919
|
+
* Options of `pieChart`: the 1.x `PieChart` options, with v2 plugins and
|
|
2920
|
+
* phase listeners.
|
|
2921
|
+
* @experimental
|
|
2922
|
+
*/
|
|
2923
|
+
type PieChartPresetOptions = Omit<PieChartOptions, 'plugins'> & {
|
|
2924
|
+
/** v2 plugins; convert 1.x plugins with `fromLegacyPlugin`. */
|
|
2925
|
+
readonly plugins?: readonly PluginEntry[];
|
|
2926
|
+
/**
|
|
2927
|
+
* Phase listeners by phase name (or `'*'` for all phases), as `on` in
|
|
2928
|
+
* the config of `chart()`. They're registered before the first render,
|
|
2929
|
+
* so they see it too.
|
|
2930
|
+
*/
|
|
2931
|
+
readonly on?: PhaseListeners;
|
|
2932
|
+
};
|
|
2933
|
+
/** What the pie preset passes to plugins as `ResolvedConfig.preset`. */
|
|
2934
|
+
type PiePresetState = PresetState<PieChartData, PieChartPresetOptions, 'pie'>;
|
|
2935
|
+
/**
|
|
2936
|
+
* Creates a pie or donut chart with the 1.x options and output, rendered
|
|
2937
|
+
* synchronously. Plugins must be v2 plugins; convert 1.x plugins with
|
|
2938
|
+
* `fromLegacyPlugin` from `chartist/compat`.
|
|
2939
|
+
* @experimental
|
|
2940
|
+
*/
|
|
2941
|
+
export declare function pieChart(target: string | Element, data: PieChartData, options?: PieChartPresetOptions, responsiveOptions?: PresetResponsiveOptions<PieChartPresetOptions>): PresetHandle<PieChartPresetOptions>;
|
|
2942
|
+
//#endregion
|
|
2943
|
+
//#region src/render/types.d.ts
|
|
2944
|
+
/**
|
|
2945
|
+
* What a renderer returns from `render()`. The `render` and `mount` phase
|
|
2946
|
+
* events pass it on as `output`.
|
|
2947
|
+
*/
|
|
2948
|
+
interface RenderOutput {
|
|
2949
|
+
/** The rendered element of a scene node, if the output is DOM. */
|
|
2950
|
+
readonly elementOf?: (node: SceneNode) => Element | undefined;
|
|
2951
|
+
/** Removes the output again. */
|
|
2952
|
+
readonly remove?: () => void;
|
|
2953
|
+
}
|
|
2954
|
+
/**
|
|
2955
|
+
* Turns a scene into output. `chart()` renders inline SVG into its
|
|
2956
|
+
* container with the DOM renderer, unless its config sets a `renderer`.
|
|
2957
|
+
* To get markup instead, without a DOM, use `toScene()` and
|
|
2958
|
+
* {@link renderToString}.
|
|
2959
|
+
* @experimental
|
|
2960
|
+
*/
|
|
2961
|
+
interface Renderer<TOutput extends RenderOutput = RenderOutput> {
|
|
2962
|
+
/**
|
|
2963
|
+
* Renders a scene into the chart's container, after the `scene` phase
|
|
2964
|
+
* and on every update and resize.
|
|
2965
|
+
* @param scene The scene to render, its root the `svg`
|
|
2966
|
+
* @param target The chart's container element
|
|
2967
|
+
*/
|
|
2968
|
+
render(scene: SceneNode, target: Element): TOutput;
|
|
2969
|
+
/**
|
|
2970
|
+
* Measures text for layout, in the container so its CSS applies;
|
|
2971
|
+
* without it, Chartist estimates text sizes.
|
|
2972
|
+
*/
|
|
2973
|
+
readonly measureText?: MeasureText;
|
|
2974
|
+
/** The default label mode of this renderer; `html` if omitted. */
|
|
2975
|
+
readonly labels?: LabelMode;
|
|
2976
|
+
}
|
|
2977
|
+
//#endregion
|
|
2978
|
+
//#region src/pipeline/types.d.ts
|
|
2979
|
+
/**
|
|
2980
|
+
* The coordinate system a chart draws in: `cartesian` places values on X
|
|
2981
|
+
* and Y axes (lines, bars), `polar` around a center (pies and donuts).
|
|
2982
|
+
*/
|
|
2983
|
+
type Coordinates = 'cartesian' | 'polar';
|
|
2984
|
+
/** Chart data as passed to `chart()` or `toScene()`. */
|
|
2985
|
+
interface ChartData {
|
|
2986
|
+
/** The labels of the values, e.g. for the X axis or the slices. */
|
|
2987
|
+
readonly labels?: readonly (string | number | Date)[];
|
|
2988
|
+
/**
|
|
2989
|
+
* The series: arrays of values, series objects with `data`, or, for a
|
|
2990
|
+
* pie, one value per slice.
|
|
2991
|
+
*/
|
|
2992
|
+
readonly series: readonly unknown[];
|
|
2993
|
+
}
|
|
2994
|
+
/** One series after the `prepare` phase. */
|
|
2995
|
+
interface PreparedSeries {
|
|
2996
|
+
/** The series' `name`, from a series object. */
|
|
2997
|
+
readonly name?: string;
|
|
2998
|
+
/** The series' `className`, from a series object. */
|
|
2999
|
+
readonly className?: string;
|
|
3000
|
+
/** The series' `meta`, from a series object. */
|
|
3001
|
+
readonly meta?: unknown;
|
|
3002
|
+
/** The series' values, as given. */
|
|
3003
|
+
readonly values: readonly unknown[];
|
|
3004
|
+
}
|
|
3005
|
+
/**
|
|
3006
|
+
* The data after the `prepare` phase: every series as a
|
|
3007
|
+
* {@link PreparedSeries}, whether it was given as an array or an object.
|
|
3008
|
+
*/
|
|
3009
|
+
interface PreparedData {
|
|
3010
|
+
/** The labels as given, or an empty array. */
|
|
3011
|
+
readonly labels: readonly (string | number | Date)[];
|
|
3012
|
+
/** The series, each with its `values`. */
|
|
3013
|
+
readonly series: readonly PreparedSeries[];
|
|
3014
|
+
/** The input was a flat series (e.g. pie or distributed bar data). */
|
|
3015
|
+
readonly flat?: boolean;
|
|
3016
|
+
}
|
|
3017
|
+
/**
|
|
3018
|
+
* The drawing area inside the padding (and the axes), in px in the SVG.
|
|
3019
|
+
* `y1` is the bottom edge, as in 1.x.
|
|
3020
|
+
*/
|
|
3021
|
+
interface Area {
|
|
3022
|
+
/** The left edge. */
|
|
3023
|
+
readonly x1: number;
|
|
3024
|
+
/** The bottom edge. */
|
|
3025
|
+
readonly y1: number;
|
|
3026
|
+
/** The right edge. */
|
|
3027
|
+
readonly x2: number;
|
|
3028
|
+
/** The top edge. */
|
|
3029
|
+
readonly y2: number;
|
|
3030
|
+
/** The area's width in px. */
|
|
3031
|
+
readonly width: number;
|
|
3032
|
+
/** The area's height in px. */
|
|
3033
|
+
readonly height: number;
|
|
3034
|
+
}
|
|
3035
|
+
/**
|
|
3036
|
+
* The payload of the `layout` phase: the chart's size and the drawing area
|
|
3037
|
+
* inside its padding and axes. A `layout` listener can return a changed
|
|
3038
|
+
* layout, e.g. to make room for a legend.
|
|
3039
|
+
*/
|
|
3040
|
+
interface Layout {
|
|
3041
|
+
/** The chart's width in px (at least the left and right padding). */
|
|
3042
|
+
readonly width: number;
|
|
3043
|
+
/** The chart's height in px (at least the top and bottom padding). */
|
|
3044
|
+
readonly height: number;
|
|
3045
|
+
/** The padding around the drawing area, in px. */
|
|
3046
|
+
readonly padding: ChartPadding;
|
|
3047
|
+
/** Where the layers draw, inside the padding and the axes. */
|
|
3048
|
+
readonly area: Area;
|
|
3049
|
+
}
|
|
3050
|
+
/** Data normalized for axes: multi values (`{ x, y }`), padded labels. */
|
|
3051
|
+
interface NormalizedChartData {
|
|
3052
|
+
/** The labels, padded with empty strings to the longest series. */
|
|
3053
|
+
readonly labels: readonly Label[];
|
|
3054
|
+
/**
|
|
3055
|
+
* The series' values as numbers, `{ x, y }` values or holes, each
|
|
3056
|
+
* series padded with holes to the longest one.
|
|
3057
|
+
*/
|
|
3058
|
+
readonly series: readonly NormalizedSeries[];
|
|
3059
|
+
}
|
|
3060
|
+
/**
|
|
3061
|
+
* What a layer's `compose` gets: the data it draws, the area to draw in,
|
|
3062
|
+
* the axes and a way to measure text.
|
|
3063
|
+
*/
|
|
3064
|
+
interface LayerContext {
|
|
3065
|
+
/** The prepared data; only the layer's series when it selects some. */
|
|
3066
|
+
readonly data: PreparedData;
|
|
3067
|
+
/** The drawing area, in px in the SVG. */
|
|
3068
|
+
readonly area: Area;
|
|
3069
|
+
/** The chart's padding, in px. */
|
|
3070
|
+
readonly padding: ChartPadding;
|
|
3071
|
+
/** The layer's index in the chart's `layers`; part of its nodes' keys. */
|
|
3072
|
+
readonly layerIndex: number;
|
|
3073
|
+
/** The chart's coordinate system. */
|
|
3074
|
+
readonly coordinates: Coordinates;
|
|
3075
|
+
/**
|
|
3076
|
+
* Measures text with the renderer's metrics (in the browser, with the
|
|
3077
|
+
* page's fonts and the chart's classes), for layers that lay out labels.
|
|
3078
|
+
*/
|
|
3079
|
+
readonly measureText: MeasureText;
|
|
3080
|
+
/** Axes created after `layout`, when the chart has axes. */
|
|
3081
|
+
readonly axes: ChartAxes;
|
|
3082
|
+
/** The data as the axes see it, when the chart has axes. */
|
|
3083
|
+
readonly normalized?: NormalizedChartData;
|
|
3084
|
+
/**
|
|
3085
|
+
* Chart-wide index of each series in `data` (a layer may select a subset
|
|
3086
|
+
* of the series). Absent when the layer draws all series.
|
|
3087
|
+
*/
|
|
3088
|
+
readonly seriesIndexes?: readonly number[];
|
|
3089
|
+
/** How label layers draw labels: chart option, else the renderer's. */
|
|
3090
|
+
readonly labels: LabelMode;
|
|
3091
|
+
}
|
|
3092
|
+
/**
|
|
3093
|
+
* What a layer's `extent` gets: its series as the axes see them, and the
|
|
3094
|
+
* ids of the axes it draws on.
|
|
3095
|
+
* @experimental
|
|
3096
|
+
*/
|
|
3097
|
+
interface ExtentContext {
|
|
3098
|
+
/**
|
|
3099
|
+
* The layer's series, normalized as for the axes (`{ x, y }` values or
|
|
3100
|
+
* holes); only the layer's series when it selects some.
|
|
3101
|
+
*/
|
|
3102
|
+
readonly normalized: NormalizedChartData;
|
|
3103
|
+
/** The ids of the X and Y axis the layer draws on. */
|
|
3104
|
+
readonly axes: {
|
|
3105
|
+
readonly x?: string;
|
|
3106
|
+
readonly y?: string;
|
|
3107
|
+
};
|
|
3108
|
+
}
|
|
3109
|
+
/**
|
|
3110
|
+
* A layer renders series into the chart area. Built-in and custom layers
|
|
3111
|
+
* use the same contract.
|
|
3112
|
+
* @experimental
|
|
3113
|
+
*/
|
|
3114
|
+
interface Layer {
|
|
3115
|
+
/** Name used in error messages, e.g. `line`. */
|
|
3116
|
+
readonly type: string;
|
|
3117
|
+
/**
|
|
3118
|
+
* The kind of chart the layer draws, when `type` doesn't say it: a
|
|
3119
|
+
* {@link chart} without `className` gets `ct-chart-bar` if a layer is a
|
|
3120
|
+
* `bar`, else `ct-chart-pie` or `ct-chart-donut` for a `pie` or `donut`,
|
|
3121
|
+
* else `ct-chart-line`. Without it, `type` counts.
|
|
3122
|
+
*/
|
|
3123
|
+
readonly chartType?: string;
|
|
3124
|
+
/** Coordinate systems the layer can draw in. */
|
|
3125
|
+
readonly coordinates: readonly Coordinates[];
|
|
3126
|
+
/** Axis ids to draw on; default: the first X and the first Y axis. */
|
|
3127
|
+
readonly axes?: {
|
|
3128
|
+
readonly x?: string;
|
|
3129
|
+
readonly y?: string;
|
|
3130
|
+
};
|
|
3131
|
+
/** Series to draw, by index or name; default: all series. */
|
|
3132
|
+
readonly series?: readonly (number | string)[];
|
|
3133
|
+
/**
|
|
3134
|
+
* Reports the range of values the layer needs on its axes beyond the
|
|
3135
|
+
* values themselves, by axis id, such as the sums of stacked bars. Scale
|
|
3136
|
+
* axes include it in the range they fit to the data (an axis's own `low`
|
|
3137
|
+
* and `high` still win); on an axis several layers report a range for,
|
|
3138
|
+
* the axis covers them all. Runs before the axes are created, on every
|
|
3139
|
+
* layout.
|
|
3140
|
+
*
|
|
3141
|
+
* @example
|
|
3142
|
+
* ```ts
|
|
3143
|
+
* import type { Layer } from 'chartist';
|
|
3144
|
+
*
|
|
3145
|
+
* // Keeps 0 to 100 on the layer's Y axis, e.g. for a target line.
|
|
3146
|
+
* const withTarget = (base: Layer): Layer => ({
|
|
3147
|
+
* ...base,
|
|
3148
|
+
* extent: ({ axes }) => (axes.y ? { [axes.y]: { low: 0, high: 100 } } : {})
|
|
3149
|
+
* });
|
|
3150
|
+
* ```
|
|
3151
|
+
*/
|
|
3152
|
+
extent?(context: ExtentContext): Readonly<Record<string, AxisExtent>>;
|
|
3153
|
+
/**
|
|
3154
|
+
* Draws the layer: returns its top-level nodes, usually one `series`
|
|
3155
|
+
* group per series. The pipeline keys their data nodes and passes every
|
|
3156
|
+
* node with a role through the `compose` listeners.
|
|
3157
|
+
*/
|
|
3158
|
+
compose(context: LayerContext): readonly SceneNode[];
|
|
3159
|
+
}
|
|
3160
|
+
/** Options after the `resolve` phase: defaults applied, listeners removed. */
|
|
3161
|
+
interface ResolvedConfig {
|
|
3162
|
+
/** The chart's data, as given. */
|
|
3163
|
+
readonly data: ChartData;
|
|
3164
|
+
/** The layers, drawn in this order. */
|
|
3165
|
+
readonly layers: readonly Layer[];
|
|
3166
|
+
/** The coordinate system; `cartesian` unless the config says otherwise. */
|
|
3167
|
+
readonly coordinates: Coordinates;
|
|
3168
|
+
/** The padding in px on every side, the 1.x defaults filled in. */
|
|
3169
|
+
readonly padding: ChartPadding;
|
|
3170
|
+
/** The chart's axes, from `cartesianAxes()`, if it has any. */
|
|
3171
|
+
readonly axes?: CartesianAxes;
|
|
3172
|
+
/** The root svg's `width` from the config, e.g. `100%` or `600`. */
|
|
3173
|
+
readonly width?: number | string;
|
|
3174
|
+
/** The root svg's `height` from the config, e.g. `300px`. */
|
|
3175
|
+
readonly height?: number | string;
|
|
3176
|
+
/** Fixed drawing coordinates for the root svg's `viewBox`, in px. */
|
|
3177
|
+
readonly viewBox?: {
|
|
3178
|
+
readonly width: number;
|
|
3179
|
+
readonly height: number;
|
|
3180
|
+
};
|
|
3181
|
+
/** Class names of the root svg, e.g. `ct-chart-line`. */
|
|
3182
|
+
readonly className?: string;
|
|
3183
|
+
/** Label mode for all label layers; else the renderer decides. */
|
|
3184
|
+
readonly labels?: LabelMode;
|
|
3185
|
+
/**
|
|
3186
|
+
* The preset that created the chart, if any: its kind, options and data.
|
|
3187
|
+
* Check `kind` to narrow it, e.g. `config.preset?.kind === 'line'`.
|
|
3188
|
+
*/
|
|
3189
|
+
readonly preset?: LinePresetState | BarPresetState | PiePresetState;
|
|
3190
|
+
}
|
|
3191
|
+
/**
|
|
3192
|
+
* The payloads of the phase events, by phase, in the order the phases run.
|
|
3193
|
+
* Listen with `on` in the config of `chart()`, `chart.on()` or a plugin. A
|
|
3194
|
+
* listener can return a new payload to change the phase (see
|
|
3195
|
+
* {@link PhaseResult}); later phases build on the change.
|
|
3196
|
+
*
|
|
3197
|
+
* When the container resizes, the chart runs again from `layout`, so
|
|
3198
|
+
* `resolve` and `prepare` listeners aren't called.
|
|
3199
|
+
*
|
|
3200
|
+
* @example
|
|
3201
|
+
* ```ts
|
|
3202
|
+
* import { barChart, type ChartPlugin } from 'chartist';
|
|
3203
|
+
*
|
|
3204
|
+
* // Bars at or above the limit get the class ct-over.
|
|
3205
|
+
* const threshold = (limit: number): ChartPlugin => ({
|
|
3206
|
+
* name: 'threshold',
|
|
3207
|
+
* install(chart) {
|
|
3208
|
+
* chart.on('compose', current => {
|
|
3209
|
+
* if (current.role !== 'bar') {
|
|
3210
|
+
* return;
|
|
3211
|
+
* }
|
|
3212
|
+
* // A number, { x, y } (with an X scale axis) or a hole.
|
|
3213
|
+
* const { value } = current.ctx;
|
|
3214
|
+
* const y =
|
|
3215
|
+
* typeof value === 'number'
|
|
3216
|
+
* ? value
|
|
3217
|
+
* : value && 'y' in value
|
|
3218
|
+
* ? value.y
|
|
3219
|
+
* : undefined;
|
|
3220
|
+
* return y !== undefined && y >= limit
|
|
3221
|
+
* ? current.addClass('ct-over')
|
|
3222
|
+
* : undefined;
|
|
3223
|
+
* });
|
|
3224
|
+
* }
|
|
3225
|
+
* });
|
|
3226
|
+
*
|
|
3227
|
+
* barChart(
|
|
3228
|
+
* '#chart',
|
|
3229
|
+
* { labels: ['Q1', 'Q2', 'Q3', 'Q4'], series: [[5, 4, 3, 7]] },
|
|
3230
|
+
* { plugins: [threshold(5)] }
|
|
3231
|
+
* );
|
|
3232
|
+
* ```
|
|
3233
|
+
*/
|
|
3234
|
+
interface PhaseEvents {
|
|
3235
|
+
/** The config with defaults applied: padding, coordinates, layers, axes. */
|
|
3236
|
+
resolve: {
|
|
3237
|
+
readonly config: ResolvedConfig;
|
|
3238
|
+
};
|
|
3239
|
+
/** The data, each series as `{ values, name, className, meta }`. */
|
|
3240
|
+
prepare: {
|
|
3241
|
+
readonly data: PreparedData;
|
|
3242
|
+
};
|
|
3243
|
+
/** The chart's size and the drawing area inside the padding and axes. */
|
|
3244
|
+
layout: Layout;
|
|
3245
|
+
/**
|
|
3246
|
+
* Each node with a role that a layer draws, children before their
|
|
3247
|
+
* parents: series, lines, areas, points, bars, slices, grid lines and
|
|
3248
|
+
* labels. Return a changed node, a new one, or `null` to drop it.
|
|
3249
|
+
*/
|
|
3250
|
+
compose: SceneNode;
|
|
3251
|
+
/** The whole scene, its root the `svg`. */
|
|
3252
|
+
scene: {
|
|
3253
|
+
readonly scene: SceneNode;
|
|
3254
|
+
};
|
|
3255
|
+
/** The renderer has written the scene; `output` is what it returned. */
|
|
3256
|
+
render: {
|
|
3257
|
+
readonly scene: SceneNode;
|
|
3258
|
+
readonly output: RenderOutput;
|
|
3259
|
+
};
|
|
3260
|
+
/** The rendered SVG is in the page; touch elements only here. */
|
|
3261
|
+
mount: {
|
|
3262
|
+
readonly scene: SceneNode;
|
|
3263
|
+
readonly output: RenderOutput;
|
|
3264
|
+
/** The rendered element of a scene node, if the renderer has one. */
|
|
3265
|
+
readonly elementOf: (node: SceneNode) => Element | undefined;
|
|
3266
|
+
};
|
|
3267
|
+
}
|
|
3268
|
+
/** The name of a pipeline phase, such as `compose`: a key of {@link PhaseEvents}. */
|
|
3269
|
+
type PhaseName = keyof PhaseEvents;
|
|
3270
|
+
/**
|
|
3271
|
+
* What a phase listener returns: a new payload to transform the phase, or
|
|
3272
|
+
* nothing to keep it. `compose` listeners may return `null` to drop the
|
|
3273
|
+
* node. `render` and `mount` listeners return nothing (they observe).
|
|
3274
|
+
*/
|
|
3275
|
+
type PhaseResult<K extends PhaseName> = K extends 'render' | 'mount' ? void : PhaseEvents[K] | (K extends 'compose' ? null : never) | undefined | void;
|
|
3276
|
+
/**
|
|
3277
|
+
* A listener of one phase: gets the phase's payload and may return a new
|
|
3278
|
+
* one (see {@link PhaseResult}). Listeners of a phase run in the order they
|
|
3279
|
+
* were added, each with the previous one's result.
|
|
3280
|
+
*/
|
|
3281
|
+
type PhaseListener<K extends PhaseName> = (payload: PhaseEvents[K]) => PhaseResult<K>;
|
|
3282
|
+
/**
|
|
3283
|
+
* A listener of every phase (`'*'`): gets the phase name and its final
|
|
3284
|
+
* payload, after the phase's own listeners. It only observes.
|
|
3285
|
+
*/
|
|
3286
|
+
type AllPhasesListener = (name: PhaseName, payload: unknown) => void;
|
|
3287
|
+
/**
|
|
3288
|
+
* Phase listeners by phase name, as the `on` option of `chart()` takes
|
|
3289
|
+
* them. They're registered before the first render.
|
|
3290
|
+
*/
|
|
3291
|
+
type PhaseListeners = { readonly [K in PhaseName]?: PhaseListener<K>; } & {
|
|
3292
|
+
/** Listens to every phase, with the phase name as first argument. */
|
|
3293
|
+
readonly '*'?: AllPhasesListener;
|
|
3294
|
+
};
|
|
3295
|
+
//#endregion
|
|
3296
|
+
//#region src/scales/axis.d.ts
|
|
3297
|
+
/** Which way an axis runs: `x` (horizontal) or `y` (vertical). */
|
|
3298
|
+
type AxisDimension = 'x' | 'y';
|
|
3299
|
+
/** Where an axis sits: `top`/`bottom` are X axes, `left`/`right` Y axes. */
|
|
3300
|
+
type AxisSide = 'top' | 'bottom' | 'left' | 'right';
|
|
3301
|
+
/**
|
|
3302
|
+
* What an {@link AxisFactory} gets to create an axis: its direction, the
|
|
3303
|
+
* data, the chart area and the axis options.
|
|
3304
|
+
*/
|
|
3305
|
+
interface AxisContext {
|
|
3306
|
+
/** Which way the axis runs: `x` or `y`, from its side. */
|
|
3307
|
+
readonly dimension: AxisDimension;
|
|
3308
|
+
/**
|
|
3309
|
+
* Normalized multi-value series (`{ x, y }` values): the series bound to
|
|
3310
|
+
* the axis, or all of them.
|
|
3311
|
+
*/
|
|
3312
|
+
readonly series: NormalizedSeries[];
|
|
3313
|
+
/** Normalized labels, padded to the longest series. */
|
|
3314
|
+
readonly labels: readonly Label[];
|
|
3315
|
+
/** The chart area in px, with the offsets of all axes reserved. */
|
|
3316
|
+
readonly area: Area;
|
|
3317
|
+
/** The options of the axis definition, without `id`, `side` and `type`. */
|
|
3318
|
+
readonly options: AxisOptions;
|
|
3319
|
+
/**
|
|
3320
|
+
* The range the layers drawn on the axis need beyond their values, such
|
|
3321
|
+
* as the sums of stacked bars (see {@link Layer.extent}). Scale axes
|
|
3322
|
+
* include it in the range they fit to the data; their own `low` and
|
|
3323
|
+
* `high` still win.
|
|
3324
|
+
*/
|
|
3325
|
+
readonly extent?: AxisExtent;
|
|
3326
|
+
}
|
|
3327
|
+
/**
|
|
3328
|
+
* A range of values on an axis, from `low` to `high`: what a layer reports
|
|
3329
|
+
* in {@link Layer.extent}.
|
|
3330
|
+
* @experimental
|
|
3331
|
+
*/
|
|
3332
|
+
interface AxisExtent {
|
|
3333
|
+
/** The lowest value. */
|
|
3334
|
+
readonly low: number;
|
|
3335
|
+
/** The highest value. */
|
|
3336
|
+
readonly high: number;
|
|
3337
|
+
}
|
|
3338
|
+
/**
|
|
3339
|
+
* A positioned axis: ticks, range and projection into px along the axis.
|
|
3340
|
+
* An {@link AxisFactory} creates it once the chart area is known; layers
|
|
3341
|
+
* read it to place what they draw.
|
|
3342
|
+
* @experimental
|
|
3343
|
+
*/
|
|
3344
|
+
interface ScaleAxis {
|
|
3345
|
+
/** Which way the axis runs: `x` or `y`. */
|
|
3346
|
+
readonly dimension: AxisDimension;
|
|
3347
|
+
/** The axis type, e.g. `step`, `autoScale`, `fixedScale`. */
|
|
3348
|
+
readonly kind: string;
|
|
3349
|
+
/** Step axes: whether the last tick sits at the axis end. */
|
|
3350
|
+
readonly stretch?: boolean;
|
|
3351
|
+
/** Step axes: the distance between two ticks in px. */
|
|
3352
|
+
readonly step?: number;
|
|
3353
|
+
/**
|
|
3354
|
+
* The values at which grid lines and labels are drawn: labels on a step
|
|
3355
|
+
* axis, numbers on a scale.
|
|
3356
|
+
*/
|
|
3357
|
+
readonly ticks: readonly Label[];
|
|
3358
|
+
/**
|
|
3359
|
+
* The values at the axis start (`min`) and end (`max`). Step axes have
|
|
3360
|
+
* none.
|
|
3361
|
+
*/
|
|
3362
|
+
readonly range?: {
|
|
3363
|
+
readonly min: number;
|
|
3364
|
+
readonly max: number;
|
|
3365
|
+
};
|
|
3366
|
+
/** Axis length in px. */
|
|
3367
|
+
readonly length: number;
|
|
3368
|
+
/**
|
|
3369
|
+
* Places a value on the axis: the distance in px from the axis start
|
|
3370
|
+
* (left, or bottom for y). Step axes place by `index` instead.
|
|
3371
|
+
*/
|
|
3372
|
+
project(value: NormalizedSeriesPrimitiveValue | Label, index?: number, series?: NormalizedSeries): number;
|
|
3373
|
+
}
|
|
3374
|
+
/**
|
|
3375
|
+
* An axis type: creates the axis once the chart area and data are known.
|
|
3376
|
+
* {@link stepAxis}, {@link autoScaleAxis} and {@link fixedScaleAxis} return
|
|
3377
|
+
* one; write your own for a scale they don't cover. It goes in the `type`
|
|
3378
|
+
* of an axis.
|
|
3379
|
+
* @experimental
|
|
3380
|
+
*/
|
|
3381
|
+
interface AxisFactory {
|
|
3382
|
+
/**
|
|
3383
|
+
* The axis type, e.g. `step`. The axis it creates has the same `kind`;
|
|
3384
|
+
* the line and bar layers center on `step` axes.
|
|
3385
|
+
*/
|
|
3386
|
+
readonly kind: string;
|
|
3387
|
+
/**
|
|
3388
|
+
* Creates the axis for a chart area and data. Runs on every layout, so
|
|
3389
|
+
* after resizes too.
|
|
3390
|
+
*/
|
|
3391
|
+
create(context: AxisContext): ScaleAxis;
|
|
3392
|
+
}
|
|
3393
|
+
/** A 1.x axis class (or a custom subclass of the 1.x `Axis`). */
|
|
3394
|
+
type LegacyAxisClass = abstract new (...args: any[]) => unknown;
|
|
3395
|
+
/**
|
|
3396
|
+
* An axis's setup: an axis type plus the 1.x axis options (`offset`,
|
|
3397
|
+
* `low`, `high`, `ticks`, `showGrid`, …).
|
|
3398
|
+
*/
|
|
3399
|
+
interface AxisSetup extends Omit<AxisOptions, 'type'> {
|
|
3400
|
+
/** A v2 axis factory, or a 1.x axis class. */
|
|
3401
|
+
readonly type: AxisFactory | LegacyAxisClass;
|
|
3402
|
+
}
|
|
3403
|
+
/**
|
|
3404
|
+
* An axis of a composed chart, in the list form of {@link cartesianAxes}:
|
|
3405
|
+
* an id that layers bind to, a side, a type and the 1.x axis options.
|
|
3406
|
+
* @experimental
|
|
3407
|
+
*/
|
|
3408
|
+
interface AxisDefinition extends AxisSetup {
|
|
3409
|
+
/**
|
|
3410
|
+
* Names the axis, for the `x` and `y` of layers and the `axes` of
|
|
3411
|
+
* {@link axisGrid} and {@link axisLabels}. Ids must be unique.
|
|
3412
|
+
*/
|
|
3413
|
+
readonly id: string;
|
|
3414
|
+
/**
|
|
3415
|
+
* Where the axis sits: `bottom` or `top` makes an X axis, `left` or
|
|
3416
|
+
* `right` a Y axis. Axes on the same side stack outward in list order.
|
|
3417
|
+
*/
|
|
3418
|
+
readonly side: AxisSide;
|
|
3419
|
+
}
|
|
3420
|
+
/**
|
|
3421
|
+
* The config of {@link cartesianAxes}: one X and one Y axis in the 1.x
|
|
3422
|
+
* form, or a list of axes, plus how the data is read.
|
|
3423
|
+
*/
|
|
3424
|
+
interface AxesConfig {
|
|
3425
|
+
/**
|
|
3426
|
+
* The X axis in the 1.x form: at the bottom, or the top with
|
|
3427
|
+
* `position: 'start'`. Its `offset` defaults to 30 px.
|
|
3428
|
+
*/
|
|
3429
|
+
readonly x?: AxisSetup;
|
|
3430
|
+
/**
|
|
3431
|
+
* The Y axis in the 1.x form: on the left, or the right with
|
|
3432
|
+
* `position: 'end'`. Its `offset` defaults to 40 px.
|
|
3433
|
+
*/
|
|
3434
|
+
readonly y?: AxisSetup;
|
|
3435
|
+
/** The axis list form; used instead of `x`/`y`. */
|
|
3436
|
+
readonly axes?: readonly AxisDefinition[];
|
|
3437
|
+
/** Reverse labels and series before projecting (1.x `reverseData`). */
|
|
3438
|
+
readonly reverseData?: boolean;
|
|
3439
|
+
/**
|
|
3440
|
+
* How values are normalized (1.x `normalizeData`): `multi` is `true` for
|
|
3441
|
+
* `{ x, y }` values, or the dimension single values go to; `distributed`
|
|
3442
|
+
* turns a flat series into one series per value.
|
|
3443
|
+
*/
|
|
3444
|
+
readonly normalize?: {
|
|
3445
|
+
readonly multi?: true | AxisDimension;
|
|
3446
|
+
readonly distributed?: boolean;
|
|
3447
|
+
};
|
|
3448
|
+
}
|
|
3449
|
+
/**
|
|
3450
|
+
* A created axis with its place in the chart: what the axis layers draw,
|
|
3451
|
+
* and what a layer finds in `axes.all`.
|
|
3452
|
+
*/
|
|
3453
|
+
interface PlacedScaleAxis extends ScaleAxis {
|
|
3454
|
+
/** The axis id: from its definition, or `x` and `y` in the 1.x form. */
|
|
3455
|
+
readonly id: string;
|
|
3456
|
+
/** The side the axis sits on. */
|
|
3457
|
+
readonly side: AxisSide;
|
|
3458
|
+
/** Distance in px from the chart area to this axis's band (stacking). */
|
|
3459
|
+
readonly inset: number;
|
|
3460
|
+
/** The axis options (offset, labels, grid), without the type. */
|
|
3461
|
+
readonly options: Omit<AxisSetup, 'type'>;
|
|
3462
|
+
}
|
|
3463
|
+
/** The axes of a laid-out chart. */
|
|
3464
|
+
interface ChartAxes {
|
|
3465
|
+
/** The X axis (for layers: the bound one; for the chart: the first). */
|
|
3466
|
+
readonly x?: ScaleAxis;
|
|
3467
|
+
/** The Y axis (for layers: the bound one; for the chart: the first). */
|
|
3468
|
+
readonly y?: ScaleAxis;
|
|
3469
|
+
/** All axes of the chart, in declaration order. */
|
|
3470
|
+
readonly all?: readonly PlacedScaleAxis[];
|
|
3471
|
+
}
|
|
3472
|
+
/**
|
|
3473
|
+
* Axes for a chart's `axes` option, created by {@link cartesianAxes}. The
|
|
3474
|
+
* pipeline asks them for the chart area and, after `layout`, to create the
|
|
3475
|
+
* axes. Charts without axes don't bundle any of this.
|
|
3476
|
+
* @experimental
|
|
3477
|
+
*/
|
|
3478
|
+
interface CartesianAxes {
|
|
3479
|
+
/** The config the axes were created from, with the default offsets filled in. */
|
|
3480
|
+
readonly config: AxesConfig;
|
|
3481
|
+
/** The chart area with the axis offsets reserved. */
|
|
3482
|
+
area(width: number, height: number, padding: ChartPadding): {
|
|
3483
|
+
width: number;
|
|
3484
|
+
height: number;
|
|
3485
|
+
area: Area;
|
|
3486
|
+
};
|
|
3487
|
+
/** The axis definitions, in declaration order. */
|
|
3488
|
+
readonly definitions: readonly AxisDefinition[];
|
|
3489
|
+
/**
|
|
3490
|
+
* Each layer's axis ids and series selection, checked against the data.
|
|
3491
|
+
* Without it, every layer draws all series on the first X and Y axis.
|
|
3492
|
+
*/
|
|
3493
|
+
bind?(layers: readonly Layer[], data: PreparedData): LayerBinding[];
|
|
3494
|
+
/**
|
|
3495
|
+
* The axes for the final chart area, and the data as they see it. With
|
|
3496
|
+
* `bindings`, each axis's range comes only from the series bound to it.
|
|
3497
|
+
* With `layers`, it also covers the extents they report (see
|
|
3498
|
+
* {@link Layer.extent}).
|
|
3499
|
+
*/
|
|
3500
|
+
create(data: PreparedData, area: Area, bindings?: readonly LayerBinding[], layers?: readonly Layer[]): {
|
|
3501
|
+
axes: ChartAxes;
|
|
3502
|
+
normalized: NormalizedChartData;
|
|
3503
|
+
};
|
|
3504
|
+
}
|
|
3505
|
+
/** How a layer is bound: its axis ids and series indexes. */
|
|
3506
|
+
interface LayerBinding {
|
|
3507
|
+
/** The id of the X axis the layer draws on. */
|
|
3508
|
+
readonly x?: string;
|
|
3509
|
+
/** The id of the Y axis the layer draws on. */
|
|
3510
|
+
readonly y?: string;
|
|
3511
|
+
/** Selected series indexes; undefined means all. */
|
|
3512
|
+
readonly series?: readonly number[];
|
|
3513
|
+
}
|
|
3514
|
+
//#endregion
|
|
3515
|
+
//#region src/pipeline/phases.d.ts
|
|
3516
|
+
/** Options accepted by the pipeline (a chart config without listeners). */
|
|
3517
|
+
interface PipelineOptions {
|
|
3518
|
+
/** The labels and series to draw. */
|
|
3519
|
+
readonly data: ChartData;
|
|
3520
|
+
/** What to draw, in this order (later layers on top), e.g. `[axisGrid(), line()]`. */
|
|
3521
|
+
readonly layers: readonly Layer[];
|
|
3522
|
+
/**
|
|
3523
|
+
* The coordinate system the layers draw in: `cartesian` (the default)
|
|
3524
|
+
* for axes, `polar` for `pie()`.
|
|
3525
|
+
*/
|
|
3526
|
+
readonly coordinates?: Coordinates;
|
|
3527
|
+
/**
|
|
3528
|
+
* Space in px between the chart's edge and the drawing area: one number
|
|
3529
|
+
* for all sides, or some sides (the others keep the 1.x defaults).
|
|
3530
|
+
*/
|
|
3531
|
+
readonly padding?: number | Partial<ChartPadding>;
|
|
3532
|
+
/** Axes (see `cartesianAxes`); their offsets are reserved around the area. */
|
|
3533
|
+
readonly axes?: CartesianAxes;
|
|
3534
|
+
/**
|
|
3535
|
+
* The chart's width: px as a number, or a CSS length such as `100%` or
|
|
3536
|
+
* `20rem`. Without it, `chart()` fills the container's width.
|
|
3537
|
+
*/
|
|
3538
|
+
readonly width?: number | string;
|
|
3539
|
+
/**
|
|
3540
|
+
* The chart's height: px as a number, or a CSS length such as `300px`.
|
|
3541
|
+
* Without it, `chart()` fills the container's height.
|
|
3542
|
+
*/
|
|
3543
|
+
readonly height?: number | string;
|
|
3544
|
+
/** Fixed drawing coordinates; sets the layout size and the root `viewBox`. */
|
|
3545
|
+
readonly viewBox?: {
|
|
3546
|
+
readonly width: number;
|
|
3547
|
+
readonly height: number;
|
|
3548
|
+
};
|
|
3549
|
+
/** Class names for the root svg, e.g. `ct-chart-line` for the 1.x line chart CSS. */
|
|
3550
|
+
readonly className?: string;
|
|
3551
|
+
/**
|
|
3552
|
+
* Draws labels as HTML in `foreignObject` (1.x) or as SVG `text`. The
|
|
3553
|
+
* default depends on the renderer: `html` for the DOM, `svg` in
|
|
3554
|
+
* `toScene()`.
|
|
3555
|
+
*/
|
|
3556
|
+
readonly labels?: LabelMode;
|
|
3557
|
+
/** The preset that created the chart, if any (read by plugins). */
|
|
3558
|
+
readonly preset?: ResolvedConfig['preset'];
|
|
3559
|
+
}
|
|
3560
|
+
//#endregion
|
|
3561
|
+
//#region src/chart/types.d.ts
|
|
3562
|
+
/**
|
|
3563
|
+
* The custom events a chart can emit, by name, with their payloads. The
|
|
3564
|
+
* core emits only `responsive`. A plugin that emits events of its own
|
|
3565
|
+
* declares them here (TypeScript merges your declaration into Chartist's),
|
|
3566
|
+
* so `on()`, `off()` and `emit()` check the names and payloads:
|
|
3567
|
+
*
|
|
3568
|
+
* ```ts
|
|
3569
|
+
* declare module 'chartist' {
|
|
3570
|
+
* interface ChartEvents {
|
|
3571
|
+
* 'legend:click': { readonly seriesIndex: number };
|
|
3572
|
+
* }
|
|
3573
|
+
* }
|
|
3574
|
+
* ```
|
|
3575
|
+
*
|
|
3576
|
+
* `chartist/compat` declares the 1.x events (`draw`, `created`, …).
|
|
3577
|
+
* @experimental
|
|
3578
|
+
*/
|
|
3579
|
+
interface ChartEvents {
|
|
3580
|
+
/**
|
|
3581
|
+
* Responsive entries changed which overrides apply: the config before
|
|
3582
|
+
* and after (`chart()`), or the options before and after (presets).
|
|
3583
|
+
*/
|
|
3584
|
+
responsive: {
|
|
3585
|
+
readonly previousConfig: ChartConfig;
|
|
3586
|
+
readonly currentConfig: ChartConfig;
|
|
3587
|
+
} | {
|
|
3588
|
+
readonly previousOptions: unknown;
|
|
3589
|
+
readonly currentOptions: unknown;
|
|
3590
|
+
};
|
|
3591
|
+
}
|
|
3592
|
+
/**
|
|
3593
|
+
* The name of a custom event: a key of {@link ChartEvents}. Plugins list
|
|
3594
|
+
* the names they emit in `provides`.
|
|
3595
|
+
*/
|
|
3596
|
+
type CustomEventName = keyof ChartEvents & string;
|
|
3597
|
+
/**
|
|
3598
|
+
* A plugin: a name and an `install` function that registers listeners on
|
|
3599
|
+
* the chart. Plugins go into `plugins`, in the config of {@link chart} or
|
|
3600
|
+
* the options of the presets. They install in order, so with two
|
|
3601
|
+
* listeners on the same event, the earlier plugin's runs first.
|
|
3602
|
+
*
|
|
3603
|
+
* For options, write a function that takes them and returns the plugin, or
|
|
3604
|
+
* read them from the second argument of `install` and pass the plugin
|
|
3605
|
+
* with {@link withOptions}.
|
|
3606
|
+
*
|
|
3607
|
+
* @example
|
|
3608
|
+
* ```ts
|
|
3609
|
+
* import { barChart, type ChartPlugin } from 'chartist';
|
|
3610
|
+
*
|
|
3611
|
+
* // Bars at or above the limit get the class ct-over.
|
|
3612
|
+
* const threshold = (limit: number): ChartPlugin => ({
|
|
3613
|
+
* name: 'threshold',
|
|
3614
|
+
* install(chart) {
|
|
3615
|
+
* chart.on('compose', current => {
|
|
3616
|
+
* if (current.role !== 'bar') {
|
|
3617
|
+
* return;
|
|
3618
|
+
* }
|
|
3619
|
+
* const { value } = current.ctx;
|
|
3620
|
+
* const y =
|
|
3621
|
+
* typeof value === 'number'
|
|
3622
|
+
* ? value
|
|
3623
|
+
* : value && 'y' in value
|
|
3624
|
+
* ? value.y
|
|
3625
|
+
* : undefined;
|
|
3626
|
+
* return y !== undefined && y >= limit
|
|
3627
|
+
* ? current.addClass('ct-over')
|
|
3628
|
+
* : undefined;
|
|
3629
|
+
* });
|
|
3630
|
+
* }
|
|
3631
|
+
* });
|
|
3632
|
+
*
|
|
3633
|
+
* barChart('#chart', { series: [[5, 4, 3, 7]] }, { plugins: [threshold(5)] });
|
|
3634
|
+
* ```
|
|
3635
|
+
* @experimental
|
|
3636
|
+
*/
|
|
3637
|
+
interface ChartPlugin<TOptions = unknown> {
|
|
3638
|
+
/** Names the plugin. Prefix your custom events with it to keep them apart. */
|
|
3639
|
+
readonly name: string;
|
|
3640
|
+
/**
|
|
3641
|
+
* The custom events this plugin emits with `chart.emit()`, each declared
|
|
3642
|
+
* in {@link ChartEvents}. They're known before any plugin installs, so
|
|
3643
|
+
* another plugin may listen to them.
|
|
3644
|
+
*/
|
|
3645
|
+
readonly provides?: readonly CustomEventName[];
|
|
3646
|
+
/**
|
|
3647
|
+
* Sets the plugin up: runs once, before the first render, with the
|
|
3648
|
+
* chart's handle. Listeners registered here stay for every later render,
|
|
3649
|
+
* after updates and resizes too, and `off(name)` without a listener
|
|
3650
|
+
* leaves them alone: remove one with its reference.
|
|
3651
|
+
* @param chart The chart's handle, to listen to events and emit them.
|
|
3652
|
+
* @param options The options of a `[plugin, options]` entry, if any.
|
|
3653
|
+
*/
|
|
3654
|
+
install(chart: ChartHandle, options?: TOptions): void;
|
|
3655
|
+
}
|
|
3656
|
+
/**
|
|
3657
|
+
* A plugin paired with its options, as {@link withOptions} creates it.
|
|
3658
|
+
* `install` receives the options as its second argument.
|
|
3659
|
+
*/
|
|
3660
|
+
type PluginWithOptions<TOptions = unknown> = readonly [ChartPlugin<TOptions>, TOptions];
|
|
3661
|
+
/**
|
|
3662
|
+
* An entry of a chart's `plugins`: a plugin, or a plugin with its options.
|
|
3663
|
+
* Prefer {@link withOptions} (it checks the options) or a function that
|
|
3664
|
+
* returns a plugin over a bare `[plugin, options]` pair. A 1.x plugin (a
|
|
3665
|
+
* plain function) throws; convert it with `fromLegacyPlugin()` from
|
|
3666
|
+
* `chartist/compat`.
|
|
3667
|
+
*/
|
|
3668
|
+
type PluginEntry = ChartPlugin<any> | PluginWithOptions<any>;
|
|
3669
|
+
/**
|
|
3670
|
+
* The config of {@link chart}: the data, the layers that draw it and the
|
|
3671
|
+
* axes they draw on, plus size, padding, plugins and listeners.
|
|
3672
|
+
*
|
|
3673
|
+
* Without `axes`, layers draw into the whole chart area; the pie layer
|
|
3674
|
+
* needs `coordinates: 'polar'`. {@link toScene} takes the same config.
|
|
3675
|
+
* @experimental
|
|
3676
|
+
*/
|
|
3677
|
+
interface ChartConfig extends PipelineOptions {
|
|
3678
|
+
/**
|
|
3679
|
+
* Plugins to install before the first render, in order: plugins, or
|
|
3680
|
+
* plugins with their options from {@link withOptions}.
|
|
3681
|
+
*/
|
|
3682
|
+
readonly plugins?: readonly PluginEntry[];
|
|
3683
|
+
/**
|
|
3684
|
+
* Phase listeners by phase name (or `'*'` for all phases). They're
|
|
3685
|
+
* registered before the first render, so they see it too.
|
|
3686
|
+
*/
|
|
3687
|
+
readonly on?: PhaseListeners;
|
|
3688
|
+
/** Turns the scene into output; the DOM renderer by default. */
|
|
3689
|
+
readonly renderer?: Renderer;
|
|
3690
|
+
/**
|
|
3691
|
+
* Overrides that apply while their condition matches, created with
|
|
3692
|
+
* `responsive([...])`: entries of a media query string or a
|
|
3693
|
+
* `container()` condition, and a partial config. The chart renders again
|
|
3694
|
+
* when the matching entries change.
|
|
3695
|
+
*/
|
|
3696
|
+
readonly responsive?: ResponsiveSet<ChartOverrides>;
|
|
3697
|
+
}
|
|
3698
|
+
/**
|
|
3699
|
+
* The part of a {@link ChartConfig} that responsive entries can override:
|
|
3700
|
+
* everything but `responsive`, `plugins`, `on` and `renderer`. The
|
|
3701
|
+
* matching entries merge over the config in order, shallowly.
|
|
3702
|
+
* @experimental
|
|
3703
|
+
*/
|
|
3704
|
+
type ChartOverrides = Partial<Omit<ChartConfig, 'responsive' | 'plugins' | 'on' | 'renderer'>>;
|
|
3705
|
+
/**
|
|
3706
|
+
* The handle {@link chart} returns: update or remove the chart, and listen
|
|
3707
|
+
* to its events. Plugins get the same handle in `install`. The methods
|
|
3708
|
+
* other than `destroy` and `emit` return the handle, so calls chain.
|
|
3709
|
+
* @experimental
|
|
3710
|
+
*/
|
|
3711
|
+
interface ChartHandle {
|
|
3712
|
+
/** The element the chart renders into (undefined in `toScene`). */
|
|
3713
|
+
readonly container?: Element;
|
|
3714
|
+
/**
|
|
3715
|
+
* Shallow-merges the changes into the config and renders again. Plugins
|
|
3716
|
+
* and listeners stay; `plugins` and `on` can't change.
|
|
3717
|
+
*/
|
|
3718
|
+
update(config: Partial<Omit<ChartConfig, 'plugins' | 'on'>>): this;
|
|
3719
|
+
/**
|
|
3720
|
+
* Stops reacting to container size changes (and media queries in
|
|
3721
|
+
* presets). The output and the listeners stay.
|
|
3722
|
+
*/
|
|
3723
|
+
detach(): this;
|
|
3724
|
+
/** Detaches, removes the output and clears all listeners. */
|
|
3725
|
+
destroy(): void;
|
|
3726
|
+
/**
|
|
3727
|
+
* Emits a custom event (declared in {@link ChartEvents}), e.g. from a
|
|
3728
|
+
* plugin. Phase names are reserved: emitting one throws.
|
|
3729
|
+
*/
|
|
3730
|
+
emit<K extends CustomEventName>(name: K, payload: ChartEvents[K]): void;
|
|
3731
|
+
/**
|
|
3732
|
+
* Listens to a phase event, which fires on every render. Listeners of
|
|
3733
|
+
* `resolve` to `scene` may return a new payload to change what's drawn;
|
|
3734
|
+
* `compose` listeners may return `null` to drop a node.
|
|
3735
|
+
*/
|
|
3736
|
+
on<K extends PhaseName>(name: K, listener: PhaseListener<K>): this;
|
|
3737
|
+
/** Listens to every phase event, with the phase name and its payload. */
|
|
3738
|
+
on(name: '*', listener: AllPhasesListener): this;
|
|
3739
|
+
/** Listens to a custom event, declared in {@link ChartEvents}. */
|
|
3740
|
+
on<K extends CustomEventName>(name: K, listener: (payload: ChartEvents[K]) => void): this;
|
|
3741
|
+
/**
|
|
3742
|
+
* Removes a phase listener, whoever added it. Without a listener,
|
|
3743
|
+
* removes the listeners of the phase added through `on` and the
|
|
3744
|
+
* config's `on`; plugins keep theirs.
|
|
3745
|
+
*/
|
|
3746
|
+
off<K extends PhaseName>(name: K, listener?: PhaseListener<K>): this;
|
|
3747
|
+
/**
|
|
3748
|
+
* Removes a listener of all phases, or without a listener, those added
|
|
3749
|
+
* through `on`.
|
|
3750
|
+
*/
|
|
3751
|
+
off(name: '*', listener?: AllPhasesListener): this;
|
|
3752
|
+
/**
|
|
3753
|
+
* Removes a custom event listener, or without a listener, the event's
|
|
3754
|
+
* listeners added through `on`.
|
|
3755
|
+
*/
|
|
3756
|
+
off<K extends CustomEventName>(name: K, listener?: (payload: ChartEvents[K]) => void): this;
|
|
3757
|
+
}
|
|
3758
|
+
/**
|
|
3759
|
+
* Pairs a plugin with its options for a chart's `plugins`, and checks the
|
|
3760
|
+
* options against the plugin's options type. `install` receives them as
|
|
3761
|
+
* its second argument.
|
|
3762
|
+
*
|
|
3763
|
+
* @example
|
|
3764
|
+
* ```ts
|
|
3765
|
+
* import { lineChart, withOptions, type ChartPlugin } from 'chartist';
|
|
3766
|
+
*
|
|
3767
|
+
* const lastPoint: ChartPlugin<{ className: string }> = {
|
|
3768
|
+
* name: 'last-point',
|
|
3769
|
+
* install(chart, options) {
|
|
3770
|
+
* chart.on('compose', current => {
|
|
3771
|
+
* if (current.role !== 'series') {
|
|
3772
|
+
* return;
|
|
3773
|
+
* }
|
|
3774
|
+
* const last = current.children.at(-1);
|
|
3775
|
+
* return last && options
|
|
3776
|
+
* ? current.replace(last, last.addClass(options.className))
|
|
3777
|
+
* : undefined;
|
|
3778
|
+
* });
|
|
3779
|
+
* }
|
|
3780
|
+
* };
|
|
3781
|
+
*
|
|
3782
|
+
* lineChart(
|
|
3783
|
+
* '#chart',
|
|
3784
|
+
* { series: [[1, 3, 2, 5]] },
|
|
3785
|
+
* { plugins: [withOptions(lastPoint, { className: 'ct-last' })] }
|
|
3786
|
+
* );
|
|
3787
|
+
* ```
|
|
3788
|
+
* @experimental
|
|
3789
|
+
*/
|
|
3790
|
+
export declare function withOptions<TOptions>(plugin: ChartPlugin<TOptions>, options: TOptions): PluginWithOptions<TOptions>;
|
|
3791
|
+
//#endregion
|
|
3792
|
+
//#region src/charts/PresetChart.d.ts
|
|
3793
|
+
/**
|
|
3794
|
+
* Base of the 1.x chart classes that wrap a v2 preset. Keeps the 1.x API:
|
|
3795
|
+
* deferred first render, `update(data, options, override)`, `detach()`,
|
|
3796
|
+
* `on`/`off`, and re-rendering on window resize. 1.x events and 1.x plugin
|
|
3797
|
+
* functions need the compat plugin (`chartist/compat`).
|
|
3798
|
+
*/
|
|
3799
|
+
declare abstract class PresetChart<TEventsTypes, TData extends Data, TOptions extends Options> extends BaseChart<TEventsTypes> {
|
|
3800
|
+
protected data: TData;
|
|
3801
|
+
private chartOptions?;
|
|
3802
|
+
private readonly chartResponsiveOptions?;
|
|
3803
|
+
private controller?;
|
|
3804
|
+
/** The chart handle while plugins install (before `controller` is set). */
|
|
3805
|
+
private installing?;
|
|
3806
|
+
private readonly queued;
|
|
3807
|
+
private readonly onWindowResize;
|
|
3808
|
+
private readonly wildcards;
|
|
3809
|
+
constructor(query: string | Element | null, data: TData, defaults: TOptions, chartOptions?: TOptions | undefined, chartResponsiveOptions?: ResponsiveOptions<TOptions> | undefined);
|
|
3810
|
+
/** Creates the preset this class wraps. */
|
|
3811
|
+
protected abstract createController(container: Element, data: TData, options: TOptions | undefined, responsiveOptions: ResponsiveOptions<TOptions> | undefined, plugins: PluginEntry[]): PresetController<TData, TOptions>;
|
|
3812
|
+
initialize(): void;
|
|
3813
|
+
createChart(): void;
|
|
3814
|
+
/**
|
|
3815
|
+
* Updates the chart. New options extend the defaults, or the current
|
|
3816
|
+
* options when `override` is true (1.x semantics).
|
|
3817
|
+
*/
|
|
3818
|
+
update(data?: Data, options?: TOptions, override?: boolean): this;
|
|
3819
|
+
/** Stops resize and media query handling; the chart stays rendered. */
|
|
3820
|
+
detach(): this;
|
|
3821
|
+
on<T extends keyof TEventsTypes>(event: T, listener: EventListener<TEventsTypes[T]>): this;
|
|
3822
|
+
on(event: '*', listener: AllEventsListener): this;
|
|
3823
|
+
on(event: string, listener: EventListener): this;
|
|
3824
|
+
off<T extends keyof TEventsTypes>(event: T, listener?: EventListener<TEventsTypes[T]>): this;
|
|
3825
|
+
off(event: '*', listener?: AllEventsListener): this;
|
|
3826
|
+
off(event: string, listener?: EventListener): this;
|
|
3827
|
+
}
|
|
3828
|
+
//#endregion
|
|
3829
|
+
//#region src/charts/LineChart/LineChart.d.ts
|
|
3830
|
+
/**
|
|
3831
|
+
* Reads a line chart option for a series: the per-series value from
|
|
3832
|
+
* `options.series[name]` if the series has a name and sets it, the chart's
|
|
3833
|
+
* value otherwise.
|
|
3834
|
+
*/
|
|
3835
|
+
export declare function getSeriesOption<T extends keyof Omit<LineChartOptionsWithDefaults, 'series'>>(series: Series | SeriesObject, options: LineChartOptionsWithDefaults, key: T): LineChartOptionsWithDefaults[T];
|
|
3836
|
+
/**
|
|
3837
|
+
* The 1.x line chart class: a wrapper over the `lineChart` preset with the
|
|
3838
|
+
* 1.x API. 1.x events and 1.x plugin functions need the compat plugin
|
|
3839
|
+
* (`chartist/compat`).
|
|
3840
|
+
* @see {@link lineChart} for the v2 functional API.
|
|
3841
|
+
*/
|
|
3842
|
+
export declare class LineChart extends PresetChart<LineChartEventsTypes, LineChartData, LineChartOptions> {
|
|
3843
|
+
/**
|
|
3844
|
+
* Creates a line chart. The first render happens on the next tick, so
|
|
3845
|
+
* listeners registered right after construction receive it.
|
|
3846
|
+
* @param query A selector query string or a DOM element
|
|
3847
|
+
* @param data The data with labels and series
|
|
3848
|
+
* @param options Options that override the defaults
|
|
3849
|
+
* @param responsiveOptions `[mediaQuery, options]` pairs
|
|
3850
|
+
*/
|
|
3851
|
+
constructor(query: string | Element | null, data: LineChartData, options?: LineChartOptions, responsiveOptions?: ResponsiveOptions<LineChartOptions>);
|
|
3852
|
+
protected createController(container: Element, data: LineChartData, options: LineChartOptions | undefined, responsiveOptions: ResponsiveOptions<LineChartOptions> | undefined, plugins: PluginEntry[]): PresetController<LineChartData, LineChartOptions>;
|
|
3853
|
+
}
|
|
3854
|
+
//#endregion
|
|
3855
|
+
//#region src/charts/BarChart/BarChart.d.ts
|
|
3856
|
+
/**
|
|
3857
|
+
* The 1.x bar chart class: a wrapper over the `barChart` preset with the
|
|
3858
|
+
* 1.x API. 1.x events and 1.x plugin functions need the compat plugin
|
|
3859
|
+
* (`chartist/compat`).
|
|
3860
|
+
* @see {@link barChart} for the v2 functional API.
|
|
3861
|
+
*/
|
|
3862
|
+
export declare class BarChart extends PresetChart<BarChartEventsTypes, BarChartData, BarChartOptions> {
|
|
3863
|
+
/**
|
|
3864
|
+
* Creates a bar chart. The first render happens on the next tick, so
|
|
3865
|
+
* listeners registered right after construction receive it.
|
|
3866
|
+
* @param query A selector query string or a DOM element
|
|
3867
|
+
* @param data The data with labels and series
|
|
3868
|
+
* @param options Options that override the defaults
|
|
3869
|
+
* @param responsiveOptions `[mediaQuery, options]` pairs
|
|
3870
|
+
*/
|
|
3871
|
+
constructor(query: string | Element | null, data: BarChartData, options?: BarChartOptions, responsiveOptions?: ResponsiveOptions<BarChartOptions>);
|
|
3872
|
+
protected createController(container: Element, data: BarChartData, options: BarChartOptions | undefined, responsiveOptions: ResponsiveOptions<BarChartOptions> | undefined, plugins: PluginEntry[]): PresetController<BarChartData, BarChartOptions>;
|
|
3873
|
+
}
|
|
3874
|
+
//#endregion
|
|
3875
|
+
//#region src/layers/pie.d.ts
|
|
3876
|
+
/** Which way pie labels anchor, relative to the center. */
|
|
3877
|
+
type LabelDirection$1 = 'implode' | 'neutral' | 'explode';
|
|
3878
|
+
/** The `text-anchor` of a pie label. */
|
|
3879
|
+
type AnchorPosition$1 = 'start' | 'middle' | 'end';
|
|
3880
|
+
interface Dot$1 {
|
|
3881
|
+
x: number;
|
|
3882
|
+
y: number;
|
|
3883
|
+
}
|
|
3884
|
+
/**
|
|
3885
|
+
* The options of the {@link pie} layer. Without them, it draws a filled
|
|
3886
|
+
* pie from the top, with a label halfway out on each slice.
|
|
3887
|
+
* @experimental
|
|
3888
|
+
*/
|
|
3889
|
+
interface PieLayerOptions {
|
|
3890
|
+
/** Where the first slice starts, in degrees clockwise from the top. */
|
|
3891
|
+
readonly startAngle?: number;
|
|
3892
|
+
/** Fixed total; slices are relative to it (gauges). Defaults to the sum. */
|
|
3893
|
+
readonly total?: number;
|
|
3894
|
+
/** Draws a donut: rings instead of filled slices. */
|
|
3895
|
+
readonly donut?: boolean;
|
|
3896
|
+
/**
|
|
3897
|
+
* Donut ring width in px, or a share of the radius (`'25%'`). Without
|
|
3898
|
+
* it, the stylesheet sets the width (`--ct-donut-width`, 60px by
|
|
3899
|
+
* default), and the ring is laid out for 60 px.
|
|
3900
|
+
*/
|
|
3901
|
+
readonly donutWidth?: number | string;
|
|
3902
|
+
/** Draws a label for each slice; on by default. */
|
|
3903
|
+
readonly showLabel?: boolean;
|
|
3904
|
+
/**
|
|
3905
|
+
* Moves the labels away from the center (positive) or toward it
|
|
3906
|
+
* (negative), in px.
|
|
3907
|
+
*/
|
|
3908
|
+
readonly labelOffset?: number;
|
|
3909
|
+
/**
|
|
3910
|
+
* Where labels go: `inside` (the default: halfway out on a pie, on the
|
|
3911
|
+
* middle of a donut's ring), `outside` (at the outer edge) or `center`
|
|
3912
|
+
* (in the middle; move them with `labelOffset`).
|
|
3913
|
+
*/
|
|
3914
|
+
readonly labelPosition?: 'inside' | 'outside' | 'center';
|
|
3915
|
+
/** Formats a slice's label: its entry in `labels`, or else its value. */
|
|
3916
|
+
readonly labelInterpolationFnc?: (value: Label, index: number) => Label | null | undefined;
|
|
3917
|
+
/**
|
|
3918
|
+
* Which way labels anchor: `neutral` (the default), `explode` (away from
|
|
3919
|
+
* the center, for labels outside the pie) or `implode` (toward it).
|
|
3920
|
+
*/
|
|
3921
|
+
readonly labelDirection?: LabelDirection$1;
|
|
3922
|
+
/** Leaves out the slices and labels of zero values. */
|
|
3923
|
+
readonly ignoreEmptyValues?: boolean;
|
|
3924
|
+
/**
|
|
3925
|
+
* Shifts labels that would overlap another one by this many px, up and
|
|
3926
|
+
* left, judging the overlap by the length of the drawn label text.
|
|
3927
|
+
*/
|
|
3928
|
+
readonly preventOverlappingLabelOffset?: number;
|
|
3929
|
+
/**
|
|
3930
|
+
* Replaces the classes of what the layer draws: `series` (`ct-series`),
|
|
3931
|
+
* `slicePie` (`ct-slice-pie`), `sliceDonut` (`ct-slice-donut`) and
|
|
3932
|
+
* `label` (`ct-label`).
|
|
3933
|
+
*/
|
|
3934
|
+
readonly classNames?: {
|
|
3935
|
+
readonly series?: string;
|
|
3936
|
+
readonly slicePie?: string;
|
|
3937
|
+
readonly sliceDonut?: string;
|
|
3938
|
+
readonly label?: string;
|
|
3939
|
+
};
|
|
3940
|
+
}
|
|
3941
|
+
/** The 1.x label anchor: `start`, `middle` or `end` by side and direction. */
|
|
3942
|
+
export declare function determineAnchorPosition(center: Dot$1, label: Dot$1, direction: LabelDirection$1): AnchorPosition$1;
|
|
3943
|
+
/**
|
|
3944
|
+
* Creates a layer that draws a flat series as pie or donut slices with
|
|
3945
|
+
* labels, in the markup of the 1.x pie chart (a `g.ct-series` per slice,
|
|
3946
|
+
* then a group of `text.ct-label`). It draws in polar coordinates, so the
|
|
3947
|
+
* chart needs `coordinates: 'polar'` and no axes. With several series, it
|
|
3948
|
+
* draws one slice per series, from each series' first value.
|
|
3949
|
+
*
|
|
3950
|
+
* @example
|
|
3951
|
+
* ```ts
|
|
3952
|
+
* import { chart, pie } from 'chartist';
|
|
3953
|
+
*
|
|
3954
|
+
* chart('#chart', {
|
|
3955
|
+
* data: {
|
|
3956
|
+
* labels: ['Rent', 'Food', 'Fun'],
|
|
3957
|
+
* series: [50, 30, 20]
|
|
3958
|
+
* },
|
|
3959
|
+
* coordinates: 'polar',
|
|
3960
|
+
* layers: [pie({ donut: true, donutWidth: 30 })],
|
|
3961
|
+
* className: 'ct-chart-donut'
|
|
3962
|
+
* });
|
|
3963
|
+
* ```
|
|
3964
|
+
* @experimental
|
|
3965
|
+
*/
|
|
3966
|
+
export declare function pie(options?: PieLayerOptions): Layer;
|
|
3967
|
+
//#endregion
|
|
3968
|
+
//#region src/charts/PieChart/PieChart.d.ts
|
|
3969
|
+
/**
|
|
3970
|
+
* The 1.x pie chart class: a wrapper over the `pieChart` preset with the
|
|
3971
|
+
* 1.x API. 1.x events and 1.x plugin functions need the compat plugin
|
|
3972
|
+
* (`chartist/compat`).
|
|
3973
|
+
* @see {@link pieChart} for the v2 functional API.
|
|
3974
|
+
*/
|
|
3975
|
+
export declare class PieChart extends PresetChart<PieChartEventsTypes, PieChartData, PieChartOptions> {
|
|
3976
|
+
/**
|
|
3977
|
+
* Creates a pie chart. The first render happens on the next tick, so
|
|
3978
|
+
* listeners registered right after construction receive it.
|
|
3979
|
+
* @param query A selector query string or a DOM element
|
|
3980
|
+
* @param data The data with labels and series
|
|
3981
|
+
* @param options Options that override the defaults
|
|
3982
|
+
* @param responsiveOptions `[mediaQuery, options]` pairs
|
|
3983
|
+
*/
|
|
3984
|
+
constructor(query: string | Element | null, data: PieChartData, options?: PieChartOptions, responsiveOptions?: ResponsiveOptions<PieChartOptions>);
|
|
3985
|
+
/**
|
|
3986
|
+
* Checks if a label overlaps another one and moves it up and left until
|
|
3987
|
+
* it doesn't (1.x).
|
|
3988
|
+
*/
|
|
3989
|
+
moveLabel(labelPos: Dot, existingLabelPos: Dot, textOffset: number, length: number): void;
|
|
3990
|
+
protected createController(container: Element, data: PieChartData, options: PieChartOptions | undefined, responsiveOptions: ResponsiveOptions<PieChartOptions> | undefined, plugins: PluginEntry[]): PresetController<PieChartData, PieChartOptions>;
|
|
3991
|
+
}
|
|
3992
|
+
//#endregion
|
|
3993
|
+
//#region src/interpolation/none.d.ts
|
|
3994
|
+
/** The options of {@link Interpolation.none}. */
|
|
3995
|
+
interface NoneInterpolationOptions {
|
|
3996
|
+
/**
|
|
3997
|
+
* Joins the line across holes (`null` or `undefined` values) instead of
|
|
3998
|
+
* breaking it. Off by default.
|
|
3999
|
+
*/
|
|
4000
|
+
fillHoles?: boolean;
|
|
4001
|
+
}
|
|
4002
|
+
/**
|
|
4003
|
+
* Draws a line as straight segments from point to point, without
|
|
4004
|
+
* smoothing. It's what `lineSmooth: false` uses.
|
|
4005
|
+
*
|
|
4006
|
+
* @example
|
|
4007
|
+
* ```ts
|
|
4008
|
+
* import { lineChart, Interpolation } from 'chartist';
|
|
4009
|
+
*
|
|
4010
|
+
* lineChart(
|
|
4011
|
+
* '#chart',
|
|
4012
|
+
* { labels: [1, 2, 3, 4, 5], series: [[1, 2, 8, 1, 7]] },
|
|
4013
|
+
* { lineSmooth: Interpolation.none({ fillHoles: true }) }
|
|
4014
|
+
* );
|
|
4015
|
+
* ```
|
|
4016
|
+
*
|
|
4017
|
+
* @param options Whether to join the line across holes.
|
|
4018
|
+
* @returns The interpolation, for the `lineSmooth` option.
|
|
4019
|
+
*/
|
|
4020
|
+
declare function none(options?: NoneInterpolationOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
4021
|
+
//#endregion
|
|
4022
|
+
//#region src/interpolation/simple.d.ts
|
|
4023
|
+
/** The options of {@link Interpolation.simple}. */
|
|
4024
|
+
interface SimpleInteractionOptions {
|
|
4025
|
+
/**
|
|
4026
|
+
* How long the curve's handles are: the distance between two points
|
|
4027
|
+
* divided by this, so larger values give tighter curves. `2` by default,
|
|
4028
|
+
* at least `1`.
|
|
4029
|
+
*/
|
|
4030
|
+
divisor?: number;
|
|
4031
|
+
/**
|
|
4032
|
+
* Joins the line across holes (`null` or `undefined` values) instead of
|
|
4033
|
+
* breaking it. Off by default.
|
|
4034
|
+
*/
|
|
4035
|
+
fillHoles?: boolean;
|
|
4036
|
+
}
|
|
4037
|
+
/**
|
|
4038
|
+
* Smooths a line with curves whose handles are horizontal: it goes through
|
|
4039
|
+
* every point and never swings above or below them, but flows less than
|
|
4040
|
+
* {@link Interpolation.cardinal}. `divisor` sets how round it is.
|
|
4041
|
+
*
|
|
4042
|
+
* @example
|
|
4043
|
+
* ```ts
|
|
4044
|
+
* import { lineChart, Interpolation } from 'chartist';
|
|
4045
|
+
*
|
|
4046
|
+
* lineChart(
|
|
4047
|
+
* '#chart',
|
|
4048
|
+
* { labels: [1, 2, 3, 4, 5], series: [[1, 2, 8, 1, 7]] },
|
|
4049
|
+
* { lineSmooth: Interpolation.simple({ divisor: 3 }) }
|
|
4050
|
+
* );
|
|
4051
|
+
* ```
|
|
4052
|
+
*
|
|
4053
|
+
* @param options The divisor, and whether to join the line across holes.
|
|
4054
|
+
* @returns The interpolation, for the `lineSmooth` option.
|
|
4055
|
+
*/
|
|
4056
|
+
declare function simple(options?: SimpleInteractionOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
4057
|
+
//#endregion
|
|
4058
|
+
//#region src/interpolation/step.d.ts
|
|
4059
|
+
/** The options of {@link Interpolation.step}. */
|
|
4060
|
+
interface StepInterpolationOptions {
|
|
4061
|
+
/**
|
|
4062
|
+
* Holds each value until the next point, so the step happens where the
|
|
4063
|
+
* value changes (the default). With `false`, the line steps to the next
|
|
4064
|
+
* value right away.
|
|
4065
|
+
*/
|
|
4066
|
+
postpone?: boolean;
|
|
4067
|
+
/**
|
|
4068
|
+
* Joins the line across holes (`null` or `undefined` values) instead of
|
|
4069
|
+
* breaking it. Off by default.
|
|
4070
|
+
*/
|
|
4071
|
+
fillHoles?: boolean;
|
|
4072
|
+
}
|
|
4073
|
+
/**
|
|
4074
|
+
* Draws a line in steps: horizontal and vertical segments instead of
|
|
4075
|
+
* diagonals or curves. Each step adds a corner to the path, and with
|
|
4076
|
+
* `showPoint` a point is drawn there too.
|
|
4077
|
+
*
|
|
4078
|
+
* @example
|
|
4079
|
+
* ```ts
|
|
4080
|
+
* import { lineChart, Interpolation } from 'chartist';
|
|
4081
|
+
*
|
|
4082
|
+
* lineChart(
|
|
4083
|
+
* '#chart',
|
|
4084
|
+
* { labels: [1, 2, 3, 4, 5], series: [[1, 2, 8, 1, 7]] },
|
|
4085
|
+
* { lineSmooth: Interpolation.step({ postpone: false }) }
|
|
4086
|
+
* );
|
|
4087
|
+
* ```
|
|
4088
|
+
*
|
|
4089
|
+
* @param options When to step, and whether to join the line across holes.
|
|
4090
|
+
* @returns The interpolation, for the `lineSmooth` option.
|
|
4091
|
+
*/
|
|
4092
|
+
declare function step(options?: StepInterpolationOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
4093
|
+
//#endregion
|
|
4094
|
+
//#region src/interpolation/cardinal.d.ts
|
|
4095
|
+
/** The options of {@link Interpolation.cardinal}. */
|
|
4096
|
+
interface CardinalInterpolationOptions {
|
|
4097
|
+
/**
|
|
4098
|
+
* How round the curve is, from `0` (straight segments) to `1` (the
|
|
4099
|
+
* default, a Catmull-Rom spline).
|
|
4100
|
+
*/
|
|
4101
|
+
tension?: number;
|
|
4102
|
+
/**
|
|
4103
|
+
* Joins the line across holes (`null` or `undefined` values) instead of
|
|
4104
|
+
* breaking it. Off by default.
|
|
4105
|
+
*/
|
|
4106
|
+
fillHoles?: boolean;
|
|
4107
|
+
}
|
|
4108
|
+
/**
|
|
4109
|
+
* Smooths a line with a cardinal (Catmull-Rom) spline: round curves that
|
|
4110
|
+
* go through every point. When values change quickly, the curve can swing
|
|
4111
|
+
* past them; {@link Interpolation.monotoneCubic} (the default for
|
|
4112
|
+
* `lineSmooth: true`) doesn't.
|
|
4113
|
+
*
|
|
4114
|
+
* With two points or fewer, the line is straight, as with
|
|
4115
|
+
* {@link Interpolation.none}.
|
|
4116
|
+
*
|
|
4117
|
+
* @example
|
|
4118
|
+
* ```ts
|
|
4119
|
+
* import { lineChart, Interpolation } from 'chartist';
|
|
4120
|
+
*
|
|
4121
|
+
* lineChart(
|
|
4122
|
+
* '#chart',
|
|
4123
|
+
* { labels: [1, 2, 3, 4, 5], series: [[1, 2, 8, 1, 7]] },
|
|
4124
|
+
* { lineSmooth: Interpolation.cardinal({ tension: 0.2 }) }
|
|
4125
|
+
* );
|
|
4126
|
+
* ```
|
|
4127
|
+
*
|
|
4128
|
+
* @param options The tension, and whether to join the line across holes.
|
|
4129
|
+
* @returns The interpolation, for the `lineSmooth` option.
|
|
4130
|
+
*/
|
|
4131
|
+
declare function cardinal(options?: CardinalInterpolationOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
4132
|
+
//#endregion
|
|
4133
|
+
//#region src/interpolation/monotoneCubic.d.ts
|
|
4134
|
+
/** The options of {@link Interpolation.monotoneCubic}. */
|
|
4135
|
+
interface MonotoneCubicInterpolationOptions {
|
|
4136
|
+
/**
|
|
4137
|
+
* Joins the line across holes (`null` or `undefined` values) instead of
|
|
4138
|
+
* breaking it. Off by default.
|
|
4139
|
+
*/
|
|
4140
|
+
fillHoles?: boolean;
|
|
4141
|
+
}
|
|
4142
|
+
/**
|
|
4143
|
+
* Smooths a line with a monotone cubic spline: a smooth curve through
|
|
4144
|
+
* every point that never swings above or below the values around it. It's
|
|
4145
|
+
* what `lineSmooth: true` uses.
|
|
4146
|
+
*
|
|
4147
|
+
* The x values have to increase from point to point: where one doesn't,
|
|
4148
|
+
* the line breaks. With two points or fewer, the line is straight, as with
|
|
4149
|
+
* {@link Interpolation.none}.
|
|
4150
|
+
*
|
|
4151
|
+
* @example
|
|
4152
|
+
* ```ts
|
|
4153
|
+
* import { lineChart, Interpolation } from 'chartist';
|
|
4154
|
+
*
|
|
4155
|
+
* lineChart(
|
|
4156
|
+
* '#chart',
|
|
4157
|
+
* { labels: [1, 2, 3, 4, 5], series: [[1, 2, 8, 1, 7]] },
|
|
4158
|
+
* { lineSmooth: Interpolation.monotoneCubic({ fillHoles: true }) }
|
|
4159
|
+
* );
|
|
4160
|
+
* ```
|
|
4161
|
+
*
|
|
4162
|
+
* @param options Whether to join the line across holes.
|
|
4163
|
+
* @returns The interpolation, for the `lineSmooth` option.
|
|
4164
|
+
*/
|
|
4165
|
+
declare function monotoneCubic(options?: MonotoneCubicInterpolationOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
4166
|
+
declare namespace index_d_exports {
|
|
4167
|
+
export { CardinalInterpolationOptions, MonotoneCubicInterpolationOptions, NoneInterpolationOptions, SimpleInteractionOptions, StepInterpolationOptions, cardinal, monotoneCubic, none, simple, step };
|
|
4168
|
+
}
|
|
4169
|
+
//#endregion
|
|
4170
|
+
//#region src/scene/tree.d.ts
|
|
4171
|
+
/**
|
|
4172
|
+
* What {@link findAll} looks for: nodes by role, key and data context
|
|
4173
|
+
* fields. A node matches when it matches every field given; an empty query
|
|
4174
|
+
* matches every node.
|
|
4175
|
+
*/
|
|
4176
|
+
interface NodeQuery {
|
|
4177
|
+
/** Only nodes of this role, e.g. `bar`. */
|
|
4178
|
+
readonly role?: NodeRole;
|
|
4179
|
+
/** Only the node with this key, e.g. `0/1/3` (layer, series, value). */
|
|
4180
|
+
readonly key?: string;
|
|
4181
|
+
/** Only nodes of the series with this index (`ctx.seriesIndex`). */
|
|
4182
|
+
readonly seriesIndex?: number;
|
|
4183
|
+
/** Only nodes of the value with this index (`ctx.valueIndex`). */
|
|
4184
|
+
readonly valueIndex?: number;
|
|
4185
|
+
}
|
|
4186
|
+
/**
|
|
4187
|
+
* Finds all nodes of a scene that match the query, in document order, the
|
|
4188
|
+
* root included. With a `role`, the nodes are typed as that role's nodes.
|
|
4189
|
+
*
|
|
4190
|
+
* @param scene The root of the tree to search, e.g. the `scene` payload
|
|
4191
|
+
* @param query The fields to match; without one, every node matches
|
|
4192
|
+
* @example
|
|
4193
|
+
* ```ts
|
|
4194
|
+
* import { barChart, findAll } from 'chartist';
|
|
4195
|
+
*
|
|
4196
|
+
* barChart(
|
|
4197
|
+
* '#chart',
|
|
4198
|
+
* { labels: ['Q1', 'Q2', 'Q3', 'Q4'], series: [[5, 4, 3, 7]] },
|
|
4199
|
+
* {
|
|
4200
|
+
* plugins: [
|
|
4201
|
+
* {
|
|
4202
|
+
* name: 'log-bars',
|
|
4203
|
+
* install(chart) {
|
|
4204
|
+
* chart.on('scene', ({ scene }) => {
|
|
4205
|
+
* for (const bar of findAll(scene, { role: 'bar' })) {
|
|
4206
|
+
* console.log(bar.key, bar.ctx.value, bar.ctx.y2);
|
|
4207
|
+
* }
|
|
4208
|
+
* });
|
|
4209
|
+
* }
|
|
4210
|
+
* }
|
|
4211
|
+
* ]
|
|
4212
|
+
* }
|
|
4213
|
+
* );
|
|
4214
|
+
* ```
|
|
4215
|
+
* @experimental
|
|
4216
|
+
*/
|
|
4217
|
+
export declare function findAll<R extends NodeRole>(scene: SceneNode, query: NodeQuery & {
|
|
4218
|
+
readonly role: R;
|
|
4219
|
+
}): RoleNode<R>[];
|
|
4220
|
+
export declare function findAll(scene: SceneNode, query?: NodeQuery): SceneNode[];
|
|
4221
|
+
/**
|
|
4222
|
+
* Maps a tree bottom-up: children first, then their parent with the mapped
|
|
4223
|
+
* children. Return a node to replace, `null` to drop, or `undefined` to
|
|
4224
|
+
* keep. Subtrees without changes are reused, not copied.
|
|
4225
|
+
*
|
|
4226
|
+
* @param scene The root of the tree to map
|
|
4227
|
+
* @param mapper Called once per node, with the node's mapped children
|
|
4228
|
+
* @returns The mapped tree, or `null` if the mapper dropped the root
|
|
4229
|
+
* @example
|
|
4230
|
+
* ```ts
|
|
4231
|
+
* import {
|
|
4232
|
+
* autoScaleAxis,
|
|
4233
|
+
* axisGrid,
|
|
4234
|
+
* cartesianAxes,
|
|
4235
|
+
* line,
|
|
4236
|
+
* mapNodes,
|
|
4237
|
+
* renderToString,
|
|
4238
|
+
* stepAxis,
|
|
4239
|
+
* toScene
|
|
4240
|
+
* } from 'chartist';
|
|
4241
|
+
*
|
|
4242
|
+
* const labels = ['Mon', 'Tue', 'Wed'];
|
|
4243
|
+
* const scene = toScene(
|
|
4244
|
+
* {
|
|
4245
|
+
* data: { labels, series: [[1, 3, 2]] },
|
|
4246
|
+
* axes: cartesianAxes([
|
|
4247
|
+
* { id: 'x', side: 'bottom', type: stepAxis(), ticks: labels },
|
|
4248
|
+
* { id: 'y', side: 'left', type: autoScaleAxis() }
|
|
4249
|
+
* ]),
|
|
4250
|
+
* layers: [axisGrid(), line()]
|
|
4251
|
+
* },
|
|
4252
|
+
* { width: 600, height: 300 }
|
|
4253
|
+
* );
|
|
4254
|
+
*
|
|
4255
|
+
* // No grid lines, and the points marked for the stylesheet.
|
|
4256
|
+
* const mapped = mapNodes(scene, current => {
|
|
4257
|
+
* if (current.role === 'grid') {
|
|
4258
|
+
* return null;
|
|
4259
|
+
* }
|
|
4260
|
+
* if (current.role === 'point') {
|
|
4261
|
+
* return current.addClass('is-marked');
|
|
4262
|
+
* }
|
|
4263
|
+
* });
|
|
4264
|
+
* const markup = mapped ? renderToString(mapped) : '';
|
|
4265
|
+
* ```
|
|
4266
|
+
* @experimental
|
|
4267
|
+
*/
|
|
4268
|
+
export declare function mapNodes(scene: SceneNode, mapper: (current: SceneNode) => SceneNode | null | undefined | void): SceneNode | null;
|
|
4269
|
+
//#endregion
|
|
4270
|
+
//#region src/render/dom.d.ts
|
|
4271
|
+
/**
|
|
4272
|
+
* What {@link domRenderer} returns from `render()`: the inline SVG it
|
|
4273
|
+
* added to the container.
|
|
4274
|
+
* @experimental
|
|
4275
|
+
*/
|
|
4276
|
+
interface DomRenderOutput extends RenderOutput {
|
|
4277
|
+
/** The chart's `svg` element, in the container. */
|
|
4278
|
+
readonly svg: SVGSVGElement;
|
|
4279
|
+
/** The rendered element of a scene node of this render. */
|
|
4280
|
+
readonly elementOf: (node: SceneNode) => Element | undefined;
|
|
4281
|
+
/** Takes the SVG out of the container again. */
|
|
4282
|
+
readonly remove: () => void;
|
|
4283
|
+
}
|
|
4284
|
+
/**
|
|
4285
|
+
* Creates the renderer `chart()` uses by default: it renders scenes as
|
|
4286
|
+
* inline SVG into the container, replacing an earlier Chartist SVG there
|
|
4287
|
+
* (as 1.x does), and measures text in the container, so its CSS applies.
|
|
4288
|
+
* Wrap it to change what every render puts on the page.
|
|
4289
|
+
*
|
|
4290
|
+
* @example
|
|
4291
|
+
* ```ts
|
|
4292
|
+
* import { chart, domRenderer, pie, type Renderer } from 'chartist';
|
|
4293
|
+
*
|
|
4294
|
+
* const dom = domRenderer();
|
|
4295
|
+
* // The DOM renderer, with a name for screen readers on every render.
|
|
4296
|
+
* const renderer: Renderer = {
|
|
4297
|
+
* ...dom,
|
|
4298
|
+
* render(scene, container) {
|
|
4299
|
+
* const output = dom.render(scene, container);
|
|
4300
|
+
* output.svg.setAttribute('role', 'img');
|
|
4301
|
+
* output.svg.setAttribute('aria-label', 'Monthly budget');
|
|
4302
|
+
* return output;
|
|
4303
|
+
* }
|
|
4304
|
+
* };
|
|
4305
|
+
*
|
|
4306
|
+
* chart('#chart', {
|
|
4307
|
+
* data: { series: [50, 30, 20] },
|
|
4308
|
+
* coordinates: 'polar',
|
|
4309
|
+
* layers: [pie()],
|
|
4310
|
+
* renderer
|
|
4311
|
+
* });
|
|
4312
|
+
* ```
|
|
4313
|
+
* @experimental
|
|
4314
|
+
*/
|
|
4315
|
+
export declare function domRenderer(): Renderer<DomRenderOutput>;
|
|
4316
|
+
//#endregion
|
|
4317
|
+
//#region src/render/string.d.ts
|
|
4318
|
+
/**
|
|
4319
|
+
* Serializes a scene to standalone SVG markup. Needs no DOM, so it works in
|
|
4320
|
+
* Node.js and in server bundles.
|
|
4321
|
+
*
|
|
4322
|
+
* The root gets the SVG and `ct:` namespaces, and attribute values and
|
|
4323
|
+
* text are escaped. The markup has the chart's classes but no styles: load
|
|
4324
|
+
* `chartist/styles.css` where it's shown, or add a `style` element to the
|
|
4325
|
+
* scene.
|
|
4326
|
+
*
|
|
4327
|
+
* @param scene A scene, usually from `toScene()`
|
|
4328
|
+
* @returns The SVG markup, e.g. `<svg xmlns="…" …>…</svg>`
|
|
4329
|
+
* @example
|
|
4330
|
+
* ```ts
|
|
4331
|
+
* import {
|
|
4332
|
+
* autoScaleAxis,
|
|
4333
|
+
* axisGrid,
|
|
4334
|
+
* axisLabels,
|
|
4335
|
+
* cartesianAxes,
|
|
4336
|
+
* line,
|
|
4337
|
+
* renderToString,
|
|
4338
|
+
* stepAxis,
|
|
4339
|
+
* toScene
|
|
4340
|
+
* } from 'chartist';
|
|
4341
|
+
*
|
|
4342
|
+
* export function weekChart(values: number[]): string {
|
|
4343
|
+
* const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
|
|
4344
|
+
* const scene = toScene(
|
|
4345
|
+
* {
|
|
4346
|
+
* data: { labels, series: [values] },
|
|
4347
|
+
* axes: cartesianAxes([
|
|
4348
|
+
* { id: 'x', side: 'bottom', type: stepAxis(), ticks: labels },
|
|
4349
|
+
* { id: 'y', side: 'left', type: autoScaleAxis() }
|
|
4350
|
+
* ]),
|
|
4351
|
+
* layers: [axisGrid(), line(), axisLabels()],
|
|
4352
|
+
* className: 'ct-chart-line'
|
|
4353
|
+
* },
|
|
4354
|
+
* { width: 600, height: 300 }
|
|
4355
|
+
* );
|
|
4356
|
+
* return renderToString(scene);
|
|
4357
|
+
* }
|
|
4358
|
+
* ```
|
|
4359
|
+
* @experimental
|
|
4360
|
+
*/
|
|
4361
|
+
export declare function renderToString(scene: SceneNode): string;
|
|
4362
|
+
//#endregion
|
|
4363
|
+
//#region src/chart/chart.d.ts
|
|
4364
|
+
/**
|
|
4365
|
+
* Creates a chart from data, axes and layers in a container, and renders
|
|
4366
|
+
* it right away. The presets (`lineChart`, `barChart`, `pieChart`) are
|
|
4367
|
+
* built on it; use it for what they don't cover, like bars and a line on
|
|
4368
|
+
* two Y axes.
|
|
4369
|
+
*
|
|
4370
|
+
* The chart fills its container unless the config sets a size, and renders
|
|
4371
|
+
* again when the container resizes, web fonts finish loading or the
|
|
4372
|
+
* matching `responsive` entries change. Listeners in `config.on` and
|
|
4373
|
+
* plugins receive the events of the first render too.
|
|
4374
|
+
*
|
|
4375
|
+
* Without `className`, the SVG gets the chart type class of its layers,
|
|
4376
|
+
* so the stylesheet's chart type rules apply: `ct-chart-bar` if a layer
|
|
4377
|
+
* draws bars, else `ct-chart-pie` or `ct-chart-donut` for a pie layer,
|
|
4378
|
+
* else `ct-chart-line`. A `className` replaces it.
|
|
4379
|
+
*
|
|
4380
|
+
* @example
|
|
4381
|
+
* ```ts
|
|
4382
|
+
* import {
|
|
4383
|
+
* autoScaleAxis,
|
|
4384
|
+
* axisGrid,
|
|
4385
|
+
* axisLabels,
|
|
4386
|
+
* bar,
|
|
4387
|
+
* cartesianAxes,
|
|
4388
|
+
* chart,
|
|
4389
|
+
* line,
|
|
4390
|
+
* stepAxis
|
|
4391
|
+
* } from 'chartist';
|
|
4392
|
+
*
|
|
4393
|
+
* const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
|
|
4394
|
+
*
|
|
4395
|
+
* chart('#chart', {
|
|
4396
|
+
* data: {
|
|
4397
|
+
* labels: months,
|
|
4398
|
+
* series: [
|
|
4399
|
+
* { name: 'rain', data: [64, 58, 70, 82, 104, 120] },
|
|
4400
|
+
* { name: 'temperature', data: [1, 3, 8, 12, 16, 20] }
|
|
4401
|
+
* ]
|
|
4402
|
+
* },
|
|
4403
|
+
* axes: cartesianAxes([
|
|
4404
|
+
* { id: 'month', side: 'bottom', type: stepAxis(), ticks: months },
|
|
4405
|
+
* { id: 'mm', side: 'left', type: autoScaleAxis(), low: 0 },
|
|
4406
|
+
* { id: 'celsius', side: 'right', type: autoScaleAxis(), low: 0 }
|
|
4407
|
+
* ]),
|
|
4408
|
+
* layers: [
|
|
4409
|
+
* axisGrid({ axes: ['month', 'mm'] }),
|
|
4410
|
+
* bar({ series: ['rain'], x: 'month', y: 'mm' }),
|
|
4411
|
+
* line({ series: ['temperature'], y: 'celsius', align: 'center' }),
|
|
4412
|
+
* axisLabels()
|
|
4413
|
+
* ]
|
|
4414
|
+
* });
|
|
4415
|
+
* ```
|
|
4416
|
+
* @param target The container element, or a CSS selector for it.
|
|
4417
|
+
* @param config The data, axes, layers and the rest of the chart.
|
|
4418
|
+
* @returns A handle to update the chart, listen to it or remove it.
|
|
4419
|
+
* @experimental
|
|
4420
|
+
*/
|
|
4421
|
+
export declare function chart(target: string | Element, config: ChartConfig): ChartHandle;
|
|
4422
|
+
//#endregion
|
|
4423
|
+
//#region src/chart/toScene.d.ts
|
|
4424
|
+
/**
|
|
4425
|
+
* The size {@link toScene} lays a chart out at, since there's no container
|
|
4426
|
+
* to measure, and how to measure text there.
|
|
4427
|
+
*/
|
|
4428
|
+
interface SceneSize {
|
|
4429
|
+
/**
|
|
4430
|
+
* The width to lay out at, in px. The root svg gets it as its `width`,
|
|
4431
|
+
* unless the config sets one.
|
|
4432
|
+
*/
|
|
4433
|
+
readonly width: number;
|
|
4434
|
+
/**
|
|
4435
|
+
* The height to lay out at, in px. The root svg gets it as its `height`,
|
|
4436
|
+
* unless the config sets one.
|
|
4437
|
+
*/
|
|
4438
|
+
readonly height: number;
|
|
4439
|
+
/** Text measurement for layout; an estimate by default. */
|
|
4440
|
+
readonly measureText?: MeasureText;
|
|
4441
|
+
/**
|
|
4442
|
+
* Label mode when the config sets none: `svg` by default, since string
|
|
4443
|
+
* output often goes to tools without HTML support.
|
|
4444
|
+
*/
|
|
4445
|
+
readonly labels?: LabelMode;
|
|
4446
|
+
}
|
|
4447
|
+
/**
|
|
4448
|
+
* Builds a chart's scene without rendering it: no DOM, timers or globals.
|
|
4449
|
+
* Runs the phases `resolve` to `scene` with the config's plugins and
|
|
4450
|
+
* listeners.
|
|
4451
|
+
*
|
|
4452
|
+
* It takes the same config as `chart()`, and the SVG gets the same chart
|
|
4453
|
+
* type class without `className`. Listeners of `render` and `mount`
|
|
4454
|
+
* never run, responsive overrides and the `renderer` are ignored, and
|
|
4455
|
+
* calling `update()`, `detach()` or `destroy()` on the handle a plugin gets
|
|
4456
|
+
* throws. Turn the scene into markup with {@link renderToString}.
|
|
4457
|
+
*
|
|
4458
|
+
* @param config The chart: data, axes, layers, plugins and listeners
|
|
4459
|
+
* @param size The size to lay out at, in px, and how to measure text
|
|
4460
|
+
* @returns The scene, its root the `svg`
|
|
4461
|
+
* @example
|
|
4462
|
+
* ```ts
|
|
4463
|
+
* import {
|
|
4464
|
+
* autoScaleAxis,
|
|
4465
|
+
* axisGrid,
|
|
4466
|
+
* axisLabels,
|
|
4467
|
+
* cartesianAxes,
|
|
4468
|
+
* line,
|
|
4469
|
+
* node,
|
|
4470
|
+
* renderToString,
|
|
4471
|
+
* stepAxis,
|
|
4472
|
+
* toScene
|
|
4473
|
+
* } from 'chartist';
|
|
4474
|
+
*
|
|
4475
|
+
* const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
|
|
4476
|
+
* const scene = toScene(
|
|
4477
|
+
* {
|
|
4478
|
+
* data: { labels, series: [[12, 9, 7, 8, 5]] },
|
|
4479
|
+
* axes: cartesianAxes([
|
|
4480
|
+
* { id: 'x', side: 'bottom', type: stepAxis(), ticks: labels },
|
|
4481
|
+
* { id: 'y', side: 'left', type: autoScaleAxis() }
|
|
4482
|
+
* ]),
|
|
4483
|
+
* layers: [axisGrid(), line(), axisLabels()],
|
|
4484
|
+
* viewBox: { width: 600, height: 300 },
|
|
4485
|
+
* on: {
|
|
4486
|
+
* // Styles inside the SVG, for tools that read it on its own.
|
|
4487
|
+
* scene: ({ scene }) => ({
|
|
4488
|
+
* scene: scene.append(
|
|
4489
|
+
* node('style').text('.ct-line { fill: none; stroke: #d70206; }'),
|
|
4490
|
+
* true
|
|
4491
|
+
* )
|
|
4492
|
+
* })
|
|
4493
|
+
* }
|
|
4494
|
+
* },
|
|
4495
|
+
* { width: 600, height: 300 }
|
|
4496
|
+
* );
|
|
4497
|
+
*
|
|
4498
|
+
* export const markup = renderToString(scene);
|
|
4499
|
+
* ```
|
|
4500
|
+
* @experimental
|
|
4501
|
+
*/
|
|
4502
|
+
export declare function toScene(config: ChartConfig, size: SceneSize): SceneNode;
|
|
4503
|
+
//#endregion
|
|
4504
|
+
//#region src/scales/factories.d.ts
|
|
4505
|
+
/**
|
|
4506
|
+
* Creates a step axis: evenly spaced ticks, one per step, that place
|
|
4507
|
+
* values by their index rather than by their value. It's the label axis of
|
|
4508
|
+
* line and bar charts. Same rules as 1.x `StepAxis`.
|
|
4509
|
+
*
|
|
4510
|
+
* Its ticks are the data's `labels`, or the axis's `ticks` when you give
|
|
4511
|
+
* them. With `stretch`, the last tick sits at the axis end.
|
|
4512
|
+
*
|
|
4513
|
+
* @example
|
|
4514
|
+
* ```ts
|
|
4515
|
+
* import {
|
|
4516
|
+
* autoScaleAxis,
|
|
4517
|
+
* axisGrid,
|
|
4518
|
+
* axisLabels,
|
|
4519
|
+
* cartesianAxes,
|
|
4520
|
+
* chart,
|
|
4521
|
+
* line,
|
|
4522
|
+
* stepAxis
|
|
4523
|
+
* } from 'chartist';
|
|
4524
|
+
*
|
|
4525
|
+
* const months = ['Jan', 'Feb', 'Mar', 'Apr'];
|
|
4526
|
+
*
|
|
4527
|
+
* chart('#chart', {
|
|
4528
|
+
* data: { labels: months, series: [[4, 6, 5, 9]] },
|
|
4529
|
+
* axes: cartesianAxes([
|
|
4530
|
+
* // The months as ticks; stretch: the first and last at the edges.
|
|
4531
|
+
* { id: 'month', side: 'bottom', type: stepAxis(), stretch: true },
|
|
4532
|
+
* { id: 'value', side: 'left', type: autoScaleAxis() }
|
|
4533
|
+
* ]),
|
|
4534
|
+
* layers: [axisGrid(), line(), axisLabels()]
|
|
4535
|
+
* });
|
|
4536
|
+
* ```
|
|
4537
|
+
* @experimental
|
|
4538
|
+
*/
|
|
4539
|
+
export declare function stepAxis(): AxisFactory;
|
|
4540
|
+
/**
|
|
4541
|
+
* Creates an auto-scaled axis: a scale fitted to the data, with round
|
|
4542
|
+
* ticks at least `scaleMinSpace` px apart. Set `low`, `high` or
|
|
4543
|
+
* `referenceValue` to widen it, and `onlyInteger` for whole-number steps.
|
|
4544
|
+
* Same rules as 1.x `AutoScaleAxis`.
|
|
4545
|
+
*
|
|
4546
|
+
* It's the value axis of line and bar charts. As an X axis, it places
|
|
4547
|
+
* `{ x, y }` values at their real distances.
|
|
4548
|
+
*
|
|
4549
|
+
* @example
|
|
4550
|
+
* ```ts
|
|
4551
|
+
* import {
|
|
4552
|
+
* autoScaleAxis,
|
|
4553
|
+
* axisGrid,
|
|
4554
|
+
* axisLabels,
|
|
4555
|
+
* cartesianAxes,
|
|
4556
|
+
* chart,
|
|
4557
|
+
* line
|
|
4558
|
+
* } from 'chartist';
|
|
4559
|
+
*
|
|
4560
|
+
* chart('#chart', {
|
|
4561
|
+
* data: {
|
|
4562
|
+
* series: [
|
|
4563
|
+
* [
|
|
4564
|
+
* { x: 1, y: 2 },
|
|
4565
|
+
* { x: 2.5, y: 5 },
|
|
4566
|
+
* { x: 7, y: 3 },
|
|
4567
|
+
* { x: 10, y: 8 }
|
|
4568
|
+
* ]
|
|
4569
|
+
* ]
|
|
4570
|
+
* },
|
|
4571
|
+
* axes: cartesianAxes([
|
|
4572
|
+
* { id: 'x', side: 'bottom', type: autoScaleAxis(), onlyInteger: true },
|
|
4573
|
+
* { id: 'y', side: 'left', type: autoScaleAxis(), low: 0 }
|
|
4574
|
+
* ]),
|
|
4575
|
+
* layers: [axisGrid(), line(), axisLabels()]
|
|
4576
|
+
* });
|
|
4577
|
+
* ```
|
|
4578
|
+
* @experimental
|
|
4579
|
+
*/
|
|
4580
|
+
export declare function autoScaleAxis(): AxisFactory;
|
|
4581
|
+
/**
|
|
4582
|
+
* Creates a fixed-scale axis: a scale from `low` to `high` (by default the
|
|
4583
|
+
* smallest and largest value) with the `ticks` you give. Without `ticks`,
|
|
4584
|
+
* `divisor` splits the range into equal parts with a tick at each end, so
|
|
4585
|
+
* `divisor: 4` makes 5 ticks from `low` to `high` (1.x left out the one
|
|
4586
|
+
* at `high`).
|
|
4587
|
+
*
|
|
4588
|
+
* @example
|
|
4589
|
+
* ```ts
|
|
4590
|
+
* import {
|
|
4591
|
+
* axisGrid,
|
|
4592
|
+
* axisLabels,
|
|
4593
|
+
* cartesianAxes,
|
|
4594
|
+
* chart,
|
|
4595
|
+
* fixedScaleAxis,
|
|
4596
|
+
* line,
|
|
4597
|
+
* stepAxis
|
|
4598
|
+
* } from 'chartist';
|
|
4599
|
+
*
|
|
4600
|
+
* const teams = ['Red', 'Blue', 'Green'];
|
|
4601
|
+
*
|
|
4602
|
+
* chart('#chart', {
|
|
4603
|
+
* data: { labels: teams, series: [[64, 81, 47]] },
|
|
4604
|
+
* axes: cartesianAxes([
|
|
4605
|
+
* { id: 'team', side: 'bottom', type: stepAxis(), ticks: teams },
|
|
4606
|
+
* // A percentage scale with three grid lines.
|
|
4607
|
+
* {
|
|
4608
|
+
* id: 'percent',
|
|
4609
|
+
* side: 'left',
|
|
4610
|
+
* type: fixedScaleAxis(),
|
|
4611
|
+
* ticks: [0, 50, 100],
|
|
4612
|
+
* low: 0,
|
|
4613
|
+
* high: 100
|
|
4614
|
+
* }
|
|
4615
|
+
* ]),
|
|
4616
|
+
* layers: [axisGrid(), line({ showLine: false }), axisLabels()]
|
|
4617
|
+
* });
|
|
4618
|
+
* ```
|
|
4619
|
+
* @experimental
|
|
4620
|
+
*/
|
|
4621
|
+
export declare function fixedScaleAxis(): AxisFactory;
|
|
4622
|
+
//#endregion
|
|
4623
|
+
//#region src/scales/cartesian.d.ts
|
|
4624
|
+
/**
|
|
4625
|
+
* Creates the axes for the `axes` option of {@link chart}: a list of axes,
|
|
4626
|
+
* each with an `id`, a `side` and a `type`, several per side if needed.
|
|
4627
|
+
* Axis types are v2 factories ({@link stepAxis}, {@link autoScaleAxis},
|
|
4628
|
+
* {@link fixedScaleAxis}) or 1.x axis classes; the other fields are the
|
|
4629
|
+
* 1.x axis options (`offset`, `low`, `high`, `ticks`, …).
|
|
4630
|
+
*
|
|
4631
|
+
* Layers pick their axes by id, and each axis scales to the series of the
|
|
4632
|
+
* layers drawn on it. Offsets default to 30 px for X axes and 40 px for Y
|
|
4633
|
+
* axes, and axes on the same side stack outward in list order. Unknown or
|
|
4634
|
+
* duplicate ids throw.
|
|
4635
|
+
*
|
|
4636
|
+
* The 1.x-style `{ x, y }` form also works, with the same defaults: X at
|
|
4637
|
+
* the bottom unless its `position` is `'start'`, Y on the left unless
|
|
4638
|
+
* it's `'end'`.
|
|
4639
|
+
*
|
|
4640
|
+
* @example
|
|
4641
|
+
* ```ts
|
|
4642
|
+
* import {
|
|
4643
|
+
* autoScaleAxis,
|
|
4644
|
+
* axisGrid,
|
|
4645
|
+
* axisLabels,
|
|
4646
|
+
* bar,
|
|
4647
|
+
* cartesianAxes,
|
|
4648
|
+
* chart,
|
|
4649
|
+
* line,
|
|
4650
|
+
* stepAxis
|
|
4651
|
+
* } from 'chartist';
|
|
4652
|
+
*
|
|
4653
|
+
* const months = ['Jan', 'Feb', 'Mar', 'Apr'];
|
|
4654
|
+
*
|
|
4655
|
+
* chart('#chart', {
|
|
4656
|
+
* data: {
|
|
4657
|
+
* labels: months,
|
|
4658
|
+
* series: [
|
|
4659
|
+
* { name: 'eur', data: [120, 180, 150, 210] },
|
|
4660
|
+
* { name: 'usd', data: [130, 195, 160, 230] }
|
|
4661
|
+
* ]
|
|
4662
|
+
* },
|
|
4663
|
+
* axes: cartesianAxes([
|
|
4664
|
+
* { id: 'month', side: 'bottom', type: stepAxis(), ticks: months },
|
|
4665
|
+
* // Both on the left: 'eur' next to the chart, 'usd' outside it.
|
|
4666
|
+
* { id: 'eur', side: 'left', type: autoScaleAxis(), low: 0 },
|
|
4667
|
+
* { id: 'usd', side: 'left', type: autoScaleAxis(), low: 0, offset: 50 }
|
|
4668
|
+
* ]),
|
|
4669
|
+
* layers: [
|
|
4670
|
+
* axisGrid({ axes: ['month', 'eur'] }),
|
|
4671
|
+
* bar({ series: ['eur'], y: 'eur' }),
|
|
4672
|
+
* line({ series: ['usd'], y: 'usd', align: 'center' }),
|
|
4673
|
+
* axisLabels()
|
|
4674
|
+
* ],
|
|
4675
|
+
* className: 'ct-chart-bar'
|
|
4676
|
+
* });
|
|
4677
|
+
* ```
|
|
4678
|
+
* @param input The axes: a list of {@link AxisDefinition}s, or the 1.x
|
|
4679
|
+
* `{ x, y }` form.
|
|
4680
|
+
* @param extra `reverseData` and `normalize`, for the list form (the
|
|
4681
|
+
* `{ x, y }` form takes them inline).
|
|
4682
|
+
* @experimental
|
|
4683
|
+
*/
|
|
4684
|
+
export declare function cartesianAxes(input: AxesConfig | readonly AxisDefinition[], extra?: Pick<AxesConfig, 'reverseData' | 'normalize'>): CartesianAxes;
|
|
4685
|
+
//#endregion
|
|
4686
|
+
//#region src/layers/bar.d.ts
|
|
4687
|
+
/**
|
|
4688
|
+
* The options of the {@link bar} layer. Without them, it draws the bars of
|
|
4689
|
+
* each label side by side, 15 px apart, on the first X and Y axis.
|
|
4690
|
+
* @experimental
|
|
4691
|
+
*/
|
|
4692
|
+
interface BarLayerOptions {
|
|
4693
|
+
/** Series to draw, by index or name; default: all series. */
|
|
4694
|
+
readonly series?: readonly (number | string)[];
|
|
4695
|
+
/** The id of the X axis to draw on; default: the first X axis. */
|
|
4696
|
+
readonly x?: string;
|
|
4697
|
+
/** The id of the Y axis to draw on; default: the first Y axis. */
|
|
4698
|
+
readonly y?: string;
|
|
4699
|
+
/** Values on the X axis, labels on the Y axis. */
|
|
4700
|
+
readonly horizontalBars?: boolean;
|
|
4701
|
+
/**
|
|
4702
|
+
* Stacks the bars of a label on each other; `stackMode` says how. The
|
|
4703
|
+
* value axis grows to fit the stacks (see {@link Layer.extent}).
|
|
4704
|
+
*/
|
|
4705
|
+
readonly stackBars?: boolean;
|
|
4706
|
+
/**
|
|
4707
|
+
* How stacked bars stack: `accumulate` (default) adds each value to the
|
|
4708
|
+
* ones before, `accumulate-relative` stacks positive values up and
|
|
4709
|
+
* negative values down from zero, and `overlap` (or `true`) draws every
|
|
4710
|
+
* bar from zero, on top of each other.
|
|
4711
|
+
*/
|
|
4712
|
+
readonly stackMode?: 'accumulate' | 'accumulate-relative' | 'overlap' | boolean;
|
|
4713
|
+
/** Distance between the bars of different series, in px. */
|
|
4714
|
+
readonly seriesBarDistance?: number;
|
|
4715
|
+
/** One series per value of a flat series (1.x `distributeSeries`). */
|
|
4716
|
+
readonly distributeSeries?: boolean;
|
|
4717
|
+
/**
|
|
4718
|
+
* Draws the series in reverse order (1.x `reverseData`). Can't be
|
|
4719
|
+
* combined with `series`.
|
|
4720
|
+
*/
|
|
4721
|
+
readonly reverseData?: boolean;
|
|
4722
|
+
/**
|
|
4723
|
+
* Replaces the classes of what the layer draws: `series` (`ct-series`)
|
|
4724
|
+
* and `bar` (`ct-bar`).
|
|
4725
|
+
*/
|
|
4726
|
+
readonly classNames?: {
|
|
4727
|
+
readonly series?: string;
|
|
4728
|
+
readonly bar?: string;
|
|
4729
|
+
};
|
|
4730
|
+
}
|
|
4731
|
+
/**
|
|
4732
|
+
* Creates a layer that draws series as bars, in the markup of the 1.x bar
|
|
4733
|
+
* chart (`g.ct-series` with a `line.ct-bar` per value). The label axis is
|
|
4734
|
+
* X (Y with `horizontalBars`), the value axis the other one; both come
|
|
4735
|
+
* from {@link cartesianAxes}.
|
|
4736
|
+
*
|
|
4737
|
+
* Bars grow from zero on the value axis, so keep zero on it: `low: 0`, or
|
|
4738
|
+
* `referenceValue: 0`. On a step axis they sit in the middle of each step.
|
|
4739
|
+
*
|
|
4740
|
+
* @example
|
|
4741
|
+
* ```ts
|
|
4742
|
+
* import {
|
|
4743
|
+
* autoScaleAxis,
|
|
4744
|
+
* axisGrid,
|
|
4745
|
+
* axisLabels,
|
|
4746
|
+
* bar,
|
|
4747
|
+
* cartesianAxes,
|
|
4748
|
+
* chart,
|
|
4749
|
+
* stepAxis
|
|
4750
|
+
* } from 'chartist';
|
|
4751
|
+
*
|
|
4752
|
+
* const quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
|
|
4753
|
+
*
|
|
4754
|
+
* chart('#chart', {
|
|
4755
|
+
* data: {
|
|
4756
|
+
* labels: quarters,
|
|
4757
|
+
* series: [
|
|
4758
|
+
* [800, 1200, 1400, 1300],
|
|
4759
|
+
* [200, 400, 500, 300]
|
|
4760
|
+
* ]
|
|
4761
|
+
* },
|
|
4762
|
+
* axes: cartesianAxes([
|
|
4763
|
+
* { id: 'quarter', side: 'bottom', type: stepAxis(), ticks: quarters },
|
|
4764
|
+
* { id: 'sales', side: 'left', type: autoScaleAxis(), low: 0 }
|
|
4765
|
+
* ]),
|
|
4766
|
+
* layers: [axisGrid(), bar({ seriesBarDistance: 12 }), axisLabels()],
|
|
4767
|
+
* className: 'ct-chart-bar'
|
|
4768
|
+
* });
|
|
4769
|
+
* ```
|
|
4770
|
+
* @experimental
|
|
4771
|
+
*/
|
|
4772
|
+
export declare function bar(options?: BarLayerOptions): Layer;
|
|
4773
|
+
//#endregion
|
|
4774
|
+
//#region src/layers/axes.d.ts
|
|
4775
|
+
/**
|
|
4776
|
+
* The classes {@link axisGrid} and {@link axisLabels} give what they draw.
|
|
4777
|
+
* The defaults are the 1.x classes, so 1.x CSS applies.
|
|
4778
|
+
*/
|
|
4779
|
+
interface AxisLayerClassNames extends AxisClassNames {
|
|
4780
|
+
/** The group of all grid lines (`ct-grids`). */
|
|
4781
|
+
readonly gridGroup: string;
|
|
4782
|
+
/** The group of all labels (`ct-labels`). */
|
|
4783
|
+
readonly labelGroup: string;
|
|
4784
|
+
/** The rect behind the grid, with `background: true` (`ct-grid-background`). */
|
|
4785
|
+
readonly gridBackground: string;
|
|
4786
|
+
}
|
|
4787
|
+
/**
|
|
4788
|
+
* The options of {@link axisGrid} and {@link axisLabels}.
|
|
4789
|
+
* @experimental
|
|
4790
|
+
*/
|
|
4791
|
+
interface AxisLayerOptions {
|
|
4792
|
+
/**
|
|
4793
|
+
* Axis ids to draw; default: all axes, in declaration order. An unknown
|
|
4794
|
+
* id throws.
|
|
4795
|
+
*/
|
|
4796
|
+
readonly axes?: readonly string[];
|
|
4797
|
+
/** Replaces some of the classes; the others keep their 1.x names. */
|
|
4798
|
+
readonly classNames?: Partial<AxisLayerClassNames>;
|
|
4799
|
+
}
|
|
4800
|
+
/**
|
|
4801
|
+
* The options of {@link axisLabels}: those of every axis layer, plus how
|
|
4802
|
+
* the labels are drawn.
|
|
4803
|
+
* @experimental
|
|
4804
|
+
*/
|
|
4805
|
+
interface AxisLabelsOptions extends AxisLayerOptions {
|
|
4806
|
+
/** HTML (`foreignObject`) or SVG `text`; default: the chart's mode. */
|
|
4807
|
+
readonly labels?: LabelMode;
|
|
4808
|
+
/**
|
|
4809
|
+
* Aligns SVG text labels in their box, on every axis of the layer;
|
|
4810
|
+
* default: as the 1.x CSS aligns HTML labels. HTML labels ignore it
|
|
4811
|
+
* (align them with CSS).
|
|
4812
|
+
*/
|
|
4813
|
+
readonly align?: Partial<LabelAlign>;
|
|
4814
|
+
}
|
|
4815
|
+
/**
|
|
4816
|
+
* Creates a layer that draws the grid lines of the named axes (default:
|
|
4817
|
+
* all) in `g.ct-grids`, one `line.ct-grid` per tick. List it first, so
|
|
4818
|
+
* the series draw over it.
|
|
4819
|
+
*
|
|
4820
|
+
* @example
|
|
4821
|
+
* ```ts
|
|
4822
|
+
* import {
|
|
4823
|
+
* autoScaleAxis,
|
|
4824
|
+
* axisGrid,
|
|
4825
|
+
* axisLabels,
|
|
4826
|
+
* cartesianAxes,
|
|
4827
|
+
* chart,
|
|
4828
|
+
* line,
|
|
4829
|
+
* stepAxis
|
|
4830
|
+
* } from 'chartist';
|
|
4831
|
+
*
|
|
4832
|
+
* const hours = ['6am', '9am', '12pm', '3pm', '6pm'];
|
|
4833
|
+
*
|
|
4834
|
+
* chart('#chart', {
|
|
4835
|
+
* data: { labels: hours, series: [[12, 17, 23, 21, 15]] },
|
|
4836
|
+
* axes: cartesianAxes([
|
|
4837
|
+
* { id: 'time', side: 'bottom', type: stepAxis(), ticks: hours },
|
|
4838
|
+
* { id: 'celsius', side: 'left', type: autoScaleAxis() }
|
|
4839
|
+
* ]),
|
|
4840
|
+
* // Horizontal lines only, on a background rect.
|
|
4841
|
+
* layers: [
|
|
4842
|
+
* axisGrid({ axes: ['celsius'], background: true }),
|
|
4843
|
+
* line(),
|
|
4844
|
+
* axisLabels()
|
|
4845
|
+
* ]
|
|
4846
|
+
* });
|
|
4847
|
+
* ```
|
|
4848
|
+
* @param options The axes to draw and their classes; `background` adds a
|
|
4849
|
+
* `rect.ct-grid-background` over the chart area, behind the lines.
|
|
4850
|
+
* @experimental
|
|
4851
|
+
*/
|
|
4852
|
+
export declare function axisGrid(options?: AxisLayerOptions & {
|
|
4853
|
+
readonly background?: boolean;
|
|
4854
|
+
}): Layer;
|
|
4855
|
+
/**
|
|
4856
|
+
* Creates a layer that draws the labels of the named axes (default: all)
|
|
4857
|
+
* in `g.ct-labels`, each on its axis's side. Axes on the same side stack
|
|
4858
|
+
* outward, each in its own `offset`. List it last, so the labels draw
|
|
4859
|
+
* over the series.
|
|
4860
|
+
*
|
|
4861
|
+
* Labels are HTML in a `foreignObject` (as in 1.x) or SVG `text`: the
|
|
4862
|
+
* chart's `labels` option decides, unless the layer sets its own.
|
|
4863
|
+
*
|
|
4864
|
+
* @example
|
|
4865
|
+
* ```ts
|
|
4866
|
+
* import {
|
|
4867
|
+
* autoScaleAxis,
|
|
4868
|
+
* axisGrid,
|
|
4869
|
+
* axisLabels,
|
|
4870
|
+
* cartesianAxes,
|
|
4871
|
+
* chart,
|
|
4872
|
+
* line,
|
|
4873
|
+
* stepAxis
|
|
4874
|
+
* } from 'chartist';
|
|
4875
|
+
*
|
|
4876
|
+
* const weeks = ['W1', 'W2', 'W3', 'W4'];
|
|
4877
|
+
*
|
|
4878
|
+
* chart('#chart', {
|
|
4879
|
+
* data: { labels: weeks, series: [[3, 5, 4, 8]] },
|
|
4880
|
+
* axes: cartesianAxes([
|
|
4881
|
+
* { id: 'week', side: 'bottom', type: stepAxis(), ticks: weeks },
|
|
4882
|
+
* { id: 'km', side: 'left', type: autoScaleAxis(), low: 0 }
|
|
4883
|
+
* ]),
|
|
4884
|
+
* layers: [
|
|
4885
|
+
* axisGrid(),
|
|
4886
|
+
* line(),
|
|
4887
|
+
* // SVG text instead of HTML, e.g. to export the SVG.
|
|
4888
|
+
* axisLabels({ labels: 'svg' })
|
|
4889
|
+
* ]
|
|
4890
|
+
* });
|
|
4891
|
+
* ```
|
|
4892
|
+
* @experimental
|
|
4893
|
+
*/
|
|
4894
|
+
export declare function axisLabels(options?: AxisLabelsOptions): Layer;
|
|
4895
|
+
//#endregion
|
|
4896
|
+
export { type AllPhasesListener, type Area, type AttrValue, type AxesConfig, type AxisContext, type AxisDefinition, type AxisDimension, type AxisExtent, type AxisFactory, type AxisLabelContext, type AxisLabelsOptions, type AxisLayerClassNames, type AxisLayerOptions, type AxisSetup, type AxisSide, type BarChartPresetOptions, type BarContext, type BarLayerOptions, type BarPresetState, type CartesianAxes, type ChartAxes, type ChartConfig, type ChartData, type ChartEvents, type ChartHandle, type ChartOverrides, type ChartPlugin, type ContainerCondition, type Coordinates, type CustomEventName, type DomRenderOutput, type ExtentContext, type GridContext, index_d_exports as Interpolation, type LabelAlign, type LabelMode, type Layer, type LayerContext, type Layout, type LegacyAxisClass, type LineAttrs, type LineChartPresetOptions, type LineLayerOptions, type LinePresetState, type LineSeriesOptions, type MeasureText, type MeasureTextOptions, type NoSeries, type NodeContext, type NodeMeta, type NodeQuery, type NodeRole, type NodeRoles, type NormalizedChartData, type PathAttrs, type PathContext, type PhaseEvents, type PhaseListener, type PhaseListeners, type PhaseName, type PhaseResult, type PieChartPresetOptions, type PieLabelContext, type PieLayerOptions, type PiePresetState, type PlacedScaleAxis, type PlainNode, type PluginEntry, type PluginWithOptions, type Point, type PointContext, type PreparedData, type PreparedSeries, type PresetAxisOptions, type PresetHandle, type PresetResponsiveOptions, type PresetState, type RectAttrs, type RenderOutput, type Renderer, type ResolvedConfig, type ResponsiveCondition, type ResponsiveEntry, type ResponsiveSet, type ResponsiveWatcher, type RoleMeta, type RoleNode, type ScaleAxis, type SceneNode, type SceneNodeFields, type SceneNodeMethods, type SceneSize, type SeriesAttrs, type SeriesContext, type SeriesGroupContext, type SliceContext, type TextMetrics, type ValueContext };
|