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            labelStyle: {
41                color: appTheme.PaleSkyBlue,
42            },
43            axisBorder: {
44                borderTop: 1,
45                color: appTheme.VividSkyBlue,
46            },
47        })
48    );
49
50    sciChartSurface.yAxes.add(
51        new NumericAxis(wasmContext, {
52            visibleRange: new NumberRange(-300, 300),
53            isInnerAxis: true,
54            axisAlignment: EAxisAlignment.Left,
55            labelStyle: {
56                color: appTheme.PaleSkyBlue,
57            },
58            axisBorder: {
59                borderLeft: 1,
60                color: appTheme.VividSkyBlue,
61            },
62        })
63    );
64
65    // Control the placement of the axis by specifying CentralAxesLayoutManager
66    // and isInnerAxis property
67    sciChartSurface.layoutManager = new CentralAxesLayoutManager(options);
68
69    // sciChartSurface.chartModifiers.add(new PerformanceMeasurementModifier({ verbose: true }));
70
71    const addSeries = (stroke: string, opacity: number) => {
72        const amplitude = Math.random() * AMPLITUDE;
73        const effect = new GlowEffect(wasmContext, {
74            range: 0,
75            intensity: 0.5,
76        });
77        const lineSeries = new FastLineRenderableSeries(wasmContext, { stroke, effect });
78        lineSeries.strokeThickness = 3;
79        lineSeries.opacity = opacity;
80        sciChartSurface.renderableSeries.add(lineSeries);
81        const { xValues, yValues } = ExampleDataProvider.getNoisySinewave(500, 900, 7, amplitude, 30);
82        lineSeries.dataSeries = new XyDataSeries(wasmContext, { xValues, yValues });
83        return lineSeries;
84    };
85
86    const seriesColor = appTheme.VividTeal;
87    const series1 = addSeries(seriesColor, 1);
88    const series2 = addSeries(seriesColor, 0.9);
89    const series3 = addSeries(seriesColor, 0.8);
90    const series4 = addSeries(seriesColor, 0.7);
91    const series5 = addSeries(seriesColor, 0.6);
92    const series6 = addSeries(seriesColor, 0.5);
93    const series7 = addSeries(seriesColor, 0.4);
94    const series8 = addSeries(seriesColor, 0.3);
95    const series9 = addSeries(seriesColor, 0.2);
96    const series10 = addSeries(seriesColor, 0.1);
97
98    let timerId: NodeJS.Timeout;
99
100    const reassignRenderableSeries = () => {
101        const oldSeries = series10.dataSeries;
102        series10.dataSeries = series9.dataSeries;
103        series9.dataSeries = series8.dataSeries;
104        series8.dataSeries = series7.dataSeries;
105        series7.dataSeries = series6.dataSeries;
106        series6.dataSeries = series5.dataSeries;
107        series5.dataSeries = series4.dataSeries;
108        series4.dataSeries = series3.dataSeries;
109        series3.dataSeries = series2.dataSeries;
110        series2.dataSeries = series1.dataSeries;
111
112        const amplitude = Math.random() * AMPLITUDE;
113        const dataSeries = new XyDataSeries(wasmContext);
114        ExampleDataProvider.fillNoisySinewave(500, 900, 7, amplitude, 30, dataSeries);
115        series1.dataSeries = dataSeries;
116        // To prevent memory leak we should delete
117        oldSeries.delete();
118
119        timerId = setTimeout(reassignRenderableSeries, 20);
120    };
121
122    const stopUpdate = () => {
123        clearTimeout(timerId);
124        timerId = undefined;
125    };
126
127    // Buttons for chart
128    const startUpdate = () => {
129        if (timerId) {
130            stopUpdate();
131        }
132        reassignRenderableSeries();
133    };
134
135    return { wasmContext, sciChartSurface, controls: { startUpdate, stopUpdate } };
136};
137