Makes ng-gauge highlights width configurable (#445)

* Makes radial and linear gauge highlight width configurable * Adds highlights width config property
mxtommy · Aug 4, 2024 · f2265ce · f2265ce
1 parent 6b53f51
commit f2265ce
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
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
@@ -157,7 +157,6 @@
                   </mat-checkbox>
                 </div>
               } @else if ( ['measuring','capacity'].indexOf(formMaster.value.gauge.subType) > -1 ) {
-
                   <mat-form-field formGroupName="gauge" class="options-grid-span2">
                     <mat-label>Gauge Type</mat-label>
                     <mat-select
@@ -168,7 +167,6 @@
                       <mat-option value="capacity">Capacity</mat-option>
                     </mat-select>
                   </mat-form-field>
-
               }
             }
 
@@ -185,6 +183,13 @@
               </mat-form-field>
             }
 
+            @if ( (widgetConfig.gauge?.type == 'ngRadial' && ['measuring','capacity'].includes(formMaster.value.gauge.subType)) || widgetConfig.gauge?.type == 'ngLinear') {
+              <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>
+            }
+
             @if (widgetConfig.gauge?.type == 'simpleLinear') {
               <mat-form-field formGroupName="gauge" class="options-grid-span2">
                 <mat-label>Unit Label</mat-label>

diff --git a/src/app/widgets/widget-gauge-ng-linear/widget-gauge-ng-linear.component.ts b/src/app/widgets/widget-gauge-ng-linear/widget-gauge-ng-linear.component.ts
@@ -70,6 +70,7 @@ export class WidgetGaugeNgLinearComponent extends BaseWidgetComponent implements
         type: 'ngLinear',
         subType: 'vertical',    // vertical or horizontal
         enableTicks: true,
+        highlightsWidth: 5,
       },
       numInt: 1,
       numDecimal: 0,
@@ -252,7 +253,7 @@ export class WidgetGaugeNgLinearComponent extends BaseWidgetComponent implements
       needleSide: "both",
 
       highlights: [],
-      highlightsWidth: 0,
+      highlightsWidth: this.widgetProperties.config.gauge.highlightsWidth,
 
       animation: true,
       animationRule: "linear",
@@ -358,7 +359,7 @@ export class WidgetGaugeNgLinearComponent 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.linearGauge.update(highlights);

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,
@@ -129,7 +130,7 @@ export class WidgetGaugeNgRadialComponent extends BaseWidgetComponent implements
     });
 
     this.metaSub = this.zones$.subscribe(zones => {
-      if (zones && zones.length > 0 && this.widgetProperties.config.gauge.subType == "measuring") {
+      if (zones && zones.length > 0 && ["capacity", "measuring"].includes(this.widgetProperties.config.gauge.subType)) {
         this.setHighlights(zones);
       }
     });
@@ -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;
 
     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);