Merge pull request #5275 from ArtemDzhereleiko/bug-fix/gauge/boundary-values

[3.3.2] UI: Fix digital gauge widget with using boundary values

ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts

@@ -276,7 +276,6 @@ export class CanvasDigitalGauge extends BaseGauge {
         }
       }
     }
-
     options.ticksValue = [];
     for (const tick of options.ticks) {
       if (tick !== null) {
@@ -820,7 +819,7 @@ function getProgressColor(progress: number, colorsRange: DigitalGaugeColorRange[
     return colorsRange[0].rgbString;
   }
 
-  for (let j = 0; j < colorsRange.length; j++) {
+  for (let j = 1; j < colorsRange.length; j++) {
     if (progress <= colorsRange[j].pct) {
       const lower = colorsRange[j - 1];
       const upper = colorsRange[j];
@@ -836,6 +835,7 @@ function getProgressColor(progress: number, colorsRange: DigitalGaugeColorRange[
       return color.toRgbString();
     }
   }
+  return colorsRange[colorsRange.length - 1].rgbString;
 }
 
 function drawArcGlow(context: DigitalGaugeCanvasRenderingContext2D,

ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts

@@ -246,7 +246,8 @@ export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
               title: 'Color',
               type: 'string'
             }
-          }
+          },
+          required: ['color'],
         }
       },
       showTicks: {

ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts

@@ -266,7 +266,6 @@ export class TbCanvasDigitalGauge {
 
   init() {
     let updateSetting = false;
-
     if (this.localSettings.useFixedLevelColor && this.localSettings.fixedLevelColors?.length > 0) {
       this.localSettings.levelColors = this.settingLevelColorsSubscribe(this.localSettings.fixedLevelColors);
       updateSetting = true;
@@ -285,6 +284,11 @@ export class TbCanvasDigitalGauge {
     let levelColorsDatasource: Datasource[] = [];
     const predefineLevelColors: ColorLevelSetting[] = [];
 
+    predefineLevelColors.push({
+      value: this.localSettings.minValue,
+      color: this.localSettings.gaugeColor
+    });
+
     function setLevelColor(levelSetting: AttributeSourceProperty, color: string) {
       if (levelSetting.valueSource === 'predefinedValue' && isFinite(levelSetting.value)) {
         predefineLevelColors.push({