UI: Time series chart: Add Y axis ticks formatter function.

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

@@ -25,7 +25,7 @@ import {
 import { ComponentStyle, Font, simpleDateFormat, textStyle } from '@shared/models/widget-settings.models';
 import { XAXisOption, YAXisOption } from 'echarts/types/dist/shared';
 import { CustomSeriesOption, LineSeriesOption } from 'echarts/charts';
-import { formatValue, isDefinedAndNotNull, isUndefinedOrNull, parseFunction } from '@core/utils';
+import { formatValue, isDefinedAndNotNull, isUndefined, isUndefinedOrNull, parseFunction } from '@core/utils';
 import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient';
 import tinycolor from 'tinycolor2';
 import Axis2D from 'echarts/types/src/coord/cartesian/Axis2D';
@@ -293,6 +293,7 @@ export interface TimeSeriesChartYAxisSettings extends TimeSeriesChartAxisSetting
   min?: number | string;
   max?: number | string;
   intervalCalculator?: string;
+  ticksFormatter?: string;
 }
 
 export interface TimeSeriesChartThreshold {
@@ -441,6 +442,7 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = {
       lineHeight: '1'
     },
     tickLabelColor: timeSeriesChartColorScheme['axis.tickLabel'].light,
+    ticksFormatter: null,
     showTicks: true,
     ticksColor: timeSeriesChartColorScheme['axis.ticks'].light,
     showLine: true,
@@ -647,6 +649,7 @@ export interface TimeSeriesChartYAxis {
   units: string;
   option: YAXisOption & ValueAxisBaseOption;
   intervalCalculator?: (axis: Axis2D) => number;
+  ticksFormatter?: (value: any) => string;
 }
 
 export const createTimeSeriesYAxis = (axisId: string, units: string,
@@ -656,6 +659,10 @@ export const createTimeSeriesYAxis = (axisId: string, units: string,
     settings.tickLabelColor, darkMode, 'axis.tickLabel');
   const yAxisNameStyle = createChartTextStyle(settings.labelFont,
     settings.labelColor, darkMode, 'axis.label');
+  let ticksFormatter: (value: any) => string;
+  if (settings.ticksFormatter && settings.ticksFormatter.length) {
+    ticksFormatter = parseFunction(settings.ticksFormatter, ['value']);
+  }
   const yAxis: TimeSeriesChartYAxis = {
     id: axisId,
     units,
@@ -699,7 +706,18 @@ export const createTimeSeriesYAxis = (axisId: string, units: string,
         fontWeight: yAxisTickLabelStyle.fontWeight,
         fontFamily: yAxisTickLabelStyle.fontFamily,
         fontSize: yAxisTickLabelStyle.fontSize,
-        formatter: (value: any) => formatValue(value, decimals, units, false)
+        formatter: (value: any) => {
+          let result: string;
+          if (ticksFormatter) {
+            try {
+              result = ticksFormatter(value);
+            } catch (_e) {}
+          }
+          if (isUndefined(result)) {
+            result = formatValue(value, decimals, units, false);
+          }
+          return result;
+        }
       },
       splitLine: {
         show: settings.showSplitLines,

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html

@@ -41,10 +41,12 @@
       <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.axes</div>
       <tb-time-series-chart-axis-settings
           formControlName="yAxis"
+          advanced
           axisType="yAxis">
       </tb-time-series-chart-axis-settings>
       <tb-time-series-chart-axis-settings
           formControlName="xAxis"
+          advanced
           axisType="xAxis">
       </tb-time-series-chart-axis-settings>
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html

@@ -56,21 +56,32 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div class="tb-form-row space-between column-xs">
-          <mat-slide-toggle class="mat-slide" formControlName="showTickLabels">
-            <div translate>widgets.time-series-chart.axis.tick-labels</div>
-          </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-font-settings formControlName="tickLabelFont"
-                              clearButton
-                              disabledLineHeight
-                              forceSizeUnit="px"
-                              previewText="100">
-            </tb-font-settings>
-            <tb-color-input asBoxInput
-                            colorClearButton
-                            formControlName="tickLabelColor">
-            </tb-color-input>
+        <div class="tb-form-panel no-padding stroked">
+          <div class="tb-form-row no-border space-between column-xs">
+            <mat-slide-toggle class="mat-slide" formControlName="showTickLabels">
+              <div translate>widgets.time-series-chart.axis.tick-labels</div>
+            </mat-slide-toggle>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+              <tb-font-settings formControlName="tickLabelFont"
+                                clearButton
+                                disabledLineHeight
+                                forceSizeUnit="px"
+                                previewText="100">
+              </tb-font-settings>
+              <tb-color-input asBoxInput
+                              colorClearButton
+                              formControlName="tickLabelColor">
+              </tb-color-input>
+            </div>
+          </div>
+          <div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row no-border">
+            <tb-js-func fxFlex
+              formControlName="ticksFormatter"
+              [globalVariables]="functionScopeVariables"
+              [functionArgs]="['value']"
+              functionTitle="{{ 'widgets.time-series-chart.axis.ticks-formatter-function' | translate }}"
+              helpId="widget/lib/flot/ticks_formatter_fn">
+            </tb-js-func>
           </div>
         </div>
         <div class="tb-form-row space-between">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.ts

@@ -23,6 +23,8 @@ import {
   TimeSeriesChartYAxisSettings
 } from '@home/components/widget/lib/chart/time-series-chart.models';
 import { merge } from 'rxjs';
+import { coerceBoolean } from '@shared/decorators/coercion';
+import { WidgetService } from '@core/http/widget.service';
 
 @Component({
   selector: 'tb-time-series-chart-axis-settings',
@@ -46,19 +48,26 @@ export class TimeSeriesChartAxisSettingsComponent implements OnInit, ControlValu
 
   timeSeriesAxisPositionTranslations = timeSeriesAxisPositionTranslations;
 
+  functionScopeVariables = this.widgetService.getWidgetScopeVariables();
+
   @Input()
   disabled: boolean;
 
   @Input()
   axisType: 'xAxis' | 'yAxis' = 'xAxis';
 
+  @Input()
+  @coerceBoolean()
+  advanced = false;
+
   private modelValue: TimeSeriesChartAxisSettings | TimeSeriesChartYAxisSettings;
 
   private propagateChange = null;
 
   public axisSettingsFormGroup: UntypedFormGroup;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private widgetService: WidgetService,) {
   }
 
   ngOnInit(): void {
@@ -85,6 +94,7 @@ export class TimeSeriesChartAxisSettingsComponent implements OnInit, ControlValu
       splitLinesColor: [null, []]
     });
     if (this.axisType === 'yAxis') {
+      this.axisSettingsFormGroup.addControl('ticksFormatter', this.fb.control(null, []));
       this.axisSettingsFormGroup.addControl('min', this.fb.control(null, []));
       this.axisSettingsFormGroup.addControl('max', this.fb.control(null, []));
     }
@@ -140,9 +150,15 @@ export class TimeSeriesChartAxisSettingsComponent implements OnInit, ControlValu
       if (showTickLabels) {
         this.axisSettingsFormGroup.get('tickLabelFont').enable({emitEvent: false});
         this.axisSettingsFormGroup.get('tickLabelColor').enable({emitEvent: false});
+        if (this.axisType === 'yAxis') {
+          this.axisSettingsFormGroup.get('ticksFormatter').enable({emitEvent: false});
+        }
       } else {
         this.axisSettingsFormGroup.get('tickLabelFont').disable({emitEvent: false});
         this.axisSettingsFormGroup.get('tickLabelColor').disable({emitEvent: false});
+        if (this.axisType === 'yAxis') {
+          this.axisSettingsFormGroup.get('ticksFormatter').disable({emitEvent: false});
+        }
       }
       if (showTicks) {
         this.axisSettingsFormGroup.get('ticksColor').enable({emitEvent: false});

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

@@ -6677,6 +6677,7 @@
               "position-top": "Top",
               "position-bottom": "Bottom",
               "tick-labels": "Tick labels",
+              "ticks-formatter-function": "Ticks formatter function",
               "show-ticks": "Show ticks",
               "show-line": "Show line",
               "show-split-lines": "Show split lines",