diff --git 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 index fa349252b7..edfaa3692d 100644 --- 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, diff --git 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 index a754dec0b4..35f0d147ac 100644 --- 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 @@
widgets.time-series-chart.axis.axes
diff --git 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 index b12e322b17..24f3dc0883 100644 --- 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 @@ -
- -
widgets.time-series-chart.axis.tick-labels
- -
- - - - +
+
+ +
widgets.time-series-chart.axis.tick-labels
+ +
+ + + + +
+
+
+ +
diff --git 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 index ab20727bdf..328574d648 100644 --- 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}); 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 1cef32ac6b..216ed878b2 100644 --- 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",