UI: Fixed show value after unit converted in gauges and range chart

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

@@ -285,10 +285,10 @@ function getValueDec(ctx: WidgetContext, _settings: AnalogueGaugeSettings): numb
   if (ctx.data && ctx.data[0]) {
     dataKey = ctx.data[0].dataKey;
   }
-  if (dataKey && isDefined(dataKey.decimals)) {
+  if (dataKey && isDefinedAndNotNull(dataKey.decimals)) {
     return dataKey.decimals;
   } else {
-    return isDefinedAndNotNull(ctx.decimals) ? ctx.decimals : 0;
+    return ctx.decimals ?? 0;
   }
 }
 
@@ -300,6 +300,6 @@ function getUnits(ctx: WidgetContext, settings: AnalogueGaugeSettings): TbUnit {
   if (dataKey?.units) {
     return dataKey.units;
   } else {
-    return isDefinedAndNotNull(settings.units) ? settings.units : ctx.units;
+    return settings.units ?? ctx.units;
   }
 }

ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts

@@ -32,7 +32,8 @@ import {
   ComponentStyle,
   getDataKey,
   overlayStyle,
-  textStyle
+  textStyle,
+  ValueFormatProcessor
 } from '@shared/models/widget-settings.models';
 import { isDefinedAndNotNull } from '@core/utils';
 import {
@@ -113,11 +114,17 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
     this.units = unitService.getTargetUnitSymbol(units);
     this.unitConvertor = unitService.geUnitConverter(units);
 
+    const valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {
+      units,
+      decimals: this.decimals,
+      ignoreUnitSymbol: true
+    });
+
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
     this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
-    this.rangeItems = toRangeItems(this.settings.rangeColors, this.unitConvertor);
+    this.rangeItems = toRangeItems(this.settings.rangeColors, valueFormat);
     this.visibleRangeItems = this.rangeItems.filter(item => item.visible);
 
     this.showLegend = this.settings.showLegend && !!this.rangeItems.length;

ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts

@@ -22,6 +22,7 @@ import {
   Font,
   simpleDateFormat,
   sortedColorRange,
+  ValueFormatProcessor,
   ValueSourceType
 } from '@shared/models/widget-settings.models';
 import { LegendPosition } from '@shared/models/widget.models';
@@ -291,21 +292,21 @@ export const rangeChartTimeSeriesKeySettings = (settings: RangeChartWidgetSettin
     }
   });
 
-export const toRangeItems = (colorRanges: Array<ColorRange>, convertValue: (x: number) => number): RangeItem[] => {
+export const toRangeItems = (colorRanges: Array<ColorRange>, valueFormat: ValueFormatProcessor): RangeItem[] => {
   const rangeItems: RangeItem[] = [];
   let counter = 0;
   const ranges = sortedColorRange(filterIncludingColorRanges(colorRanges)).filter(r => isNumber(r.from) || isNumber(r.to));
   for (let i = 0; i < ranges.length; i++) {
     const range = ranges[i];
     let from = range.from;
-    const to = isDefinedAndNotNull(range.to) ? convertValue(range.to) : range.to;
+    const to = isDefinedAndNotNull(range.to) ? Number(valueFormat.format(range.to)) : range.to;
     if (i > 0) {
       const prevRange = ranges[i - 1];
       if (isNumber(prevRange.to) && isNumber(from) && from < prevRange.to) {
         from = prevRange.to;
       }
     }
-    from = isDefinedAndNotNull(from) ? convertValue(from) : from;
+    from = isDefinedAndNotNull(from) ? Number(valueFormat.format(from)) : from;
     rangeItems.push(
       {
         index: counter++,

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

@@ -125,6 +125,7 @@ export class TbCanvasDigitalGauge {
     this.barColorProcessor = ColorProcessor.fromSettings(settings.barColor, this.ctx);
     this.valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {
       units: this.localSettings.units,
+      decimals: this.localSettings.decimals,
       ignoreUnitSymbol: true
     });