React Startup Animation

1import {
2    WaveAnimation,
3    SweepAnimation,
4    ScaleAnimation,
5    FadeAnimation,
6    TextAnnotation,
7    GenericAnimation,
8    SciChartSurface,
9    NumericAxis,
10    FastBubbleRenderableSeries,
11    EllipsePointMarker,
12    XyzDataSeries,
13    SplineLineRenderableSeries,
14    XyDataSeries,
15    ECoordinateMode,
16    EHorizontalAnchorPoint,
17    EVerticalAnchorPoint,
18    SeriesAnimation,
19    ZoomPanModifier,
20    ZoomExtentsModifier,
21    MouseWheelZoomModifier,
22} from "scichart";
23import { appTheme } from "../../../theme";
24
25// Four Series Animations are defined below. We apply these to the chart sequentially
26const waveAnimation = new WaveAnimation({ zeroLine: 0, pointDurationFraction: 0.5, duration: 1000, fadeEffect: true });
27const sweepAnimation = new SweepAnimation({ duration: 1000 });
28const scaleAnimation = new ScaleAnimation({ duration: 1000, zeroLine: 0 });
29const fadeAnimation = new FadeAnimation({ duration: 1000 });
30
31// generic animation to create typewritter effect on the watermark
32const typeWriterAnimation = (textAnnotation: TextAnnotation, finalText: string) =>
33    new GenericAnimation<string>({
34        from: "",
35        to: finalText,
36        onAnimate: (from: string, to: string, progress: number) => {
37            const length = Math.floor(to.length * progress);
38            textAnnotation.text = to.substring(0, length);
39        },
40        duration: 1000,
41        setInitialValueImmediately: true,
42    });
43
44// Setup the example & chart
45
46export const drawExample = async (rootElement: string | HTMLDivElement) => {
47    // Create a SciChartSurface with theme
48    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
49        theme: appTheme.SciChartJsTheme,
50    });
51    // Create X and Y Axis
52    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
53    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
54
55    // Create some data
56    const xValues = [];
57    const yValues = [];
58    const zValues = [];
59    let prevYValue = 0;
60    for (let i = 0; i < 20; i++) {
61        const curYValue = Math.sin(i) * 10 + 5;
62        const size = Math.sin(i) * 60 + 3;
63
64        xValues.push(i);
65        yValues.push(prevYValue + curYValue);
66        zValues.push(size);
67
68        prevYValue += curYValue;
69    }
70
71    // Create a Bubble Series
72    const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
73        pointMarker: new EllipsePointMarker(wasmContext, {
74            width: 64,
75            height: 64,
76            fill: appTheme.VividSkyBlue + "77",
77            strokeThickness: 0,
78        }),
79        dataSeries: new XyzDataSeries(wasmContext, { xValues, yValues, zValues }),
80    });
81    sciChartSurface.renderableSeries.add(bubbleSeries);
82
83    // Create a Line Series
84    const lineSeries = new SplineLineRenderableSeries(wasmContext, {
85        stroke: appTheme.VividSkyBlue,
86        strokeThickness: 2,
87        opacity: 0.7,
88        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
89    });
90    sciChartSurface.renderableSeries.add(lineSeries);
91
92    // Add watermark annotation
93    const watermark = new TextAnnotation({
94        text: "",
95        x1: 0.5,
96        y1: 0.5,
97        fontSize: 42,
98        opacity: 0.5,
99        xCoordinateMode: ECoordinateMode.Relative,
100        yCoordinateMode: ECoordinateMode.Relative,
101        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
102        verticalAnchorPoint: EVerticalAnchorPoint.Center,
103    });
104    sciChartSurface.annotations.add(watermark);
105
106    // Add title annotation
107    sciChartSurface.annotations.add(
108        new TextAnnotation({
109            text: "Series Startup Animations in SciChart.js",
110            fontSize: 18,
111            textColor: appTheme.ForegroundColor,
112            x1: 0.5,
113            y1: 0,
114            opacity: 0.77,
115            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
116            xCoordinateMode: ECoordinateMode.Relative,
117            yCoordinateMode: ECoordinateMode.Relative,
118        })
119    );
120
121    // Loop forever and update animations
122    let animationState = 0;
123    const updateAnimation = () => {
124        let currentAnimation: SeriesAnimation;
125        switch (animationState) {
126            case 0:
127                currentAnimation = waveAnimation;
128                sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Wave Animation"));
129                animationState++;
130                break;
131            case 1:
132                currentAnimation = sweepAnimation;
133                sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Sweep Animation"));
134                animationState++;
135                break;
136            case 2:
137                currentAnimation = scaleAnimation;
138                sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Scale Animation"));
139                animationState++;
140                break;
141            case 3:
142                currentAnimation = fadeAnimation;
143                sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Fade Animation"));
144                animationState = 0;
145                break;
146        }
147        lineSeries.enqueueAnimation(currentAnimation);
148        bubbleSeries.enqueueAnimation(currentAnimation);
149        // Loop forever while SciChartSurface is not deleted (see React Component unmount)
150        if (!sciChartSurface.isDeleted) setTimeout(updateAnimation, 2000);
151    };
152
153    updateAnimation();
154
155    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
156    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
157    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
158    return { wasmContext, sciChartSurface };
159};
160