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

2024-03-07 19:57:19 +02:00 · 2024-03-07 19:57:19 +02:00 · e364d15da5
commit e364d15da5
parent db36fb2c47
5 changed files with 66 additions and 18 deletions
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
+++ b/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,
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
+++ b/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>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
+++ b/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">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.ts
+++ b/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});
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/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",