Realtime Ghosted Traces

1import {
2    CentralAxesLayoutManager,
3    EAxisAlignment,
4    EInnerAxisPlacementCoordinateMode,
5    FastLineRenderableSeries,
6    GlowEffect,
7    ICentralAxesLayoutManagerOptions,
8    NumberRange,
9    NumericAxis,
10    SciChartSurface,
11    XyDataSeries,
12} from "scichart";
13import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
14import { appTheme } from "../../../theme";
15// import { PerformanceMeasurementModifier } from "scichart-addons/PerformanceMeasurementModifier";
16
17const AMPLITUDE = 200;
18
19export const drawExample = async (rootElement: string | HTMLDivElement) => {
20    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
21        theme: appTheme.SciChartJsTheme,
22    });
23
24    // Optional parameters to control exact placement of the axis
25    // Below: These are defaults, but we specify them for completeness of the example
26    // Relative coordinate mode and 0.5 means 'place half way'
27    const options: ICentralAxesLayoutManagerOptions = {
28        horizontalAxisPositionCoordinateMode: EInnerAxisPlacementCoordinateMode.Relative,
29        verticalAxisPositionCoordinateMode: EInnerAxisPlacementCoordinateMode.Relative,
30        horizontalAxisPosition: 0.5,
31        verticalAxisPosition: 0.5,
32    };
33
34    // Configure x,y axis with central layout - oscilloscope style
35    sciChartSurface.xAxes.add(
36        new NumericAxis(wasmContext, {
37            visibleRange: new NumberRange(0, 900),
38            isInnerAxis: true,
39            axisAlignment: EAxisAlignment.Top,
40            axisBorder: {
41                borderTop: 1,
42            },
43        })
44    );
45
46    sciChartSurface.yAxes.add(
47        new NumericAxis(wasmContext, {
48            visibleRange: new NumberRange(-300, 300),
49            isInnerAxis: true,
50            axisAlignment: EAxisAlignment.Left,
51            axisBorder: {
52                borderLeft: 1,
53            },
54        })
55    );
56
57    // Control the placement of the axis by specifying CentralAxesLayoutManager
58    // and isInnerAxis property
59    sciChartSurface.layoutManager = new CentralAxesLayoutManager(options);
60
61    // sciChartSurface.chartModifiers.add(new PerformanceMeasurementModifier({ verbose: true }));
62
63    const addSeries = (stroke: string, opacity: number) => {
64        const amplitude = Math.random() * AMPLITUDE;
65        const effect = new GlowEffect(wasmContext, {
66            range: 0,
67            intensity: 0.5,
68        });
69        const { xValues, yValues } = ExampleDataProvider.getNoisySinewave(500, 900, 7, amplitude, 30);
70        const lineSeries = new FastLineRenderableSeries(wasmContext, { 
71            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
72            stroke, 
73            effect,
74            strokeThickness: 3,
75            opacity
76        });
77        sciChartSurface.renderableSeries.add(lineSeries);
78        return lineSeries;
79    };
80
81    const seriesColor = appTheme.VividTeal;
82    const series1 = addSeries(seriesColor, 1);
83    const series2 = addSeries(seriesColor, 0.9);
84    const series3 = addSeries(seriesColor, 0.8);
85    const series4 = addSeries(seriesColor, 0.7);
86    const series5 = addSeries(seriesColor, 0.6);
87    const series6 = addSeries(seriesColor, 0.5);
88    const series7 = addSeries(seriesColor, 0.4);
89    const series8 = addSeries(seriesColor, 0.3);
90    const series9 = addSeries(seriesColor, 0.2);
91    const series10 = addSeries(seriesColor, 0.1);
92
93    let timerId: NodeJS.Timeout;
94
95    const reassignRenderableSeries = () => {
96        const oldSeries = series10.dataSeries;
97        series10.dataSeries = series9.dataSeries;
98        series9.dataSeries = series8.dataSeries;
99        series8.dataSeries = series7.dataSeries;
100        series7.dataSeries = series6.dataSeries;
101        series6.dataSeries = series5.dataSeries;
102        series5.dataSeries = series4.dataSeries;
103        series4.dataSeries = series3.dataSeries;
104        series3.dataSeries = series2.dataSeries;
105        series2.dataSeries = series1.dataSeries;
106
107        const amplitude = Math.random() * AMPLITUDE;
108        const dataSeries = new XyDataSeries(wasmContext);
109        ExampleDataProvider.fillNoisySinewave(500, 900, 7, amplitude, 30, dataSeries);
110        series1.dataSeries = dataSeries;
111        // To prevent memory leak we should delete
112        oldSeries.delete();
113
114        timerId = setTimeout(reassignRenderableSeries, 20);
115    };
116
117    const stopUpdate = () => {
118        clearTimeout(timerId);
119        timerId = undefined;
120    };
121
122    // Buttons for chart
123    const startUpdate = () => {
124        if (timerId) {
125            stopUpdate();
126        }
127        reassignRenderableSeries();
128    };
129
130    return { wasmContext, sciChartSurface, controls: { startUpdate, stopUpdate } };
131};
132