vizzu
Version:
Vizzu is a free, open-source Javascript/C++ library utilizing a generic dataviz engine that generates many types of charts and seamlessly animates between them. It can be used to create static charts but more importantly it is designed for building animat
107 lines (104 loc) • 4.74 kB
TypeScript
import * as Data from './data.js';
import * as Config from './config.js';
import * as Styles from './styles.js';
import * as CA from '../module/canimctrl.js';
import * as CC from '../module/cchart.js';
/** Duration can be set in seconds or milliseconds.
In case no unit is set, it defaults to seconds. */
export type Duration = `${number}s` | `${number}ms` | number;
/** Seek position in the animation. */
export type Position = `${number}%` | Duration;
export type Easing = 'none' | 'linear' | 'step-start' | 'step-end' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | `cubic-bezier(${number},${number},${number},${number})`;
/** Animation parameters for an animation group. */
export interface GroupOptions {
/** Sets the easing used for the animation. */
easing?: Easing;
/** The length of time an animation should take to complete. */
duration?: Duration;
/** Waiting time interval before the animation starts. */
delay?: Duration;
}
/** Type of transition when the categorical series differ on the source and the target chart.
- fade: the source chart fades out while the target chart fades in
- drilldown: markers are splitted to be able to represent the target chart
- aggregate: markers are aggregated then splitted differently to be
able to represent the target chart. */
export type RegroupStrategy = 'fade' | 'drilldown' | 'aggregate';
/** If no animation settings are passed to Vizzu, it will use an automatic
setting depending on the actual configuration of the chart. This behavior can be
overridden via the animation setting parameter.
The animation between two states of the chart can require the transitioning
of several different chart properties. These properties are grouped into
separately configurable animation groups.
The parameters can also be set for the animation as a whole. These settings
rescale the durations and delays of the animation groups to the
specified total delay and duration. */
export interface Options extends GroupOptions {
/** Animation group for style parameters. */
style?: GroupOptions;
/** Title animation parameters. */
title?: GroupOptions;
/** Subtitle animation parameters. */
subtitle?: GroupOptions;
/** Caption animation parameters. */
caption?: GroupOptions;
/** Legend animation parameters. */
legend?: GroupOptions;
/** Animation group for new markers fading in
(due to filtering or added/removed data series). */
show?: GroupOptions;
/** Animation group for markers fading out
(due to filtering or added/removed data series). */
hide?: GroupOptions;
/** Marker color animation group. */
color?: GroupOptions;
/** Coordinate system transformations animation group. */
coordSystem?: GroupOptions;
/** Marker geometry morph animation group. */
geometry?: GroupOptions;
/** Animation group for marker transitions in the direction of the y-axis. */
y?: GroupOptions;
/** Animation group for marker transitions in the direction of the x-axis. */
x?: GroupOptions;
/** Animation group for tooltip transitions. */
tooltip?: GroupOptions;
/** Animation group for area/line rewiring transitions. */
connection?: GroupOptions;
/** Selects the algorithm for transition in case of data grouped
differently on the source and target chart. */
regroupStrategy?: RegroupStrategy;
}
/** Animation playback related oprtions. */
export interface ControlOptions {
/** Determines if the animation should start automatically after the
animate() call. */
playState?: 'paused' | 'running';
/** The starting position of the animation. */
position?: number;
/** Play direction of the animation. */
direction?: 'normal' | 'reverse';
/** Playback speed of the animation. It is 1.0 by default.
Negative values are considered 0. */
speed?: number;
}
/** Represents a state in the animation describing the data, the chart, and
the style parameters to be changed from the actual state.
Passing null as style will reset every style parameter to default. */
export interface Target {
/** Data set. */
data?: Data.Set;
/** Chart configuration changes. */
config?: Config.Chart;
/** Style changes. */
style?: Styles.Chart | null;
}
/** Object for describing a single animation target chart state and the
options of the animation to this chart state. */
export interface Keyframe {
target: Target | CC.Snapshot;
options?: Options;
}
/** Sequence of keyframe descriptors */
export type Keyframes = Keyframe[];
/** Types, that can represent an animation. */
export type AnimTarget = Keyframes | CA.CAnimation;