From e70530e4cac4c6b93bc3ddbb86254b1af9de45e8 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Tue, 24 Oct 2023 10:16:17 +0300
Subject: [PATCH] UI: Advanced gauge settings

---
 .../analog-gauge-basic-config.component.ts    |  38 +-
 .../compass-gauge-basic-config.component.html |  78 +--
 ...gue-compass-widget-settings.component.html | 291 +++++----
 ...logue-compass-widget-settings.component.ts |  42 +-
 ...logue-gauge-widget-settings.component.html | 615 ++++++++++--------
 ...nalogue-gauge-widget-settings.component.ts |  69 +-
 .../assets/locale/locale.constant-en_US.json  |  23 +-
 7 files changed, 584 insertions(+), 572 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
index bd82ab253a..953626b226 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
@@ -14,8 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, Injector } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
@@ -27,33 +26,13 @@ import {
   WidgetConfig,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
   getTimewindowConfig,
   setTimewindowConfig
 } from '@home/components/widget/config/timewindow-config-panel.component';
-import { formatValue, isDefinedAndNotNull, isUndefined } from '@core/utils';
-import {
-  ColorType,
-  DateFormatProcessor,
-  DateFormatSettings,
-  getLabel,
-  setLabel
-} from '@shared/models/widget-settings.models';
-import {
-  valueCardDefaultSettings,
-  ValueCardLayout,
-  valueCardLayoutImages,
-  valueCardLayouts,
-  valueCardLayoutTranslations,
-  ValueCardWidgetSettings
-} from '@home/components/widget/lib/cards/value-card-widget.models';
-
-// @Component({
-//   selector: 'tb-radial-gauge-basic-config',
-//   templateUrl: './analog-gauge-basic-config.component.html',
-//   styleUrls: ['../basic-config.scss']
-// })
+import { formatValue, isUndefined } from '@core/utils';
+import { ColorType } from '@shared/models/widget-settings.models';
+
 export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
 
   public get displayTimewindowConfig(): boolean {
@@ -94,21 +73,21 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
       showUnitTitle: [configData.config.settings?.showUnitTitle, []],
       unitTitle: [configData.config.settings?.unitTitle, []],
       titleFont: [configData.config.settings?.titleFont, []],
-      titleColor: [configData.config.settings?.titleFont.color, []],
+      titleColor: [configData.config.settings?.titleFont?.color, []],
 
       units: [configData.config.units, []],
       unitsFont: [configData.config.settings?.unitsFont, []],
-      unitsColor: [configData.config.settings?.unitsFont.color, []],
+      unitsColor: [configData.config.settings?.unitsFont?.color, []],
 
       valueBox: [configData.config.settings?.valueBox, []],
       valueInt: [configData.config.settings?.valueInt, []],
       valueFont: [configData.config.settings?.valueFont, []],
-      valueColor: [configData.config.settings?.valueFont.color, []],
+      valueColor: [configData.config.settings?.valueFont?.color, []],
 
       minValue: [configData.config.settings?.minValue, []],
       maxValue: [configData.config.settings?.maxValue, []],
       numbersFont: [configData.config.settings?.numbersFont, []],
-      numbersColor: [configData.config.settings?.numbersFont.color, []],
+      numbersColor: [configData.config.settings?.numbersFont?.color, []],
 
       colorBarStroke: [configData.config.settings?.colorBarStroke, []],
 
@@ -129,7 +108,6 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
   protected prepareOutputConfig(config: any): WidgetConfigComponentData {
     setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig);
     this.widgetConfig.config.datasources = config.datasources;
-    // setLabel(config.label, this.widgetConfig.config.datasources);
     this.widgetConfig.config.actions = config.actions;
 
     this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
index fec518cc8d..a3a2636876 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
@@ -83,47 +83,47 @@
         </tb-string-items-list>
       </div>
     </div>
-      <div class="tb-form-row space-between">
-        <div translate>widgets.gauge.label-style</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <tb-font-settings formControlName="majorTickFont"
-                            disabledLineHeight>
-          </tb-font-settings>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="majorTickColor">
-          </tb-color-input>
-        </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.label-style</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-font-settings formControlName="majorTickFont"
+                          disabledLineHeight>
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="majorTickColor">
+        </tb-color-input>
       </div>
+    </div>
 
-        <div class="tb-form-row space-between">
-          <div translate>widgets.gauge.major-ticks-color</div>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="colorMajorTicks">
-          </tb-color-input>
-        </div>
-        <div class="tb-form-row space-between">
-          <div translate>widgets.gauge.minor-ticks-color</div>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="colorMinorTicks">
-          </tb-color-input>
-        </div>
-        <div class="tb-form-row space-between">
-          <div translate>widgets.gauge.needle-color</div>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="colorNeedle">
-          </tb-color-input>
-        </div>
-        <div class="tb-form-row space-between">
-          <div translate>widgets.gauge.plate-color</div>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="colorPlate">
-          </tb-color-input>
-        </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.major-ticks-color</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorMajorTicks">
+      </tb-color-input>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.minor-ticks-color</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorMinorTicks">
+      </tb-color-input>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.needle-color</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorNeedle">
+      </tb-color-input>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.plate-color</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorPlate">
+      </tb-color-input>
+    </div>
   </div>
 
   <div class="tb-form-panel">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
index bbb7874523..96c16c0359 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
@@ -15,153 +15,127 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="analogueCompassWidgetSettingsForm" fxLayout="column">
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.gauge.ticks-settings</legend>
-    <mat-form-field fxFlex class="mat-block" floatLabel="always">
-      <mat-label translate>widgets.gauge.major-ticks-names</mat-label>
-      <mat-chip-grid class="tb-drop-list"
-                     #majorTicksNamesChipList
-                     cdkDropList
-                     cdkDropListOrientation="horizontal"
-                     (cdkDropListDropped)="majorTickNameDrop($event)"
-                     formControlName="majorTicks">
-        <mat-chip-row class="tb-draggable" cdkDrag *ngFor="let tickName of majorTicksNamesList()"
-                  [removable]="true" (removed)="removeMajorTickName(tickName)">
-          {{tickName}}
-          <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip-row>
-        <input [matChipInputFor]="majorTicksNamesChipList"
-               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-               matChipInputAddOnBlur
-               (matChipInputTokenEnd)="addMajorTickName($event)">
-      </mat-chip-grid>
-    </mat-form-field>
-    <tb-color-input fxFlex
-                    formControlName="colorMajorTicks"
-                    icon="format_color_fill"
-                    label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
-    </tb-color-input>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.gauge.minor-ticks-count</mat-label>
-        <input matInput type="number" min="0" formControlName="minorTicks">
-      </mat-form-field>
-      <tb-color-input fxFlex
-                      formControlName="colorMinorTicks"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
-      </tb-color-input>
-    </section>
-    <mat-slide-toggle formControlName="showStrokeTicks" class="slide-block">
-      {{ 'widgets.gauge.show-stroke-ticks' | translate }}
-    </mat-slide-toggle>
-    <fieldset class="fields-group">
-      <legend class="group-title" translate>widgets.gauge.major-ticks-font</legend>
-      <tb-widget-font formControlName="majorTickFont"></tb-widget-font>
-    </fieldset>
-  </fieldset>
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.gauge.plate-settings</legend>
-    <tb-color-input fxFlex
-                    formControlName="colorPlate"
-                    icon="format_color_fill"
-                    label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton>
-    </tb-color-input>
-    <mat-slide-toggle formControlName="showBorder" class="slide-block">
-      {{ 'widgets.gauge.show-plate-border' | translate }}
-    </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <tb-color-input fxFlex
-                      formControlName="colorBorder"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.border-color' | translate }}" openOnInput colorClearButton>
+<ng-container [formGroup]="analogueCompassWidgetSettingsForm">
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
+    <div class="tb-form-row">
+      <div class="fixed-title-width" translate>widgets.gauge.labels</div>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-string-items-list
+          style="display: flex"
+          fxFlex
+          appearance="outline"
+          subscriptSizing="dynamic"
+          editable
+          formControlName="majorTicks">
+        </tb-string-items-list>
+      </div>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.label-style</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-font-settings formControlName="majorTickFont"
+                          disabledLineHeight>
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="majorTickColor">
+        </tb-color-input>
+      </div>
+    </div>
+
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.major-ticks</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorMajorTicks">
       </tb-color-input>
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.gauge.border-width</mat-label>
-        <input matInput type="number" min="0" formControlName="borderOuterWidth">
-      </mat-form-field>
-    </section>
-  </fieldset>
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.gauge.needle-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
-      <mat-label translate>widgets.gauge.needle-circle-size</mat-label>
-      <input matInput type="number" min="0" formControlName="needleCircleSize">
-    </mat-form-field>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <tb-color-input fxFlex
-                      formControlName="colorNeedle"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.minor-ticks</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="minorTicks">
+        </mat-form-field>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="colorMinorTicks">
+        </tb-color-input>
+      </div>
+    </div>
+
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="showStrokeTicks">
+        {{ 'widgets.gauge.show-stroke-ticks' | translate }}
+      </mat-slide-toggle>
+    </div>
+  </div>
+
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.gauge.plate-settings</div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.plate-color</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorPlate">
       </tb-color-input>
-      <tb-color-input fxFlex
-                      formControlName="colorNeedleCircle"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.needle-circle-color' | translate }}" openOnInput colorClearButton>
+    </div>
+    <div class="tb-form-row space-between column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBorder">
+        {{ 'widgets.gauge.show-plate-border' | translate }}
+      </mat-slide-toggle>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
+          <input matInput min="0" formControlName="borderOuterWidth" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="colorBorder">
+        </tb-color-input>
+      </div>
+    </div>
+  </div>
+
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.gauge.needle-settings</div>
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.gauge.needle-circle</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
+          <input matInput min="0" formControlName="needleCircleSize" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="colorNeedleCircle">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.needle-color</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorNeedle">
       </tb-color-input>
-    </section>
-  </fieldset>
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.gauge.animation-settings</legend>
+    </div>
+  </div>
+
+  <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="analogueCompassWidgetSettingsForm.get('animation').value">
       <mat-expansion-panel-header fxLayout="row wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="animation" (click)="$event.stopPropagation()"
+          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.gauge.enable-animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>widgets.gauge.animation-duration</mat-label>
-            <input matInput type="number" min="0" formControlName="animationDuration">
-          </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>widgets.gauge.animation-rule</mat-label>
-            <mat-select formControlName="animationRule">
-              <mat-option [value]="'linear'">
-                {{ 'widgets.gauge.animation-linear' | translate }}
-              </mat-option>
-              <mat-option [value]="'quad'">
-                {{ 'widgets.gauge.animation-quad' | translate }}
-              </mat-option>
-              <mat-option [value]="'quint'">
-                {{ 'widgets.gauge.animation-quint' | translate }}
-              </mat-option>
-              <mat-option [value]="'cycle'">
-                {{ 'widgets.gauge.animation-cycle' | translate }}
-              </mat-option>
-              <mat-option [value]="'bounce'">
-                {{ 'widgets.gauge.animation-bounce' | translate }}
-              </mat-option>
-              <mat-option [value]="'elastic'">
-                {{ 'widgets.gauge.animation-elastic' | translate }}
-              </mat-option>
-              <mat-option [value]="'dequad'">
-                {{ 'widgets.gauge.animation-dequad' | translate }}
-              </mat-option>
-              <mat-option [value]="'dequint'">
-                {{ 'widgets.gauge.animation-dequint' | translate }}
-              </mat-option>
-              <mat-option [value]="'decycle'">
-                {{ 'widgets.gauge.animation-decycle' | translate }}
-              </mat-option>
-              <mat-option [value]="'debounce'">
-                {{ 'widgets.gauge.animation-debounce' | translate }}
-              </mat-option>
-              <mat-option [value]="'delastic'">
-                {{ 'widgets.gauge.animation-delastic' | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>widgets.gauge.animation-target</mat-label>
+        <div class="tb-form-row">
+          <div class="fixed-title-width" translate>widgets.gauge.animation-target</div>
+          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="animationTarget">
               <mat-option [value]="'needle'">
                 {{ 'widgets.gauge.animation-target-needle' | translate }}
@@ -171,8 +145,53 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-        </section>
+        </div>
+        <div class="tb-form-row space-between">
+          <div translate>widgets.gauge.animation-duration-rule</div>
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+              <mat-select formControlName="animationRule">
+                <mat-option [value]="'linear'">
+                  {{ 'widgets.gauge.animation-linear' | translate }}
+                </mat-option>
+                <mat-option [value]="'quad'">
+                  {{ 'widgets.gauge.animation-quad' | translate }}
+                </mat-option>
+                <mat-option [value]="'quint'">
+                  {{ 'widgets.gauge.animation-quint' | translate }}
+                </mat-option>
+                <mat-option [value]="'cycle'">
+                  {{ 'widgets.gauge.animation-cycle' | translate }}
+                </mat-option>
+                <mat-option [value]="'bounce'">
+                  {{ 'widgets.gauge.animation-bounce' | translate }}
+                </mat-option>
+                <mat-option [value]="'elastic'">
+                  {{ 'widgets.gauge.animation-elastic' | translate }}
+                </mat-option>
+                <mat-option [value]="'dequad'">
+                  {{ 'widgets.gauge.animation-dequad' | translate }}
+                </mat-option>
+                <mat-option [value]="'dequint'">
+                  {{ 'widgets.gauge.animation-dequint' | translate }}
+                </mat-option>
+                <mat-option [value]="'decycle'">
+                  {{ 'widgets.gauge.animation-decycle' | translate }}
+                </mat-option>
+                <mat-option [value]="'debounce'">
+                  {{ 'widgets.gauge.animation-debounce' | translate }}
+                </mat-option>
+                <mat-option [value]="'delastic'">
+                  {{ 'widgets.gauge.animation-delastic' | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+        </div>
       </ng-template>
     </mat-expansion-panel>
-  </fieldset>
-</section>
+  </div>
+</ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts
index 5a2a2b2678..6ae485c49b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts
@@ -19,9 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Component } from '@angular/core';
-import { MatChipInputEvent } from '@angular/material/chips';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'tb-analogue-compass-widget-settings',
@@ -81,6 +79,7 @@ export class AnalogueCompassWidgetSettingsComponent extends WidgetSettingsCompon
       colorMinorTicks: [settings.colorMinorTicks, []],
       showStrokeTicks: [settings.showStrokeTicks, []],
       majorTickFont: [settings.majorTickFont, []],
+      majorTickColor: [settings.majorTickFont.color, []],
 
       // Plate settings
       colorPlate: [settings.colorPlate, []],
@@ -131,41 +130,8 @@ export class AnalogueCompassWidgetSettingsComponent extends WidgetSettingsCompon
     this.analogueCompassWidgetSettingsForm.get('animationTarget').updateValueAndValidity({emitEvent});
   }
 
-  majorTicksNamesList(): string[] {
-    return this.analogueCompassWidgetSettingsForm.get('majorTicks').value;
-  }
-
-  removeMajorTickName(tickName: string): void {
-    const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value;
-    const index = tickNames.indexOf(tickName);
-    if (index >= 0) {
-      tickNames.splice(index, 1);
-      this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames);
-      this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty();
-    }
-  }
-
-  addMajorTickName(event: MatChipInputEvent): void {
-    const input = event.chipInput.inputElement;
-    const value = event.value;
-
-    const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value;
-
-    if ((value || '').trim()) {
-      tickNames.push(value.trim());
-      this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames);
-      this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty();
-    }
-
-    if (input) {
-      input.value = '';
-    }
-  }
-
-  majorTickNameDrop(event: CdkDragDrop<string[]>): void {
-    const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value;
-    moveItemInArray(tickNames, event.previousIndex, event.currentIndex);
-    this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames);
-    this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty();
+  protected prepareOutputSettings(settings) {
+    settings.majorTickFont.color = this.analogueCompassWidgetSettingsForm.get('majorTickColor').value;
+    return settings;
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
index c2264d7aca..442a431e33 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="analogueGaugeWidgetSettingsForm" fxLayout="column">
+<ng-container [formGroup]="analogueGaugeWidgetSettingsForm">
   <ng-container [ngSwitch]="gaugeType">
     <ng-container *ngSwitchCase="'radial'">
       <ng-container *ngTemplateOutlet="radialGauge; context: ctx "></ng-container>
@@ -24,330 +24,383 @@
       <ng-container *ngTemplateOutlet="linearGauge; context: ctx "></ng-container>
     </ng-container>
   </ng-container>
-  <tb-color-input
-    formControlName="defaultColor"
-    icon="format_color_fill"
-    label="{{ 'widgets.gauge.default-color' | translate }}" openOnInput colorClearButton>
-  </tb-color-input>
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.gauge.ticks-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.gauge.min-value</mat-label>
-        <input matInput type="number" formControlName="minValue">
-      </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.gauge.max-value</mat-label>
-        <input matInput type="number" formControlName="maxValue">
-      </mat-form-field>
-    </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.gauge.major-ticks-count</mat-label>
-        <input matInput type="number" min="0" formControlName="majorTicksCount">
-      </mat-form-field>
-      <tb-color-input fxFlex
-                      formControlName="colorMajorTicks"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
-      </tb-color-input>
-    </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.gauge.minor-ticks-count</mat-label>
-        <input matInput type="number" min="0" formControlName="minorTicks">
-      </mat-form-field>
-      <tb-color-input fxFlex
-                      formControlName="colorMinorTicks"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
-      </tb-color-input>
-    </section>
-    <fieldset class="fields-group">
-      <legend class="group-title" translate>widgets.gauge.tick-numbers-font</legend>
-      <tb-widget-font formControlName="numbersFont"></tb-widget-font>
-    </fieldset>
-  </fieldset>
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.gauge.unit-title-settings</legend>
-    <mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('showUnitTitle').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
-          <mat-slide-toggle formControlName="showUnitTitle" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
-            {{ 'widgets.gauge.show-unit-title' | translate }}
-          </mat-slide-toggle>
-        </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
-          widget-config.advanced-settings
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>widgets.gauge.unit-title</mat-label>
-            <input matInput formControlName="unitTitle">
-          </mat-form-field>
-          <fieldset class="fields-group">
-            <legend class="group-title" translate>widgets.gauge.title-font</legend>
-            <tb-widget-font formControlName="titleFont"></tb-widget-font>
-          </fieldset>
-        </section>
-      </ng-template>
-    </mat-expansion-panel>
-  </fieldset>
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.gauge.units-settings</legend>
-    <fieldset class="fields-group">
-      <legend class="group-title" translate>widgets.gauge.units-font</legend>
-      <tb-widget-font formControlName="unitsFont"></tb-widget-font>
-    </fieldset>
-  </fieldset>
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.gauge.value-box-settings</legend>
+
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.gauge.ticks</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">
+          <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <div class="tb-small-label" translate>widgets.gauge.max-value-short</div>
+        <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="numbersFont"
+                          disabledLineHeight>
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="numbersColor">
+        </tb-color-input>
+      </div>
+    </div>
+
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.gauge.major-ticks-count</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="majorTicksCount" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="colorMajorTicks">
+        </tb-color-input>
+      </div>
+    </div>
+
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.gauge.minor-ticks-count</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="minorTicks" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="colorMinorTicks">
+        </tb-color-input>
+      </div>
+    </div>
+  </div>
+
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.gauge.units-settings</div>
+    <div class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showUnitTitle">
+        {{ 'widgets.gauge.units-title' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="unitTitle" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="titleFont"
+                          disabledLineHeight
+                          [previewText]="analogueGaugeWidgetSettingsForm.get('unitTitle').value">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="titleColor">
+        </tb-color-input>
+      </div>
+    </div>
+
+    <div class="tb-form-row space-between">
+      <div translate>widget-config.units-short</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-font-settings formControlName="unitsFont"
+                          disabledLineHeight>
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="unitsColor">
+        </tb-color-input>
+      </div>
+    </div>
+  </div>
+
+  <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('valueBox').value">
       <mat-expansion-panel-header fxLayout="row wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="valueBox" (click)="$event.stopPropagation()"
+          <mat-slide-toggle class="mat-slide" formControlName="valueBox" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
-            {{ 'widgets.gauge.show-value-box' | translate }}
+            {{ 'widgets.gauge.value-box' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>widgets.gauge.value-int</mat-label>
-            <input matInput type="number" min="0" step="1" formControlName="valueInt">
+        <div class="tb-form-row space-between">
+          <div translate>widgets.gauge.value-int</div>
+          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+            <input matInput type="number" min="0" step="1" formControlName="valueInt" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
-          <fieldset class="fields-group">
-            <legend class="group-title" translate>widgets.gauge.value-font</legend>
-            <tb-widget-font formControlName="valueFont" [hasShadowColor]="true"></tb-widget-font>
-          </fieldset>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-            <tb-color-input fxFlex
-                            formControlName="colorValueBoxRect"
-                            icon="format_color_fill"
-                            label="{{ 'widgets.gauge.value-box-rect-stroke-color' | translate }}" openOnInput colorClearButton>
+        </div>
+        <div class="tb-form-panel">
+          <div class="tb-form-panel-title" translate>widgets.gauge.value-text</div>
+          <div class="tb-form-row space-between">
+            <div translate>widgets.gauge.value-text</div>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+              <tb-font-settings formControlName="valueFont"
+                                disabledLineHeight>
+              </tb-font-settings>
+              <tb-color-input asBoxInput
+                              colorClearButton
+                              formControlName="valueColor">
+              </tb-color-input>
+            </div>
+          </div>
+          <div class="tb-form-row space-between">
+            <div translate>widgets.gauge.value-text-shadow</div>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="valueColorShadow">
             </tb-color-input>
-            <tb-color-input fxFlex
-                            formControlName="colorValueBoxRectEnd"
-                            icon="format_color_fill"
-                            label="{{ 'widgets.gauge.value-box-rect-stroke-color-end' | translate }}" openOnInput colorClearButton>
+          </div>
+        </div>
+        <div class="tb-form-panel">
+          <div class="tb-form-panel-title" translate>widgets.gauge.value-box</div>
+          <div class="tb-form-row space-between">
+            <div translate>widgets.gauge.rect-stroke-color-start</div>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="colorValueBoxRect">
+            </tb-color-input>
+          </div>
+
+          <div class="tb-form-row space-between">
+            <div translate>widgets.gauge.rect-stroke-color-end</div>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="colorValueBoxRectEnd">
             </tb-color-input>
-          </section>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-            <tb-color-input fxFlex
-                            formControlName="colorValueBoxBackground"
-                            icon="format_color_fill"
-                            label="{{ 'widgets.gauge.value-box-background-color' | translate }}" openOnInput colorClearButton>
+          </div>
+
+          <div class="tb-form-row space-between">
+            <div translate>widgets.gauge.background-color</div>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="colorValueBoxBackground">
             </tb-color-input>
-            <tb-color-input fxFlex
-                            formControlName="colorValueBoxShadow"
-                            icon="format_color_fill"
-                            label="{{ 'widgets.gauge.value-box-shadow-color' | translate }}" openOnInput colorClearButton>
+          </div>
+
+          <div class="tb-form-row space-between">
+            <div translate>widgets.gauge.shadow-color</div>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="colorValueBoxShadow">
             </tb-color-input>
-          </section>
-        </section>
+          </div>
+        </div>
       </ng-template>
     </mat-expansion-panel>
-  </fieldset>
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.gauge.plate-settings</legend>
-    <tb-color-input fxFlex
-                    formControlName="colorPlate"
-                    icon="format_color_fill"
-                    label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton>
-    </tb-color-input>
-    <mat-slide-toggle formControlName="showBorder">
-      {{ 'widgets.gauge.show-plate-border' | translate }}
-    </mat-slide-toggle>
-  </fieldset>
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.gauge.needle-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-color-input fxFlex
-                      formControlName="colorNeedle"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton>
+  </div>
+
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.gauge.plate-settings</div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.plate-color</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorPlate">
       </tb-color-input>
-      <tb-color-input fxFlex
-                      formControlName="colorNeedleEnd"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.needle-color-end' | translate }}" openOnInput colorClearButton>
+    </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="showBorder">
+        {{ 'widgets.gauge.show-plate-border' | translate }}
+      </mat-slide-toggle>
+    </div>
+  </div>
+
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.gauge.needle-settings</div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.needle-color-start</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorNeedle">
       </tb-color-input>
-    </section>
-    <section  fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-color-input fxFlex
-                      formControlName="colorNeedleShadowUp"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.needle-color-shadow-up' | translate }}" openOnInput colorClearButton>
+    </div>
+
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.needle-color-end</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorNeedleEnd">
       </tb-color-input>
-      <tb-color-input fxFlex
-                      formControlName="colorNeedleShadowDown"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.needle-color-shadow-down' | translate }}" openOnInput colorClearButton>
+    </div>
+
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.needle-color-shadow-up</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorNeedleShadowUp">
       </tb-color-input>
-    </section>
-  </fieldset>
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.gauge.highlights-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
-      <mat-label translate>widgets.gauge.highlights-width</mat-label>
-      <input matInput type="number" min="0" formControlName="highlightsWidth">
-    </mat-form-field>
-    <fieldset class="fields-group">
-      <legend class="group-title" translate>widgets.gauge.highlights</legend>
-      <div fxLayout="column">
-        <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
-             (cdkDropListDropped)="highlightDrop($event)">
-          <div cdkDrag class="tb-draggable" *ngFor="let highlightControl of highlightsFormArray().controls; trackBy: trackByHighlightControl;
-                 let $index = index; last as isLast;"
-               fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-            <tb-gauge-highlight [formControl]="highlightControl"
-                                [expanded]="highlightControl.new"
-                                (removeHighlight)="removeHighlight($index)">
-            </tb-gauge-highlight>
-          </div>
-        </div>
-        <div *ngIf="!highlightsFormArray().controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">widgets.gauge.no-highlights</span>
-        </div>
-        <div style="padding-top: 16px;">
-          <button mat-raised-button color="primary"
-                  type="button"
-                  (click)="addHighlight()">
-            <span translate>widgets.gauge.add-highlight</span>
-          </button>
-        </div>
+    </div>
+
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.needle-color-shadow-down</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorNeedleShadowDown">
+      </tb-color-input>
+    </div>
+  </div>
+
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.gauge.scale-settings</div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.scale</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="highlightsWidth">
+        </mat-form-field>
+        <tb-color-settings formControlName="highlights">
+          <!--        [disabledColorType]="[colorType.constant, colorType.function]"-->
+        </tb-color-settings>
       </div>
-    </fieldset>
-  </fieldset>
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.gauge.animation-settings</legend>
+    </div>
+  </div>
+
+  <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('animation').value">
       <mat-expansion-panel-header fxLayout="row wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="animation" (click)="$event.stopPropagation()"
+          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
                             fxLayoutAlign="center">
             {{ 'widgets.gauge.enable-animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>widgets.gauge.animation-duration</mat-label>
-            <input matInput type="number" min="0" formControlName="animationDuration">
-          </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>widgets.gauge.animation-rule</mat-label>
-            <mat-select formControlName="animationRule">
-              <mat-option [value]="'linear'">
-                {{ 'widgets.gauge.animation-linear' | translate }}
-              </mat-option>
-              <mat-option [value]="'quad'">
-                {{ 'widgets.gauge.animation-quad' | translate }}
-              </mat-option>
-              <mat-option [value]="'quint'">
-                {{ 'widgets.gauge.animation-quint' | translate }}
-              </mat-option>
-              <mat-option [value]="'cycle'">
-                {{ 'widgets.gauge.animation-cycle' | translate }}
-              </mat-option>
-              <mat-option [value]="'bounce'">
-                {{ 'widgets.gauge.animation-bounce' | translate }}
-              </mat-option>
-              <mat-option [value]="'elastic'">
-                {{ 'widgets.gauge.animation-elastic' | translate }}
-              </mat-option>
-              <mat-option [value]="'dequad'">
-                {{ 'widgets.gauge.animation-dequad' | translate }}
-              </mat-option>
-              <mat-option [value]="'dequint'">
-                {{ 'widgets.gauge.animation-dequint' | translate }}
-              </mat-option>
-              <mat-option [value]="'decycle'">
-                {{ 'widgets.gauge.animation-decycle' | translate }}
-              </mat-option>
-              <mat-option [value]="'debounce'">
-                {{ 'widgets.gauge.animation-debounce' | translate }}
-              </mat-option>
-              <mat-option [value]="'delastic'">
-                {{ 'widgets.gauge.animation-delastic' | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </section>
+        <div class="tb-form-row space-between">
+          <div translate>widgets.gauge.animation-duration-rule</div>
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+              <mat-select formControlName="animationRule">
+                <mat-option [value]="'linear'">
+                  {{ 'widgets.gauge.animation-linear' | translate }}
+                </mat-option>
+                <mat-option [value]="'quad'">
+                  {{ 'widgets.gauge.animation-quad' | translate }}
+                </mat-option>
+                <mat-option [value]="'quint'">
+                  {{ 'widgets.gauge.animation-quint' | translate }}
+                </mat-option>
+                <mat-option [value]="'cycle'">
+                  {{ 'widgets.gauge.animation-cycle' | translate }}
+                </mat-option>
+                <mat-option [value]="'bounce'">
+                  {{ 'widgets.gauge.animation-bounce' | translate }}
+                </mat-option>
+                <mat-option [value]="'elastic'">
+                  {{ 'widgets.gauge.animation-elastic' | translate }}
+                </mat-option>
+                <mat-option [value]="'dequad'">
+                  {{ 'widgets.gauge.animation-dequad' | translate }}
+                </mat-option>
+                <mat-option [value]="'dequint'">
+                  {{ 'widgets.gauge.animation-dequint' | translate }}
+                </mat-option>
+                <mat-option [value]="'decycle'">
+                  {{ 'widgets.gauge.animation-decycle' | translate }}
+                </mat-option>
+                <mat-option [value]="'debounce'">
+                  {{ 'widgets.gauge.animation-debounce' | translate }}
+                </mat-option>
+                <mat-option [value]="'delastic'">
+                  {{ 'widgets.gauge.animation-delastic' | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+        </div>
       </ng-template>
     </mat-expansion-panel>
-  </fieldset>
-</section>
+  </div>
+</ng-container>
 
 <ng-template #radialGauge let-settingsForm="settingsForm">
-  <fieldset class="fields-group" [formGroup]="settingsForm">
-    <legend class="group-title" translate>widgets.gauge.radial-gauge-settings</legend>
-    <section  fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.gauge.start-ticks-angle</mat-label>
-        <input matInput type="number" min="0" max="360" formControlName="startAngle">
+  <div class="tb-form-panel" [formGroup]="settingsForm">
+    <div class="tb-form-panel-title" translate>widgets.gauge.radial-gauge-settings</div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.start-ticks-angle</div>
+      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+        <input matInput formControlName="startAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.ticks-angle</div>
+      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+        <input matInput formControlName="ticksAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.gauge.ticks-angle</mat-label>
-        <input matInput type="number" min="0" max="360" formControlName="ticksAngle">
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.needle-circle-size</div>
+      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+        <input matInput formControlName="needleCircleSize" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-    </section>
-    <mat-form-field fxFlex class="mat-block">
-      <mat-label translate>widgets.gauge.needle-circle-size</mat-label>
-      <input matInput type="number" min="0" formControlName="needleCircleSize">
-    </mat-form-field>
-  </fieldset>
+    </div>
+
+    <ng-container *ngTemplateOutlet="arrowScaleDefaultColor"></ng-container>
+  </div>
 </ng-template>
 
 <ng-template #linearGauge let-settingsForm="settingsForm">
-  <fieldset class="fields-group" [formGroup]="settingsForm">
-    <legend class="group-title" translate>widgets.gauge.linear-gauge-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.gauge.bar-stroke-width</mat-label>
-        <input matInput type="number" min="0" formControlName="barStrokeWidth">
-      </mat-form-field>
-      <tb-color-input fxFlex
-                      formControlName="colorBarStroke"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.bar-stroke-color' | translate }}" openOnInput colorClearButton>
-      </tb-color-input>
-    </section>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-color-input fxFlex
-                      formControlName="colorBar"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.bar-background-color' | translate }}" openOnInput colorClearButton>
+  <div class="tb-form-panel" [formGroup]="settingsForm">
+    <div class="tb-form-panel-title" translate>widgets.gauge.linear-gauge-settings</div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.bar-stroke</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="barStrokeWidth" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="colorBar">
+        </tb-color-input>
+      </div>
+    </div>
+
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.bar-background-color</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorBar">
       </tb-color-input>
-      <tb-color-input fxFlex
-                      formControlName="colorBarEnd"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.bar-background-color-end' | translate }}" openOnInput colorClearButton>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.bar-background-color-end</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorBarEnd">
       </tb-color-input>
-    </section>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-color-input fxFlex
-                      formControlName="colorBarProgress"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.progress-bar-color' | translate }}" openOnInput colorClearButton>
+    </div>
+
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.progress-bar-color-start</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorBarProgress">
       </tb-color-input>
-      <tb-color-input fxFlex
-                      formControlName="colorBarProgressEnd"
-                      icon="format_color_fill"
-                      label="{{ 'widgets.gauge.progress-bar-color-end' | translate }}" openOnInput colorClearButton>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widgets.gauge.progress-bar-color-end</div>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="colorBarProgressEnd">
       </tb-color-input>
-    </section>
-  </fieldset>
+    </div>
+    <ng-container *ngTemplateOutlet="arrowScaleDefaultColor"></ng-container>
+  </div>
+
+</ng-template>
+
+<ng-template #arrowScaleDefaultColor>
+  <div class="tb-form-row space-between" [formGroup]="analogueGaugeWidgetSettingsForm">
+    <div>{{ 'widgets.gauge.arrow-and-scale-color' | translate }}</div>
+    <tb-color-input asBoxInput
+                    formControlName="defaultColor">
+    </tb-color-input>
+  </div>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
index 07f2be69bd..b2bc6621a1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
@@ -15,11 +15,10 @@
 ///
 
 import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
-import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component';
-import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
 export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponent {
 
@@ -119,19 +118,24 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
       minorTicks: [settings.majorTicksCount, [Validators.min(0)]],
       colorMinorTicks: [settings.colorMinorTicks, []],
       numbersFont: [settings.numbersFont, []],
+      numbersColor: [settings.numbersFont.color, []],
 
       // Unit title settings
       showUnitTitle: [settings.showUnitTitle, []],
       unitTitle: [settings.unitTitle, []],
       titleFont: [settings.titleFont, []],
+      titleColor: [settings.titleFont.color, []],
 
       // Units settings
       unitsFont: [settings.unitsFont, []],
+      unitsColor: [settings.unitsFont.color, []],
 
       // Value box settings
       valueBox: [settings.valueBox, []],
       valueInt: [settings.valueInt, [Validators.min(0)]],
       valueFont: [settings.valueFont, []],
+      valueColor: [settings.valueFont.color, []],
+      valueColorShadow: [settings.valueFont.shadowColor, []],
       colorValueBoxRect: [settings.colorValueBoxRect, []],
       colorValueBoxRectEnd: [settings.colorValueBoxRectEnd, []],
       colorValueBoxBackground: [settings.colorValueBoxBackground, []],
@@ -149,7 +153,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
 
       // Highlights settings
       highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]],
-      highlights: this.prepareHighlightsFormArray(settings.highlights),
+      highlights: this.prepareHighlights(settings.highlights),
 
       // Animation settings
       animation: [settings.animation, []],
@@ -170,13 +174,16 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
     if (showUnitTitle) {
       this.analogueGaugeWidgetSettingsForm.get('unitTitle').enable();
       this.analogueGaugeWidgetSettingsForm.get('titleFont').enable();
+      this.analogueGaugeWidgetSettingsForm.get('titleColor').enable();
     } else {
       this.analogueGaugeWidgetSettingsForm.get('unitTitle').disable();
       this.analogueGaugeWidgetSettingsForm.get('titleFont').disable();
+      this.analogueGaugeWidgetSettingsForm.get('titleColor').disable();
     }
     if (valueBox) {
       this.analogueGaugeWidgetSettingsForm.get('valueInt').enable();
       this.analogueGaugeWidgetSettingsForm.get('valueFont').enable();
+      this.analogueGaugeWidgetSettingsForm.get('valueColor').enable();
       this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').enable();
       this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').enable();
       this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').enable();
@@ -184,6 +191,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
     } else {
       this.analogueGaugeWidgetSettingsForm.get('valueInt').disable();
       this.analogueGaugeWidgetSettingsForm.get('valueFont').disable();
+      this.analogueGaugeWidgetSettingsForm.get('valueColor').disable();
       this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').disable();
       this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').disable();
       this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').disable();
@@ -198,8 +206,10 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
     }
     this.analogueGaugeWidgetSettingsForm.get('unitTitle').updateValueAndValidity({emitEvent});
     this.analogueGaugeWidgetSettingsForm.get('titleFont').updateValueAndValidity({emitEvent});
+    this.analogueGaugeWidgetSettingsForm.get('titleColor').updateValueAndValidity({emitEvent});
     this.analogueGaugeWidgetSettingsForm.get('valueInt').updateValueAndValidity({emitEvent});
     this.analogueGaugeWidgetSettingsForm.get('valueFont').updateValueAndValidity({emitEvent});
+    this.analogueGaugeWidgetSettingsForm.get('valueColor').updateValueAndValidity({emitEvent});
     this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').updateValueAndValidity({emitEvent});
     this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').updateValueAndValidity({emitEvent});
     this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').updateValueAndValidity({emitEvent});
@@ -208,50 +218,21 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
     this.analogueGaugeWidgetSettingsForm.get('animationRule').updateValueAndValidity({emitEvent});
   }
 
-  protected doUpdateSettings(settingsForm: UntypedFormGroup, settings: WidgetSettings) {
-    settingsForm.setControl('highlights', this.prepareHighlightsFormArray(settings.highlights), {emitEvent: false});
-  }
-
-  private prepareHighlightsFormArray(highlights: GaugeHighlight[] | undefined): UntypedFormArray {
-    const highlightsControls: Array<AbstractControl> = [];
-    if (highlights) {
-      highlights.forEach((highlight) => {
-        highlightsControls.push(this.fb.control(highlight, [Validators.required]));
-      });
+  protected prepareOutputSettings(settings) {
+    settings.numbersFont.color = this.analogueGaugeWidgetSettingsForm.get('numbersColor').value;
+    if (settings.titleFont) {
+      settings.titleFont.color = this.analogueGaugeWidgetSettingsForm.get('titleColor').value;
     }
-    return this.fb.array(highlightsControls);
-  }
-
-  highlightsFormArray(): UntypedFormArray {
-    return this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
-  }
-
-  public trackByHighlightControl(index: number, highlightControl: AbstractControl): any {
-    return highlightControl;
-  }
-
-  public removeHighlight(index: number) {
-    (this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray).removeAt(index);
-  }
-
-  public addHighlight() {
-    const highlight: GaugeHighlight = {
-      from: null,
-      to: null,
-      color: null
-    };
-    const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
-    const highlightControl = this.fb.control(highlight, [Validators.required]);
-    (highlightControl as any).new = true;
-    highlightsArray.push(highlightControl);
-    this.analogueGaugeWidgetSettingsForm.updateValueAndValidity();
+    settings.unitsFont.color = this.analogueGaugeWidgetSettingsForm.get('unitsColor').value;
+    if (settings.valueFont) {
+      settings.valueFont.color = this.analogueGaugeWidgetSettingsForm.get('valueColor').value;
+      settings.valueFont.shadowColor = this.analogueGaugeWidgetSettingsForm.get('valueColorShadow').value;
+    }
+    return settings;
   }
 
-  highlightDrop(event: CdkDragDrop<string[]>) {
-    const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
-    const highlight = highlightsArray.at(event.previousIndex);
-    highlightsArray.removeAt(event.previousIndex);
-    highlightsArray.insert(event.currentIndex, highlight);
+  private prepareHighlights(highlights: GaugeHighlight[] | undefined) {
+    return {type: 'range', rangeList: highlights};
   }
 
 }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 6605b31a47..fab1642201 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -5362,8 +5362,10 @@
             "max-value-short": "max",
             "start-ticks-angle": "Start ticks angle",
             "ticks-angle": "Ticks angle",
+            "major-ticks": "Major ticks",
             "major-ticks-count": "Major ticks count",
             "major-ticks-color": "Major ticks color",
+            "minor-ticks": "Minor ticks",
             "minor-ticks-count": "Minor ticks count",
             "minor-ticks-color": "Minor ticks color",
             "tick-numbers-font": "Tick numbers font",
@@ -5375,21 +5377,29 @@
             "units-font": "Units text font",
             "value-box-settings": "Value box settings",
             "show-value-box": "Show value box",
+            "value-box": "Value box",
             "value-int": "Digits count for integer part of value",
+            "value-text": "Value text",
+            "value-text-shadow": "Value text shadow",
             "value-font": "Value text font",
+            "rect-stroke-color-start": "Rectangle stroke color - start gradient",
+            "rect-stroke-color-end": "Rectangle stroke color - end gradient",
+            "background-color": "Background color",
+            "shadow-color": "Shadow color",
             "value-box-rect-stroke-color": "Value box rectangle stroke color",
             "value-box-rect-stroke-color-end": "Value box rectangle stroke color - end gradient",
             "value-box-background-color": "Value box background color",
             "value-box-shadow-color": "Value box shadow color",
             "plate-settings": "Plate settings",
-            "show-plate-border": "Show plate border",
+            "show-plate-border": "Plate border",
             "plate-color": "Plate color",
             "needle-settings": "Needle settings",
             "needle-circle-size": "Needle circle size",
             "needle-color": "Needle color",
+            "needle-color-start": "Needle color - start gradient",
             "needle-color-end": "Needle color - end gradient",
             "needle-color-shadow-up": "Upper half of the needle shadow color",
-            "needle-color-shadow-down": "Drop shadow needle color",
+            "needle-color-shadow-down": "Drop shadow",
             "highlights-settings": "Highlights settings",
             "highlights-width": "Highlights width",
             "highlights": "Highlights",
@@ -5399,7 +5409,8 @@
             "no-highlights": "No highlights configured",
             "add-highlight": "Add highlight",
             "animation-settings": "Animation settings",
-            "enable-animation": "Enable animation",
+            "enable-animation": "Animation",
+            "animation-duration-rule": "Animation duration and rule",
             "animation-duration": "Animation duration",
             "animation-rule": "Animation rule",
             "animation-linear": "Linear",
@@ -5414,9 +5425,10 @@
             "animation-debounce": "Debounce",
             "animation-delastic": "Delastic",
             "linear-gauge-settings": "Linear gauge settings",
+            "bar-stroke": "Bar stroke",
             "bar-stroke-width": "Bar stroke width",
             "bar-stroke-color": "Bar stroke color",
-            "bar-background-color": "Gauge bar background color",
+            "bar-background-color": "Bar background color - start gradient",
             "bar-background-color-end": "Bar background color - end gradient",
             "progress-bar-color": "Progress bar color",
             "progress-bar": "Progress bar",
@@ -5427,6 +5439,7 @@
             "major-ticks-font": "Major ticks font",
             "border-color": "Border color",
             "border-width": "Border width",
+            "needle-circle": "Needle circle",
             "needle-circle-color": "Needle circle color",
             "animation-target": "Animation target",
             "animation-target-needle": "Needle",
@@ -5476,6 +5489,8 @@
             "value": "Value",
             "ticks": "Ticks",
             "arrow-and-scale-color": "Arrow and scale default color",
+            "scale-settings": "Scale settings",
+            "scale": "Scale",
             "scale-color": "Scale colors",
             "compass-appearance": "Compass appearance",
             "labels": "Labels",