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.
Files changed (138) hide show
  1. package/README.md +45 -101
  2. package/dist/_settings.scss +1 -89
  3. package/dist/chartist.min.css +2 -0
  4. package/dist/chartist.min.js +2 -0
  5. package/dist/compat.cjs +588 -0
  6. package/dist/compat.cjs.map +1 -0
  7. package/dist/compat.d.cts +119 -0
  8. package/dist/compat.d.ts +118 -0
  9. package/dist/compat.js +567 -0
  10. package/dist/compat.js.map +1 -0
  11. package/dist/compat.min.js +2 -0
  12. package/dist/compat.min.js.map +1 -0
  13. package/dist/compat.umd.js +2 -0
  14. package/dist/compat.umd.js.map +1 -0
  15. package/dist/index.cjs +5592 -3484
  16. package/dist/index.cjs.map +1 -1
  17. package/dist/index.css +749 -2
  18. package/dist/index.css.map +1 -1
  19. package/dist/index.d.cts +4897 -0
  20. package/dist/index.d.ts +4896 -8
  21. package/dist/index.js +5562 -3479
  22. package/dist/index.js.map +1 -1
  23. package/dist/index.min.css +2 -0
  24. package/dist/index.min.css.map +1 -0
  25. package/dist/index.min.js +2 -0
  26. package/dist/index.min.js.map +1 -0
  27. package/dist/index.scss +1 -204
  28. package/dist/index.umd.js +2 -2
  29. package/dist/index.umd.js.map +1 -1
  30. package/dist/scss/_settings.scss +125 -0
  31. package/dist/scss/index.scss +254 -0
  32. package/dist/scss/themes/accessible.scss +53 -0
  33. package/dist/themes/accessible.css +34 -0
  34. package/dist/themes/accessible.min.css +1 -0
  35. package/package.json +238 -12
  36. package/dist/axes/AutoScaleAxis.d.ts +0 -12
  37. package/dist/axes/AutoScaleAxis.d.ts.map +0 -1
  38. package/dist/axes/Axis.d.ts +0 -40
  39. package/dist/axes/Axis.d.ts.map +0 -1
  40. package/dist/axes/FixedScaleAxis.d.ts +0 -11
  41. package/dist/axes/FixedScaleAxis.d.ts.map +0 -1
  42. package/dist/axes/StepAxis.d.ts +0 -9
  43. package/dist/axes/StepAxis.d.ts.map +0 -1
  44. package/dist/axes/index.d.ts +0 -6
  45. package/dist/axes/index.d.ts.map +0 -1
  46. package/dist/axes/types.d.ts +0 -5
  47. package/dist/axes/types.d.ts.map +0 -1
  48. package/dist/charts/BarChart/BarChart.d.ts +0 -50
  49. package/dist/charts/BarChart/BarChart.d.ts.map +0 -1
  50. package/dist/charts/BarChart/BarChart.types.d.ts +0 -66
  51. package/dist/charts/BarChart/BarChart.types.d.ts.map +0 -1
  52. package/dist/charts/BarChart/index.d.ts +0 -3
  53. package/dist/charts/BarChart/index.d.ts.map +0 -1
  54. package/dist/charts/BaseChart.d.ts +0 -47
  55. package/dist/charts/BaseChart.d.ts.map +0 -1
  56. package/dist/charts/LineChart/LineChart.d.ts +0 -97
  57. package/dist/charts/LineChart/LineChart.d.ts.map +0 -1
  58. package/dist/charts/LineChart/LineChart.types.d.ts +0 -83
  59. package/dist/charts/LineChart/LineChart.types.d.ts.map +0 -1
  60. package/dist/charts/LineChart/index.d.ts +0 -3
  61. package/dist/charts/LineChart/index.d.ts.map +0 -1
  62. package/dist/charts/PieChart/PieChart.d.ts +0 -101
  63. package/dist/charts/PieChart/PieChart.d.ts.map +0 -1
  64. package/dist/charts/PieChart/PieChart.types.d.ts +0 -95
  65. package/dist/charts/PieChart/PieChart.types.d.ts.map +0 -1
  66. package/dist/charts/PieChart/index.d.ts +0 -3
  67. package/dist/charts/PieChart/index.d.ts.map +0 -1
  68. package/dist/charts/index.d.ts +0 -6
  69. package/dist/charts/index.d.ts.map +0 -1
  70. package/dist/charts/types.d.ts +0 -11
  71. package/dist/charts/types.d.ts.map +0 -1
  72. package/dist/core/constants.d.ts +0 -13
  73. package/dist/core/constants.d.ts.map +0 -1
  74. package/dist/core/creation.d.ts +0 -61
  75. package/dist/core/creation.d.ts.map +0 -1
  76. package/dist/core/data/bounds.d.ts +0 -14
  77. package/dist/core/data/bounds.d.ts.map +0 -1
  78. package/dist/core/data/data.d.ts +0 -23
  79. package/dist/core/data/data.d.ts.map +0 -1
  80. package/dist/core/data/highLow.d.ts +0 -13
  81. package/dist/core/data/highLow.d.ts.map +0 -1
  82. package/dist/core/data/index.d.ts +0 -7
  83. package/dist/core/data/index.d.ts.map +0 -1
  84. package/dist/core/data/normalize.d.ts +0 -11
  85. package/dist/core/data/normalize.d.ts.map +0 -1
  86. package/dist/core/data/segments.d.ts +0 -29
  87. package/dist/core/data/segments.d.ts.map +0 -1
  88. package/dist/core/data/serialize.d.ts +0 -12
  89. package/dist/core/data/serialize.d.ts.map +0 -1
  90. package/dist/core/index.d.ts +0 -8
  91. package/dist/core/index.d.ts.map +0 -1
  92. package/dist/core/lang.d.ts +0 -23
  93. package/dist/core/lang.d.ts.map +0 -1
  94. package/dist/core/math.d.ts +0 -42
  95. package/dist/core/math.d.ts.map +0 -1
  96. package/dist/core/optionsProvider.d.ts +0 -15
  97. package/dist/core/optionsProvider.d.ts.map +0 -1
  98. package/dist/core/types.d.ts +0 -266
  99. package/dist/core/types.d.ts.map +0 -1
  100. package/dist/event/EventEmitter.d.ts +0 -27
  101. package/dist/event/EventEmitter.d.ts.map +0 -1
  102. package/dist/event/index.d.ts +0 -2
  103. package/dist/event/index.d.ts.map +0 -1
  104. package/dist/index.d.ts.map +0 -1
  105. package/dist/interpolation/cardinal.d.ts +0 -30
  106. package/dist/interpolation/cardinal.d.ts.map +0 -1
  107. package/dist/interpolation/index.d.ts +0 -6
  108. package/dist/interpolation/index.d.ts.map +0 -1
  109. package/dist/interpolation/monotoneCubic.d.ts +0 -30
  110. package/dist/interpolation/monotoneCubic.d.ts.map +0 -1
  111. package/dist/interpolation/none.d.ts +0 -22
  112. package/dist/interpolation/none.d.ts.map +0 -1
  113. package/dist/interpolation/simple.d.ts +0 -30
  114. package/dist/interpolation/simple.d.ts.map +0 -1
  115. package/dist/interpolation/step.d.ts +0 -26
  116. package/dist/interpolation/step.d.ts.map +0 -1
  117. package/dist/svg/Svg.d.ts +0 -201
  118. package/dist/svg/Svg.d.ts.map +0 -1
  119. package/dist/svg/SvgList.d.ts +0 -31
  120. package/dist/svg/SvgList.d.ts.map +0 -1
  121. package/dist/svg/SvgPath.d.ts +0 -125
  122. package/dist/svg/SvgPath.d.ts.map +0 -1
  123. package/dist/svg/animation.d.ts +0 -37
  124. package/dist/svg/animation.d.ts.map +0 -1
  125. package/dist/svg/index.d.ts +0 -6
  126. package/dist/svg/index.d.ts.map +0 -1
  127. package/dist/svg/types.d.ts +0 -55
  128. package/dist/svg/types.d.ts.map +0 -1
  129. package/dist/utils/extend.d.ts +0 -10
  130. package/dist/utils/extend.d.ts.map +0 -1
  131. package/dist/utils/functional.d.ts +0 -31
  132. package/dist/utils/functional.d.ts.map +0 -1
  133. package/dist/utils/index.d.ts +0 -5
  134. package/dist/utils/index.d.ts.map +0 -1
  135. package/dist/utils/types.d.ts +0 -7
  136. package/dist/utils/types.d.ts.map +0 -1
  137. package/dist/utils/utils.d.ts +0 -31
  138. package/dist/utils/utils.d.ts.map +0 -1
package/dist/index.d.ts CHANGED
@@ -1,8 +1,4896 @@
1
- export * from './core';
2
- export * from './event';
3
- export * from './charts';
4
- export * from './axes';
5
- export * as Interpolation from './interpolation';
6
- export * from './svg';
7
- export * from './utils';
8
- //# sourceMappingURL=index.d.ts.map
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 };