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 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 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 | legend?: 'color'|'lightness'|'size'|null;
|
247 | /** Sets the coordinate system for the chart. Switch to the 'polar'
|
248 | coordinate system to create a chart from the pie/radial chart family. */
|
249 | coordSystem?: 'cartesian'|'polar';
|
250 | /** Rotates the plot area by the specified angle in degree.
|
251 | Note: this is an experimental, not tested feature. */
|
252 | rotate?: number;
|
253 | /** Sets the geometric elements used for the markers to represent the data.*/
|
254 | geometry?: 'rectangle'|'circle'|'area'|'line';
|
255 | /** If both axes have measures on them, this parameter sets the
|
256 | orientation of the chart, meaning to which axis the graphical elements
|
257 | are oriented to. */
|
258 | orientation?: 'horizontal'|'vertical';
|
259 | /** - 'none': markers are sorted in the order as the corresponding data
|
260 | appear in the data set.
|
261 | - 'byValue': markers will be sorted by the corresponding measure (if present)
|
262 | in decreasing order. */
|
263 | sort?: 'none'|'byValue';
|
264 | /** Reverts the order of the markers if set. */
|
265 | reverse?: boolean;
|
266 | /** Sets the alignment of the markers with relation to the x- or the y-axis depending
|
267 | on where the measure is. In case both axes have measures on them, this is determined
|
268 | by the {@link Chart.orientation|orientation} of the chart.
|
269 | */
|
270 | align?: 'none'|'min'|'center'|'max'|'stretch';
|
271 | /** If set to true, markers will be split by the dimension(s) along the axis.
|
272 | This works if you have at least one dimension and a measure on the same axis.In case
|
273 | both axes have measures and dimension(s) on them, this is determined by the
|
274 | {@link Chart.orientation|orientation} of the chart.*/
|
275 | split?: boolean;
|
276 | }
|
277 |
|
278 | }
|
279 |
|
280 | declare namespace Styles
|
281 | {
|
282 |
|
283 | /** Length can be set in pixels or in percentage of the element or the element's
|
284 | font size. Pixel is the default unit. */
|
285 | type Length = `${number}px`|`${number}%`|`${number}em`|number;
|
286 |
|
287 | /** Angle can be set in radians, degrees, gradians and turns.
|
288 | Radians is the default unit. */
|
289 | type Angle = `${number}rad`|`${number}grad`|`${number}deg`|`${number}turn`
|
290 | |number;
|
291 |
|
292 | /** The following CSS color formats are available:
|
293 | rgb(), rgba(), #RRGGBB, #RRGGBBAA, #RGB. */
|
294 | type Color = `#${string}`
|
295 | |`rgb(${number},${number},${number})`
|
296 | |`rgba(${number},${number},${number},${number})`;
|
297 |
|
298 | interface Padding {
|
299 | /** Top padding of the element. */
|
300 | paddingTop?: Length|null;
|
301 | /** Right padding of the element. */
|
302 | paddingRight?: Length|null;
|
303 | /** Bottom padding of the element. */
|
304 | paddingBottom?: Length|null;
|
305 | /** Left padding of the element. */
|
306 | paddingLeft?: Length|null;
|
307 | }
|
308 |
|
309 | interface Font {
|
310 | /** The family of the font. If not set, it inherits the root style font
|
311 | family. */
|
312 | fontFamily?: string|null;
|
313 | /** The style of the font. */
|
314 | fontStyle?: 'normal'|'italic'|'oblique'|null;
|
315 | /** The weight of the font, numbers use the same scale as CSS. */
|
316 | fontWeight?: 'normal'|'bold'|number|null;
|
317 | /** The size of the font. Percentage values are relative to the root style font
|
318 | size */
|
319 | fontSize?: Length|null;
|
320 | }
|
321 |
|
322 | interface Box {
|
323 | /** The background color of the element. */
|
324 | backgroundColor?: Color|null;
|
325 | /** The border color of the element. */
|
326 | borderColor?: Color|null;
|
327 | /** The border width of the element. */
|
328 | borderWidth?: number|null;
|
329 | }
|
330 |
|
331 | interface Text {
|
332 | /** The color of the displayed text. */
|
333 | color?: Color|null;
|
334 | /** The alignment of the displayed text. */
|
335 | textAlign?: 'center'|'left'|'right'|null;
|
336 | /** The background color of the displayed text. */
|
337 | backgroundColor?: Color|null;
|
338 | /** The format of the number. Only applicable for texts showing numerical
|
339 | data such as marker and axis labels. 'grouped' uses thousand separators,
|
340 | 'prefixed' uses scientific notation. */
|
341 | numberFormat?: 'none'|'grouped'|'prefixed'|null;
|
342 | /** The maximum number of digits in fraction part if the text contains a
|
343 | number. */
|
344 | maxFractionDigits?: number|null;
|
345 | }
|
346 |
|
347 | /** The following CSS like filters can be used to alter the color:
|
348 |
|
349 | - color: overrides the color.
|
350 | - lightness: lightens or darkens the color; 0 means the original color, -1
|
351 | means black, 1 means white.
|
352 | - grayscale: desaturates the color. 0 means the original color, 1 means fully
|
353 | desaturated.
|
354 |
|
355 | none: no change.
|
356 | */
|
357 | type ColorTransform = `color(${Color})`
|
358 | | `lightness(${number})`
|
359 | | `grayscale(${number})`
|
360 | | `opacity(${number})`
|
361 | | 'none';
|
362 |
|
363 | interface OrientedLabel extends Label {
|
364 | /** Orientation of the label relatively to the axis or marker it is attached to. */
|
365 | orientation?: 'normal'|'tangential'|'horizontal'|'vertical'|null;
|
366 | /** Additional rotation of the label. */
|
367 | angle?: Angle|null;
|
368 | }
|
369 |
|
370 | interface MarkerLabel extends OrientedLabel {
|
371 | /** The label position relatively to the marker. */
|
372 | position?: 'center'|'top'|'left'|'bottom'|'right'|null;
|
373 | /** Defines the transformation used for calculating the label color
|
374 | from the marker color. */
|
375 | filter?: ColorTransform|null;
|
376 | /** Sets the order of values on the label if both a measure and a dimension are
|
377 | present. */
|
378 | format?: 'measureFirst'|'dimensionsFirst'|null;
|
379 | }
|
380 |
|
381 | interface Guides {
|
382 | /** The color of the guides.*/
|
383 | color?: Color|null;
|
384 | /** Line width of the guide in pixel. */
|
385 | lineWidth?: number|null;
|
386 | }
|
387 |
|
388 | interface Tooltip extends Font, Box {
|
389 | /** The layout of the tooltip text */
|
390 | layout?: 'singleLine'|'multiLine';
|
391 | /** The foreground color of the tooltip text */
|
392 | color?: Color;
|
393 | /** Color of the drop shadow */
|
394 | shadowColor?: Color;
|
395 | /** Corner radius for the info bubble */
|
396 | borderRadius?: number;
|
397 | /** Drop shadow distance from the info bubble */
|
398 | dropShadow?: number;
|
399 | /** Data point marker radius */
|
400 | radius?: number;
|
401 | /** Base size of the info bubble arrow */
|
402 | arrowSize?: number;
|
403 | /** Distance between the data point and the info bubble */
|
404 | distance?: number;
|
405 | /** Specifies the name of the data series dispalyed
|
406 | at the first position on the tooltip */
|
407 | seriesName?: string|null;
|
408 | }
|
409 |
|
410 | interface Logo extends Padding
|
411 | {
|
412 | /** Width of the Vizzu logo */
|
413 | width?: Length|null;
|
414 | /** Color transformation applied on the colored Vizzu Logo */
|
415 | filter?: ColorTransform|null;
|
416 | }
|
417 |
|
418 | interface DataPoint {
|
419 | /** Color gradient used for the measure on the color channel.*/
|
420 | colorGradient?: ColorGradient|null;
|
421 | /** Color palette used for the dimension on the color channel.*/
|
422 | colorPalette?: ColorPalette|null;
|
423 | /** Lightness value associated with the minimum value of the lightness
|
424 | channel's range. */
|
425 | minLightness?: number|null;
|
426 | /** Lightness value associated with the maximum value of the lightness
|
427 | channel's range. */
|
428 | maxLightness?: number|null;
|
429 | /** Minimum of line width specified as proportion of plot area size.
|
430 | e.g.: 0.01 means 1% of the width of the plot area. */
|
431 | lineMinWidth?: number|null;
|
432 | /** Maximum line width specified as proportion of plot area size.
|
433 | e.g.: 0.01 means 1% of the width of the plot area. */
|
434 | lineMaxWidth?: number|null;
|
435 | /** Minimum circle radius specified as proportion of plot area size.
|
436 | e.g.: 0.01 means 1% of the width of the plot area. */
|
437 | circleMinRadius?: number|null;
|
438 | /** Maximum circle radius specified as proportion of plot area size.
|
439 | e.g.: 0.01 means 1% of the width of the plot area. */
|
440 | circleMaxRadius?: number|null;
|
441 | /** Spacing between bars/columns. The value specifies the size of the
|
442 | spacing as a factor of the marker size.
|
443 | e.g.: 0.1 means 10% of marker height/width depending on the chart's orientation. */
|
444 | rectangleSpacing?: number|null;
|
445 | }
|
446 |
|
447 | interface Marker extends DataPoint {
|
448 | /** Width of the marker border in pixels. */
|
449 | borderWidth?: number|null;
|
450 | /** Opacity of the marker border. */
|
451 | borderOpacity?: number|null;
|
452 | borderOpacityMode?: 'straight'|'premultiplied'|null;
|
453 | /** Opacity of the marker fill color. */
|
454 | fillOpacity?: number|null;
|
455 | /** Style settings for guide lines drawn for the markers. */
|
456 | guides?: Guides|null;
|
457 | /** Style settings for the marker labels. */
|
458 | label?: MarkerLabel|null;
|
459 | }
|
460 |
|
461 | /** Style settings for the values shown on the axis to display the scale
|
462 | being used or the categories along the axis.
|
463 | Note: textAlign has no effect on the Axis label. */
|
464 | interface AxisLabel extends OrientedLabel {
|
465 | /** Label position relatively to the plot. */
|
466 | position?: 'axis'|'max-edge'|'min-edge'|null;
|
467 | /** Label alignment relatively to the position on the plot. */
|
468 | side?: 'positive'|'negative'|null;
|
469 | }
|
470 |
|
471 | /** Style settings of the {@link Config.Channel.title|Axis title} */
|
472 | interface AxisTitle extends Label {
|
473 | /** Title position relatively to the plot. */
|
474 | position?: 'axis'|'min-edge'|'max-edge'|null;
|
475 | /** Title alignment relatively to the position on the plot. */
|
476 | side?: 'positive'|'upon'|'negative'|null;
|
477 | /** Title position on the axis or edge. */
|
478 | vposition?: 'begin'|'middle'|'end'|null;
|
479 | /** Title alignment on the axis or edge. */
|
480 | vside?: 'positive'|'upon'|'negative'|null;
|
481 | /** The orientation of the title. */
|
482 | orientation?: 'horizontal'|'vertical'|null;
|
483 | }
|
484 |
|
485 | interface Ticks {
|
486 | /** Color of the ticks on the axis. */
|
487 | color?: Color|null;
|
488 | /** Line width of the ticks on the axis. */
|
489 | lineWidth?: number|null;
|
490 | /** Length of the ticks on the axis. */
|
491 | length?: Length|null;
|
492 | /** Position of the ticks on the axis relatively to the axis line. */
|
493 | position?: 'outside'|'inside'|'center'|null;
|
494 | }
|
495 | interface Interlacing {
|
496 | /** Color of the interlacing pattern. */
|
497 | color?: Color|null;
|
498 | }
|
499 |
|
500 | interface Axis {
|
501 | /** Color of the axis line. */
|
502 | color?: Color|null;
|
503 | /** Style parameters of the axis title. */
|
504 | title?: AxisTitle|null;
|
505 | /** Style parameters of the axis labels. */
|
506 | label?: AxisLabel|null;
|
507 | ticks?: Ticks|null;
|
508 | guides?: Guides|null;
|
509 | interlacing?: Interlacing|null;
|
510 | }
|
511 |
|
512 | interface Plot extends Padding, Box {
|
513 | /** Style settings for the markers. */
|
514 | marker?: Marker|null;
|
515 | /** Style settings for the x-axis - or the angle when using polar coordinates. */
|
516 | xAxis?: Axis|null;
|
517 | /** Style settings for the y-axis - or the radius when using polar coordinates. */
|
518 | yAxis?: Axis|null;
|
519 | /** Controls drawing outside of the plot area. If hidden, clipping will be
|
520 | set for the boundary of the coordinate system. */
|
521 | overflow?: 'hidden'|'visible';
|
522 | }
|
523 |
|
524 | interface LegendMarker {
|
525 | /** Shape of the legend marker. */
|
526 | type?: 'circle'|'square'|null;
|
527 | /** Size of the legend marker (diameter or side length). */
|
528 | size?: Length|null;
|
529 | }
|
530 |
|
531 | interface Legend extends Padding, Box {
|
532 | /** Width of the legend's boundary box. */
|
533 | width?: Length|null;
|
534 | /** Limit for the width of the boundary box. */
|
535 | maxWidth?: Length|null;
|
536 | /** Style settings for the legend's title. */
|
537 | title?: Label|null;
|
538 | /** Style settings for the labels on the legend. */
|
539 | label?: Label|null;
|
540 | marker?: LegendMarker|null;
|
541 | }
|
542 |
|
543 | /** Color and position pairs separated by spaces,
|
544 | where position is a number between 0 and 1. */
|
545 | type ColorStop = `${Color} ${number}`;
|
546 |
|
547 | /** Color gradient is specified by a comma separated list of ColorStops.
|
548 | This is used when a measure is on the color channel. */
|
549 | type ColorGradient = ColorStop
|
550 | | `${ColorStop},${ColorStop}`
|
551 | | `${ColorStop},${ColorStop},${ColorStop}`
|
552 | | `${ColorStop},${ColorStop},${ColorStop},${ColorStop}`
|
553 | | `${ColorStop},${ColorStop},${ColorStop},${ColorStop},${ColorStop}`
|
554 | | string;
|
555 |
|
556 | /** Color palette is a list of colors separated by spaces.
|
557 | This is used when only dimensions are on the color channel*/
|
558 | type ColorPalette = Color
|
559 | | `${Color} ${Color}`
|
560 | | `${Color} ${Color} ${Color}`
|
561 | | `${Color} ${Color} ${Color} ${Color}`
|
562 | | `${Color} ${Color} ${Color} ${Color} ${Color}`
|
563 | | string;
|
564 |
|
565 | type Label = Padding & Font & Text;
|
566 |
|
567 | interface Chart extends Padding, Box, Font {
|
568 | /** Style settings for the plot area. */
|
569 | plot?: Plot|null;
|
570 | /** Style settings for the legend. */
|
571 | legend?: Legend|null;
|
572 | /** Style settings for the main chart title. */
|
573 | title?: Label|null;
|
574 | /** Style settings for the tooltip. */
|
575 | tooltip?: Tooltip|null;
|
576 | /** Style settings of the Vizzu logo. */
|
577 | logo?: Logo|null;
|
578 | }
|
579 |
|
580 | }
|
581 |
|
582 |
|
583 | /** Represents a state in the animation describing the data, the chart, and
|
584 | the style parameters to be changed from the actual state.
|
585 | Passing null as style will reset every style parameter to default. */
|
586 | interface AnimTarget {
|
587 | /** Data set. */
|
588 | data?: Data.Set;
|
589 | /** Chart configuration changes. */
|
590 | config?: Config.Chart;
|
591 | /** Style changes. */
|
592 | style?: Styles.Chart|null;
|
593 | }
|
594 |
|
595 | declare namespace Anim
|
596 | {
|
597 |
|
598 | /** Duration can be set in seconds or milliseconds.
|
599 | In case no unit is set, it defaults to seconds. */
|
600 | type Duration = `${number}s`|`${number}ms`|number;
|
601 |
|
602 | type Easing = 'none' | 'linear' | 'step-start' | 'step-end' | 'ease'
|
603 | | 'ease-in' | 'ease-out' | 'ease-in-out'
|
604 | | `cubic-bezier(${number},${number},${number},${number})`;
|
605 |
|
606 | /** Animation parameters for an animation group. */
|
607 | interface GroupOptions
|
608 | {
|
609 | /** Sets the easing used for the animation. */
|
610 | easing?: Easing;
|
611 | /** The length of time an animation should take to complete. */
|
612 | duration?: Duration;
|
613 | /** Waiting time interval before the animation starts. */
|
614 | delay?: Duration;
|
615 | }
|
616 |
|
617 | /** If no animation settings are passed to Vizzu, it will use an automatic
|
618 | setting depending on the actual configuration of the chart. This behavior can be
|
619 | overridden via the animation setting parameter.
|
620 |
|
621 | The animation between two states of the chart can require the transitioning
|
622 | of several different chart properties. These properties are grouped into
|
623 | separately configurable animation groups.
|
624 |
|
625 | The parameters can also be set for the animation as a whole. These settings
|
626 | rescale the durations and delays of the animation groups to the
|
627 | specified total delay and duration.
|
628 | */
|
629 | interface Options extends GroupOptions {
|
630 | /** Determines if the animation should start automatically after the
|
631 | animate() call. */
|
632 | playState?: 'paused'|'running';
|
633 | /** The starting position of the animation. */
|
634 | position: number;
|
635 | /** Animation group for style parameters. */
|
636 | style?: GroupOptions;
|
637 | /** Title animation parameters. */
|
638 | title?: GroupOptions;
|
639 | /** Legend animation parameters. */
|
640 | legend?: GroupOptions;
|
641 | /** Animation group for new markers fading in
|
642 | (due to filtering or added/removed data series). */
|
643 | show?: GroupOptions;
|
644 | /** Animation group for markers fading out
|
645 | (due to filtering or added/removed data series). */
|
646 | hide?: GroupOptions;
|
647 | /** Marker color animation group. */
|
648 | color?: GroupOptions;
|
649 | /** Coordinate system transformations animation group. */
|
650 | coordSystem?: GroupOptions;
|
651 | /** Marker geometry morph animation group. */
|
652 | geometry?: GroupOptions;
|
653 | /** Animation group for marker transitions in the direction of the y-axis. */
|
654 | y?: GroupOptions;
|
655 | /** Animation group for marker transitions in the direction of the x-axis. */
|
656 | x?: GroupOptions;
|
657 | /** Animation group for tooltip transitions. */
|
658 | tooltip?: GroupOptions;
|
659 | }
|
660 |
|
661 | /** Control object for animation. */
|
662 | interface Control extends Promise<Vizzu> {
|
663 | /** Seeks the animation to the position specified by time or progress
|
664 | percentage. Seeking the animation to the end position will not trigger
|
665 | the (@link Vizzu.animate|animation promise) to resolve. */
|
666 | seek(value: `${number}%`|Duration): void;
|
667 | /** Pauses the controlled animation. */
|
668 | pause(): void;
|
669 | /** Plays/resumes playing of the controlled animation. */
|
670 | play(): void;
|
671 | /** Stops the current animation seeking it back to its start position. */
|
672 | stop(): void;
|
673 | /** Changes the direction of the controlled animation. */
|
674 | reverse(): void;
|
675 | /** Cancels the animation, will reject the animation promise. */
|
676 | cancel(): void;
|
677 | }
|
678 |
|
679 | }
|
680 |
|
681 | declare namespace Event
|
682 | {
|
683 |
|
684 | type Type =
|
685 | 'click'
|
686 | |'mouseon'
|
687 | |'mousemove'
|
688 | |'wheel'
|
689 | |'update'
|
690 | |'background-draw'
|
691 | |'title-draw'
|
692 | |'logo-draw'
|
693 | |'legend-background-draw'
|
694 | |'legend-title-draw'
|
695 | |'legend-label-draw'
|
696 | |'legend-marker-draw'
|
697 | |'legend-bar-draw'
|
698 | |'plot-background-draw'
|
699 | |'plot-marker-draw'
|
700 | |'plot-marker-label-draw'
|
701 | |'plot-marker-guide-draw'
|
702 | |'plot-axis-draw'
|
703 | |'plot-axis-title-draw'
|
704 | |'plot-axis-label-draw'
|
705 | |'plot-axis-tick-draw'
|
706 | |'plot-axis-guide-draw'
|
707 | |'plot-axis-interlacing-draw'
|
708 | |'animation-begin'
|
709 | |'animation-complete';
|
710 |
|
711 | /** The interface of the event object is passed to event handlers by the library.
|
712 | Additional properties will vary by event type. */
|
713 | interface Object {
|
714 | /** If called, the default action of the event will be canceled. */
|
715 | preventDefault: () => void;
|
716 | }
|
717 |
|
718 | }
|
719 |
|
720 | type Snapshot = number;
|
721 |
|
722 | /** List of base and additional features:
|
723 | - logging: enables logging of the library to the console
|
724 | (switched off by default).
|
725 | - rendering: enables rendering of the library to the canvas
|
726 | (enabled by default).
|
727 | - tooltip: tooltips on the chart appearing on markers on mouse over.
|
728 | Since the tooltip uses the animation interface, calling animate() while
|
729 | the tooltip is enabled can cause unwanted behaviour. */
|
730 | type Feature = 'tooltip'|'logging'|'rendering';
|
731 |
|
732 | /** Class representing a single chart in Vizzu. */
|
733 | export default class Vizzu {
|
734 | /** Creates a new chart and connects it to the div or canvas HTML
|
735 | element specified by its ID or DOM object. The new chart is empty by
|
736 | default, but can be set to an initial state in the second optional
|
737 | parameter. */
|
738 | constructor(container: string|HTMLElement, initState?: AnimTarget|Config.Chart);
|
739 | /** Promise representing the initialization will resolve when
|
740 | initialization is finished. Any API call will potentially cause
|
741 | an error before this promise is resolved. */
|
742 | initializing: Promise<Vizzu>;
|
743 | /** Installs the provided event handler to the event specified by name. */
|
744 | on(eventName: Event.Type, handler: (event: Event.Object) => void): void;
|
745 | /** Uninstalls the provided event handler from the event specified by name.
|
746 | */
|
747 | off(eventName: Event.Type, handler: (event: Event.Object) => void): void;
|
748 | /** Initiates the animation to the new chart state passed as the first
|
749 | argument. If there is a currently running animation, all subsequent
|
750 | calls will schedule the corresponding animation after the end of the
|
751 | previous one.
|
752 |
|
753 | The new chart state can be a full state specifier object with
|
754 | data, config and style, or a single chart config object.
|
755 | It accepts also a chart snapshot acquired from a previous state using
|
756 | the store() method.
|
757 |
|
758 | The optional second parameter specifies the animation
|
759 | options. This second option can be a scalar value, setting the overall
|
760 | animation duration. Passing explicit null as second parameter will
|
761 | result in no animation.
|
762 |
|
763 | The animation will be initiated in the next cycle of the JS event loop.
|
764 | The method returns a promise, which will resolve when the animation is
|
765 | finished. */
|
766 | animate(
|
767 | animTarget: AnimTarget|Config.Chart|Snapshot,
|
768 | animOptions?: Anim.Options|Anim.Duration|null)
|
769 | : Anim.Control;
|
770 | /** Returns a reference to the actual chart state for further reuse.
|
771 | This reference includes the chart config, style parameters and the
|
772 | data filter but does not include the actual data and the animation options.
|
773 | */
|
774 | store(): Snapshot;
|
775 | /** Returns controls for the ongoing animation, if any.
|
776 | @deprecated since version 0.4.0 */
|
777 | get animation(): Anim.Control;
|
778 | /** Returns the version number of the library. */
|
779 | version(): string;
|
780 | /** Property for read-only access to style object. */
|
781 | style: Readonly<Styles.Chart>;
|
782 | /** Property for read-only access to chart parameter object. */
|
783 | config: Readonly<Config.Chart>;
|
784 | /** Property for read-only access to data metainfo object. */
|
785 | data: Readonly<Data.Metainfo>;
|
786 | /** Enable/disable additional features. */
|
787 | feature(name: Feature, enabled: boolean): void;
|
788 | /** Returns the chart preset collection. */
|
789 | static get presets(): import('./presets').Preset;
|
790 | /** Setter method for Library options. */
|
791 | static options(options: Lib.Options): void;
|
792 | }
|