JavaScript Polar Gauge Fifo Dashboard

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