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