Makes radial highlight width configurable

jaredjensen · Jul 27, 2024 · 0b880a8 · 0b880a8
1 parent 6b53f51
commit 0b880a8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/app/core/interfaces/widgets-interface.ts b/src/app/core/interfaces/widgets-interface.ts
@@ -143,6 +143,8 @@ export interface IWidgetSvcConfig {
     rotateFace?: boolean;
     /** Optional. GaugeSteel digital or bar */
     digitalMeter?: boolean;
+    /** Optional. Width of gauge highlights */
+    highlightsWidth?: number;
   }
   /** Used by numeric data Widget: Display minimum registered value since started */
   showMin?: boolean;

diff --git a/src/app/widget-config/modal-widget-config/modal-widget-config.component.html b/src/app/widget-config/modal-widget-config/modal-widget-config.component.html
@@ -168,6 +168,10 @@
                       <mat-option value="capacity">Capacity</mat-option>
                     </mat-select>
                   </mat-form-field>
+                  <mat-form-field formGroupName="gauge" class="options-grid-span2">
+                    <mat-label>Highlights Width</mat-label>
+                    <input type="number" min="0" max="25" matInput placeholder="Enter or select number..." name="highlightsWidth" formControlName="highlightsWidth" required>
+                  </mat-form-field>
 
               }
             }

diff --git a/src/app/widgets/widget-gauge-ng-radial/widget-gauge-ng-radial.component.ts b/src/app/widgets/widget-gauge-ng-radial/widget-gauge-ng-radial.component.ts
@@ -77,7 +77,8 @@ export class WidgetGaugeNgRadialComponent extends BaseWidgetComponent implements
         type: 'ngRadial', // capacity, measuring, marineCompass, baseplateCompass
         subType: 'measuring', // capacity, measuring, marineCompass, baseplateCompass
         enableTicks: true,
-        compassUseNumbers: false
+        compassUseNumbers: false,
+        highlightsWidth: 5,
       },
       numInt: 1,
       numDecimal: 0,
@@ -171,7 +172,7 @@ export class WidgetGaugeNgRadialComponent extends BaseWidgetComponent implements
     this.gaugeOptions.valueDec = this.widgetProperties.config.numDecimal !== undefined && this.widgetProperties.config.numDecimal !== null ? this.widgetProperties.config.numDecimal : 2;
     this.gaugeOptions.majorTicksInt = this.widgetProperties.config.numInt !== undefined && this.widgetProperties.config.numInt !== null ? this.widgetProperties.config.numInt : 1;
     this.gaugeOptions.majorTicksDec = this.widgetProperties.config.numDecimal !== undefined && this.widgetProperties.config.numDecimal !== null ? this.widgetProperties.config.numDecimal : 2;
-    this.gaugeOptions.highlightsWidth = 0;
+    this.gaugeOptions.highlightsWidth = this.widgetProperties.config.gauge.highlightsWidth !== undefined && this.widgetProperties.config.gauge.highlightsWidth !== null ? this.widgetProperties.config.gauge.highlightsWidth : 5;
 
     this.gaugeOptions.animation = true;
     this.gaugeOptions.animateOnInit = false;
@@ -379,7 +380,7 @@ export class WidgetGaugeNgRadialComponent extends BaseWidgetComponent implements
     };
     //@ts-ignore
     let highlights: LinearGaugeOptions = {};
-    highlights.highlightsWidth = 5;
+    highlights.highlightsWidth = this.widgetProperties.config.gauge.highlightsWidth;
     //@ts-ignore - bug in highlights property definition
     highlights.highlights = JSON.stringify(gaugeZonesHighlight, null, 1);
     this.radialGauge.update(highlights);