React Smooth Stacked Mountain Chart

1import {
2    AUTO_COLOR,
3    BaseDataSeries,
4    ELegendOrientation,
5    ELegendPlacement,
6    LegendModifier,
7    makeIncArray,
8    MouseWheelZoomModifier,
9    NumericAxis,
10    ScaleAnimation,
11    SciChartSurface,
12    StackedMountainCollection,
13    SmoothStackedMountainRenderableSeries,
14    XyDataSeries,
15    ZoomExtentsModifier,
16    ZoomPanModifier,
17    WaveAnimation,
18    SweepAnimation,
19} from "scichart";
20import { appTheme } from "../../../theme";
21
22export const drawExample = async (rootElement: string | HTMLDivElement) => {
23    // Create a SciChartSurface
24    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
25        theme: appTheme.SciChartJsTheme,
26    });
27
28    // Create an xAxis, yAxis
29    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { labelPrecision: 0 }));
30    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { labelPrecision: 0 }));
31
32    // Group these StackedMountain series together in a StackedMountainCollection
33    const stackedMountainCollection = new StackedMountainCollection(wasmContext);
34
35    const xValues = makeIncArray(20);
36    const strokes = [
37        "#274b92ff",
38        "#3784bcff",
39        "#47bce5ff",
40        "#7a7eb9ff",
41        "#ae418cff",
42        "#cb5878ff",
43        "#e86f64ff",
44        "#a89588ff",
45        "#68bbadff",
46        "#6585a2ff",
47    ];
48    for (let i = 0; i < 10; i++) {
49        const yValues = xValues.map((x) => Math.random() * 10);
50        const stackedMountain = new SmoothStackedMountainRenderableSeries(wasmContext, {
51            id: i.toString(),
52            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
53            fill: AUTO_COLOR,
54            stroke: AUTO_COLOR,
55            strokeThickness: 2,
56            // From 3.4 Animations can be added to individual stacked series
57            animation: new ScaleAnimation({ duration: 500, delay: i * 200 }),
58        });
59        stackedMountainCollection.add(stackedMountain);
60    }
61
62    // Add the StackedMountainCollection to the chart
63    sciChartSurface.renderableSeries.add(stackedMountainCollection);
64
65    // Add some interactivity modifiers
66    sciChartSurface.chartModifiers.add(
67        new ZoomExtentsModifier(),
68        new ZoomPanModifier({ enableZoom: true }),
69        new MouseWheelZoomModifier()
70    );
71
72    const legendModifier = new LegendModifier({
73        placement: ELegendPlacement.TopLeft,
74        orientation: ELegendOrientation.Vertical,
75        showLegend: true,
76        showCheckboxes: true,
77        showSeriesMarkers: true,
78    });
79    // Add a legend to the chart to show the series
80    sciChartSurface.chartModifiers.add(legendModifier);
81
82    stackedMountainCollection.asArray().forEach((series) =>
83        series.isVisibleChanged.subscribe((data) => {
84            if (data.isVisible) {
85                // If you want to zoom to the new range when making a series visible, you need to force a recalculation of the Accumulated values first
86                //stackedMountainCollection.setAccumulatedValuesDirty();
87                //stackedMountainCollection.updateAccumulatedVectors();
88                //sciChartSurface.zoomExtents();
89                data.sourceSeries.runAnimation(
90                    new ScaleAnimation({
91                        duration: 500,
92                    })
93                );
94            } else {
95                // To animate out, we have to trick the series into remaining visible while the animation runs.
96                // We set the backing value of isVisible to true, and only set it false when the animation completes
97                // @ts-ignore
98                data.sourceSeries.isVisibleProperty = true;
99                data.sourceSeries.runAnimation(
100                    new ScaleAnimation({
101                        duration: 500,
102                        reverse: true,
103                        onCompleted: () => {
104                            (data.sourceSeries.dataSeries as BaseDataSeries).revertAnimationVectors();
105                            // @ts-ignore
106                            data.sourceSeries.isVisibleProperty = false;
107                            // Force the legend to update
108                            legendModifier.sciChartLegend.invalidateLegend();
109                            //sciChartSurface.zoomExtents();
110                        },
111                    })
112                );
113            }
114        })
115    );
116
117    sciChartSurface.zoomExtents();
118
119    const toggleHundredPercentMode = (value: boolean) => {
120        stackedMountainCollection.isOneHundredPercent = value;
121        sciChartSurface.zoomExtents(200);
122    };
123
124    return { sciChartSurface, controls: { toggleHundredPercentMode } };
125};
126