React Realtime Mountain Chart

1import { appTheme } from "../../../theme";
2import {
3    AnimationToken,
4    CustomAnnotation,
5    DoubleAnimator,
6    easing,
7    EHorizontalAnchorPoint,
8    EVerticalAnchorPoint,
9    FastMountainRenderableSeries,
10    GradientParams,
11    NumericAxis,
12    NumberRange,
13    Point,
14    TEasingFn,
15    SciChartSurface,
16    XyDataSeries,
17    EDataChangeType,
18    GenericAnimation,
19} from "scichart";
20import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
21
22export const drawExample = async (rootElement: string | HTMLDivElement) => {
23    // Create the SciChartSurface in the div 'scichart-root'
24    // The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
25    // instance must be passed to other types that exist on the same surface.
26    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
27        theme: appTheme.SciChartJsTheme,
28    });
29
30    // Create an X,Y Axis and add to the chart
31    const xAxis = new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) });
32    const yAxis = new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) });
33
34    sciChartSurface.xAxes.add(xAxis);
35    sciChartSurface.yAxes.add(yAxis);
36
37    // Generate some initial random data for the example
38    const generator = new RandomWalkGenerator();
39    const initialValues = generator.getRandomWalkSeries(50);
40
41    // Add a mountain series with initial data
42    const dataSeries = new XyDataSeries(wasmContext, {
43        xValues: initialValues.xValues,
44        yValues: initialValues.yValues,
45    });
46    sciChartSurface.renderableSeries.add(
47        new FastMountainRenderableSeries(wasmContext, {
48            dataSeries,
49            fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
50                { color: appTheme.VividSkyBlue + "77", offset: 0 },
51                { color: "Transparent", offset: 1 },
52            ]),
53            stroke: appTheme.VividSkyBlue,
54            strokeThickness: 4,
55        })
56    );
57
58    // The animated pulsing dot at the end of the chart is rendered with this SVG annotation
59    const svgString = `<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
60            <rect x="0" y="0" width="100%" height="100%" fill="transparent"/>
61            <circle cx="25" cy="25" fill="${appTheme.VividTeal}" r="5" stroke="${appTheme.VividTeal}">
62                <animate attributeName="r" from="5" to="25" dur="1s" begin="0s" repeatCount="indefinite"/>
63                <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0s" repeatCount="indefinite"/>
64            </circle>
65            <circle cx="25" cy="25" fill="${appTheme.VividSkyBlue}" r="5"/>
66        </svg>`;
67    const pulsingDotAnnotation = new CustomAnnotation({
68        x1: initialValues.xValues[initialValues.xValues.length - 1],
69        y1: initialValues.yValues[initialValues.yValues.length - 1],
70        xCoordShift: 0,
71        yCoordShift: 0,
72        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
73        verticalAnchorPoint: EVerticalAnchorPoint.Center,
74        svgString,
75    });
76
77    sciChartSurface.annotations.add(pulsingDotAnnotation);
78
79    let timerId: NodeJS.Timeout;
80    let animationToken: AnimationToken;
81    // This function performs animation on any XyDataSeries, animating the latest point only
82    // Be careful of reentrancy, e.g. calling animateXy more than once before previous animation has finished
83    // might require special handling
84    const animateXy = (xyDataSeries: XyDataSeries, endX: number, endY: number, duration: number, ease: TEasingFn) => {
85        const count = xyDataSeries.count();
86        const startX = xyDataSeries.getNativeXValues().get(count - 1);
87        const startY = xyDataSeries.getNativeYValues().get(count - 1);
88        xyDataSeries.append(startX, startY);
89        const animation = new GenericAnimation<number>({
90            from: 0,
91            to: 1,
92            onAnimate: (from, to, progress) => {
93                // Using the interpolation factor (ranges from 0..1) compute the X,Y value now
94                const currentX = (endX - startX) * progress + startX;
95                const currentY = (endY - startY) * progress + startY;
96                console.log(currentX, currentY);
97                // Update X,Y value by direct access to the inner webassembly arrays
98                xyDataSeries.getNativeXValues().set(count, currentX);
99                xyDataSeries.getNativeYValues().set(count, currentY);
100
101                // Force native redraw
102                xyDataSeries.notifyDataChanged(EDataChangeType.Update, count - 1, 1);
103
104                // update location of pulsing dot
105                pulsingDotAnnotation.x1 = currentX;
106                pulsingDotAnnotation.y1 = currentY;
107
108                // to just update, but if we want to zoom to fit, we must use zoomExtents
109                sciChartSurface.zoomExtents();
110
111                // update location of pulsing dot
112                pulsingDotAnnotation.x1 = currentX;
113                pulsingDotAnnotation.y1 = currentY;
114            },
115            ease,
116        });
117        sciChartSurface.addAnimation(animation);
118    };
119
120    // This is the loop where we add a new X,Y point and animate every 1 second to demonstrate animations
121    const runAddDataOnTimeout = () => {
122        if (sciChartSurface?.isDeleted) {
123            return;
124        }
125        const generated = generator.getRandomWalkSeries(1);
126        const x = generated.xValues[0];
127        const y = generated.yValues[0];
128        animateXy(dataSeries, x, y, 250, easing.outExpo);
129        timerId = setTimeout(runAddDataOnTimeout, 1000);
130    };
131
132    const startUpdate = () => {
133        if (timerId) {
134            stopUpdate();
135        }
136        runAddDataOnTimeout();
137    };
138
139    const stopUpdate = () => {
140        animationToken?.cancelAnimation();
141        clearTimeout(timerId);
142        timerId = undefined;
143    };
144
145    return { sciChartSurface, wasmContext, controls: { startUpdate, stopUpdate } };
146};
147