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(
191        new DateTimeNumericAxis(parentSurface.webAssemblyContext2D, {
192            visibleRange: new NumberRange(Date.now(), Date.now() + 12000), // 1 minute range
193            autoRange: EAutoRange.Always,
194        })
195    );
196    const yAxis = new NumericAxis(parentSurface.webAssemblyContext2D, {
197        labelPrecision: 0,
198        visibleRange: new NumberRange(-1, 11),
199    });
200    fifoSubchart1.yAxes.add(yAxis);
201
202    const dataSeries = new XyDataSeries(parentSurface.webAssemblyContext2D, {
203        xValues: [],
204        yValues: [],
205        fifoCapacity: 100,
206        dataSeriesName: "FIFO Data Series",
207    });
208
209    const fifoSeries1 = new FastLineRenderableSeries(parentSurface.webAssemblyContext2D, {
210        dataSeries: dataSeries,
211        stroke: seriesColor,
212        strokeThickness: 3,
213    });
214    fifoSubchart1.renderableSeries.add(fifoSeries1);
215
216    return {
217        sciChartSurface: fifoSubchart1,
218        controls: {
219            appendData: (x: number, y: number) => {
220                dataSeries.append(x, y);
221            },
222        },
223    };
224};
225
226export const drawExample = async (rootElement: string | HTMLDivElement) => {
227    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
228        theme: appTheme.SciChartJsTheme,
229    });
230
231    // Polar Subchart 1
232    const { sciChartSurface: p1Sub, controls: p1Controls } = await drawGaugeSubchart(sciChartSurface, {
233        startValue: 8.2,
234        position: new Rect(0, 0, 0.4, 0.5),
235    });
236
237    // Polar Subchart 2
238    const { sciChartSurface: p2Sub, controls: p2Controls } = await drawGaugeSubchart(sciChartSurface, {
239        startValue: 4.2,
240        position: new Rect(0, 0.5, 0.4, 0.5),
241    });
242
243    // Cartesian Subchart 1
244    const { sciChartSurface: f1Sub, controls: f1Controls } = await drawFifoSubchart(sciChartSurface, {
245        position: new Rect(0.4, 0, 0.6, 0.5),
246        seriesColor: appTheme.VividPink,
247    });
248
249    // Cartesian Subchart 2
250    const { sciChartSurface: f2Sub, controls: f2Controls } = await drawFifoSubchart(sciChartSurface, {
251        position: new Rect(0.4, 0.5, 0.6, 0.5),
252        seriesColor: appTheme.VividTeal,
253    });
254
255    let lastX = Date.now();
256    let lastY = 0;
257
258    // Mock data updates
259    setInterval(() => {
260        const x = (lastX += 100);
261        const y = Math.min(Math.max((lastY += Math.random() * 2 - 1), 0), 10); // clamp random walk between 0 and 10
262        lastY = y;
263
264        p1Controls.updateGaugeValue(y);
265        p2Controls.updateGaugeValue(10 - y);
266
267        f1Controls.appendData(x, y);
268        f2Controls.appendData(x, 10 - y);
269    }, 100); // 10 appends per second
270
271    return { sciChartSurface, wasmContext };
272};
273