React Style Animation

1import {
2    MouseWheelZoomModifier,
3    ZoomExtentsModifier,
4    ZoomPanModifier,
5    XyyDataSeries,
6    NumericAxis,
7    FastBandRenderableSeries,
8    SciChartSurface,
9    NumberRange,
10    IRenderableSeries,
11    BandAnimation,
12} from "scichart";
13import { appTheme } from "../../../theme";
14
15// Colours used for style 1
16const lineColor1 = appTheme.VividOrange;
17const fillColor1 = appTheme.VividOrange + "33";
18const lineColor2 = appTheme.VividSkyBlue;
19const fillColor2 = appTheme.VividSkyBlue + "33";
20
21// Colurs used for style 2
22const lineColor1b = appTheme.VividPink;
23const fillColor1b = appTheme.VividPink + "33";
24const lineColor2b = appTheme.PaleTeal;
25const fillColor2b = appTheme.PaleTeal + "33";
26
27const POINTS = 100;
28const STEP = (3 * Math.PI) / POINTS;
29
30export const drawExample = async (rootElement: string | HTMLDivElement) => {
31    // create a chart with X, Y axis
32    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
33        theme: appTheme.SciChartJsTheme,
34    });
35    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
36    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.2, 0.2) }));
37
38    // Generate some data
39    let xValues: number[] = [];
40    let yValues: number[] = [];
41    let y1Values: number[] = [];
42    for (let x = 0; x <= POINTS; x++) {
43        const k = 1 - x / 2000;
44        const y = Math.sin(x * STEP) * k * 0.7 + 1;
45        const y1 = Math.cos(x * STEP) * k + 1;
46        xValues.push(x);
47        yValues.push(y);
48        y1Values.push(y1);
49    }
50    // Create a band series with the data and initial stroke/fill colours
51    const bandSeries = new FastBandRenderableSeries(wasmContext, {
52        dataSeries: new XyyDataSeries(wasmContext, { xValues, yValues, y1Values }),
53        strokeThickness: 4,
54        stroke: lineColor1,
55        strokeY1: lineColor2,
56        fill: fillColor1,
57        fillY1: fillColor2,
58    });
59    sciChartSurface.renderableSeries.add(bandSeries);
60
61    // create a temp series for passing animation values
62    const animationSeries = new XyyDataSeries(wasmContext);
63    // register this so it is deleted along with the main surface
64    sciChartSurface.addDeletable(animationSeries);
65    // Animate both the data & the style of the chart, using a style animation
66    const animateChartStyle = (isStyle1: boolean) => {
67        xValues = [];
68        yValues = [];
69        y1Values = [];
70
71        // Depending on the flag passed in, change the data. Just for eye candy
72        if (isStyle1) {
73            for (let x = 0; x <= POINTS; x++) {
74                const k = 1 - x / 2000;
75                const y = Math.sin(x * STEP) * k * 0.7 + 1;
76                const y1 = Math.cos(x * STEP) * k + 1;
77                xValues.push(x);
78                yValues.push(y);
79                y1Values.push(y1);
80            }
81        } else {
82            for (let x = 0; x <= POINTS; x++) {
83                const k = 1 - x / 2000;
84                const y = Math.cos(x * STEP) * k * 0.7 + 1;
85                const y1 = Math.sin(x * STEP) * k + 1;
86                xValues.push(x);
87                yValues.push(y);
88                y1Values.push(y1);
89            }
90        }
91        // Set the values on the temp series
92        animationSeries.clear();
93        animationSeries.appendRange(xValues, yValues, y1Values);
94
95        // Running an animation on the series lets you change data as well as styles
96        bandSeries.runAnimation(
97            new BandAnimation({
98                duration: 1000,
99                styles: {
100                    strokeThickness: isStyle1 ? 4 : 8,
101                    stroke: isStyle1 ? lineColor1 : lineColor1b,
102                    strokeY1: isStyle1 ? lineColor2 : lineColor2b,
103                    fill: isStyle1 ? fillColor1 : fillColor1b,
104                    fillY1: isStyle1 ? fillColor2 : fillColor2b,
105                },
106                // Don't create a new dataSeries here or it will leak and crash if run repeatedly
107                dataSeries: animationSeries,
108            })
109        );
110    };
111    // Add some interactivity modifiers
112    sciChartSurface.chartModifiers.add(
113        new ZoomExtentsModifier(),
114        new ZoomPanModifier({ enableZoom: true }),
115        new MouseWheelZoomModifier()
116    );
117
118    setTimeout(() => animateChartStyle(false), 1000);
119    setTimeout(() => animateChartStyle(true), 3000);
120
121    sciChartSurface.zoomExtents();
122
123    return { wasmContext, sciChartSurface, controls: { animateChartStyle } };
124};
125