Merge pull request #13646 from vvlladd28/bug/unit-convertor/range-chart

Fixed range chart; Add new unit m/min

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

@@ -49,7 +49,7 @@ import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { TbTimeSeriesChart } from '@home/components/widget/lib/chart/time-series-chart';
 import { WidgetComponent } from '@home/components/widget/widget.component';
-import { TbUnitConverter } from '@shared/models/unit.models';
+import { TbUnit } from '@shared/models/unit.models';
 import { UnitService } from '@core/services/unit.service';
 
 @Component({
@@ -80,8 +80,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
   visibleRangeItems: RangeItem[];
 
   private decimals = 0;
-  private units: string = '';
-  private unitConvertor: TbUnitConverter;
+  private units: TbUnit = '';
 
   private rangeItems: RangeItem[];
 
@@ -100,22 +99,20 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
     const unitService = this.ctx.$injector.get(UnitService);
 
     this.decimals = this.ctx.decimals;
-    let units = this.ctx.units;
+    this.units = this.ctx.units;
     const dataKey = getDataKey(this.ctx.datasources);
     if (isDefinedAndNotNull(dataKey?.decimals)) {
       this.decimals = dataKey.decimals;
     }
     if (dataKey?.units) {
-      units = dataKey.units;
+      this.units = dataKey.units;
     }
     if (dataKey) {
       dataKey.settings = rangeChartTimeSeriesKeySettings(this.settings);
     }
-    this.units = unitService.getTargetUnitSymbol(units);
-    this.unitConvertor = unitService.geUnitConverter(units);
 
     const valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {
-      units,
+      units: this.units,
       decimals: this.decimals,
       ignoreUnitSymbol: true
     });
@@ -138,7 +135,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
   }
 
   ngAfterViewInit() {
-    const settings = rangeChartTimeSeriesSettings(this.settings, this.rangeItems, this.decimals, this.units, this.unitConvertor);
+    const settings = rangeChartTimeSeriesSettings(this.settings, this.rangeItems, this.decimals, this.units);
     this.timeSeriesChart = new TbTimeSeriesChart(this.ctx, settings, this.chartShape.nativeElement, this.renderer);
   }
 

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

@@ -57,6 +57,7 @@ import {
 import {
   TimeSeriesChartTooltipWidgetSettings
 } from '@home/components/widget/lib/chart/time-series-chart-tooltip.models';
+import { TbUnit } from '@shared/models/unit.models';
 
 export interface RangeItem {
   index: number;
@@ -221,13 +222,13 @@ export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
 };
 
 export const rangeChartTimeSeriesSettings = (settings: RangeChartWidgetSettings, rangeItems: RangeItem[],
-                                             decimals: number, units: string, valueConvertor: (x: number) => number): DeepPartial<TimeSeriesChartSettings> => {
+                                             decimals: number, units: TbUnit): DeepPartial<TimeSeriesChartSettings> => {
   let thresholds: DeepPartial<TimeSeriesChartThreshold>[] = settings.showRangeThresholds ? getMarkPoints(rangeItems).map(item => ({
     ...{type: ValueSourceType.constant,
     yAxisId: 'default',
     units,
     decimals,
-    value: valueConvertor(item)},
+    value: item},
     ...settings.rangeThreshold
   } as DeepPartial<TimeSeriesChartThreshold>)) : [];
   if (settings.thresholds?.length) {
@@ -240,10 +241,8 @@ export const rangeChartTimeSeriesSettings = (settings: RangeChartWidgetSettings,
     yAxes: {
       default: {
         ...settings.yAxis,
-        ...{
-          decimals,
-          units
-        }
+        decimals,
+        units
       }
     },
     xAxis: settings.xAxis,
@@ -299,14 +298,15 @@ export const toRangeItems = (colorRanges: Array<ColorRange>, valueFormat: ValueF
   for (let i = 0; i < ranges.length; i++) {
     const range = ranges[i];
     let from = range.from;
-    const to = isDefinedAndNotNull(range.to) ? Number(valueFormat.format(range.to)) : range.to;
+    const 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) ? Number(valueFormat.format(from)) : from;
+    const formatToValue = isDefinedAndNotNull(to) ? Number(valueFormat.format(to)) : to;
+    const formatFromValue = isDefinedAndNotNull(from) ? Number(valueFormat.format(from)) : from;
     rangeItems.push(
       {
         index: counter++,
@@ -315,12 +315,12 @@ export const toRangeItems = (colorRanges: Array<ColorRange>, valueFormat: ValueF
         visible: true,
         from,
         to,
-        label: rangeItemLabel(from, to),
-        piece: createTimeSeriesChartVisualMapPiece(range.color, from, to)
+        label: rangeItemLabel(formatFromValue, formatToValue),
+        piece: createTimeSeriesChartVisualMapPiece(range.color, formatFromValue, formatToValue)
       }
     );
     if (!isNumber(from) || !isNumber(to)) {
-      const value = !isNumber(from) ? to : from;
+      const value = !isNumber(from) ? formatToValue : formatFromValue;
       rangeItems.push(
         {
           index: counter++,

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

@@ -98,7 +98,7 @@ import {
   TimeSeriesChartTooltipValueFormatFunction,
   TimeSeriesChartTooltipWidgetSettings
 } from '@home/components/widget/lib/chart/time-series-chart-tooltip.models';
-import { TbUnitConverter } from '@shared/models/unit.models';
+import { TbUnit, TbUnitConverter } from '@shared/models/unit.models';
 
 type TimeSeriesChartDataEntry = [number, any, number, number];
 
@@ -377,7 +377,7 @@ export type TimeSeriesChartTicksFormatter =
 export interface TimeSeriesChartYAxisSettings extends TimeSeriesChartAxisSettings {
   id?: TimeSeriesChartYAxisId;
   order?: number;
-  units?: string;
+  units?: TbUnit;
   decimals?: number;
   interval?: number;
   splitNumber?: number;

ui-ngx/src/app/shared/models/units/speed.ts

@@ -18,7 +18,7 @@ import { TbMeasure, TbMeasureUnits } from '@shared/models/unit.models';
 
 export type SpeedUnits = SpeedMetricUnits | SpeedImperialUnits;
 
-export type SpeedMetricUnits = 'm/s' | 'km/h' | 'mm/min' | 'mm/s';
+export type SpeedMetricUnits = 'm/s' | 'km/h' | 'mm/min' | 'm/min' | 'mm/s';
 export type SpeedImperialUnits = 'mph' | 'kt' | 'ft/s' | 'ft/min' | 'in/s' | 'in/h';
 
 const METRIC: TbMeasureUnits<SpeedMetricUnits> = {
@@ -37,6 +37,11 @@ const METRIC: TbMeasureUnits<SpeedMetricUnits> = {
     'mm/min': {
       name: 'unit.millimeters-per-minute',
       tags: ['feed rate', 'cutting feed rate'],
+      to_anchor: 0.00006,
+    },
+    'm/min': {
+      name: 'unit.meter-per-minute',
+      tags: ['velocity', 'pace'],
       to_anchor: 0.06,
     },
     'mm/s': {

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

@@ -6083,6 +6083,7 @@
         "inch-per-second": "Inch per second",
         "inch-per-hour": "Inch per hour",
         "millimeters-per-minute": "Millimeters per minute",
+        "meter-per-minute": "Meter per minute",
         "kilometer-per-hour-squared": "Kilometer per hour squared",
         "foot-per-second-squared": "Foot per second squared",
         "pascal": "Pascal",