React Chart Data Animation

1import {
2    SciChartSurface,
3    NumericAxis,
4    NumberRange,
5    EllipsePointMarker,
6    ScatterAnimation,
7    XyDataSeries,
8    PaletteFactory,
9    GradientParams,
10    Point,
11    FastLineRenderableSeries,
12    easing,
13} from "scichart";
14
15import { appTheme } from "../../../theme";
16
17export const drawExample = async (rootElement: string | HTMLDivElement) => {
18    // Create a SciChartSurface
19    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
20        theme: appTheme.SciChartJsTheme,
21    });
22
23    const length = 120;
24
25    sciChartSurface.xAxes.add(
26        new NumericAxis(wasmContext, {
27            visibleRange: new NumberRange(0, length),
28            growBy: new NumberRange(0.1, 0.1),
29        })
30    );
31    sciChartSurface.yAxes.add(
32        new NumericAxis(wasmContext, {
33            visibleRange: new NumberRange(0, length),
34            growBy: new NumberRange(0.1, 0.1),
35        })
36    );
37
38    let xValues = Array.from(Array(length).keys());
39    let yValues = Array.from({ length }, () => Math.random() * length);
40
41    // Create a scatter series with some initial data
42    const scatterSeries = new FastLineRenderableSeries(wasmContext, {
43        dataSeries: new XyDataSeries(wasmContext, {
44            xValues,
45            yValues,
46        }),
47        strokeThickness: 2,
48        pointMarker: new EllipsePointMarker(wasmContext, {
49            width: 11,
50            height: 11,
51            fill: appTheme.VividSkyBlue,
52            strokeThickness: 0,
53        }),
54        paletteProvider: PaletteFactory.createGradient(
55            wasmContext,
56            new GradientParams(new Point(0, 0), new Point(1, 1), [
57                { offset: 0, color: "#36B8E6" },
58                { offset: 0.2, color: "#5D8CC2" },
59                { offset: 0.4, color: "#8166A2" },
60                { offset: 0.6, color: "#AE418C" },
61                { offset: 1.0, color: "#CA5B79" },
62            ]),
63            { enableStroke: true, enablePointMarkers: true, strokeOpacity: 0.67 }
64        ),
65    });
66    sciChartSurface.renderableSeries.add(scatterSeries);
67
68    // create a temp series for passing animation values
69    const animationSeries = new XyDataSeries(wasmContext);
70    // register this so it is deleted along with the main surface
71    sciChartSurface.addDeletable(animationSeries);
72    // Update data using data animations
73    let timerId: NodeJS.Timeout;
74
75    const animateData = () => {
76        xValues = xValues.map((x) => x + ((Math.random() - 0.5) * length) / 5);
77        yValues = yValues.map((y) => y + ((Math.random() - 0.5) * length) / 5);
78        // Set the values on the temp series
79        animationSeries.clear();
80        animationSeries.appendRange(xValues, yValues);
81        scatterSeries.runAnimation(
82            new ScatterAnimation({
83                duration: 1000,
84                ease: easing.outQuad,
85                // Do not create a new DataSeries here or it will leak and eventually crash.
86                dataSeries: animationSeries,
87            })
88        );
89
90        timerId = setTimeout(animateData, 1200);
91    };
92    timerId = setTimeout(animateData, 1000);
93
94    const startUpdate = () => {
95        timerId = setTimeout(animateData, 1000);
96    };
97
98    const stopUpdate = () => {
99        clearTimeout(timerId);
100    };
101
102    return { wasmContext, sciChartSurface, controls: { startUpdate, stopUpdate } };
103};
104