React Arc Gauge & FIFO Scrolling Charts Dashboard Example

1import {
2    Rect,
3    XyDataSeries,
4    PolarNumericAxis,
5    EPolarAxisMode,
6    NumberRange,
7    EAxisAlignment,
8    SciChartSurface,
9    SciChartPolarSubSurface,
10    ECoordinateMode,
11    EVerticalAnchorPoint,
12    EHorizontalAnchorPoint,
13    SciChartSubSurface,
14    NumericAxis,
15    FastLineRenderableSeries,
16    DateTimeNumericAxis,
17    NativeTextAnnotation,
18    PolarArcAnnotation,
19    Thickness,
20    EAutoRange,
21} from "scichart";
22import { appTheme } from "../../../theme";
23
24const drawGaugeSubchart = async (
25    parentSurface: SciChartSurface, 
26    gaugeOptions: {
27        startValue: number,
28        position: Rect
29    }
30) => {
31    const { startValue, position } = gaugeOptions;
32
33    // Create the SciChartPolarSubSurface
34    const sciChartSurface = SciChartPolarSubSurface.createSubSurface(parentSurface, {
35        padding: new Thickness(0, 10, 10, 10),
36        position: position,
37        background: "transparent",
38        loader: false
39    });
40
41    // Constants that won't change
42    const gaugeRange = new NumberRange(0, 10);
43    const gradientColors = [appTheme.VividGreen, appTheme.VividOrange, appTheme.VividPink];
44    const columnYValues = [5, 7.5, 10];
45    
46    // Pre-calculate the color thresholds
47    const colorThresholds = columnYValues.map((val, i) => ({
48        threshold: val,
49        color: gradientColors[i]
50    }));
51
52    const radialXAxis = new PolarNumericAxis(parentSurface.webAssemblyContext2D, {
53        polarAxisMode: EPolarAxisMode.Radial,
54        axisAlignment: EAxisAlignment.Right,
55        drawMinorGridLines: false,
56        drawMajorGridLines: false,
57        drawMajorTickLines: false,
58        drawMinorTickLines: false,
59        drawLabels: false,
60    });
61    sciChartSurface.xAxes.add(radialXAxis);
62
63    const angularYAxis = new PolarNumericAxis(parentSurface.webAssemblyContext2D, {
64        polarAxisMode: EPolarAxisMode.Angular,
65        axisAlignment: EAxisAlignment.Top,
66        visibleRange: gaugeRange, 
67        zoomExtentsToInitialRange: true,
68        flippedCoordinates: true,
69        totalAngle: Math.PI * 1.4,
70        startAngle: - Math.PI * 0.2,
71        drawMinorGridLines: false,
72        drawMajorGridLines: false,
73        drawMinorTickLines: false,
74        drawMajorTickLines: false,
75        drawLabels: false
76    });
77    sciChartSurface.yAxes.add(angularYAxis);
78
79    // gray background arc
80    const backgroundArc = new PolarArcAnnotation({
81        x2: 7, 
82        x1: 9.4,
83        y1: gaugeRange.min,
84        y2: gaugeRange.max,
85        fill: "#88888822",
86        strokeThickness: 0
87    });
88    sciChartSurface.annotations.add(backgroundArc);
89
90    // Add 3 thin arc sectors
91    columnYValues.forEach((yVal, i) => {
92        const thinArc = new PolarArcAnnotation({
93            x2: 9.7, 
94            x1: 10,
95            y1: columnYValues[i-1] ?? 0, 
96            y2: yVal,
97            fill: gradientColors[i], 
98            strokeThickness: 0
99        });
100        sciChartSurface.annotations.add(thinArc);
101    });
102
103    // Initial color calculation
104    const getColorForValue = (value: number) => {
105        const threshold = colorThresholds.find(t => value <= t.threshold);
106        return threshold ? threshold.color : gradientColors[gradientColors.length - 1];
107    };
108    
109    const initialColor = getColorForValue(startValue);
110
111    const valueArc = new PolarArcAnnotation({
112        id: "value_arc",
113        x2: 7, 
114        x1: 9.4,
115        y1: gaugeRange.min,
116        y2: startValue,
117        fill: initialColor,
118        strokeThickness: 0
119    });
120    sciChartSurface.annotations.add(valueArc);
121    
122    const centeredText = new NativeTextAnnotation({
123        text: `${startValue.toFixed(2)}`,
124        x1: 0,
125        y1: 0,
126        textColor: initialColor,
127        fontSize: 45,
128        xCoordinateMode: ECoordinateMode.DataValue,
129        yCoordinateMode: ECoordinateMode.DataValue,
130        verticalAnchorPoint: EVerticalAnchorPoint.Center,
131        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
132    });
133    sciChartSurface.annotations.add(centeredText);
134
135    function animateGaugeArc(from: number, to: number, steps = 10){
136        const step = (to - from) / steps;
137        let currentValue = from;
138
139        for (let i = 0; i <= steps; i++) {
140            setTimeout(() => {
141                valueArc.y2 = currentValue;
142                currentValue += step;
143            }, i * 16.67); // ~60 FPS
144        }
145    }
146
147    // Optimized update function
148    function updateGaugeValue(newVal: number) {
149        // Only update if value actually changed
150        if (valueArc.y2 !== newVal) {
151            const newColor = getColorForValue(newVal);
152            
153            // Only update color if it changed
154            if (valueArc.fill !== newColor) {
155                valueArc.fill = newColor; // todo: fix
156                valueArc.stroke = newColor;
157                valueArc.invalidateParentCallback();
158                centeredText.textColor = newColor;
159            }
160            
161            centeredText.text = `${newVal.toFixed(2)}`;
162
163            // Animate the arc
164            animateGaugeArc(valueArc.y2, newVal);
165        }
166    }
167
168    return { 
169        sciChartSurface, 
170        controls: { 
171            updateGaugeValue
172        } 
173    };
174};
175
176const drawFifoSubchart = async (
177    parentSurface: SciChartSurface, 
178    options: {
179        position: Rect,
180        seriesColor: string
181    }
182) => {
183    const { position, seriesColor } = options;
184
185    const fifoSubchart1 = SciChartSubSurface.createSubSurface(parentSurface, {
186        theme: appTheme.SciChartJsTheme,
187        position: position, 
188    });
189
190    fifoSubchart1.xAxes.add(new DateTimeNumericAxis(parentSurface.webAssemblyContext2D, {
191        visibleRange: new NumberRange(Date.now(), Date.now() + 12000), // 1 minute range
192        autoRange: EAutoRange.Always
193    }));
194    const yAxis = new NumericAxis(parentSurface.webAssemblyContext2D, {
195        labelPrecision: 0,
196        visibleRange: new NumberRange(-1, 11),
197    })
198    fifoSubchart1.yAxes.add(yAxis);
199
200    const dataSeries = new XyDataSeries(parentSurface.webAssemblyContext2D, {
201        xValues: [],
202        yValues: [],
203        fifoCapacity: 100,
204        dataSeriesName: "FIFO Data Series",
205    });
206
207    const fifoSeries1 = new FastLineRenderableSeries(parentSurface.webAssemblyContext2D, {
208        dataSeries: dataSeries,
209        stroke: seriesColor,
210        strokeThickness: 3,
211    })
212    fifoSubchart1.renderableSeries.add(fifoSeries1);
213
214    return {
215        sciChartSurface: fifoSubchart1,
216        controls: {
217            appendData: ( x: number, y: number ) => {
218                dataSeries.append(x, y);
219            }
220        }
221    }
222}
223
224export const drawExample = async (rootElement: string | HTMLDivElement) => {
225    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
226        theme: appTheme.SciChartJsTheme,
227    });
228
229    // Polar Subchart 1
230    const { sciChartSurface: p1Sub, controls: p1Controls } = await drawGaugeSubchart(sciChartSurface, {
231        startValue: 8.20, 
232        position: new Rect(0, 0, 0.4, 0.5)
233    });
234    
235    // Polar Subchart 2
236    const { sciChartSurface: p2Sub, controls: p2Controls } = await drawGaugeSubchart(sciChartSurface, {
237        startValue: 4.20, 
238        position: new Rect(0, 0.5, 0.4, 0.5)
239    });
240
241    // Cartesian Subchart 1
242    const { sciChartSurface: f1Sub, controls: f1Controls } = await drawFifoSubchart(sciChartSurface, {
243        position: new Rect(0.4, 0, 0.6, 0.5),
244        seriesColor: appTheme.VividPink
245    })
246
247    // Cartesian Subchart 2
248    const { sciChartSurface: f2Sub, controls: f2Controls } = await drawFifoSubchart(sciChartSurface, {
249        position: new Rect(0.4, 0.5, 0.6, 0.5),
250        seriesColor: appTheme.VividTeal
251    })
252
253    let lastX = Date.now();
254    let lastY = 0;
255
256    // Mock data updates
257    setInterval(() => {
258        const x = lastX += 100;
259        const y = Math.min(
260            Math.max(
261                lastY += Math.random() * 2 - 1, 
262                0
263            ), 
264            10
265        ); // clamp random walk between 0 and 10
266        lastY = y;
267
268        p1Controls.updateGaugeValue(y);
269        p2Controls.updateGaugeValue(10 - y);
270
271        f1Controls.appendData(x, y);
272        f2Controls.appendData(x, 10 - y);
273    }, 100); // 10 appends per second
274
275    return { sciChartSurface, wasmContext };
276};