diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html index 5b14146d0f..3d099c2645 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html @@ -114,33 +114,10 @@ axisType="xAxis"> -
-
-
widgets.time-series-chart.no-aggregation-bar-width-strategy
- - - {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }} - - -
-
-
widgets.time-series-chart.bar-group-interval-width
- - - ms - -
-
-
widgets.time-series-chart.separate-bar-width
- - - ms - -
-
+ +
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts index 79aa52fdb6..5307147b0e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts @@ -45,12 +45,7 @@ import { TimeSeriesChartWidgetSettings } from '@home/components/widget/lib/chart/time-series-chart-widget.models'; import { EChartsTooltipTrigger } from '@home/components/widget/lib/chart/echarts-widget.models'; -import { - timeSeriesChartNoAggregationBarWidthStrategies, - TimeSeriesChartNoAggregationBarWidthStrategy, - timeSeriesChartNoAggregationBarWidthStrategyTranslations, - TimeSeriesChartType -} from '@home/components/widget/lib/chart/time-series-chart.models'; +import { TimeSeriesChartType } from '@home/components/widget/lib/chart/time-series-chart.models'; @Component({ selector: 'tb-time-series-chart-basic-config', @@ -76,12 +71,6 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon legendPositionTranslationMap = legendPositionTranslationMap; - TimeSeriesChartNoAggregationBarWidthStrategy = TimeSeriesChartNoAggregationBarWidthStrategy; - - timeSeriesChartNoAggregationBarWidthStrategies = timeSeriesChartNoAggregationBarWidthStrategies; - - timeSeriesChartNoAggregationBarWidthStrategyTranslations = timeSeriesChartNoAggregationBarWidthStrategyTranslations; - timeSeriesChartWidgetConfigForm: UntypedFormGroup; tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); @@ -140,11 +129,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon yAxis: [settings.yAxis, []], xAxis: [settings.xAxis, []], - noAggregationBarWidthSettings: this.fb.group({ - strategy: [settings.noAggregationBarWidthSettings.strategy, []], - groupIntervalWidth: [settings.noAggregationBarWidthSettings.groupIntervalWidth, [Validators.min(100)]], - separateBarWidth: [settings.noAggregationBarWidthSettings.separateBarWidth, [Validators.min(100)]], - }), + noAggregationBarWidthSettings: [settings.noAggregationBarWidthSettings, []], showLegend: [settings.showLegend, []], legendLabelFont: [settings.legendLabelFont, []], @@ -227,7 +212,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon } protected validatorTriggers(): string[] { - return ['showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate', 'noAggregationBarWidthSettings.strategy']; + return ['showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate']; } protected updateValidators(emitEvent: boolean, trigger?: string) { @@ -236,8 +221,6 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon const showLegend: boolean = this.timeSeriesChartWidgetConfigForm.get('showLegend').value; const showTooltip: boolean = this.timeSeriesChartWidgetConfigForm.get('showTooltip').value; const tooltipShowDate: boolean = this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').value; - const noAggregationBarWidthSettingsStrategy: TimeSeriesChartNoAggregationBarWidthStrategy = - this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('strategy').value; if (showTitle) { this.timeSeriesChartWidgetConfigForm.get('title').enable(); @@ -266,14 +249,6 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon this.timeSeriesChartWidgetConfigForm.get('iconColor').disable(); } - if (noAggregationBarWidthSettingsStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.group) { - this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('groupIntervalWidth').enable(); - this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('separateBarWidth').disable(); - } else if (noAggregationBarWidthSettingsStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate) { - this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('groupIntervalWidth').disable(); - this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('separateBarWidth').enable(); - } - if (showLegend) { this.timeSeriesChartWidgetConfigForm.get('legendLabelFont').enable(); this.timeSeriesChartWidgetConfigForm.get('legendLabelColor').enable(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts index e5dfd6944e..bf7f6cf764 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts @@ -19,7 +19,6 @@ import { Interval, IntervalMath } from '@shared/models/time/time.models'; import { LabelFormatterCallback, SeriesLabelOption } from 'echarts/types/src/util/types'; import { TimeSeriesChartDataItem, - TimeSeriesChartNoAggregationBarWidthSettings, TimeSeriesChartNoAggregationBarWidthStrategy } from '@home/components/widget/lib/chart/time-series-chart.models'; import { CustomSeriesRenderItemParams } from 'echarts'; @@ -38,7 +37,9 @@ export interface BarRenderContext { barsCount?: number; barIndex?: number; noAggregation: boolean; - noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings; + noAggregationBarWidthStrategy: TimeSeriesChartNoAggregationBarWidthStrategy; + noAggregationWidthRelative?: boolean; + noAggregationWidth?: number; timeInterval?: Interval; visualSettings?: BarVisualSettings; labelOption?: SeriesLabelOption; @@ -54,16 +55,15 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C let interval = end - start; const ts = start ? start : time; - const noAggregationGroup = renderCtx.noAggregation && - renderCtx.noAggregationBarWidthSettings.strategy === TimeSeriesChartNoAggregationBarWidthStrategy.group; const separateBar = renderCtx.noAggregation && - renderCtx.noAggregationBarWidthSettings.strategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate; + renderCtx.noAggregationBarWidthStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate; if (renderCtx.noAggregation) { - if (noAggregationGroup) { - interval = renderCtx.noAggregationBarWidthSettings.groupIntervalWidth; + if (renderCtx.noAggregationWidthRelative) { + const scaleWidth = api.getWidth() / api.size([1,0])[0]; + interval = scaleWidth * (renderCtx.noAggregationWidth / 100); } else { - interval = renderCtx.noAggregationBarWidthSettings.separateBarWidth; + interval = renderCtx.noAggregationWidth; } start = time - interval / 2; end = time + interval / 2; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss index 9d990c50a7..7da3d8e4b5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss @@ -23,7 +23,7 @@ $maxLegendHeight: 35%; position: relative; display: flex; flex-direction: column; - gap: 16px; + gap: 8px; padding: 20px 24px 24px 24px; > div:not(.tb-time-series-chart-overlay) { z-index: 1; @@ -44,7 +44,7 @@ $maxLegendHeight: 35%; min-height: 0; display: flex; flex-direction: column; - gap: 16px; + gap: 8px; &.legend-top { flex-direction: column-reverse; } 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 6aac959cbe..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 { @@ -391,10 +392,16 @@ export const timeSeriesChartNoAggregationBarWidthStrategyTranslations = new Map< ] ); +export interface TimeSeriesChartBarWidth { + relative?: boolean; + relativeWidth?: number; + absoluteWidth?: number; +} + export interface TimeSeriesChartNoAggregationBarWidthSettings { strategy: TimeSeriesChartNoAggregationBarWidthStrategy; - groupIntervalWidth?: number; - separateBarWidth?: number; + groupWidth?: TimeSeriesChartBarWidth; + barWidth?: TimeSeriesChartBarWidth; } export interface TimeSeriesChartSettings extends EChartsTooltipWidgetSettings { @@ -435,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, @@ -474,8 +482,16 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = { }, noAggregationBarWidthSettings: { strategy: TimeSeriesChartNoAggregationBarWidthStrategy.group, - groupIntervalWidth: 1000, - separateBarWidth: 1000 + groupWidth: { + relative: true, + relativeWidth: 2, + absoluteWidth: 1000 + }, + barWidth: { + relative: true, + relativeWidth: 2, + absoluteWidth: 1000 + } }, showTooltip: true, tooltipTrigger: EChartsTooltipTrigger.axis, @@ -633,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, @@ -642,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, @@ -685,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, @@ -757,12 +789,12 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartAxisSetting export const generateChartData = (dataItems: TimeSeriesChartDataItem[], thresholdItems: TimeSeriesChartThresholdItem[], timeInterval: Interval, + stack: boolean, noAggregation: boolean, noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings, - stack: boolean, darkMode: boolean): Array => { let series = generateChartSeries(dataItems, timeInterval, - noAggregation, noAggregationBarWidthSettings, stack, darkMode); + stack, noAggregation, noAggregationBarWidthSettings, darkMode); if (thresholdItems.length) { const thresholds = generateChartThresholds(thresholdItems, darkMode); series = series.concat(thresholds); @@ -874,9 +906,9 @@ const createThresholdData = (val: string | number, item: TimeSeriesChartThreshol const generateChartSeries = (dataItems: TimeSeriesChartDataItem[], timeInterval: Interval, + stack: boolean, noAggregation: boolean, noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings, - stack: boolean, darkMode: boolean): Array => { const series: Array = []; const enabledDataItems = dataItems.filter(d => d.enabled); @@ -895,7 +927,17 @@ const generateChartSeries = (dataItems: TimeSeriesChartDataItem[], for (const item of enabledDataItems) { if (item.dataKey.settings.type === TimeSeriesChartSeriesType.bar) { if (!item.barRenderContext) { - item.barRenderContext = {noAggregation, noAggregationBarWidthSettings}; + item.barRenderContext = {noAggregation, + noAggregationBarWidthStrategy: noAggregationBarWidthSettings.strategy}; + const targetWidth = noAggregationBarWidthSettings.strategy === TimeSeriesChartNoAggregationBarWidthStrategy.group ? + noAggregationBarWidthSettings.groupWidth : noAggregationBarWidthSettings.barWidth; + if (targetWidth.relative) { + item.barRenderContext.noAggregationWidthRelative = true; + item.barRenderContext.noAggregationWidth = targetWidth.relativeWidth; + } else { + item.barRenderContext.noAggregationWidthRelative = false; + item.barRenderContext.noAggregationWidth = targetWidth.absoluteWidth; + } } item.barRenderContext.noAggregation = noAggregation; item.barRenderContext.barsCount = barsCount; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts index e5d4cb8f46..6d790d5439 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts @@ -492,8 +492,9 @@ export class TbTimeSeriesChart { private updateSeries(): Array { return generateChartData(this.dataItems, this.thresholdItems, this.ctx.timeWindow.interval, + this.settings.stack, this.noAggregation, - this.settings.noAggregationBarWidthSettings, this.settings.stack, this.darkMode); + this.settings.noAggregationBarWidthSettings, this.darkMode); } private updateAxes() { 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 f3a9a610c3..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,40 +41,19 @@
widgets.time-series-chart.axis.axes
-
-
-
widgets.time-series-chart.no-aggregation-bar-width-strategy
- - - {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }} - - -
-
-
widgets.time-series-chart.bar-group-interval-width
- - - ms - -
-
-
widgets.time-series-chart.separate-bar-width
- - - ms - -
-
+ +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts index a520933f1b..b793e8c3eb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts @@ -22,23 +22,17 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; -import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { formatValue, isDefinedAndNotNull, mergeDeep } from '@core/utils'; import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-settings.models'; -import { - barChartWithLabelsDefaultSettings -} from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models'; import { EChartsTooltipTrigger } from '../../chart/echarts-widget.models'; import { - timeSeriesChartWidgetDefaultSettings, TimeSeriesChartWidgetSettings + timeSeriesChartWidgetDefaultSettings, + TimeSeriesChartWidgetSettings } from '@home/components/widget/lib/chart/time-series-chart-widget.models'; -import { - timeSeriesChartNoAggregationBarWidthStrategies, - TimeSeriesChartNoAggregationBarWidthStrategy, - timeSeriesChartNoAggregationBarWidthStrategyTranslations, TimeSeriesChartType -} from '@home/components/widget/lib/chart/time-series-chart.models'; +import { TimeSeriesChartType } from '@home/components/widget/lib/chart/time-series-chart.models'; import { WidgetConfigComponentData } from '@home/models/widget-component.models'; @Component({ @@ -65,12 +59,6 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon legendPositionTranslationMap = legendPositionTranslationMap; - TimeSeriesChartNoAggregationBarWidthStrategy = TimeSeriesChartNoAggregationBarWidthStrategy; - - timeSeriesChartNoAggregationBarWidthStrategies = timeSeriesChartNoAggregationBarWidthStrategies; - - timeSeriesChartNoAggregationBarWidthStrategyTranslations = timeSeriesChartNoAggregationBarWidthStrategyTranslations; - timeSeriesChartWidgetSettingsForm: UntypedFormGroup; tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); @@ -111,11 +99,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon yAxis: [settings.yAxis, []], xAxis: [settings.xAxis, []], - noAggregationBarWidthSettings: this.fb.group({ - strategy: [settings.noAggregationBarWidthSettings.strategy, []], - groupIntervalWidth: [settings.noAggregationBarWidthSettings.groupIntervalWidth, [Validators.min(100)]], - separateBarWidth: [settings.noAggregationBarWidthSettings.separateBarWidth, [Validators.min(100)]], - }), + noAggregationBarWidthSettings: [settings.noAggregationBarWidthSettings, []], showLegend: [settings.showLegend, []], legendLabelFont: [settings.legendLabelFont, []], @@ -140,23 +124,13 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon } protected validatorTriggers(): string[] { - return ['showLegend', 'showTooltip', 'tooltipShowDate', 'noAggregationBarWidthSettings.strategy']; + return ['showLegend', 'showTooltip', 'tooltipShowDate']; } protected updateValidators(emitEvent: boolean) { const showLegend: boolean = this.timeSeriesChartWidgetSettingsForm.get('showLegend').value; const showTooltip: boolean = this.timeSeriesChartWidgetSettingsForm.get('showTooltip').value; const tooltipShowDate: boolean = this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').value; - const noAggregationBarWidthSettingsStrategy: TimeSeriesChartNoAggregationBarWidthStrategy = - this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('strategy').value; - - if (noAggregationBarWidthSettingsStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.group) { - this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('groupIntervalWidth').enable(); - this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('separateBarWidth').disable(); - } else if (noAggregationBarWidthSettingsStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate) { - this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('groupIntervalWidth').disable(); - this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('separateBarWidth').enable(); - } if (showLegend) { this.timeSeriesChartWidgetSettingsForm.get('legendLabelFont').enable(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.ts index b7183a5b80..6c515ad0a7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.ts @@ -28,6 +28,7 @@ import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@an import { WidgetAction, WidgetActionType, + widgetActionTypes, widgetActionTypeTranslationMap, widgetType } from '@shared/models/widget.models'; @@ -88,7 +89,7 @@ export class WidgetActionComponent implements ControlValueAccessor, OnInit, Vali @Input() callbacks: WidgetActionCallbacks; - widgetActionTypes = Object.keys(WidgetActionType); + widgetActionTypes = widgetActionTypes; widgetActionTypeTranslations = widgetActionTypeTranslationMap; widgetActionType = WidgetActionType; 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 2ae330c276..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 @@ -22,9 +22,9 @@ import { TimeSeriesChartAxisSettings, TimeSeriesChartYAxisSettings } from '@home/components/widget/lib/chart/time-series-chart.models'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/core.state'; 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', @@ -48,20 +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(protected store: Store, - private fb: UntypedFormBuilder) { + constructor(private fb: UntypedFormBuilder, + private widgetService: WidgetService,) { } ngOnInit(): void { @@ -88,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, [])); } @@ -143,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/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html new file mode 100644 index 0000000000..239c6ea18c --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html @@ -0,0 +1,75 @@ + +
+
+
widgets.time-series-chart.no-aggregation-bar-width-strategy
+ + + {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }} + + +
+ + + + + + + + +
+ +
+
{{ label }}
+
+ + + + {{ (formGroup.get('relative').value ? + 'widgets.time-series-chart.bar-width-relative' : + 'widgets.time-series-chart.bar-width-absolute') | translate }} + + + {{ 'widgets.time-series-chart.bar-width-relative' | translate }} + + + {{ 'widgets.time-series-chart.bar-width-absolute' | translate }} + + + + + + % + + + + ms + +
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.ts new file mode 100644 index 0000000000..36d8cb917a --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.ts @@ -0,0 +1,147 @@ +/// +/// Copyright © 2016-2024 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component, forwardRef, Input, OnInit } from '@angular/core'; +import { + ControlValueAccessor, + NG_VALUE_ACCESSOR, + UntypedFormBuilder, + UntypedFormGroup, + Validators +} from '@angular/forms'; +import { + TimeSeriesChartNoAggregationBarWidthSettings, + timeSeriesChartNoAggregationBarWidthStrategies, + TimeSeriesChartNoAggregationBarWidthStrategy, + timeSeriesChartNoAggregationBarWidthStrategyTranslations +} from '@home/components/widget/lib/chart/time-series-chart.models'; +import { merge } from 'rxjs'; + +@Component({ + selector: 'tb-time-series-no-aggregation-bar-width-settings', + templateUrl: './time-series-no-aggregation-bar-width-settings.component.html', + styleUrls: ['./../../widget-settings.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => TimeSeriesNoAggregationBarWidthSettingsComponent), + multi: true + } + ] +}) +export class TimeSeriesNoAggregationBarWidthSettingsComponent implements OnInit, ControlValueAccessor { + + TimeSeriesChartNoAggregationBarWidthStrategy = TimeSeriesChartNoAggregationBarWidthStrategy; + + timeSeriesChartNoAggregationBarWidthStrategies = timeSeriesChartNoAggregationBarWidthStrategies; + + timeSeriesChartNoAggregationBarWidthStrategyTranslations = timeSeriesChartNoAggregationBarWidthStrategyTranslations; + + @Input() + disabled: boolean; + + private modelValue: TimeSeriesChartNoAggregationBarWidthSettings; + + private propagateChange = null; + + public barWidthSettingsFormGroup: UntypedFormGroup; + + constructor(private fb: UntypedFormBuilder) { + } + + ngOnInit(): void { + this.barWidthSettingsFormGroup = this.fb.group({ + strategy: [null, []], + groupWidth: this.fb.group({ + relative: [null, []], + relativeWidth: [null, [Validators.required, Validators.min(0.1), Validators.max(100)]], + absoluteWidth: [null, [Validators.required, Validators.min(100)]] + }), + barWidth: this.fb.group({ + relative: [null, []], + relativeWidth: [null, [Validators.required, Validators.min(0.1), Validators.max(100)]], + absoluteWidth: [null, [Validators.required, Validators.min(100)]] + }) + }); + this.barWidthSettingsFormGroup.valueChanges.subscribe(() => { + this.updateModel(); + }); + merge(this.barWidthSettingsFormGroup.get('strategy').valueChanges, + this.barWidthSettingsFormGroup.get('groupWidth.relative').valueChanges, + this.barWidthSettingsFormGroup.get('barWidth.relative').valueChanges) + .subscribe(() => { + this.updateValidators(); + }); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(_fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.barWidthSettingsFormGroup.disable({emitEvent: false}); + } else { + this.barWidthSettingsFormGroup.enable({emitEvent: false}); + this.updateValidators(); + } + } + + writeValue(value: TimeSeriesChartNoAggregationBarWidthSettings): void { + this.modelValue = value; + this.barWidthSettingsFormGroup.patchValue( + value, {emitEvent: false} + ); + this.updateValidators(); + } + + private updateValidators() { + const strategy: TimeSeriesChartNoAggregationBarWidthStrategy = + this.barWidthSettingsFormGroup.get('strategy').value; + const groupWidthRelative: boolean = this.barWidthSettingsFormGroup.get('groupWidth.relative').value; + const barWidthRelative: boolean = this.barWidthSettingsFormGroup.get('barWidth.relative').value; + if (strategy === TimeSeriesChartNoAggregationBarWidthStrategy.group) { + this.barWidthSettingsFormGroup.get('groupWidth').enable({emitEvent: false}); + this.barWidthSettingsFormGroup.get('barWidth').disable({emitEvent: false}); + if (groupWidthRelative) { + this.barWidthSettingsFormGroup.get('groupWidth').get('relativeWidth').enable({emitEvent: false}); + this.barWidthSettingsFormGroup.get('groupWidth').get('absoluteWidth').disable({emitEvent: false}); + } else { + this.barWidthSettingsFormGroup.get('groupWidth').get('relativeWidth').disable({emitEvent: false}); + this.barWidthSettingsFormGroup.get('groupWidth').get('absoluteWidth').enable({emitEvent: false}); + } + } else if (strategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate) { + this.barWidthSettingsFormGroup.get('groupWidth').disable({emitEvent: false}); + this.barWidthSettingsFormGroup.get('barWidth').enable({emitEvent: false}); + if (barWidthRelative) { + this.barWidthSettingsFormGroup.get('barWidth').get('relativeWidth').enable({emitEvent: false}); + this.barWidthSettingsFormGroup.get('barWidth').get('absoluteWidth').disable({emitEvent: false}); + } else { + this.barWidthSettingsFormGroup.get('barWidth').get('relativeWidth').disable({emitEvent: false}); + this.barWidthSettingsFormGroup.get('barWidth').get('absoluteWidth').enable({emitEvent: false}); + } + } + } + + private updateModel() { + this.modelValue = this.barWidthSettingsFormGroup.getRawValue(); + this.propagateChange(this.modelValue); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts index e741314315..b741a8e358 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts @@ -106,6 +106,9 @@ import { EntityAliasInputComponent } from '@home/components/widget/lib/settings/ import { TimeSeriesChartThresholdSettingsPanelComponent } from '@home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component'; +import { + TimeSeriesNoAggregationBarWidthSettingsComponent +} from '@home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component'; @NgModule({ declarations: [ @@ -146,6 +149,7 @@ import { TimeSeriesChartThresholdsPanelComponent, TimeSeriesChartThresholdRowComponent, TimeSeriesChartThresholdSettingsPanelComponent, + TimeSeriesNoAggregationBarWidthSettingsComponent, DataKeyInputComponent, EntityAliasInputComponent ], @@ -192,6 +196,7 @@ import { TimeSeriesChartThresholdsPanelComponent, TimeSeriesChartThresholdRowComponent, TimeSeriesChartThresholdSettingsPanelComponent, + TimeSeriesNoAggregationBarWidthSettingsComponent, DataKeyInputComponent, EntityAliasInputComponent ], diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html index 54db7ece72..8297985a16 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html @@ -120,7 +120,21 @@ }} -
+
+
+ + {{ 'icon.icon' | translate }} + +
+ + + + +
+
) { + const settings = deepClone(value); + if (isDefinedAndNotNull(settings)) { + for (const method of Object.values(NotificationDeliveryMethod)) { + if (isDefinedAndNotNull(settings[method]?.enabled)) { + delete settings[method].enabled; + } + } + } + this.templateConfigurationForm.patchValue(settings, {emitEvent: false}); } registerOnChange(fn: any): void { @@ -160,6 +168,9 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co case NotificationDeliveryMethod.WEB: form.get('additionalConfig.icon.enabled').updateValueAndValidity({onlySelf: true}); break; + case NotificationDeliveryMethod.MOBILE_APP: + form.get('additionalConfig.icon.enabled').updateValueAndValidity({onlySelf: true}); + break; } } }); @@ -225,9 +236,25 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co subject: ['', [Validators.required, Validators.maxLength(50)]], body: ['', [Validators.required, Validators.maxLength(150)]], additionalConfig: this.fb.group({ + icon: this.fb.group({ + enabled: [false], + icon: [{value: 'notifications', disabled: true}, Validators.required], + color: [{value: '#757575', disabled: true}] + }), onClick: [null] }) }); + deliveryMethodForm.get('additionalConfig.icon.enabled').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe((value) => { + if (value) { + deliveryMethodForm.get('additionalConfig.icon.icon').enable({emitEvent: false}); + deliveryMethodForm.get('additionalConfig.icon.color').enable({emitEvent: false}); + } else { + deliveryMethodForm.get('additionalConfig.icon.icon').disable({emitEvent: false}); + deliveryMethodForm.get('additionalConfig.icon.color').disable({emitEvent: false}); + } + }); break; case NotificationDeliveryMethod.MICROSOFT_TEAMS: deliveryMethodForm = this.fb.group({ diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index 3088573d18..c736ed7404 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -555,6 +555,8 @@ export enum WidgetMobileActionType { takeScreenshot = 'takeScreenshot' } +export const widgetActionTypes = Object.keys(WidgetActionType) as WidgetActionType[]; + export const widgetActionTypeTranslationMap = new Map( [ [ WidgetActionType.openDashboardState, 'widget-action.open-dashboard-state' ], 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 8b46687fa2..52ccaba3b1 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -6632,8 +6632,10 @@ "no-aggregation-bar-width-strategy": "Bar width strategy for non-aggregated data", "no-aggregation-bar-width-strategy-group": "Group", "no-aggregation-bar-width-strategy-separate": "Separate", - "bar-group-interval-width": "Bar group interval width", - "separate-bar-width": "Separate bar width", + "bar-group-width": "Bar group width", + "bar-width": "Bar width", + "bar-width-relative": "Percentage of time window", + "bar-width-absolute": "Absolute (ms)", "threshold": { "thresholds": "Thresholds", "source": "Source", @@ -6678,6 +6680,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", diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss index dfe6667afd..e2390c795d 100644 --- a/ui-ngx/src/form.scss +++ b/ui-ngx/src/form.scss @@ -29,9 +29,11 @@ @media #{$breakpoint} { @include form-row-column; .mat-mdc-form-field, tb-unit-input { - width: auto; - &.medium-width { + &:not(.fixed-width) { width: auto; + &.medium-width { + width: auto; + } } } }