Merge pull request #10948 from ArtemDzhereleiko/AD/hot-fix/digital-gauge

Hot fix for color settings and digital gauge

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html

@@ -100,6 +100,8 @@
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
         <tb-color-settings formControlName="valueColor"
+                           [minValue]="progressBarWidgetConfigForm.get('tickMin').value"
+                           [maxValue]="progressBarWidgetConfigForm.get('tickMax').value"
                            settingsKey="{{'widgets.progress-bar.value' | translate }}">
         </tb-color-settings>
       </div>
@@ -137,6 +139,8 @@
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.progress-bar.bar-color' | translate }}</div>
       <tb-color-settings formControlName="barColor"
+                         [minValue]="progressBarWidgetConfigForm.get('tickMin').value"
+                         [maxValue]="progressBarWidgetConfigForm.get('tickMax').value"
                          settingsKey="{{'widgets.progress-bar.bar-color' | translate }}">
       </tb-color-settings>
     </div>

ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html

@@ -53,8 +53,21 @@
 
     <div class="tb-form-row space-between column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showMinMax">
-        {{ 'widgets.gauge.min-and-max-value' | translate }}
+        {{ 'widgets.gauge.min-and-max-label' | translate }}
       </mat-slide-toggle>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-font-settings formControlName="minMaxFont"
+                          disabledLineHeight
+                          [previewText]="previewFn">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="minMaxColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row space-between column-xs">
+      <div class="fixed-title-width">{{ 'widgets.gauge.min-and-max-value' | translate }}</div>
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@@ -64,14 +77,6 @@
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="maxValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-font-settings formControlName="minMaxFont"
-                          disabledLineHeight
-                          [previewText]="previewFn">
-        </tb-font-settings>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="minMaxColor">
-        </tb-color-input>
       </div>
     </div>
 
@@ -117,14 +122,6 @@
       </div>
     </div>
 
-    <div class="tb-form-row space-between">
-      <div translate>widgets.gauge.default-color</div>
-      <tb-color-input asBoxInput
-                      colorClearButton
-                      formControlName="defaultColor">
-      </tb-color-input>
-    </div>
-
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.gauge-bar-background</div>
       <tb-color-input asBoxInput
@@ -137,6 +134,7 @@
       <div class="fixed-title-width">{{ 'widgets.gauge.bar-color' | translate }}</div>
       <tb-color-settings formControlName="barColor"
                          rangeAdvancedMode
+                         gradientAdvancedMode
                          [minValue]="simpleGaugeWidgetConfigForm.get('minValue').value"
                          [maxValue]="simpleGaugeWidgetConfigForm.get('maxValue').value"
                          [aliasController]="aliasController"

ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts

@@ -98,7 +98,7 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom
   protected onConfigSet(configData: WidgetConfigComponentData) {
     const settings: DigitalGaugeSettings = {...defaultDigitalSimpleGaugeOptions, ...(configData.config.settings || {})};
 
-    convertLevelColorsSettingsToColorProcessor(settings);
+    convertLevelColorsSettingsToColorProcessor(settings, settings.defaultColor || '#2196f3');
 
     this.simpleGaugeWidgetConfigForm = this.fb.group({
       timewindowConfig: [getTimewindowConfig(configData.config), []],
@@ -124,7 +124,6 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom
       titleFont: [settings.titleFont, []],
       titleColor: [settings.titleFont?.color, []],
 
-      defaultColor: [settings.defaultColor, []],
       gaugeColor: [settings.gaugeColor, []],
       barColor: [settings.barColor, []],
 
@@ -165,7 +164,6 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom
     this.widgetConfig.config.settings.titleFont = config.titleFont;
     this.widgetConfig.config.settings.titleFont.color = config.titleColor;
 
-    this.widgetConfig.config.settings.defaultColor = config.defaultColor;
     this.widgetConfig.config.settings.gaugeColor = config.gaugeColor;
     this.widgetConfig.config.settings.barColor = config.barColor;
     const barColor: ColorSettings = config.barColor;

ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts

@@ -131,7 +131,12 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
 
     this.showValue = this.settings.showValue;
     this.valueStyle = textStyle(this.settings.valueFont);
-    this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
+    this.valueColor = ColorProcessor.fromColorProcessorSettings({
+      settings: this.settings.valueColor,
+      ctx: this.ctx,
+      minGradientValue: this.settings.tickMin,
+      maxGradientValue: this.settings.tickMax
+    });
 
     this.showTitleValueRow = this.showValue ||
       (this.layout === ProgressBarLayout.simplified && this.widgetComponent.dashboardWidget.showWidgetTitlePanel);
@@ -142,7 +147,12 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
     this.titleValueRowClass = (this.layout === ProgressBarLayout.simplified &&
       !this.widgetComponent.dashboardWidget.showWidgetTitlePanel) ? 'flex-end' : '';
 
-    this.barColor = ColorProcessor.fromSettings(this.settings.barColor);
+    this.barColor = ColorProcessor.fromColorProcessorSettings({
+      settings: this.settings.barColor,
+      ctx: this.ctx,
+      minGradientValue: this.settings.tickMin,
+      maxGradientValue: this.settings.tickMax
+    });;
 
     this.showTicks = this.settings.showTicks && this.layout === ProgressBarLayout.default;
     if (this.showTicks) {

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

@@ -22,6 +22,7 @@ import {
   ColorSettings,
   ColorType,
   constantColor,
+  defaultGradient,
   ValueSourceConfig,
   ValueSourceType
 } from '@shared/models/widget-settings.models';
@@ -161,9 +162,19 @@ export const backwardCompatibilityTicks = (ticksValue: AttributeSourceProperty[]
   return ticks;
 };
 
-export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaugeSettings) => {
-  if (!settings.barColor) {
-    settings.barColor = constantColor(settings.gaugeColor);
+export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaugeSettings, defaultColor?: string) => {
+  if (settings.barColor) {
+    if (!settings.barColor.color) {
+      settings.barColor.color = defaultColor;
+    }
+    if (isDefinedAndNotNull(settings.barColor.gradient)) {
+      settings.barColor.gradient.minValue = settings.minValue;
+      settings.barColor.gradient.maxValue = settings.maxValue;
+    } else {
+      settings.barColor.gradient = defaultGradient(settings.minValue, settings.maxValue);
+    }
+  } else {
+    settings.barColor = constantColor(defaultColor);
     if (settings.fixedLevelColors?.length) {
       settings.barColor.rangeList = {
         advancedMode: settings.useFixedLevelColor,
@@ -175,7 +186,9 @@ export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaug
       settings.barColor.gradient = {
         advancedMode: false,
         gradient: settings.levelColors as string[],
-        gradientAdvanced: null
+        gradientAdvanced: null,
+        minValue: settings.minValue,
+        maxValue: settings.maxValue
       };
     }
     if (settings.useFixedLevelColor) {

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

@@ -60,7 +60,7 @@ export class TbCanvasDigitalGauge {
     this.localSettings.gaugeWidthScale = settings.gaugeWidthScale || 0.75;
     this.localSettings.gaugeColor = settings.gaugeColor || tinycolor(keyColor).setAlpha(0.2).toRgbString();
 
-    convertLevelColorsSettingsToColorProcessor(settings);
+    convertLevelColorsSettingsToColorProcessor(settings, keyColor);
     this.localSettings.barColor = settings.barColor;
 
     this.localSettings.showTicks = settings.showTicks || false;

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html

@@ -44,6 +44,8 @@
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
         <tb-color-settings formControlName="valueColor"
+                           [minValue]="progressBarWidgetSettingsForm.get('tickMin').value"
+                           [maxValue]="progressBarWidgetSettingsForm.get('tickMax').value"
                            settingsKey="{{'widgets.progress-bar.value' | translate }}">
         </tb-color-settings>
       </div>
@@ -78,6 +80,8 @@
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.progress-bar.bar-color' | translate }}</div>
       <tb-color-settings formControlName="barColor"
+                         [minValue]="progressBarWidgetSettingsForm.get('tickMin').value"
+                         [maxValue]="progressBarWidgetSettingsForm.get('tickMax').value"
                          settingsKey="{{'widgets.progress-bar.bar-color' | translate }}">
       </tb-color-settings>
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html

@@ -38,20 +38,22 @@
     <ng-template [ngSwitchCase]="false">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="rangeDrop($event, 'range')">
-        <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
+        <div cdkDrag class="tb-draggable tb-advanced-range-drag"
              [formGroup]="rangeFormGroup"
              *ngFor="let rangeFormGroup of rangeListFormGroups; trackBy: trackByRange; let $index = index; last as isLast;"
              [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-          <div class="range">
-            <div class="range-container">
+          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+            <div class="tb-form-row range-container">
               <div class="tb-value-range-text" translate>widgets.color.from</div>
               <mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="from" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
+
               <div class="tb-value-range-text tb-value-range-text-to" translate>widgets.color.to</div>
               <mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="to" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
+
               <tb-color-input asBoxInput
                               formControlName="color">
               </tb-color-input>
@@ -64,6 +66,7 @@
                     matTooltipPosition="above">
               <mat-icon>delete</mat-icon>
             </button>
+          </div>
           <button class="tb-box-button"
                   mat-icon-button
                   type="button"
@@ -74,7 +77,6 @@
           </button>
         </div>
       </div>
-      </div>
     </ng-template>
     <ng-template [ngSwitchCase]="true">
 
@@ -103,9 +105,10 @@
     </ng-template>
 
   </div>
-  <button class="tb-add-color-range"
-          mat-stroked-button
+  <div class="tb-add-color-range">
+    <button mat-stroked-button
             (click)="addRange()">
       <mat-icon>add</mat-icon>
     </button>
+  </div>
 </ng-container>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.scss

@@ -13,15 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../../../../scss/constants';
 
-:host {
-  .range {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    flex-direction: row;
-
-    &-container {
+.range-container {
   display: flex;
   flex: 1;
   flex-direction: row;
@@ -32,5 +26,19 @@
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 6px;
 }
+.tb-add-color-range {
+  button {
+    width: 100%;
+  }
+}
+.tb-value-range-text {
+  width: 64px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.38);
+  @media #{$mat-xs} {
+    width: auto;
+  }
+  &.tb-value-range-text-to {
+    text-align: center;
   }
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -62,7 +62,8 @@ export function advancedRangeValidator(control: AbstractControl): ValidationErro
       useExisting: forwardRef(() => ColorRangeListComponent),
       multi: true
     }
-  ]
+  ],
+  encapsulation: ViewEncapsulation.None
 })
 export class ColorRangeListComponent implements OnInit, ControlValueAccessor, OnDestroy {
 
@@ -108,6 +109,9 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
     this.colorRangeListFormGroup.valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(() => this.updateModel());
+    this.colorRangeListFormGroup.get('advancedMode').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
   }
 
   ngOnDestroy() {
@@ -171,6 +175,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
 
   public removeAdvancedRange(index: number) {
     (this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray).removeAt(index);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   get advancedRangeFormArray(): UntypedFormArray {
@@ -184,7 +189,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
   removeRange(index: number) {
     this.rangeListFormArray.removeAt(index);
     this.colorRangeListFormGroup.markAsDirty();
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   rangeDrop(event: CdkDragDrop<string[]>, range: string) {
@@ -207,6 +212,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
     const advancedRangeColorsArray = this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray;
     const advancedRangeColorControl = this.fb.control(advancedRange, [advancedRangeValidator]);
     advancedRangeColorsArray.push(advancedRangeColorControl);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   addRange() {
@@ -218,7 +224,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
       };
       this.rangeListFormArray.push(this.colorRangeControl(newRange));
       this.colorRangeListFormGroup.markAsDirty();
-      setTimeout(() => {this.popover?.updatePosition();}, 0);
+      Promise.resolve().then(() => this.popover?.updatePosition());
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.scss

@@ -55,17 +55,6 @@
   }
   .tb-form-row {
     height: auto;
-    .tb-value-range-text {
-      width: 64px;
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.38);
-      @media #{$mat-xs} {
-        width: auto;
-      }
-      &.tb-value-range-text-to {
-        text-align: center;
-      }
-    }
   }
   button.mat-mdc-button-base.tb-add-color-range {
     &:not(:disabled) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts

@@ -20,7 +20,8 @@ import {
   ColorSettings,
   ColorType,
   colorTypeTranslations,
-  defaultGradient
+  defaultGradient,
+  defaultRange
 } from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
@@ -102,12 +103,12 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
         type: [this.colorSettings?.type || ColorType.constant, []],
         color: [this.colorSettings?.color, []],
         gradient: [this.colorSettings?.gradient || defaultGradient(this.minValue, this.maxValue), []],
-        rangeList: [this.colorSettings?.rangeList, []],
+        rangeList: [this.colorSettings?.rangeList || defaultRange(), []],
         colorFunction: [this.colorSettings?.colorFunction, []]
       }
     );
     this.colorSettingsFormGroup.get('type').valueChanges.subscribe(() => {
-      setTimeout(() => {this.popover?.updatePosition();}, 0);
+      Promise.resolve().then(() => this.popover?.updatePosition());
     });
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts

@@ -103,11 +103,11 @@ export class ColorSettingsComponent implements OnInit, ControlValueAccessor, OnD
 
   @Input()
   @coerceNumber()
-  minValue: number;
+  minValue = 0;
 
   @Input()
   @coerceNumber()
-  maxValue: number;
+  maxValue = 100;
 
   colorType = ColorType;
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss

@@ -16,11 +16,36 @@
 
 @import "../../../../../../../../scss/constants";
 
-
 :host {
   overflow: auto;
   height: 100%;
   max-height: 420px;
+
+  .gradient-preview {
+    width: 100%;
+    padding: 40px 12px 0;
+    .gradient-background {
+      position: relative;
+      height: 56px;
+      border-radius: 8px;
+    }
+  }
+
+  .gradient-settings {
+    flex: 1;
+    gap: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tb-add-gradient {
+    margin-right: 92px;
+    @media #{$mat-lt-lg} {
+      margin-right: 52px;
+    }
+  }
+}
+::ng-deep {
   .gradient {
     display: flex;
     flex: 1;
@@ -67,32 +92,6 @@
       }
     }
   }
-
-  .gradient-preview {
-    width: 100%;
-    padding: 40px 12px 0;
-    .gradient-background {
-      position: relative;
-      height: 56px;
-      border-radius: 8px;
-    }
-  }
-
-  .gradient-settings {
-    flex: 1;
-    gap: 16px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .tb-add-gradient {
-    margin-right: 92px;
-    @media #{$mat-lt-lg} {
-      margin-right: 52px;
-    }
-  }
-}
-::ng-deep {
   .gradient-background {
     .pointer {
       position: absolute;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts

@@ -31,7 +31,7 @@ import { takeUntil } from 'rxjs/operators';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { IAliasController } from '@core/api/widget-api.models';
 import { DomSanitizer } from '@angular/platform-browser';
-import { coerceBoolean } from '@shared/decorators/coercion';
+import { coerceBoolean, coerceNumber } from '@shared/decorators/coercion';
 import { isDefinedAndNotNull } from '@core/utils';
 import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
 import { Datasource } from '@shared/models/widget.models';
@@ -71,10 +71,12 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
   datasource: Datasource;
 
   @Input()
-  minValue: string;
+  @coerceNumber()
+  minValue: number;
 
   @Input()
-  maxValue: string;
+  @coerceNumber()
+  maxValue: number;
 
   @Input()
   @coerceBoolean()
@@ -115,6 +117,9 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
     this.gradientFormGroup.valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(() => this.updateModel());
+    this.gradientFormGroup.get('advancedMode').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
   }
 
   ngOnDestroy() {
@@ -228,7 +233,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
       this.gradientListFormArray.removeAt(index);
     }
     this.gradientFormGroup.markAsDirty();
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   gradientDrop(event: CdkDragDrop<string[]>, advanced = false) {
@@ -247,7 +252,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
       this.gradientListFormArray.push(this.colorGradientControl('rgba(0,0,0,0.87)'));
     }
     this.gradientFormGroup.markAsDirty();
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   updateModel() {

ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html

@@ -41,8 +41,22 @@
 
     <div class="tb-form-row space-between column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showMinMax">
-        {{ 'widgets.gauge.min-and-max-value' | translate }}
+        {{ 'widgets.gauge.min-and-max-label' | translate }}
       </mat-slide-toggle>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-font-settings formControlName="minMaxFont"
+                          disabledLineHeight
+                          [previewText]="previewFn">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="minMaxColor">
+        </tb-color-input>
+      </div>
+    </div>
+
+    <div class="tb-form-row space-between column-xs">
+      <div class="fixed-title-width">{{ 'widgets.gauge.min-and-max-value' | translate }}</div>
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@@ -52,14 +66,6 @@
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="maxValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-font-settings formControlName="minMaxFont"
-                          disabledLineHeight
-                          [previewText]="previewFn">
-        </tb-font-settings>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="minMaxColor">
-        </tb-color-input>
       </div>
     </div>
 
@@ -160,14 +166,6 @@
       </mat-slide-toggle>
     </div>
 
-    <div class="tb-form-row space-between">
-      <div class="fixed-title-width">{{ 'widgets.gauge.default-color' | translate }}</div>
-      <tb-color-input asBoxInput
-                      colorClearButton
-                      formControlName="defaultColor">
-      </tb-color-input>
-    </div>
-
     <div class="tb-form-row space-between">
       <div class="fixed-title-width">{{ 'widgets.gauge.gauge-bar-background' | translate }}</div>
       <tb-color-input asBoxInput
@@ -180,6 +178,7 @@
       <div class="fixed-title-width">{{ 'widgets.gauge.bar-color' | translate }}</div>
       <tb-color-settings formControlName="barColor"
                          rangeAdvancedMode
+                         gradientAdvancedMode
                          [minValue]="digitalGaugeWidgetSettingsForm.get('minValue').value"
                          [maxValue]="digitalGaugeWidgetSettingsForm.get('maxValue').value"
                          [aliasController]="aliasController"
@@ -222,13 +221,23 @@
           <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                (cdkDropListDropped)="tickValueDrop($event)">
             <div cdkDrag class="tb-draggable" *ngFor="let tickValueControl of tickValuesFormArray().controls; trackBy: trackByTickValue;
-              let $index = index; last as isLast;" fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-                <tb-tick-value [formControl]="tickValueControl"
+              let $index = index; last as isLast;" fxLayout="row" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+                <tb-tick-value fxFlex
+                               [formControl]="tickValueControl"
                                [aliasController]="aliasController"
                                [dataKeyCallbacks]="dataKeyCallbacks"
                                [datasource]="datasource"
                                (removeTickValue)="removeTickValue($index)">
                 </tb-tick-value>
+                <button class="tb-box-button"
+                        fxHide.lt-lg
+                        mat-icon-button
+                        type="button"
+                        cdkDragHandle
+                        matTooltip="{{ 'action.drag' | translate }}"
+                        matTooltipPosition="above">
+                  <mat-icon>drag_indicator</mat-icon>
+                </button>
             </div>
           </div>
           <div *ngIf="!tickValuesFormArray().controls.length">

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

@@ -138,7 +138,7 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent
 
   protected onSettingsSet(settings: WidgetSettings) {
     if (!settings.barColor) {
-      settings.barColor = constantColor(settings.gaugeColor);
+      settings.barColor = constantColor(settings.defaultColor || '#2196f3');
 
       if (settings.fixedLevelColors.length) {
         settings.barColor.rangeList = {
@@ -192,7 +192,6 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent
       dashThickness: [settings.dashThickness, [Validators.min(0)]],
       roundedLineCap: [settings.roundedLineCap, []],
 
-      defaultColor: [settings.defaultColor, []],
       gaugeColor: [settings.gaugeColor, []],
       barColor: [settings.barColor],
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html

@@ -63,8 +63,6 @@
       <tb-color-settings formControlName="batteryLevelColor"
                          rangeAdvancedMode
                          gradientAdvancedMode
-                         minValue="0"
-                         maxValue="100"
                          [aliasController]="aliasController"
                          [dataKeyCallbacks]="dataKeyCallbacks"
                          [datasource]="datasource"
@@ -76,8 +74,6 @@
       <tb-color-settings formControlName="batteryShapeColor"
                          rangeAdvancedMode
                          gradientAdvancedMode
-                         minValue="0"
-                         maxValue="100"
                          [aliasController]="aliasController"
                          [dataKeyCallbacks]="dataKeyCallbacks"
                          [datasource]="datasource"

ui-ngx/src/app/shared/models/widget-settings.models.ts

@@ -297,6 +297,12 @@ export const defaultGradient = (minValue?: number, maxValue?: number): ColorGrad
   maxValue: isDefinedAndNotNull(maxValue) ? maxValue : 100
 });
 
+export const defaultRange = (): ColorRangeSettings => ({
+  advancedMode: false,
+  range: [],
+  rangeAdvanced: []
+});
+
 const updateGradientMinMaxValues = (colorSettings: ColorSettings, minValue?: number, maxValue?: number): void => {
   if (isDefinedAndNotNull(colorSettings.gradient)) {
     if (isDefinedAndNotNull(minValue)) {
@@ -431,7 +437,7 @@ export abstract class AdvancedModeColorProcessor extends ColorProcessor {
   protected constructor(protected settings: ColorSettings,
                         protected ctx: WidgetContext) {
     super(settings);
-    this.advancedMode = this.getCurrentConfig().advancedMode;
+    this.advancedMode = this.getCurrentConfig()?.advancedMode;
     if (this.advancedMode) {
       createValueSubscription(
         this.ctx,
@@ -529,7 +535,7 @@ class RangeColorProcessor extends AdvancedModeColorProcessor {
         this.settings.rangeList.range as Array<ColorRange>;
     }
 
-    if (rangeList.length && isDefinedAndNotNull(value) && isNumeric(value)) {
+    if (rangeList?.length && isDefinedAndNotNull(value) && isNumeric(value)) {
       const num = Number(value);
       for (const range of rangeList) {
         if (advancedMode ?
@@ -571,7 +577,8 @@ class GradientColorProcessor extends AdvancedModeColorProcessor {
   update(value: any): void {
     const progress = this.calculateProgress(+value, this.minValue, this.maxValue);
     super.update(progress);
-    this.color = this.getGradientColor(progress, this.settings.gradient.gradient);
+    this.color = this.getGradientColor(progress,
+      this.advancedMode ? this.settings.gradient.gradientAdvanced : this.settings.gradient.gradient);
   }
 
   updatedAdvancedData(data: Array<DatasourceData>) {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -6232,6 +6232,7 @@
             "gauge-bar-background": "Gauge bar background",
             "bar-color": "Bar color",
             "min-and-max-value": "Min and max value",
+            "min-and-max-label": "Min and max label",
             "font": "Font",
             "tick-width-and-color": "Tick width and color"
         },