From ef385640ff7d2c921dfb56d06d86ed92fd41a412 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 7 Mar 2024 14:21:01 +0200 Subject: [PATCH] UI: Implement no aggregated data bar width strategies --- ...e-series-chart-basic-config.component.html | 27 +++++++++++ ...ime-series-chart-basic-config.component.ts | 35 ++++++++++++-- .../lib/chart/time-series-chart-bar.models.ts | 30 ++++++++++-- .../lib/chart/time-series-chart.models.ts | 37 ++++++++++++++- .../widget/lib/chart/time-series-chart.ts | 13 ++++-- ...eries-chart-widget-settings.component.html | 27 +++++++++++ ...-series-chart-widget-settings.component.ts | 46 +++++++++++++++++-- .../components/toggle-select.component.ts | 2 +- .../assets/locale/locale.constant-en_US.json | 5 ++ 9 files changed, 204 insertions(+), 18 deletions(-) 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 ac6c07290c..5b14146d0f 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,6 +114,33 @@ 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 a2d29269d3..79aa52fdb6 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,7 +45,12 @@ 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 { TimeSeriesChartType } from '@home/components/widget/lib/chart/time-series-chart.models'; +import { + timeSeriesChartNoAggregationBarWidthStrategies, + TimeSeriesChartNoAggregationBarWidthStrategy, + timeSeriesChartNoAggregationBarWidthStrategyTranslations, + TimeSeriesChartType +} from '@home/components/widget/lib/chart/time-series-chart.models'; @Component({ selector: 'tb-time-series-chart-basic-config', @@ -71,13 +76,19 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon legendPositionTranslationMap = legendPositionTranslationMap; + TimeSeriesChartNoAggregationBarWidthStrategy = TimeSeriesChartNoAggregationBarWidthStrategy; + + timeSeriesChartNoAggregationBarWidthStrategies = timeSeriesChartNoAggregationBarWidthStrategies; + + timeSeriesChartNoAggregationBarWidthStrategyTranslations = timeSeriesChartNoAggregationBarWidthStrategyTranslations; + timeSeriesChartWidgetConfigForm: UntypedFormGroup; tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this); - chartType = TimeSeriesChartType.default; + chartType: TimeSeriesChartType = TimeSeriesChartType.default; constructor(protected store: Store, protected widgetConfigComponent: WidgetConfigComponent, @@ -129,6 +140,12 @@ 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)]], + }), + showLegend: [settings.showLegend, []], legendLabelFont: [settings.legendLabelFont, []], legendLabelColor: [settings.legendLabelColor, []], @@ -181,6 +198,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon this.widgetConfig.config.settings.yAxis = config.yAxis; this.widgetConfig.config.settings.xAxis = config.xAxis; + this.widgetConfig.config.settings.noAggregationBarWidthSettings = config.noAggregationBarWidthSettings; + this.widgetConfig.config.settings.showLegend = config.showLegend; this.widgetConfig.config.settings.legendLabelFont = config.legendLabelFont; this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor; @@ -208,7 +227,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon } protected validatorTriggers(): string[] { - return ['showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate']; + return ['showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate', 'noAggregationBarWidthSettings.strategy']; } protected updateValidators(emitEvent: boolean, trigger?: string) { @@ -217,6 +236,8 @@ 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(); @@ -245,6 +266,14 @@ 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 4bf89a4cde..e5dfd6944e 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 @@ -17,7 +17,11 @@ import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient'; import { Interval, IntervalMath } from '@shared/models/time/time.models'; import { LabelFormatterCallback, SeriesLabelOption } from 'echarts/types/src/util/types'; -import { TimeSeriesChartDataItem } from '@home/components/widget/lib/chart/time-series-chart.models'; +import { + TimeSeriesChartDataItem, + TimeSeriesChartNoAggregationBarWidthSettings, + TimeSeriesChartNoAggregationBarWidthStrategy +} from '@home/components/widget/lib/chart/time-series-chart.models'; import { CustomSeriesRenderItemParams } from 'echarts'; import { CustomSeriesRenderItemAPI, CustomSeriesRenderItemReturn } from 'echarts/types/dist/shared'; import { isNumeric } from '@core/utils'; @@ -33,6 +37,8 @@ export interface BarVisualSettings { export interface BarRenderContext { barsCount?: number; barIndex?: number; + noAggregation: boolean; + noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings; timeInterval?: Interval; visualSettings?: BarVisualSettings; labelOption?: SeriesLabelOption; @@ -44,19 +50,35 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C renderCtx: BarRenderContext): CustomSeriesRenderItemReturn => { const time = api.value(0) as number; let start = api.value(2) as number; - const end = api.value(3) as number; + let end = api.value(3) as number; 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; + + if (renderCtx.noAggregation) { + if (noAggregationGroup) { + interval = renderCtx.noAggregationBarWidthSettings.groupIntervalWidth; + } else { + interval = renderCtx.noAggregationBarWidthSettings.separateBarWidth; + } + start = time - interval / 2; + end = time + interval / 2; + } if (!start || !end || !interval) { interval = IntervalMath.numberValue(renderCtx.timeInterval); start = time - interval / 2; } + const gap = 0.3; - const barInterval = interval / (renderCtx.barsCount + gap * (renderCtx.barsCount + 3)); + const barInterval = separateBar ? interval : interval / (renderCtx.barsCount + gap * (renderCtx.barsCount + 3)); const intervalGap = barInterval * gap * 2; const barGap = barInterval * gap; const value = api.value(1); - const startTime = start + intervalGap + (barInterval + barGap) * renderCtx.barIndex; + const startTime = separateBar ? start : start + intervalGap + (barInterval + barGap) * renderCtx.barIndex; const delta = barInterval; let offset = 0; if (renderCtx.currentStackItems?.length) { 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 ad2083902c..6aac959cbe 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 @@ -376,6 +376,27 @@ export const timeSeriesChartThresholdDefaultSettings: TimeSeriesChartThreshold = labelColor: timeSeriesChartColorScheme['threshold.label'].light }; +export enum TimeSeriesChartNoAggregationBarWidthStrategy { + group = 'group', + separate = 'separate' +} + +export const timeSeriesChartNoAggregationBarWidthStrategies = + Object.keys(TimeSeriesChartNoAggregationBarWidthStrategy) as TimeSeriesChartNoAggregationBarWidthStrategy[]; + +export const timeSeriesChartNoAggregationBarWidthStrategyTranslations = new Map( + [ + [TimeSeriesChartNoAggregationBarWidthStrategy.group, 'widgets.time-series-chart.no-aggregation-bar-width-strategy-group'], + [TimeSeriesChartNoAggregationBarWidthStrategy.separate, 'widgets.time-series-chart.no-aggregation-bar-width-strategy-separate'] + ] +); + +export interface TimeSeriesChartNoAggregationBarWidthSettings { + strategy: TimeSeriesChartNoAggregationBarWidthStrategy; + groupIntervalWidth?: number; + separateBarWidth?: number; +} + export interface TimeSeriesChartSettings extends EChartsTooltipWidgetSettings { thresholds: TimeSeriesChartThreshold[]; darkMode: boolean; @@ -383,6 +404,7 @@ export interface TimeSeriesChartSettings extends EChartsTooltipWidgetSettings { stack: boolean; yAxis: TimeSeriesChartYAxisSettings; xAxis: TimeSeriesChartAxisSettings; + noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings; } export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = { @@ -450,6 +472,11 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = { showSplitLines: true, splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light }, + noAggregationBarWidthSettings: { + strategy: TimeSeriesChartNoAggregationBarWidthStrategy.group, + groupIntervalWidth: 1000, + separateBarWidth: 1000 + }, showTooltip: true, tooltipTrigger: EChartsTooltipTrigger.axis, tooltipValueFont: { @@ -730,9 +757,12 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartAxisSetting export const generateChartData = (dataItems: TimeSeriesChartDataItem[], thresholdItems: TimeSeriesChartThresholdItem[], timeInterval: Interval, + noAggregation: boolean, + noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings, stack: boolean, darkMode: boolean): Array => { - let series = generateChartSeries(dataItems, timeInterval, stack, darkMode); + let series = generateChartSeries(dataItems, timeInterval, + noAggregation, noAggregationBarWidthSettings, stack, darkMode); if (thresholdItems.length) { const thresholds = generateChartThresholds(thresholdItems, darkMode); series = series.concat(thresholds); @@ -844,6 +874,8 @@ const createThresholdData = (val: string | number, item: TimeSeriesChartThreshol const generateChartSeries = (dataItems: TimeSeriesChartDataItem[], timeInterval: Interval, + noAggregation: boolean, + noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings, stack: boolean, darkMode: boolean): Array => { const series: Array = []; @@ -863,8 +895,9 @@ const generateChartSeries = (dataItems: TimeSeriesChartDataItem[], for (const item of enabledDataItems) { if (item.dataKey.settings.type === TimeSeriesChartSeriesType.bar) { if (!item.barRenderContext) { - item.barRenderContext = {}; + item.barRenderContext = {noAggregation, noAggregationBarWidthSettings}; } + item.barRenderContext.noAggregation = noAggregation; item.barRenderContext.barsCount = barsCount; item.barRenderContext.barIndex = stack ? barGroups.indexOf(item.yAxisIndex) : barDataItems.indexOf(item); item.barRenderContext.timeInterval = timeInterval; 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 4b9bc3ba84..e5d4cb8f46 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 @@ -88,6 +88,10 @@ export class TbTimeSeriesChart { }; } + private get noAggregation(): boolean { + return this.ctx.defaultSubscription.timeWindowConfig?.aggregation?.type === AggregationType.NONE; + } + private readonly shapeResize$: ResizeObserver; private dataItems: TimeSeriesChartDataItem[] = []; @@ -153,7 +157,7 @@ export class TbTimeSeriesChart { this.timeSeriesChartOptions.xAxis[0].min = this.ctx.defaultSubscription.timeWindow.minTime; this.timeSeriesChartOptions.xAxis[0].max = this.ctx.defaultSubscription.timeWindow.maxTime; this.timeSeriesChartOptions.xAxis[0].tbTimeWindow = this.ctx.defaultSubscription.timeWindow; - if (this.ctx.defaultSubscription.timeWindowConfig?.aggregation?.type === AggregationType.NONE) { + if (this.noAggregation) { this.timeSeriesChartOptions.tooltip[0].axisPointer.type = 'line'; } else { this.timeSeriesChartOptions.tooltip[0].axisPointer.type = 'shadow'; @@ -414,7 +418,6 @@ export class TbTimeSeriesChart { this.timeSeriesChart = echarts.init(this.chartElement, null, { renderer: 'canvas' }); - const noAggregation = this.ctx.defaultSubscription.timeWindowConfig?.aggregation?.type === AggregationType.NONE; this.timeSeriesChartOptions = { darkMode: this.darkMode, backgroundColor: 'transparent', @@ -423,7 +426,7 @@ export class TbTimeSeriesChart { confine: true, appendToBody: true, axisPointer: { - type: noAggregation ? 'line' : 'shadow' + type: this.noAggregation ? 'line' : 'shadow' }, formatter: (params: CallbackDataParams[]) => this.settings.showTooltip ? echartsTooltipFormatter(this.renderer, this.tooltipDateFormat, @@ -488,7 +491,9 @@ export class TbTimeSeriesChart { private updateSeries(): Array { return generateChartData(this.dataItems, this.thresholdItems, - this.ctx.timeWindow.interval, this.settings.stack, this.darkMode); + this.ctx.timeWindow.interval, + this.noAggregation, + this.settings.noAggregationBarWidthSettings, this.settings.stack, 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 2d8294987e..f3a9a610c3 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 @@ -48,6 +48,33 @@ 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/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 0321d07ba8..a520933f1b 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,10 +22,10 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; -import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { formatValue, mergeDeep } from '@core/utils'; +import { formatValue, isDefinedAndNotNull, mergeDeep } from '@core/utils'; import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-settings.models'; import { barChartWithLabelsDefaultSettings @@ -34,6 +34,12 @@ import { EChartsTooltipTrigger } from '../../chart/echarts-widget.models'; import { 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 { WidgetConfigComponentData } from '@home/models/widget-component.models'; @Component({ selector: 'tb-time-series-chart-widget-settings', @@ -51,18 +57,28 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon } } + TimeSeriesChartType = TimeSeriesChartType; + EChartsTooltipTrigger = EChartsTooltipTrigger; legendPositions = legendPositions; legendPositionTranslationMap = legendPositionTranslationMap; + TimeSeriesChartNoAggregationBarWidthStrategy = TimeSeriesChartNoAggregationBarWidthStrategy; + + timeSeriesChartNoAggregationBarWidthStrategies = timeSeriesChartNoAggregationBarWidthStrategies; + + timeSeriesChartNoAggregationBarWidthStrategyTranslations = timeSeriesChartNoAggregationBarWidthStrategyTranslations; + timeSeriesChartWidgetSettingsForm: UntypedFormGroup; tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this); + chartType: TimeSeriesChartType = TimeSeriesChartType.default; + constructor(protected store: Store, private $injector: Injector, private fb: UntypedFormBuilder) { @@ -73,6 +89,13 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon return this.timeSeriesChartWidgetSettingsForm; } + protected onWidgetConfigSet(widgetConfig: WidgetConfigComponentData) { + const params = widgetConfig.typeParameters as any; + if (isDefinedAndNotNull(params.chartType)) { + this.chartType = params.chartType; + } + } + protected defaultSettings(): WidgetSettings { return mergeDeep({} as TimeSeriesChartWidgetSettings, timeSeriesChartWidgetDefaultSettings); } @@ -88,6 +111,12 @@ 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)]], + }), + showLegend: [settings.showLegend, []], legendLabelFont: [settings.legendLabelFont, []], legendLabelColor: [settings.legendLabelColor, []], @@ -111,13 +140,23 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon } protected validatorTriggers(): string[] { - return ['showLegend', 'showTooltip', 'tooltipShowDate']; + return ['showLegend', 'showTooltip', 'tooltipShowDate', 'noAggregationBarWidthSettings.strategy']; } 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(); @@ -170,5 +209,4 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon processor.update(Date.now()); return processor.formatted; } - } diff --git a/ui-ngx/src/app/shared/components/toggle-select.component.ts b/ui-ngx/src/app/shared/components/toggle-select.component.ts index 9be788c08d..484ea19b2e 100644 --- a/ui-ngx/src/app/shared/components/toggle-select.component.ts +++ b/ui-ngx/src/app/shared/components/toggle-select.component.ts @@ -43,7 +43,7 @@ export class ToggleSelectComponent extends _ToggleBase implements ControlValueAc disabled: boolean; @Input() - selectMediaBreakpoint; + selectMediaBreakpoint: string; @Input() appearance: ToggleHeaderAppearance = 'stroked'; 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 4a58bf239c..b32cfb7d38 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -6626,6 +6626,11 @@ "type-line": "Line", "type-bar": "Bar", "type-point": "Point", + "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", "threshold": { "thresholds": "Thresholds", "source": "Source",