Angular Gauge Charts

1import {
2    EAxisAlignment,
3    ECoordinateMode,
4    EPolarAxisMode,
5    NumberRange,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    Thickness,
9    PolarPointerAnnotation,
10    EPolarLabelMode,
11    TextAnnotation,
12    EVerticalAnchorPoint,
13    EHorizontalAnchorPoint,
14    EAnnotationLayer,
15    EStrokeLineJoin,
16    PolarArcAnnotation,
17    NativeTextAnnotation,
18    GradientParams,
19    Point,
20    PolarColumnRenderableSeries,
21    EColumnMode,
22    XyxDataSeries,
23} from "scichart";
24import { appTheme } from "../../../theme";
25
26const DARK_BLUE = "#111111";
27const POINTER_VALUE = 62;
28
29export const getChartsInitializationAPI = () => {
30    const gauge1 = async (rootElement: string | HTMLDivElement) => {
31        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
32            padding: new Thickness(0, 0, 0, 0),
33        });
34
35        const columnYValues = [50, 70, 80, 90, 100];
36        const GRADIENT_COLROS = [
37            appTheme.VividPink,
38            appTheme.VividOrange,
39            appTheme.VividTeal,
40            appTheme.Indigo,
41            appTheme.DarkIndigo,
42        ];
43
44        const radialXAxis = new PolarNumericAxis(wasmContext, {
45            polarAxisMode: EPolarAxisMode.Radial,
46            axisAlignment: EAxisAlignment.Right,
47
48            // start labels in sync with angular axis
49            startAngle: - Math.PI / 4,
50
51            drawLabels: false,
52            drawMinorGridLines: false,
53            drawMajorGridLines: false,
54            drawMajorTickLines: false,
55            drawMinorTickLines: false,
56        });
57        sciChartSurface.xAxes.add(radialXAxis);
58
59        const angularYAxis = new PolarNumericAxis(wasmContext, {
60            polarAxisMode: EPolarAxisMode.Angular,
61            axisAlignment: EAxisAlignment.Top,
62            visibleRange: new NumberRange(0, 100), // 0 to 100
63            zoomExtentsToInitialRange: true,
64
65            flippedCoordinates: true,
66            useNativeText: true,
67            totalAngle: (Math.PI * 3) / 2,
68            startAngle: - Math.PI / 4,
69
70            drawMinorGridLines: false,
71            drawMajorGridLines: false,
72            drawMinorTickLines: false,
73            drawMajorTickLines: false,
74            labelPrecision: 0,
75            labelStyle: {
76                color: "#FFFFFF",
77            },
78        });
79        angularYAxis.labelProvider.formatLabel = (value: number) => {
80            if (columnYValues.includes(value) || value === 0) {
81                return value.toFixed(0);
82            }
83            return "";
84        };
85        sciChartSurface.yAxes.add(angularYAxis);
86
87        // Add 5 background arc sectors
88        columnYValues.forEach((yVal, i) => {
89            const highlightArc = new PolarArcAnnotation({
90                x2: 8,
91                x1: 10,
92
93                y1: columnYValues[i - 1] ?? 0,
94                y2: yVal,
95
96                fill: GRADIENT_COLROS[i],
97                strokeThickness: 2,
98            });
99            sciChartSurface.annotations.add(highlightArc);
100        });
101
102        const pointerAnnotation = new PolarPointerAnnotation({
103            x1: POINTER_VALUE,
104            y1: 8,
105            xCoordinateMode: ECoordinateMode.DataValue,
106            yCoordinateMode: ECoordinateMode.DataValue,
107
108            pointerStyle: {
109                baseSize: 0.2,
110                fill: "#FFFFFF",
111                stroke: "#FFFFFF",
112                strokeWidth: 2,
113            },
114
115            pointerCenterStyle: {
116                size: 0.2,
117                fill: DARK_BLUE,
118                stroke: "#FFFFFF",
119                strokeWidth: 2,
120            },
121        });
122        sciChartSurface.annotations.add(pointerAnnotation);
123
124        return { sciChartSurface, wasmContext };
125    };
126
127    const gauge2 = async (rootElement: string | HTMLDivElement) => {
128        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
129            padding: new Thickness(10, 0, 10, 0),
130        });
131
132        const radialYAxis = new PolarNumericAxis(wasmContext, {
133            polarAxisMode: EPolarAxisMode.Radial,
134            axisAlignment: EAxisAlignment.Right,
135            zoomExtentsToInitialRange: true,
136            visibleRange: new NumberRange(0, 5),
137            drawLabels: false,
138            drawMinorGridLines: false,
139            drawMajorGridLines: false,
140            drawMajorTickLines: false,
141            drawMinorTickLines: false,
142        });
143        sciChartSurface.yAxes.add(radialYAxis);
144
145        const angularXAxis = new PolarNumericAxis(wasmContext, {
146            polarAxisMode: EPolarAxisMode.Angular,
147            axisAlignment: EAxisAlignment.Top,
148            flippedCoordinates: true,
149            visibleRange: new NumberRange(-10, 10),
150            useNativeText: true,
151            startAngle: 0,
152            totalAngleDegrees: 90,
153
154            autoTicks: false,
155            majorDelta: 5,
156
157            drawMinorGridLines: false,
158            drawMajorGridLines: false,
159            drawMinorTickLines: false,
160            drawMajorTickLines: false,
161            labelPrecision: 0,
162            labelStyle: {
163                color: "#FFFFFF",
164            },
165        });
166        sciChartSurface.xAxes.add(angularXAxis);
167
168        const column = new PolarColumnRenderableSeries(wasmContext, {
169            columnXMode: EColumnMode.StartEnd,
170            dataSeries: new XyxDataSeries(wasmContext, {
171                xValues: [-10], // start
172                x1Values: [10], //end
173                yValues: [5], // top
174            }),
175            defaultY1: 4, // bottom
176            fillLinearGradient: new GradientParams(new Point(1, 0), new Point(0, 0), [
177                { offset: 0, color: appTheme.VividPink },
178                { offset: 0.4, color: appTheme.VividOrange },
179                { offset: 0.7, color: appTheme.Indigo },
180                { offset: 1, color: appTheme.DarkIndigo },
181            ]),
182            stroke: "#FFFFFF",
183        });
184        sciChartSurface.renderableSeries.add(column);
185
186        const pointerAnnotation = new PolarPointerAnnotation({
187            x1: -3,
188            y1: 4,
189            xCoordinateMode: ECoordinateMode.DataValue,
190            yCoordinateMode: ECoordinateMode.DataValue,
191
192            pointerStyle: {
193                baseSize: 0.05,
194                fill: DARK_BLUE,
195                stroke: DARK_BLUE,
196                backExtensionSize: 0.1,
197            },
198
199            pointerCenterStyle: {
200                size: 0.1,
201                fill: appTheme.Indigo,
202                stroke: DARK_BLUE,
203                strokeWidth: 6,
204            },
205        });
206        sciChartSurface.annotations.add(pointerAnnotation);
207
208        return { sciChartSurface, wasmContext };
209    };
210
211    const gauge3 = async (rootElement: string | HTMLDivElement) => {
212        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
213            padding: new Thickness(0, 0, 0, 0),
214        });
215
216        const radialXAxis = new PolarNumericAxis(wasmContext, {
217            visibleRange: new NumberRange(0, 10),
218            labelStyle: { padding: new Thickness(0, 0, 0, 0) },
219            axisAlignment: EAxisAlignment.Right,
220            polarAxisMode: EPolarAxisMode.Radial,
221            useNativeText: true,
222            drawLabels: false,
223
224            autoTicks: false,
225            majorDelta: 10,
226            drawMajorGridLines: true,
227            majorGridLineStyle: {
228                color: "#FFFFFF",
229                strokeThickness: 2,
230            },
231
232            drawMinorGridLines: false,
233            drawMajorTickLines: false,
234            drawMinorTickLines: false,
235            totalAngle: (Math.PI * 3) / 2,
236        });
237        sciChartSurface.xAxes.add(radialXAxis);
238
239        const psiAxis = new PolarNumericAxis(wasmContext, {
240            polarAxisMode: EPolarAxisMode.Angular,
241            axisAlignment: EAxisAlignment.Top,
242            polarLabelMode: EPolarLabelMode.Parallel,
243            visibleRange: new NumberRange(0, 100),
244            flippedCoordinates: true,
245            useNativeText: true,
246            totalAngle: (Math.PI * 3) / 2,
247            startAngle: - Math.PI / 4,
248            autoTicks: false,
249            majorDelta: 10,
250
251            drawMajorGridLines: false,
252            drawMinorGridLines: false,
253
254            drawMajorTickLines: true,
255            majorTickLineStyle: {
256                color: appTheme.VividPink,
257                strokeThickness: 2,
258                tickSize: 10,
259            },
260            drawMinorTickLines: true,
261            minorTickLineStyle: {
262                color: appTheme.VividPink,
263                strokeThickness: 0.5,
264                tickSize: 6,
265            },
266
267            isInnerAxis: false,
268            labelPrecision: 0,
269            labelStyle: {
270                color: appTheme.VividPink,
271            },
272        });
273        const barAxis = new PolarNumericAxis(wasmContext, {
274            polarAxisMode: EPolarAxisMode.Angular,
275            axisAlignment: EAxisAlignment.Top,
276            polarLabelMode: EPolarLabelMode.Horizontal,
277            visibleRange: new NumberRange(0, 7),
278            flippedCoordinates: true,
279            useNativeText: true,
280            totalAngle: (Math.PI * 3) / 2,
281            startAngle: Math.PI * 2 - Math.PI / 4,
282            autoTicks: false,
283            majorDelta: 1,
284
285            drawMajorGridLines: false,
286            drawMinorGridLines: false,
287
288            drawMajorTickLines: true,
289            majorTickLineStyle: {
290                color: "#FFFFFF",
291                strokeThickness: 2,
292                tickSize: 10,
293            },
294            drawMinorTickLines: true,
295            minorTickLineStyle: {
296                color: "#FFFFFF",
297                strokeThickness: 0.5,
298                tickSize: 6,
299            },
300
301            isInnerAxis: true,
302            labelPrecision: 0,
303            labelStyle: {
304                color: "white",
305            },
306        });
307        sciChartSurface.yAxes.add(psiAxis, barAxis);
308
309        const pointerAnnotation = new PolarPointerAnnotation({
310            x1: POINTER_VALUE,
311            y1: 10,
312            xCoordinateMode: ECoordinateMode.DataValue,
313            yCoordinateMode: ECoordinateMode.DataValue,
314            annotationLayer: EAnnotationLayer.Background,
315
316            pointerStyle: {
317                baseSize: 0.1,
318                stroke: DARK_BLUE,
319                fill: DARK_BLUE,
320                backExtensionSize: 0.3,
321                strokeWidth: 2,
322            },
323
324            pointerCenterStyle: {
325                size: 0.15,
326                stroke: DARK_BLUE,
327                fill: "#FFFFFF",
328                strokeWidth: 5,
329            },
330
331            pointerArrowStyle: {
332                headDepth: 0.8,
333                width: 0.15,
334                height: 0.25,
335                fill: DARK_BLUE,
336                stroke: DARK_BLUE,
337            },
338
339            strokeLineJoin: EStrokeLineJoin.Miter,
340        });
341
342        const barText = new TextAnnotation({
343            text: "bar",
344            x1: 0,
345            y1: 0,
346            fontSize: 20,
347            verticalAnchorPoint: EVerticalAnchorPoint.Top,
348            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
349            padding: new Thickness(30, 0, 0, 0),
350        });
351        const psiText = new TextAnnotation({
352            text: "psi",
353            x1: 0,
354            y1: 0,
355            fontSize: 20,
356            textColor: appTheme.VividPink,
357            verticalAnchorPoint: EVerticalAnchorPoint.Top,
358            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
359            padding: new Thickness(50, 0, 0, 0),
360        });
361
362        sciChartSurface.annotations.add(pointerAnnotation, barText, psiText);
363
364        return { sciChartSurface, wasmContext };
365    };
366
367    const gauge4 = async (rootElement: string | HTMLDivElement) => {
368        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
369            padding: new Thickness(0, 0, 0, 0),
370        });
371
372        const localPointerValue = 31;
373
374        const radialXAxis = new PolarNumericAxis(wasmContext, {
375            polarAxisMode: EPolarAxisMode.Radial,
376            axisAlignment: EAxisAlignment.Right,
377
378            visibleRange: new NumberRange(0, 10),
379            zoomExtentsToInitialRange: true,
380
381            startAngle: - Math.PI / 4,
382
383            drawLabels: false,
384            drawMinorGridLines: false,
385            drawMajorGridLines: false,
386            drawMajorTickLines: false,
387            drawMinorTickLines: false,
388        });
389        sciChartSurface.xAxes.add(radialXAxis);
390
391        const angularYAxis = new PolarNumericAxis(wasmContext, {
392            polarAxisMode: EPolarAxisMode.Angular,
393            axisAlignment: EAxisAlignment.Top,
394            visibleRange: new NumberRange(0, 50),
395            zoomExtentsToInitialRange: true,
396
397            polarLabelMode: EPolarLabelMode.Parallel,
398            labelStyle: {
399                color: "#FFFFFF",
400                padding: new Thickness(5, 5, 5, 5),
401            },
402
403            flippedCoordinates: true,
404            useNativeText: true,
405            totalAngle: (Math.PI * 3) / 2,
406            startAngle: - Math.PI / 4,
407
408            drawMinorGridLines: false,
409            drawMajorGridLines: false,
410            drawMinorTickLines: false,
411            drawMajorTickLines: false,
412            labelPrecision: 0,
413        });
414        sciChartSurface.yAxes.add(angularYAxis);
415
416        // Add a background arc sector
417        const backgroundArc = new PolarArcAnnotation({
418            x2: 8,
419            x1: 10,
420            y1: 0,
421            y2: 50,
422
423            fill: DARK_BLUE,
424            strokeThickness: 2,
425        });
426        // Add the highlight arc sector - represents the current value
427        const highlightArc = new PolarArcAnnotation({
428            x2: 8,
429            x1: 10,
430            y1: 0,
431            y2: localPointerValue,
432
433            fill: appTheme.VividPink,
434            strokeThickness: 2,
435        });
436        sciChartSurface.annotations.add(backgroundArc, highlightArc);
437
438        const pointerAnnotation = new PolarPointerAnnotation({
439            x1: localPointerValue,
440            y1: 9,
441            xCoordinateMode: ECoordinateMode.DataValue,
442            yCoordinateMode: ECoordinateMode.DataValue,
443            strokeLineJoin: EStrokeLineJoin.Round,
444
445            pointerStyle: {
446                baseSize: 0,
447                strokeWidth: 0,
448            },
449
450            pointerArrowStyle: {
451                strokeWidth: 2,
452                fill: "#FFFFFF",
453                stroke: DARK_BLUE,
454                height: 0.3,
455                width: 0.05,
456            },
457        });
458
459        // Customize the pointer arrow annotation to make it look like a pill shape
460        pointerAnnotation.getPointerArrowSvg = (
461            pointerLength: number,
462            height: number,
463            width: number,
464            headDepth: number
465        ) => {
466            const size = 2 * pointerLength;
467            return `<rect 
468                x="${size - height / 2}" 
469                y="${pointerLength - width / 2}" 
470                width="${height}" 
471                height="${width}" 
472                fill="${pointerAnnotation.pointerArrowStyle.fill}"
473                stroke="${pointerAnnotation.pointerArrowStyle.stroke}"
474                stroke-width="${2}"
475                rx="${width / 2}"
476                ry="${width / 2}"
477            />`;
478        };
479
480        const centeredText = new NativeTextAnnotation({
481            text: `${localPointerValue}`,
482            x1: 0,
483            y1: 0,
484            textColor: "#FFFFFF",
485            fontSize: 38,
486            padding: new Thickness(0, 0, 20, 0),
487            xCoordinateMode: ECoordinateMode.DataValue,
488            yCoordinateMode: ECoordinateMode.DataValue,
489            verticalAnchorPoint: EVerticalAnchorPoint.Center,
490            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
491        });
492
493        sciChartSurface.annotations.add(pointerAnnotation, centeredText);
494
495        return { sciChartSurface, wasmContext };
496    };
497
498    const gauge5 = async (rootElement: string | HTMLDivElement) => {
499        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
500            padding: new Thickness(0, 0, 0, 0),
501        });
502        const columnYValues = [50, 75, 100];
503        const GRADIENT_COLROS = [appTheme.VividGreen, appTheme.VividOrange, appTheme.VividPink];
504
505        const radialXAxis = new PolarNumericAxis(wasmContext, {
506            polarAxisMode: EPolarAxisMode.Radial,
507            axisAlignment: EAxisAlignment.Right,
508
509            // start labels in sync with angular axis
510            startAngle: (Math.PI * 3) / 2 + Math.PI / 4,
511
512            drawLabels: false,
513            drawMinorGridLines: false,
514            drawMajorGridLines: false,
515            drawMajorTickLines: false,
516            drawMinorTickLines: false,
517        });
518        sciChartSurface.xAxes.add(radialXAxis);
519
520        const angularYAxis = new PolarNumericAxis(wasmContext, {
521            polarAxisMode: EPolarAxisMode.Angular,
522            axisAlignment: EAxisAlignment.Top,
523            polarLabelMode: EPolarLabelMode.Perpendicular,
524
525            visibleRange: new NumberRange(0, 100), // 0 to 100
526            zoomExtentsToInitialRange: true,
527
528            flippedCoordinates: true,
529            useNativeText: true,
530            totalAngleDegrees: 220,
531            startAngleDegrees: -20, // (180 )
532
533            drawMinorGridLines: false,
534            drawMajorGridLines: false,
535            drawMinorTickLines: false,
536            drawMajorTickLines: false,
537            labelPrecision: 0,
538            labelStyle: {
539                color: "#FFFFFF",
540            },
541        });
542        sciChartSurface.yAxes.add(angularYAxis);
543
544        // the gray background arc
545        const backgroundArc = new PolarArcAnnotation({
546            x2: 8.1,
547            x1: 10,
548
549            y1: 0,
550            y2: 100,
551
552            fill: "#88888844",
553            strokeThickness: 0,
554        });
555        sciChartSurface.annotations.add(backgroundArc);
556
557        // Add 3 thin background arc sectors
558        let hasPointerPassedValue = false;
559        columnYValues.forEach((yVal, i) => {
560            const thinArc = new PolarArcAnnotation({
561                x2: 7.6,
562                x1: 7.9,
563
564                y1: columnYValues[i - 1] ?? 0,
565                y2: yVal, // always present and visible
566
567                fill: GRADIENT_COLROS[i],
568                strokeThickness: 0,
569            });
570            sciChartSurface.annotations.add(thinArc);
571
572            const valueArc = new PolarArcAnnotation({
573                id: `arc${i}`,
574
575                x2: 8.1,
576                x1: 10,
577                y1: columnYValues[i - 1] ?? 0,
578                y2: hasPointerPassedValue ? columnYValues[i - 1] ?? 0 : yVal > POINTER_VALUE ? POINTER_VALUE : yVal,
579                // visible until the pointer passes the threshold
580
581                fill: GRADIENT_COLROS[i],
582                strokeThickness: 0,
583            });
584            sciChartSurface.annotations.add(valueArc);
585
586            if (yVal >= POINTER_VALUE) {
587                hasPointerPassedValue = true;
588            }
589        });
590
591        const pointerAnnotation = new PolarPointerAnnotation({
592            x1: POINTER_VALUE,
593            y1: 7.6,
594            xCoordinateMode: ECoordinateMode.DataValue,
595            yCoordinateMode: ECoordinateMode.DataValue,
596
597            pointerStyle: {
598                // hide line
599                baseSize: 0,
600                strokeWidth: 0,
601            },
602
603            pointerArrowStyle: {
604                strokeWidth: 3,
605                stroke: "white",
606                fill: "none",
607                height: 0.4,
608                width: 0.25,
609            },
610
611            strokeLineJoin: EStrokeLineJoin.Miter,
612        });
613        const centeredText = new NativeTextAnnotation({
614            text: `${POINTER_VALUE}`,
615            x1: 0,
616            y1: 0,
617            textColor: "#FFFFFF",
618            fontSize: 38,
619            padding: new Thickness(0, 0, 20, 0),
620            xCoordinateMode: ECoordinateMode.DataValue,
621            yCoordinateMode: ECoordinateMode.DataValue,
622            verticalAnchorPoint: EVerticalAnchorPoint.Center,
623            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
624        });
625        sciChartSurface.annotations.add(pointerAnnotation, centeredText);
626
627        return { sciChartSurface, wasmContext };
628    };
629
630    const gauge6 = async (rootElement: string | HTMLDivElement) => {
631        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
632            padding: new Thickness(15, 15, 15, 15), // optional padding to match the others 5 gauges with outer labels
633        });
634
635        const radialXAxis = new PolarNumericAxis(wasmContext, {
636            visibleRange: new NumberRange(0, 10),
637            labelStyle: { padding: new Thickness(0, 0, 0, 0) },
638            axisAlignment: EAxisAlignment.Right,
639            polarAxisMode: EPolarAxisMode.Radial,
640            useNativeText: true,
641            drawLabels: false,
642
643            autoTicks: false,
644            majorDelta: 10,
645            drawMajorGridLines: false,
646            drawMinorGridLines: false,
647            drawMajorTickLines: false,
648            drawMinorTickLines: false,
649            totalAngle: (Math.PI * 3) / 2,
650        });
651        sciChartSurface.xAxes.add(radialXAxis);
652
653        const angularYAxis = new PolarNumericAxis(wasmContext, {
654            polarAxisMode: EPolarAxisMode.Angular,
655            axisAlignment: EAxisAlignment.Top,
656            polarLabelMode: EPolarLabelMode.Horizontal,
657            visibleRange: new NumberRange(0, 7),
658            flippedCoordinates: true,
659            useNativeText: true,
660            totalAngle: (Math.PI * 3) / 2,
661            startAngle: Math.PI * 2 - Math.PI / 4,
662            autoTicks: false,
663            majorDelta: 1,
664            minorsPerMajor: 4,
665
666            drawMajorGridLines: false,
667            drawMinorGridLines: false,
668
669            drawMajorTickLines: true,
670            majorTickLineStyle: {
671                color: "#FFFFFF",
672                strokeThickness: 2.5,
673                tickSize: 14,
674            },
675            drawMinorTickLines: true,
676            minorTickLineStyle: {
677                color: "#FFFFFF",
678                strokeThickness: 0.5,
679                tickSize: 8,
680            },
681
682            isInnerAxis: true,
683            labelPrecision: 0,
684            labelStyle: {
685                color: "white",
686                fontSize: 25,
687                padding: Thickness.fromNumber(8),
688            },
689        });
690        sciChartSurface.yAxes.add(angularYAxis);
691
692        const pointerAnnotation = new PolarPointerAnnotation({
693            x1: 4.3,
694            y1: 10,
695            // annotationLayer: EAnnotationLayer.Background,
696            xCoordinateMode: ECoordinateMode.DataValue,
697            yCoordinateMode: ECoordinateMode.DataValue,
698
699            pointerStyle: {
700                baseSize: 0.02,
701                fill: appTheme.VividPink,
702                stroke: appTheme.VividPink,
703                backExtensionSize: 0.2,
704            },
705
706            pointerCenterStyle: {
707                size: 0.25,
708                fill: DARK_BLUE,
709                stroke: DARK_BLUE,
710            },
711            isStrokeAboveCenter: true,
712            strokeLineJoin: EStrokeLineJoin.Round,
713        });
714
715        const dangerArcSector = new PolarArcAnnotation({
716            y1: 5,
717            y2: 7,
718            x1: 10,
719            x2: 9.4,
720            fill: appTheme.VividRed,
721            strokeThickness: 0,
722            annotationLayer: EAnnotationLayer.Background,
723        });
724
725        const outlineArcLine = new PolarArcAnnotation({
726            y1: 0,
727            y2: 7,
728
729            x1: 10,
730            x2: 9.7,
731            stroke: "#FFFFFF",
732            isLineMode: true,
733            strokeThickness: 3,
734            annotationLayer: EAnnotationLayer.Background,
735        });
736
737        sciChartSurface.annotations.add(pointerAnnotation, dangerArcSector, outlineArcLine);
738
739        return { sciChartSurface, wasmContext };
740    };
741
742    return {
743        gauge1,
744        gauge2,
745        gauge3,
746        gauge4,
747        gauge5,
748        gauge6,
749    };
750};
751