UNPKG

31.7 kBTypeScriptView Raw
1declare namespace Lib
2{
3
4/** Options for the library. */
5interface Options {
6
7 /** The URL for the webassembly binary (cvizzu.wasm). */
8 wasmUrl?: string;
9
10}
11
12}
13
14declare namespace Data
15{
16
17/** Additional info about a data series besides the contained data. */
18interface 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
37interface AbstractSeriesInfo extends SeriesMetaInfo
38{
39 /** Count of values in the series. */
40 length: number;
41}
42
43/** Meta data about dimension data series */
44interface DimensionSeriesInfo extends AbstractSeriesInfo
45{
46 /** Distinct values in the series */
47 categories: Array<string>;
48}
49
50/** Meta data about measure data series */
51interface 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
61type SeriesInfo = DimensionSeriesInfo|MeasureSeriesInfo;
62
63/** Meta data about the data set */
64interface Metainfo
65{
66 series: SeriesInfo[];
67}
68
69/** Represents a categorical or data value */
70type Value = string|number;
71
72/** List of data values in a series. */
73type 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. */
77interface 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. */
87interface 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
93type FilterCallback = (record: Record) => boolean;
94
95interface 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. */
103interface 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. */
110interface 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
119type 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. */
123interface 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 */
130interface 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. */
140type Set = TableBySeries|TableByRecords|Cube;
141
142type SeriesList = string[]|string;
143
144}
145
146declare 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 */
155type ChannelExtrema = number|`${number}%`|`${number}min`|`${number}max`|'auto';
156
157/** Channel range specifies how to scale the represented data. */
158interface 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. */
169interface 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. */
208interface 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. */
235interface 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
282declare 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. */
287type 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. */
291type 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. */
296type 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 */
308type 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
315interface 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
326interface 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
339interface 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
348interface 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 */
376type ColorTransform = `color(${Color})`
377 | `lightness(${number})`
378 | `grayscale(${number})`
379 | `opacity(${number})`
380 | 'none';
381
382interface 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
389interface 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
400interface 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
407interface 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
429interface 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
437interface 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
466interface 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. */
483interface 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} */
491interface 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
504interface 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}
514interface Interlacing {
515 /** Color of the interlacing pattern. */
516 color?: Color|null;
517}
518
519interface 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
531interface 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
543interface 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
550interface 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. */
564type 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. */
568type 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*/
577type ColorPalette = Color
578 | `${Color} ${Color}`
579 | `${Color} ${Color} ${Color}`
580 | `${Color} ${Color} ${Color} ${Color}`
581 | `${Color} ${Color} ${Color} ${Color} ${Color}`
582 | string;
583
584type Label = Padding & Font & Text;
585
586interface 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
601declare namespace Anim
602{
603
604/** Duration can be set in seconds or milliseconds.
605 In case no unit is set, it defaults to seconds. */
606type Duration = `${number}s`|`${number}ms`|number;
607
608type 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. */
613interface 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. */
628type 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 */
642interface 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
672interface 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. */
682interface Animation {
683 id: number;
684}
685
686/** Control object for animation. */
687interface 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. */
707interface 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. */
716interface 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. */
726type LazyTarget = Target|Config.Chart|Snapshot;
727/** All types, which can represent an animation option. */
728type 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. */
732interface Keyframe {
733 target: LazyTarget;
734 options?: LazyOptions;
735}
736
737/** Types, that can represent a Keyframe. */
738type LazyKeyframe = Keyframe|LazyTarget;
739
740/** Sequence of keyframe descriptors */
741type Keyframes = LazyKeyframe[];
742
743}
744
745declare namespace Event
746{
747
748type 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. */
777interface Object {
778 /** If called, the default action of the event will be canceled. */
779 preventDefault: () => void;
780}
781
782}
783
784/** Stored Chart object. */
785interface 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. */
797type Feature = 'tooltip'|'logging'|'rendering';
798
799/** Class representing a single chart in Vizzu. */
800export 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 {@link 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}