1 | declare namespace Lib
|
2 | {
|
3 |
|
4 | /** Options for the library. */
|
5 | interface Options {
|
6 |
|
7 | /** The URL for the webassembly binary (cvizzu.wasm). */
|
8 | wasmUrl?: string;
|
9 |
|
10 | }
|
11 |
|
12 | }
|
13 |
|
14 | declare namespace Data
|
15 | {
|
16 |
|
17 | /** Additional info about a data series besides the contained data. */
|
18 | interface SeriesMetaInfo
|
19 | {
|
20 | /** Name of the data series. It will be the unique id of the series to
|
21 | reference it in various parts of the API, mainly in {@link Config.Channel} and
|
22 | {@link Data.Record}. This name will also be used by default for Axis and
|
23 | Legend title. */
|
24 | name: string;
|
25 | /** Type of the data series:
|
26 | - 'dimension' - categorical data containing strings
|
27 | (dates should also be added as strings);
|
28 | - 'measure' - continuous data containing numbers.
|
29 | If not set, the library will attempt to determine the type based on
|
30 | the type of the first value. Number type will result in measure,
|
31 | string type will result in dimension. */
|
32 | type?: 'dimension'|'measure';
|
33 | /** Unit of the data series */
|
34 | unit?: string;
|
35 | }
|
36 |
|
37 | interface AbstractSeriesInfo extends SeriesMetaInfo
|
38 | {
|
39 | /** Count of values in the series. */
|
40 | length: number;
|
41 | }
|
42 |
|
43 | /** Meta data about dimension data series */
|
44 | interface DimensionSeriesInfo extends AbstractSeriesInfo
|
45 | {
|
46 | /** Distinct values in the series */
|
47 | categories: Array<string>;
|
48 | }
|
49 |
|
50 | /** Meta data about measure data series */
|
51 | interface MeasureSeriesInfo extends AbstractSeriesInfo
|
52 | {
|
53 | range: {
|
54 | /** Minimal value in the series */
|
55 | min: number;
|
56 | /** Maximal value in the series */
|
57 | max: number;
|
58 | }
|
59 | }
|
60 |
|
61 | type SeriesInfo = DimensionSeriesInfo|MeasureSeriesInfo;
|
62 |
|
63 | /** Meta data about the data set */
|
64 | interface Metainfo
|
65 | {
|
66 | series: SeriesInfo[];
|
67 | }
|
68 |
|
69 | /** Represents a categorical or data value */
|
70 | type Value = string|number;
|
71 |
|
72 | /** List of data values in a series. */
|
73 | type Values = string[]|number[];
|
74 |
|
75 | /** Defines a data series of the data set, and contains a particular variable's
|
76 | values in the data set and meta info about the variable. */
|
77 | interface Series extends SeriesMetaInfo {
|
78 | /** The array that contains the values of the data series. The value types
|
79 | should match {@link Data.SeriesMetaInfo.type}. If the data series
|
80 | is shorter than the longest data series defined, it will be internally
|
81 | extended with empty values. */
|
82 | values: Values;
|
83 | }
|
84 |
|
85 | /** A record of the data set, containing one value of each data series
|
86 | corresponding to the same index. */
|
87 | interface Record {
|
88 | /** Properties are provided for each data series, providing access to the value within
|
89 | the record referenced by its {@link Data.Series.name|name}. */
|
90 | [seriesName: Series["name"]]: Value;
|
91 | }
|
92 |
|
93 | type FilterCallback = (record: Record) => boolean;
|
94 |
|
95 | interface Filter {
|
96 | /** A filter callback is called on each record of the dataset on chart
|
97 | generation. If the callback returns false, the record will not be shown on the chart.
|
98 | */
|
99 | filter?: FilterCallback | null;
|
100 | }
|
101 |
|
102 | /** Data table specified by series. */
|
103 | interface TableBySeries extends Filter
|
104 | {
|
105 | /** The series that make up the the data set. */
|
106 | series: Series[];
|
107 | }
|
108 |
|
109 | /** Data table specified by records. */
|
110 | interface TableByRecords extends Filter
|
111 | {
|
112 | /** The information about the data series in the records of the data set.
|
113 | Note: not needed if it was previously specified. */
|
114 | series?: SeriesMetaInfo[];
|
115 | /** The array of data records that make up the data set. */
|
116 | records: Value[][];
|
117 | }
|
118 |
|
119 | type CubeRow = Values|CubeRow[];
|
120 |
|
121 | /** Defines a data series of the data cube, and contains a particular variable's
|
122 | values in the data cube and meta info about that variable. */
|
123 | interface CubeData extends SeriesMetaInfo {
|
124 | /** A nested array that contains the values of the data series. Nesting
|
125 | level should match the number of {@link Data.Cube.dimensions}. */
|
126 | values: CubeRow;
|
127 | }
|
128 |
|
129 | /** N dimensional data cude */
|
130 | interface Cube extends Filter
|
131 | {
|
132 | /** The list of the dimensions of the data cube. */
|
133 | dimensions?: Series[];
|
134 | /** The list of measures of the data cube. */
|
135 | measures?: CubeData[];
|
136 | }
|
137 |
|
138 | /** Data set is a collection of related {@link Data.Series|data series}.
|
139 | Each chart works on a single data set. */
|
140 | type Set = TableBySeries|TableByRecords|Cube;
|
141 |
|
142 | type SeriesList = string[]|string;
|
143 |
|
144 | }
|
145 |
|
146 | declare namespace Config
|
147 | {
|
148 |
|
149 | /* Units:
|
150 | - no unit: the same unit as in the data;
|
151 | - %: percentage relative to the min/max of the data;
|
152 | - min,max: offset from min/max of the data;
|
153 | - auto: automatic range based on chart config;
|
154 | */
|
155 | type ChannelExtrema = number|`${number}%`|`${number}min`|`${number}max`|'auto';
|
156 |
|
157 | /** Channel range specifies how to scale the represented data. */
|
158 | interface ChannelRange {
|
159 | min?: ChannelExtrema|null;
|
160 | max?: ChannelExtrema|null;
|
161 | }
|
162 |
|
163 | /** Channels are the main building blocks of the chart. Each channel describes
|
164 | a particular aspect of the markers (vertical & horizontal position, color, etc.)
|
165 | and connects them to the underlying data. A single measure and an ordered list of
|
166 | dimensions can be on each channel. The dimensions will recursively slice the
|
167 | measure on the channel. The channels are represented on the chart as an
|
168 | axis or legend. */
|
169 | interface Channel {
|
170 | /** This title is shown on the axis or legend corresponding to the channel.
|
171 | If 'auto', the title will be the name of the measure attached to
|
172 | that channel. */
|
173 | title?: string|'auto'|null;
|
174 | /** List of {@link Data.Series.name|data series names} on the
|
175 | channel. */
|
176 | set? : Data.SeriesList|null;
|
177 | /** List of {@link Data.Series.name|data series names} to be added to the
|
178 | channel beside the ones already added. */
|
179 | attach?: Data.SeriesList;
|
180 | /** List of {@link Data.Series.name|data series names} to be removed from the
|
181 | channel. */
|
182 | detach?: Data.SeriesList;
|
183 | /** Specifies the range that determines how the represented data scales
|
184 | on the channel. */
|
185 | range?: ChannelRange;
|
186 | /** Only one dimension can be shown on an axis or legend by
|
187 | name. This index specifies which attached series should be used. */
|
188 | labelLevel?: number;
|
189 | /** Enables the axis line on axis channels. */
|
190 | axis?: 'auto'|boolean;
|
191 | /** Enables the axis labels on axis channels. */
|
192 | labels?: 'auto'|boolean;
|
193 | /** Enables the axis ticks on axis channels showing measure data. */
|
194 | ticks?: 'auto'|boolean;
|
195 | /** Enables the interlacing on axis channels showing measure data. */
|
196 | interlacing?: 'auto'|boolean;
|
197 | /** Enables the grid lines on axis channels showing dimension data. */
|
198 | guides?: 'auto'|boolean;
|
199 | /** Enables the guide lines on axis channels showing measure data
|
200 | * for all marker positions. */
|
201 | markerGuides?: 'auto'|boolean;
|
202 | }
|
203 |
|
204 | /** Channel configuration.
|
205 | A data series' name or a list of the data series' names can be used as a
|
206 | short-hand - instead of the {@link Config.Channel|channel object} - to set data series
|
207 | for the channel. Setting a channel to null will remove all data series from it. */
|
208 | interface Channels {
|
209 | /** Parameters for the X-axis, determining the position of the markers on the
|
210 | x-axis - or their angle when using polar coordinates.
|
211 | Note: leaving x and y channels empty will result in a
|
212 | chart "without coordinates" like a Treemap or a Bubble Chart. */
|
213 | x?: Channel|Data.SeriesList|null;
|
214 | /** Parameters for the Y-axis, determining the position of the markers on the
|
215 | y-axis - or their radius when using polar coordinates) . */
|
216 | y?: Channel|Data.SeriesList|null;
|
217 | /** Parameters for the markers' base color. The markers' actual color can
|
218 | also be affected by the lightness channel. */
|
219 | color?: Channel|Data.SeriesList|null;
|
220 | /** Parameters for markers' lightness. */
|
221 | lightness?: Channel|Data.SeriesList|null;
|
222 | /** Parameters for the markers' size. Effective only for circle and line
|
223 | geometry affecting the circle area or the line width respectively.
|
224 | */
|
225 | size?: Channel|Data.SeriesList|null;
|
226 | /** Parameters for the content of the labels that appear on the markers. */
|
227 | label?: Channel|Data.SeriesList|null;
|
228 | /** Splits the markers as all the other channels, but have no
|
229 | effect on the markers' appearance. Thus, it only works with dimensions. */
|
230 | noop?: Channel|Data.SeriesList|null;
|
231 | }
|
232 |
|
233 | /** The config contains all of the parameters needed to render a particular
|
234 | static chart or a state of an animated chart. */
|
235 | interface Chart extends Channels {
|
236 | /** List of the chart's channels' configuration. The chart object also
|
237 | extends the channels object as a configuration shorthand. */
|
238 | channels?: Channels;
|
239 | /** This is the title shown on the top of the chart.
|
240 | If set to null, the title will not be shown and will not take up any
|
241 | space in the chart layout. */
|
242 | title?: string|null;
|
243 | /** Specifies which channel should be shown on the legend.
|
244 | If set to null, the legend will not be shown and will not take up any
|
245 | space in the chart layout.
|
246 | If set to auto, the internal logic will select the most suitable channel
|
247 | for the legend. */
|
248 | legend?: 'color'|'lightness'|'size'|'auto'|null;
|
249 | /** Sets the coordinate system for the chart. Switch to the 'polar'
|
250 | coordinate system to create a chart from the pie/radial chart family. */
|
251 | coordSystem?: 'cartesian'|'polar';
|
252 | /** Rotates the plot area by the specified angle in degree.
|
253 | Note: this is an experimental, not tested feature. */
|
254 | rotate?: number;
|
255 | /** Sets the geometric elements used for the markers to represent the data.*/
|
256 | geometry?: 'rectangle'|'circle'|'area'|'line';
|
257 | /** If both axes have measures on them, this parameter sets the
|
258 | orientation of the chart, meaning to which axis the graphical elements
|
259 | are oriented to. */
|
260 | orientation?: 'horizontal'|'vertical';
|
261 | /** - 'none': markers are sorted in the order as the corresponding data
|
262 | appear in the data set.
|
263 | - 'byValue': markers will be sorted by the corresponding measure (if present)
|
264 | in decreasing order. */
|
265 | sort?: 'none'|'byValue';
|
266 | /** Reverts the order of the markers if set. */
|
267 | reverse?: boolean;
|
268 | /** Sets the alignment of the markers with relation to the x- or the y-axis depending
|
269 | on where the measure is. In case both axes have measures on them, this is determined
|
270 | by the {@link Config.Chart.orientation|orientation} of the chart.
|
271 | */
|
272 | align?: 'none'|'min'|'center'|'max'|'stretch';
|
273 | /** If set to true, markers will be split by the dimension(s) along the axis.
|
274 | This works if you have at least one dimension and a measure on the same axis.In case
|
275 | both axes have measures and dimension(s) on them, this is determined by the
|
276 | {@link Config.Chart.orientation|orientation} of the chart.*/
|
277 | split?: boolean;
|
278 | }
|
279 |
|
280 | }
|
281 |
|
282 | declare namespace Styles
|
283 | {
|
284 |
|
285 | /** Length can be set in pixels or in percentage of the element or the element's
|
286 | font size. Pixel is the default unit. */
|
287 | type Length = `${number}px`|`${number}%`|`${number}em`|number;
|
288 |
|
289 | /** Angle can be set in radians, degrees, gradians and turns.
|
290 | Radians is the default unit. */
|
291 | type Angle = `${number}rad`|`${number}grad`|`${number}deg`|`${number}turn`
|
292 | |number;
|
293 |
|
294 | /** The following CSS color formats are available:
|
295 | rgb(), rgba(), #RRGGBB, #RRGGBBAA, #RGB. */
|
296 | type Color = `#${string}`
|
297 | |`rgb(${number},${number},${number})`
|
298 | |`rgba(${number},${number},${number},${number})`;
|
299 |
|
300 | /** Number scale for human readable big number formats.
|
301 | * There are built in formats:
|
302 | * - SI Symbols: k, M, G, ...
|
303 | * - Short scale with US abbreviations: K, M, B, T
|
304 | * - Short scale with UK abbreviations: k, m, bn, tn
|
305 | * Can be set to custom format with a comma separated list of strings
|
306 | * e.g: 'thousand,million,billion,trillion'
|
307 | */
|
308 | type NumberScale = 'SISymbol'|'shortScaleSymbolUS'|'shortScaleSymbolUK'
|
309 | | `${string},${string}`
|
310 | | `${string},${string},${string}`
|
311 | | `${string},${string},${string},${string}`
|
312 | | `${string},${string},${string},${string},${string}`
|
313 | | string;
|
314 |
|
315 | interface Padding {
|
316 | /** Top padding of the element. */
|
317 | paddingTop?: Length|null;
|
318 | /** Right padding of the element. */
|
319 | paddingRight?: Length|null;
|
320 | /** Bottom padding of the element. */
|
321 | paddingBottom?: Length|null;
|
322 | /** Left padding of the element. */
|
323 | paddingLeft?: Length|null;
|
324 | }
|
325 |
|
326 | interface Font {
|
327 | /** The family of the font. If not set, it inherits the root style font
|
328 | family. */
|
329 | fontFamily?: string|null;
|
330 | /** The style of the font. */
|
331 | fontStyle?: 'normal'|'italic'|'oblique'|null;
|
332 | /** The weight of the font, numbers use the same scale as CSS. */
|
333 | fontWeight?: 'normal'|'bold'|number|null;
|
334 | /** The size of the font. Percentage values are relative to the root style font
|
335 | size */
|
336 | fontSize?: Length|null;
|
337 | }
|
338 |
|
339 | interface Box {
|
340 | /** The background color of the element. */
|
341 | backgroundColor?: Color|null;
|
342 | /** The border color of the element. */
|
343 | borderColor?: Color|null;
|
344 | /** The border width of the element. */
|
345 | borderWidth?: number|null;
|
346 | }
|
347 |
|
348 | interface Text {
|
349 | /** The color of the displayed text. */
|
350 | color?: Color|null;
|
351 | /** The alignment of the displayed text. */
|
352 | textAlign?: 'center'|'left'|'right'|null;
|
353 | /** The background color of the displayed text. */
|
354 | backgroundColor?: Color|null;
|
355 | /** The format of the number. Only applicable for texts showing numerical
|
356 | data such as marker and axis labels. 'grouped' uses thousand separators,
|
357 | 'prefixed' uses scientific notation. */
|
358 | numberFormat?: 'none'|'grouped'|'prefixed'|null;
|
359 | /** The maximum number of digits in fraction part if the text contains a
|
360 | number. */
|
361 | maxFractionDigits?: number|null;
|
362 | /** Number scale used for prefixed number format. */
|
363 | numberScale?: NumberScale;
|
364 | }
|
365 |
|
366 | /** The following CSS like filters can be used to alter the color:
|
367 |
|
368 | - color: overrides the color.
|
369 | - lightness: lightens or darkens the color; 0 means the original color, -1
|
370 | means black, 1 means white.
|
371 | - grayscale: desaturates the color. 0 means the original color, 1 means fully
|
372 | desaturated.
|
373 |
|
374 | none: no change.
|
375 | */
|
376 | type ColorTransform = `color(${Color})`
|
377 | | `lightness(${number})`
|
378 | | `grayscale(${number})`
|
379 | | `opacity(${number})`
|
380 | | 'none';
|
381 |
|
382 | interface OrientedLabel extends Label {
|
383 | /** Orientation of the label relatively to the axis or marker it is attached to. */
|
384 | orientation?: 'normal'|'tangential'|'horizontal'|'vertical'|null;
|
385 | /** Additional rotation of the label. */
|
386 | angle?: Angle|null;
|
387 | }
|
388 |
|
389 | interface MarkerLabel extends OrientedLabel {
|
390 | /** The label position relatively to the marker. */
|
391 | position?: 'center'|'top'|'left'|'bottom'|'right'|null;
|
392 | /** Defines the transformation used for calculating the label color
|
393 | from the marker color. */
|
394 | filter?: ColorTransform|null;
|
395 | /** Sets the order of values on the label if both a measure and a dimension are
|
396 | present. */
|
397 | format?: 'measureFirst'|'dimensionsFirst'|null;
|
398 | }
|
399 |
|
400 | interface Guides {
|
401 | /** The color of the guides.*/
|
402 | color?: Color|null;
|
403 | /** Line width of the guide in pixel. */
|
404 | lineWidth?: number|null;
|
405 | }
|
406 |
|
407 | interface Tooltip extends Font, Box {
|
408 | /** The layout of the tooltip text */
|
409 | layout?: 'singleLine'|'multiLine';
|
410 | /** The foreground color of the tooltip text */
|
411 | color?: Color;
|
412 | /** Color of the drop shadow */
|
413 | shadowColor?: Color;
|
414 | /** Corner radius for the info bubble */
|
415 | borderRadius?: number;
|
416 | /** Drop shadow distance from the info bubble */
|
417 | dropShadow?: number;
|
418 | /** Data point marker radius */
|
419 | radius?: number;
|
420 | /** Base size of the info bubble arrow */
|
421 | arrowSize?: number;
|
422 | /** Distance between the data point and the info bubble */
|
423 | distance?: number;
|
424 | /** Specifies the name of the data series dispalyed
|
425 | at the first position on the tooltip */
|
426 | seriesName?: string|null;
|
427 | }
|
428 |
|
429 | interface Logo extends Padding
|
430 | {
|
431 | /** Width of the Vizzu logo */
|
432 | width?: Length|null;
|
433 | /** Color transformation applied on the colored Vizzu Logo */
|
434 | filter?: ColorTransform|null;
|
435 | }
|
436 |
|
437 | interface DataPoint {
|
438 | /** Color gradient used for the measure on the color channel.*/
|
439 | colorGradient?: ColorGradient|null;
|
440 | /** Color palette used for the dimension on the color channel.*/
|
441 | colorPalette?: ColorPalette|null;
|
442 | /** Lightness value associated with the minimum value of the lightness
|
443 | channel's range. */
|
444 | minLightness?: number|null;
|
445 | /** Lightness value associated with the maximum value of the lightness
|
446 | channel's range. */
|
447 | maxLightness?: number|null;
|
448 | /** Minimum of line width specified as proportion of plot area size.
|
449 | e.g.: 0.01 means 1% of the width of the plot area. */
|
450 | lineMinWidth?: number|null;
|
451 | /** Maximum line width specified as proportion of plot area size.
|
452 | e.g.: 0.01 means 1% of the width of the plot area. */
|
453 | lineMaxWidth?: number|null;
|
454 | /** Minimum circle radius specified as proportion of plot area size.
|
455 | e.g.: 0.01 means 1% of the width of the plot area. */
|
456 | circleMinRadius?: number|null;
|
457 | /** Maximum circle radius specified as proportion of plot area size.
|
458 | e.g.: 0.01 means 1% of the width of the plot area. */
|
459 | circleMaxRadius?: number|null;
|
460 | /** Spacing between bars/columns. The value specifies the size of the
|
461 | spacing as a factor of the marker size.
|
462 | e.g.: 0.1 means 10% of marker height/width depending on the chart's orientation. */
|
463 | rectangleSpacing?: number|null;
|
464 | }
|
465 |
|
466 | interface Marker extends DataPoint {
|
467 | /** Width of the marker border in pixels. */
|
468 | borderWidth?: number|null;
|
469 | /** Opacity of the marker border. */
|
470 | borderOpacity?: number|null;
|
471 | borderOpacityMode?: 'straight'|'premultiplied'|null;
|
472 | /** Opacity of the marker fill color. */
|
473 | fillOpacity?: number|null;
|
474 | /** Style settings for guide lines drawn for the markers. */
|
475 | guides?: Guides|null;
|
476 | /** Style settings for the marker labels. */
|
477 | label?: MarkerLabel|null;
|
478 | }
|
479 |
|
480 | /** Style settings for the values shown on the axis to display the scale
|
481 | being used or the categories along the axis.
|
482 | Note: textAlign has no effect on the Axis label. */
|
483 | interface AxisLabel extends OrientedLabel {
|
484 | /** Label position relatively to the plot. */
|
485 | position?: 'axis'|'max-edge'|'min-edge'|null;
|
486 | /** Label alignment relatively to the position on the plot. */
|
487 | side?: 'positive'|'negative'|null;
|
488 | }
|
489 |
|
490 | /** Style settings of the {@link Config.Channel.title|Axis title} */
|
491 | interface AxisTitle extends Label {
|
492 | /** Title position relatively to the plot. */
|
493 | position?: 'axis'|'min-edge'|'max-edge'|null;
|
494 | /** Title alignment relatively to the position on the plot. */
|
495 | side?: 'positive'|'upon'|'negative'|null;
|
496 | /** Title position on the axis or edge. */
|
497 | vposition?: 'begin'|'middle'|'end'|null;
|
498 | /** Title alignment on the axis or edge. */
|
499 | vside?: 'positive'|'upon'|'negative'|null;
|
500 | /** The orientation of the title. */
|
501 | orientation?: 'horizontal'|'vertical'|null;
|
502 | }
|
503 |
|
504 | interface Ticks {
|
505 | /** Color of the ticks on the axis. */
|
506 | color?: Color|null;
|
507 | /** Line width of the ticks on the axis. */
|
508 | lineWidth?: number|null;
|
509 | /** Length of the ticks on the axis. */
|
510 | length?: Length|null;
|
511 | /** Position of the ticks on the axis relatively to the axis line. */
|
512 | position?: 'outside'|'inside'|'center'|null;
|
513 | }
|
514 | interface Interlacing {
|
515 | /** Color of the interlacing pattern. */
|
516 | color?: Color|null;
|
517 | }
|
518 |
|
519 | interface Axis {
|
520 | /** Color of the axis line. */
|
521 | color?: Color|null;
|
522 | /** Style parameters of the axis title. */
|
523 | title?: AxisTitle|null;
|
524 | /** Style parameters of the axis labels. */
|
525 | label?: AxisLabel|null;
|
526 | ticks?: Ticks|null;
|
527 | guides?: Guides|null;
|
528 | interlacing?: Interlacing|null;
|
529 | }
|
530 |
|
531 | interface Plot extends Padding, Box {
|
532 | /** Style settings for the markers. */
|
533 | marker?: Marker|null;
|
534 | /** Style settings for the x-axis - or the angle when using polar coordinates. */
|
535 | xAxis?: Axis|null;
|
536 | /** Style settings for the y-axis - or the radius when using polar coordinates. */
|
537 | yAxis?: Axis|null;
|
538 | /** Controls drawing outside of the plot area. If hidden, clipping will be
|
539 | set for the boundary of the coordinate system. */
|
540 | overflow?: 'hidden'|'visible';
|
541 | }
|
542 |
|
543 | interface LegendMarker {
|
544 | /** Shape of the legend marker. */
|
545 | type?: 'circle'|'square'|null;
|
546 | /** Size of the legend marker (diameter or side length). */
|
547 | size?: Length|null;
|
548 | }
|
549 |
|
550 | interface Legend extends Padding, Box {
|
551 | /** Width of the legend's boundary box. */
|
552 | width?: Length|null;
|
553 | /** Limit for the width of the boundary box. */
|
554 | maxWidth?: Length|null;
|
555 | /** Style settings for the legend's title. */
|
556 | title?: Label|null;
|
557 | /** Style settings for the labels on the legend. */
|
558 | label?: Label|null;
|
559 | marker?: LegendMarker|null;
|
560 | }
|
561 |
|
562 | /** Color and position pairs separated by spaces,
|
563 | where position is a number between 0 and 1. */
|
564 | type ColorStop = `${Color} ${number}`;
|
565 |
|
566 | /** Color gradient is specified by a comma separated list of ColorStops.
|
567 | This is used when a measure is on the color channel. */
|
568 | type ColorGradient = ColorStop
|
569 | | `${ColorStop},${ColorStop}`
|
570 | | `${ColorStop},${ColorStop},${ColorStop}`
|
571 | | `${ColorStop},${ColorStop},${ColorStop},${ColorStop}`
|
572 | | `${ColorStop},${ColorStop},${ColorStop},${ColorStop},${ColorStop}`
|
573 | | string;
|
574 |
|
575 | /** Color palette is a list of colors separated by spaces.
|
576 | This is used when only dimensions are on the color channel*/
|
577 | type ColorPalette = Color
|
578 | | `${Color} ${Color}`
|
579 | | `${Color} ${Color} ${Color}`
|
580 | | `${Color} ${Color} ${Color} ${Color}`
|
581 | | `${Color} ${Color} ${Color} ${Color} ${Color}`
|
582 | | string;
|
583 |
|
584 | type Label = Padding & Font & Text;
|
585 |
|
586 | interface Chart extends Padding, Box, Font {
|
587 | /** Style settings for the plot area. */
|
588 | plot?: Plot|null;
|
589 | /** Style settings for the legend. */
|
590 | legend?: Legend|null;
|
591 | /** Style settings for the main chart title. */
|
592 | title?: Label|null;
|
593 | /** Style settings for the tooltip. */
|
594 | tooltip?: Tooltip|null;
|
595 | /** Style settings of the Vizzu logo. */
|
596 | logo?: Logo|null;
|
597 | }
|
598 |
|
599 | }
|
600 |
|
601 | declare namespace Anim
|
602 | {
|
603 |
|
604 | /** Duration can be set in seconds or milliseconds.
|
605 | In case no unit is set, it defaults to seconds. */
|
606 | type Duration = `${number}s`|`${number}ms`|number;
|
607 |
|
608 | type Easing = 'none' | 'linear' | 'step-start' | 'step-end' | 'ease'
|
609 | | 'ease-in' | 'ease-out' | 'ease-in-out'
|
610 | | `cubic-bezier(${number},${number},${number},${number})`;
|
611 |
|
612 | /** Animation parameters for an animation group. */
|
613 | interface GroupOptions
|
614 | {
|
615 | /** Sets the easing used for the animation. */
|
616 | easing?: Easing;
|
617 | /** The length of time an animation should take to complete. */
|
618 | duration?: Duration;
|
619 | /** Waiting time interval before the animation starts. */
|
620 | delay?: Duration;
|
621 | }
|
622 |
|
623 | /** Type of transition when the categorical series differ on the source and the target chart.
|
624 | - fade: the source chart fades out while the target chart fades in;
|
625 | - drilldown: markers are splitted to be able to represent the target chart;
|
626 | - aggregate: markers are aggregated then splitted differently to be
|
627 | able to represent the target chart. */
|
628 | type RegroupStrategy = 'fade' | 'drilldown' | 'aggregate';
|
629 |
|
630 | /** If no animation settings are passed to Vizzu, it will use an automatic
|
631 | setting depending on the actual configuration of the chart. This behavior can be
|
632 | overridden via the animation setting parameter.
|
633 |
|
634 | The animation between two states of the chart can require the transitioning
|
635 | of several different chart properties. These properties are grouped into
|
636 | separately configurable animation groups.
|
637 |
|
638 | The parameters can also be set for the animation as a whole. These settings
|
639 | rescale the durations and delays of the animation groups to the
|
640 | specified total delay and duration.
|
641 | */
|
642 | interface Options extends GroupOptions {
|
643 | /** Animation group for style parameters. */
|
644 | style?: GroupOptions;
|
645 | /** Title animation parameters. */
|
646 | title?: GroupOptions;
|
647 | /** Legend animation parameters. */
|
648 | legend?: GroupOptions;
|
649 | /** Animation group for new markers fading in
|
650 | (due to filtering or added/removed data series). */
|
651 | show?: GroupOptions;
|
652 | /** Animation group for markers fading out
|
653 | (due to filtering or added/removed data series). */
|
654 | hide?: GroupOptions;
|
655 | /** Marker color animation group. */
|
656 | color?: GroupOptions;
|
657 | /** Coordinate system transformations animation group. */
|
658 | coordSystem?: GroupOptions;
|
659 | /** Marker geometry morph animation group. */
|
660 | geometry?: GroupOptions;
|
661 | /** Animation group for marker transitions in the direction of the y-axis. */
|
662 | y?: GroupOptions;
|
663 | /** Animation group for marker transitions in the direction of the x-axis. */
|
664 | x?: GroupOptions;
|
665 | /** Animation group for tooltip transitions. */
|
666 | tooltip?: GroupOptions;
|
667 | /** Selects the algorithm for transition in case of data grouped
|
668 | differently on the source and target chart. */
|
669 | regroupStrategy?: RegroupStrategy;
|
670 | }
|
671 |
|
672 | interface ControlOptions
|
673 | {
|
674 | /** Determines if the animation should start automatically after the
|
675 | animate() call. */
|
676 | playState?: 'paused'|'running';
|
677 | /** The starting position of the animation. */
|
678 | position?: number;
|
679 | }
|
680 |
|
681 | /** Stored Animation object. */
|
682 | interface Animation {
|
683 | id: number;
|
684 | }
|
685 |
|
686 | /** Control object for animation. */
|
687 | interface Control {
|
688 | /** Seeks the animation to the position specified by time or progress
|
689 | percentage. Seeking the animation to the end position will not trigger
|
690 | the (@link Vizzu.animate|animation promise) to resolve. */
|
691 | seek(value: `${number}%`|Duration): void;
|
692 | /** Pauses the controlled animation. */
|
693 | pause(): void;
|
694 | /** Plays/resumes playing of the controlled animation. */
|
695 | play(): void;
|
696 | /** Stops the current animation seeking it back to its start position. */
|
697 | stop(): void;
|
698 | /** Changes the direction of the controlled animation. */
|
699 | reverse(): void;
|
700 | /** Cancels the animation, will reject the animation promise. */
|
701 | cancel(): void;
|
702 | /** Returns a reference to the actual animation for further reuse. */
|
703 | store(): Animation;
|
704 | }
|
705 |
|
706 | /** Promise resolves to the Vizzu object when the animation completed. */
|
707 | interface Completing extends Promise<Vizzu> {
|
708 | /** Promise resolves to the animation controller object when the animation
|
709 | * starts. */
|
710 | activated: Promise<Control>;
|
711 | }
|
712 |
|
713 | /** Represents a state in the animation describing the data, the chart, and
|
714 | the style parameters to be changed from the actual state.
|
715 | Passing null as style will reset every style parameter to default. */
|
716 | interface Target {
|
717 | /** Data set. */
|
718 | data?: Data.Set;
|
719 | /** Chart configuration changes. */
|
720 | config?: Config.Chart;
|
721 | /** Style changes. */
|
722 | style?: Styles.Chart|null;
|
723 | }
|
724 |
|
725 | /** All types, which can represent a single animation target chart state. */
|
726 | type LazyTarget = Target|Config.Chart|Snapshot;
|
727 | /** All types, which can represent an animation option. */
|
728 | type LazyOptions = Options|Duration|null;
|
729 |
|
730 | /** Object for describing a single animation target chart state and the
|
731 | options of the animation to this chart state. */
|
732 | interface Keyframe {
|
733 | target: LazyTarget;
|
734 | options?: LazyOptions;
|
735 | }
|
736 |
|
737 | /** Types, that can represent a Keyframe. */
|
738 | type LazyKeyframe = Keyframe|LazyTarget;
|
739 |
|
740 | /** Sequence of keyframe descriptors */
|
741 | type Keyframes = LazyKeyframe[];
|
742 |
|
743 | }
|
744 |
|
745 | declare namespace Event
|
746 | {
|
747 |
|
748 | type Type =
|
749 | 'click'
|
750 | |'mouseon'
|
751 | |'mousemove'
|
752 | |'wheel'
|
753 | |'update'
|
754 | |'background-draw'
|
755 | |'title-draw'
|
756 | |'logo-draw'
|
757 | |'legend-background-draw'
|
758 | |'legend-title-draw'
|
759 | |'legend-label-draw'
|
760 | |'legend-marker-draw'
|
761 | |'legend-bar-draw'
|
762 | |'plot-background-draw'
|
763 | |'plot-marker-draw'
|
764 | |'plot-marker-label-draw'
|
765 | |'plot-marker-guide-draw'
|
766 | |'plot-axis-draw'
|
767 | |'plot-axis-title-draw'
|
768 | |'plot-axis-label-draw'
|
769 | |'plot-axis-tick-draw'
|
770 | |'plot-axis-guide-draw'
|
771 | |'plot-axis-interlacing-draw'
|
772 | |'animation-begin'
|
773 | |'animation-complete';
|
774 |
|
775 | /** The interface of the event object is passed to event handlers by the library.
|
776 | Additional properties will vary by event type. */
|
777 | interface Object {
|
778 | /** If called, the default action of the event will be canceled. */
|
779 | preventDefault: () => void;
|
780 | }
|
781 |
|
782 | }
|
783 |
|
784 | /** Stored Chart object. */
|
785 | interface Snapshot {
|
786 | id: number;
|
787 | }
|
788 |
|
789 | /** List of base and additional features:
|
790 | - logging: enables logging of the library to the console
|
791 | (switched off by default).
|
792 | - rendering: enables rendering of the library to the canvas
|
793 | (enabled by default).
|
794 | - tooltip: tooltips on the chart appearing on markers on mouse over.
|
795 | Since the tooltip uses the animation interface, calling animate() while
|
796 | the tooltip is enabled can cause unwanted behaviour. */
|
797 | type Feature = 'tooltip'|'logging'|'rendering';
|
798 |
|
799 | /** Class representing a single chart in Vizzu. */
|
800 | export default class Vizzu {
|
801 | /** Creates a new chart and connects it to the div or canvas HTML
|
802 | element specified by its ID or DOM object. The new chart is empty by
|
803 | default, but can be set to an initial state in the second optional
|
804 | parameter. */
|
805 | constructor(container: string|HTMLElement, initState?: Anim.Target|Config.Chart);
|
806 | /** Promise representing the initialization will resolve when
|
807 | initialization is finished. Any API call will potentially cause
|
808 | an error before this promise is resolved. */
|
809 | initializing: Promise<Vizzu>;
|
810 | /** Installs the provided event handler to the event specified by name. */
|
811 | on(eventName: Event.Type, handler: (event: Event.Object) => void): void;
|
812 | /** Uninstalls the provided event handler from the event specified by name.
|
813 | */
|
814 | off(eventName: Event.Type, handler: (event: Event.Object) => void): void;
|
815 | /** Initiates the animation either to the new chart state passed as the first
|
816 | argument, or through a sequence of keyframe charts passed as the first
|
817 | argument. If there is a currently running animation, all subsequent
|
818 | calls will schedule the corresponding animation after the end of the
|
819 | previous one.
|
820 |
|
821 | The new chart state or keyframe can be a full state specifier object with
|
822 | data, config and style, or a single chart config object.
|
823 | It accepts also a chart snapshot acquired from a previous state using
|
824 | the store() method of this class or a whole previous animation acquired
|
825 | using the store() method of the Anim.Control object, which can be queried
|
826 | from the promise returned by the animate() method.
|
827 |
|
828 | The optional second parameter specifies the animation control options
|
829 | and also all the other animation options in case of only a single chart
|
830 | state passed as the first argument.
|
831 | This second option can be a scalar value, setting the overall
|
832 | animation duration. Passing explicit null as second parameter will
|
833 | result in no animation.
|
834 |
|
835 | The method returns a promise, which will resolve when the animation is
|
836 | finished. Since there can be multiple animations in the queue, the result
|
837 | promise provides a nested promise member { Anim.Completing.activated|activated},
|
838 | which resolves when the requested animation gets active. */
|
839 | animate(
|
840 | animTarget: Anim.Keyframes|Anim.Animation|Anim.LazyTarget,
|
841 | animOptions?: Anim.ControlOptions|(Anim.ControlOptions&Anim.LazyOptions))
|
842 | : Anim.Completing;
|
843 | /** Returns a reference to the actual chart state for further reuse.
|
844 | This reference includes the chart config, style parameters and the
|
845 | data filter but does not include the actual data and the animation options.
|
846 | */
|
847 | store(): Snapshot;
|
848 | /** Returns controls for the ongoing animation, if any.
|
849 | @deprecated since version 0.4.0 */
|
850 | get animation(): Anim.Control;
|
851 | /** Returns the version number of the library. */
|
852 | version(): string;
|
853 | /** Property for read-only access to style object without default values. */
|
854 | style: Readonly<Styles.Chart>;
|
855 | /** Property for read-only access to the style object after setting defaults. */
|
856 | getComputedStyle(): Readonly<Styles.Chart>;
|
857 | /** Property for read-only access to chart parameter object. */
|
858 | config: Readonly<Config.Chart>;
|
859 | /** Property for read-only access to data metainfo object. */
|
860 | data: Readonly<Data.Metainfo>;
|
861 | /** Enable/disable additional features. */
|
862 | feature(name: Feature, enabled: boolean): void;
|
863 | /** Removes the reference of the chart from every place it attached itself,
|
864 | this method must be called in order to get the chart properly garbage
|
865 | collected. */
|
866 | detach(): void;
|
867 | /** Returns the chart preset collection. */
|
868 | static get presets(): import('./presets').Preset;
|
869 | /** Setter method for Library options. */
|
870 | static options(options: Lib.Options): void;
|
871 | }
|