feat: add Y scale min/max control

src/app/core/interfaces/widgets-interface.ts

@@ -107,10 +107,14 @@ export interface IWidgetSvcConfig {
   numDecimal?: number;
   /** Used by multiple Widget: number of fixed Integer places to display */
   numInt?: number;
-  /** Used by numeric data Widget: Show minimum registered value since started */
+  /** Used by numeric data Widget: Display minimum registered value since started */
   showMin?: boolean;
-  /** Used by numeric data Widget: Show maximum registered value since started */
+  /** Used by numeric data Widget: Display maximum registered value since started */
   showMax?: boolean;
+  /** Used by multiple Widget to filter minimum data range to display. */
+  minValue?: number;
+  /** Used by multiple Widget to filter maximum data range to display. */
+  maxValue?: number;
 
   /** Used by date Widget: configurable display format of the date/time value */
   dateFormat?: string;
@@ -150,10 +154,6 @@ export interface IWidgetSvcConfig {
   textColor?: string;
   /** Used by multiple gauge Widget */
   radialSize?: string;
-  /** Used by multiple Widget to set minimum data range to display. */
-  minValue?: number;
-  /** Used by multiple Widget to set maximum data range to display. */
-  maxValue?: number;
   /** Used by multiple gauge Widget: Should the needle or the faceplate rotate */
   rotateFace?: boolean;
   /** Used by Autopilot Widget: Should the Widget start automatically on load or should the user press Power/On. */
@@ -183,16 +183,24 @@ export interface IWidgetSvcConfig {
   showDatasetAngleAverageValueLine?: boolean;
   /** Display widget title */
   showLabel?: boolean;
-  /** Display chart y scale */
-  showYScale?: boolean;
   /** Used by historical data Widget */
   animateGraph?: boolean;
-  /** Prevent chart value axis autoscaling. Always start scale from zero */
-  startScaleAtZero?: boolean;
   /** Display chart time (x axis) scale */
   showTimeScale?: boolean;
-  /** Limit chart value axis scale to min and max value */
+  /** Display chart y scale */
+  showYScale?: boolean;
+  /** Chart y scale suggested minimum. Scale will extend beyond this number automatically if values are below */
+  yScaleSuggestedMin?: number;
+  /** Chart y scale suggested maximum. Scale will extend beyond this number automatically if values are above */
+  yScaleSuggestedMax?: number;
+  /** Chart y scale suggested minimum is zero */
+  startScaleAtZero?: boolean;
+  /** Limit chart value axis (y) scale to min and max value */
   enableMinMaxScaleLimit?: boolean;
+  /** Chart y scale minimum */
+  yScaleMin?: number;
+  /** Chart y scale maximum */
+  yScaleMax?: number;
   /** Used by historical data Widget */
   verticalGraph?: boolean;
 

src/app/widget-config/chart-options/chart-options.component.html

@@ -39,7 +39,7 @@
 
     <div class="flex-item">
       <div>
-        <p>Chart Data</p>
+        <p>Series</p>
         <mat-form-field style="margin-left: 10px;">
           <mat-label>Value Decimal Places</mat-label>
           <input matInput type="number"
@@ -67,43 +67,94 @@
 
     <div class="flex-item">
       <div>
-        <p class="no-margin">Chart Scale</p>
-        <mat-checkbox class="full-width"
-          name="startScaleAtZero"
-          [formControl]="startScaleAtZero"
-          (change)="disableMinMaxLines($event)">
-            Auto Scale
-        </mat-checkbox>
+        <p class="no-margin">Data Scale</p>
+        <span class="mat-caption">(Default node is automatic scale)</span>
+
+        <mat-radio-group class="chart-option-radio-group" aria-label="Select an option"
+          name="enableMinMaxScaleLimit"
+          [formControl]="enableMinMaxScaleLimit">
+          <mat-radio-button class="chart-option-radio-button"
+          (change)="setScaleControls($event)"
+          [value]="false">Auto Scale</mat-radio-button>
+
+          <div class="chart-option-radio-button-config">
+            <mat-form-field class="chart-option-radio-button-config-form-field">
+              <mat-label>Suggested Min</mat-label>
+              <input matInput type="number"
+                name="yScaleSuggestedMin"
+                [formControl]="yScaleSuggestedMin">
+            </mat-form-field>
+
+            <mat-form-field class="chart-option-radio-button-config-form-field">
+              <mat-label>Suggested Max</mat-label>
+              <input matInput type="number"
+                name="yScaleSuggestedMax"
+                [formControl]="yScaleSuggestedMax">
+            </mat-form-field>
+          </div>
+
+          <mat-radio-button class="chart-option-radio-button"
+          (change)="setScaleControls($event)"
+          [value]="true">Fixed Scale</mat-radio-button>
+
+          <div class="chart-option-radio-button-config">
+            <div class="chart-option-radio-button-config-item">
+              <mat-form-field class="chart-option-radio-button-config-form-field">
+                <mat-label>Min</mat-label>
+                <input matInput type="number"
+                  name="yScaleMin"
+                  [formControl]="yScaleMin"
+                  required>
+              </mat-form-field>
+            </div>
+            <div class="chart-option-radio-button-config-item">
+              <mat-form-field class="chart-option-radio-button-config-form-field">
+                <mat-label>Max</mat-label>
+                <input matInput type="number"
+                  name="yScaleMax"
+                  [formControl]="yScaleMax"
+                  required>
+              </mat-form-field>
+            </div>
+          </div>
+        </mat-radio-group>
+
         <mat-checkbox class="full-width"
           name="showYScale"
           [formControl]="showYScale">
-            Show Value Axis
+            Show Scale Ticks
         </mat-checkbox>
+      </div>
+    </div>
+
+    <div class="flex-item">
+      <div>
+        <p class="no-margin">Time Scale</p>
         <mat-checkbox class="full-width"
           name="showTimeScale"
           [formControl]="showTimeScale">
-            Show Time Axis
+            Show Scale Ticks
         </mat-checkbox>
       </div>
     </div>
 
     <div class="flex-item">
       <div>
-        <p class="no-margin">Dataset Indicators</p>
+        <p class="no-margin">Dataset</p>
         <mat-checkbox class="full-width"
           name="showDatasetMaximumValueLine"
           [formControl]="showDatasetMaximumValueLine">
-            Maximum Line
+            Show Maximum Line
         </mat-checkbox>
         <mat-checkbox class="full-width"
           name="showDatasetAverageValueLine"
           [formControl]="showDatasetAverageValueLine">
-            Average Line
+            Show Average Line
         </mat-checkbox>
         <mat-checkbox class="full-width" #minLine
           name="showDatasetMinimumValueLine"
           [formControl]="showDatasetMinimumValueLine">
-            Minimum Line
+            Show Minimum Line
         </mat-checkbox>
       </div>
     </div>

src/app/widget-config/chart-options/chart-options.component.scss

@@ -17,3 +17,35 @@
 .no-margin {
   margin: 0px;
 }
+
+.chart-option-radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 0px;
+  align-items: flex-start;
+}
+
+.chart-option-radio-button {
+  margin: 0px;
+}
+
+.chart-option-radio-button-config {
+  margin-left: 35px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: flex-start;
+
+}
+
+.chart-option-radio-button-config-item {
+  flex-grow: 0;
+  flex-shrink: 1;
+  min-width: 50px;
+}
+
+.chart-option-radio-button-config-form-field {
+  display: block;
+  max-width: 118px;
+}

src/app/widget-config/chart-options/chart-options.component.ts

@@ -1,40 +1,46 @@
-import { MatCard, MatCardContent, MatCardHeader, MatCardSubtitle, MatCardTitle } from '@angular/material/card';
-import { MatOption } from '@angular/material/core';
-import { MatSelect } from '@angular/material/select';
+import { MatCardModule } from '@angular/material/card';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
 import { Component, Input, OnInit } from '@angular/core';
 import { DatasetService } from '../../core/services/data-set.service';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatFormFieldModule, MatLabel } from '@angular/material/form-field';
 import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
-import { MatInput } from '@angular/material/input';
-import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioChange, MatRadioModule } from '@angular/material/radio';
 
 
 @Component({
   selector: 'config-chart-options',
   standalone: true,
   templateUrl: './chart-options.component.html',
   styleUrl: './chart-options.component.scss',
-  imports: [MatCard, MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent, MatFormField,MatCheckbox, MatSelect, MatOption, MatLabel, MatInput, ReactiveFormsModule]
+  imports: [MatCardModule, MatFormFieldModule, MatCheckboxModule, MatSelectModule, MatOptionModule, MatLabel, MatInputModule, MatRadioModule, ReactiveFormsModule]
 })
 export class ChartOptionsComponent implements OnInit {
   @Input () displayName!: UntypedFormControl;
+  @Input () showLabel!: UntypedFormControl;
   @Input () convertUnitTo!: UntypedFormControl;
   @Input () datasetUUID!: UntypedFormControl;
+  @Input () datasetAverageArray!: UntypedFormControl;
   @Input () showAverageData!: UntypedFormControl;
   @Input () trackAgainstAverage!: UntypedFormControl;
-  @Input () datasetAverageArray!: UntypedFormControl;
   @Input () showDatasetMinimumValueLine!: UntypedFormControl;
   @Input () showDatasetMaximumValueLine!: UntypedFormControl;
   @Input () showDatasetAverageValueLine!: UntypedFormControl;
   @Input () showDatasetAngleAverageValueLine!: UntypedFormControl;
-  @Input () startScaleAtZero!: UntypedFormControl;
   @Input () verticalGraph!: UntypedFormControl;
-  @Input () showLabel!: UntypedFormControl;
-  @Input () showYScale!: UntypedFormControl;
   @Input () showTimeScale!: UntypedFormControl;
+
+  @Input () showYScale!: UntypedFormControl;
+  @Input () startScaleAtZero!: UntypedFormControl;
+  @Input () yScaleSuggestedMin!: UntypedFormControl;
+  @Input () yScaleSuggestedMax!: UntypedFormControl;
+
   @Input () enableMinMaxScaleLimit!: UntypedFormControl;
-  @Input () minValue!: UntypedFormControl;
-  @Input () maxValue!: UntypedFormControl;
+  @Input () yScaleMin!: UntypedFormControl;
+  @Input () yScaleMax!: UntypedFormControl;
+
   @Input () numDecimal!: UntypedFormControl;
   @Input () textColor!: UntypedFormControl;
 
@@ -52,6 +58,26 @@ export class ChartOptionsComponent implements OnInit {
     if (!this.showAverageData.value) {
       this.trackAgainstAverage.disable();
     }
+
+    this.setValueScaleOptionsControls(this.enableMinMaxScaleLimit.value);
+  }
+
+  private setValueScaleOptionsControls(enableMinMaxScaleLimit: boolean) {
+    if (enableMinMaxScaleLimit) {
+      this.yScaleMin.enable();
+      this.yScaleMax.enable();
+      this.yScaleSuggestedMin.disable();
+      this.yScaleSuggestedMax.disable();
+    } else {
+      this.yScaleMin.disable();
+      this.yScaleMax.disable();
+      this.yScaleSuggestedMin.enable();
+      this.yScaleSuggestedMax.enable();
+    }
+  }
+
+  public setScaleControls(e: MatRadioChange) {
+    this.setValueScaleOptionsControls(e.value);
   }
 
   public disableMinMaxLines(e: MatCheckboxChange): void {

src/app/widget-config/modal-widget-config/modal-widget-config.component.html

@@ -16,11 +16,13 @@
           [showDatasetAngleAverageValueLine]="formMaster.get('showDatasetAngleAverageValueLine')"
           [startScaleAtZero]="formMaster.get('startScaleAtZero')"
           [showLabel]="formMaster.get('showLabel')"
-          [showYScale]="formMaster.get('showYScale')"
           [showTimeScale]="formMaster.get('showTimeScale')"
+          [showYScale]="formMaster.get('showYScale')"
+          [yScaleSuggestedMin]="formMaster.get('yScaleSuggestedMin')"
+          [yScaleSuggestedMax]="formMaster.get('yScaleSuggestedMax')"
           [enableMinMaxScaleLimit]="formMaster.get('enableMinMaxScaleLimit')"
-          [minValue]="formMaster.get('minValue')"
-          [maxValue]="formMaster.get('maxValue')"
+          [yScaleMin]="formMaster.get('yScaleMin')"
+          [yScaleMax]="formMaster.get('yScaleMax')"
           [numDecimal]="formMaster.get('numDecimal')"
           [verticalGraph]="formMaster.get('verticalGraph')"
           [textColor]="formMaster.get('textColor')"

src/app/widgets/widget-data-chart/widget-data-chart.component.ts

@@ -95,13 +95,15 @@ export class WidgetDataChartComponent extends BaseWidgetComponent implements OnI
       showDatasetAverageValueLine: true,
       showDatasetAngleAverageValueLine: false,
       showLabel: false,
-      showYScale: false,
       showTimeScale: false,
       startScaleAtZero: true,
       verticalGraph: false,
+      showYScale: false,
+      yScaleSuggestedMin: null,
+      yScaleSuggestedMax: null,
       enableMinMaxScaleLimit: false,
-      minValue: null,
-      maxValue: null,
+      yScaleMin: null,
+      yScaleMax: null,
       numDecimal: 1,
       textColor: 'primary',
     };
@@ -198,7 +200,10 @@ export class WidgetDataChartComponent extends BaseWidgetComponent implements OnI
       y: {
         display: this.widgetProperties.config.showYScale,
         position: "right",
-        beginAtZero: !this.widgetProperties.config.startScaleAtZero,
+        suggestedMin: this.widgetProperties.config.enableMinMaxScaleLimit ? null : this.widgetProperties.config.yScaleSuggestedMin,
+        suggestedMax: this.widgetProperties.config.enableMinMaxScaleLimit ? null : this.widgetProperties.config.yScaleSuggestedMax,
+        min: this.widgetProperties.config.enableMinMaxScaleLimit ? this.widgetProperties.config.yScaleMin : null,
+        max: this.widgetProperties.config.enableMinMaxScaleLimit ? this.widgetProperties.config.yScaleMax : null,
         grace: "5%",
         title: {
           display: false,