diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html index f927340691..61398972c4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html @@ -98,6 +98,11 @@ {{ 'widgets.time-series-chart.data-zoom' | translate }} +
+ + {{ 'widgets.time-series-chart.data-zoom-update-timewindow' | translate }} + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts index d569bcf37b..bfd430ad36 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts @@ -116,6 +116,7 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom iconColor: [configData.config.iconColor, []], dataZoom: [settings.dataZoom, []], + dataZoomUpdateTimewindow: [settings.dataZoomUpdateTimewindow, []], showBarLabel: [settings.showBarLabel, []], barLabelFont: [settings.barLabelFont, []], @@ -193,6 +194,7 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; this.widgetConfig.config.settings.dataZoom = config.dataZoom; + this.widgetConfig.config.settings.dataZoomUpdateTimewindow = config.dataZoomUpdateTimewindow; this.widgetConfig.config.settings.showBarLabel = config.showBarLabel; this.widgetConfig.config.settings.barLabelFont = config.barLabelFont; @@ -248,10 +250,11 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom } protected validatorTriggers(): string[] { - return ['showTitle', 'showIcon', 'showBarLabel', 'showBarValue', 'showBarBorder', 'showLegend', 'showTooltip', 'tooltipShowDate']; + return ['dataZoom', 'showTitle', 'showIcon', 'showBarLabel', 'showBarValue', 'showBarBorder', 'showLegend', 'showTooltip', 'tooltipShowDate']; } protected updateValidators(emitEvent: boolean, trigger?: string) { + const dataZoom: boolean = this.barChartWidgetConfigForm.get('dataZoom').value; const showTitle: boolean = this.barChartWidgetConfigForm.get('showTitle').value; const showIcon: boolean = this.barChartWidgetConfigForm.get('showIcon').value; const showBarLabel: boolean = this.barChartWidgetConfigForm.get('showBarLabel').value; @@ -261,6 +264,12 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom const showTooltip: boolean = this.barChartWidgetConfigForm.get('showTooltip').value; const tooltipShowDate: boolean = this.barChartWidgetConfigForm.get('tooltipShowDate').value; + if (dataZoom) { + this.barChartWidgetConfigForm.get('dataZoomUpdateTimewindow').enable(); + } else { + this.barChartWidgetConfigForm.get('dataZoomUpdateTimewindow').disable(); + } + if (showTitle) { this.barChartWidgetConfigForm.get('title').enable(); this.barChartWidgetConfigForm.get('titleFont').enable(); 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 0602e55fc9..fcba48e87a 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 @@ -180,6 +180,11 @@ {{ 'widgets.time-series-chart.data-zoom' | translate }} +
+ + {{ 'widgets.time-series-chart.data-zoom-update-timewindow' | translate }} + +
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 5b1410e5d7..143e7a682e 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 @@ -96,7 +96,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon seriesMode = 'series'; predefinedValues = widgetTitleAutocompleteValues; - + constructor(protected store: Store, protected widgetConfigComponent: WidgetConfigComponent, private $injector: Injector, @@ -164,6 +164,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon iconColor: [configData.config.iconColor, []], dataZoom: [settings.dataZoom, []], + dataZoomUpdateTimewindow: [settings.dataZoomUpdateTimewindow, []], stack: [settings.stack, []], grid: [settings.grid, []], @@ -241,6 +242,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon this.widgetConfig.config.settings.thresholds = config.thresholds; this.widgetConfig.config.settings.dataZoom = config.dataZoom; + this.widgetConfig.config.settings.dataZoomUpdateTimewindow = config.dataZoomUpdateTimewindow; this.widgetConfig.config.settings.stack = config.stack; this.widgetConfig.config.settings.grid = config.grid; @@ -292,11 +294,12 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon } protected validatorTriggers(): string[] { - return ['comparisonEnabled', 'showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate', 'stack']; + return ['comparisonEnabled', 'dataZoom', 'showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate', 'stack']; } protected updateValidators(emitEvent: boolean, trigger?: string) { const comparisonEnabled: boolean = this.timeSeriesChartWidgetConfigForm.get('comparisonEnabled').value; + const dataZoom: boolean = this.timeSeriesChartWidgetConfigForm.get('dataZoom').value; const showTitle: boolean = this.timeSeriesChartWidgetConfigForm.get('showTitle').value; const showIcon: boolean = this.timeSeriesChartWidgetConfigForm.get('showIcon').value; const showLegend: boolean = this.timeSeriesChartWidgetConfigForm.get('showLegend').value; @@ -304,6 +307,12 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon const tooltipShowDate: boolean = this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').value; const stack: boolean = this.timeSeriesChartWidgetConfigForm.get('stack').value; + if (dataZoom) { + this.timeSeriesChartWidgetConfigForm.get('dataZoomUpdateTimewindow').enable(); + } else { + this.timeSeriesChartWidgetConfigForm.get('dataZoomUpdateTimewindow').disable(); + } + if (comparisonEnabled) { this.timeSeriesChartWidgetConfigForm.get('timeForComparison').enable(); this.timeSeriesChartWidgetConfigForm.get('comparisonCustomIntervalValue').enable(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts index 0287b775c3..36ba031c8f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts @@ -114,6 +114,7 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft ngAfterViewInit() { const settings = barChartWithLabelsTimeSeriesSettings(this.settings); this.timeSeriesChart = new TbTimeSeriesChart(this.ctx, settings, this.chartShape.nativeElement, this.renderer); + this.ctx.widgetActions = this.timeSeriesChart.getWidgetActions(); } ngOnDestroy() { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts index b8b879bf70..b045396f2c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts @@ -53,6 +53,7 @@ import { export interface BarChartWithLabelsWidgetSettings extends TimeSeriesChartTooltipWidgetSettings { dataZoom: boolean; + dataZoomUpdateTimewindow: boolean; showBarLabel: boolean; barLabelFont: Font; barLabelColor: string; @@ -79,6 +80,7 @@ export interface BarChartWithLabelsWidgetSettings extends TimeSeriesChartTooltip export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings = { dataZoom: false, + dataZoomUpdateTimewindow: false, showBarLabel: true, barLabelFont: { family: 'Roboto', @@ -181,6 +183,7 @@ export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings export const barChartWithLabelsTimeSeriesSettings = (settings: BarChartWithLabelsWidgetSettings): DeepPartial => ({ dataZoom: settings.dataZoom, + dataZoomUpdateTimewindow: settings.dataZoomUpdateTimewindow, grid: settings.grid, yAxes: { default: settings.yAxis diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts index 04f3b5d49b..ad57250036 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts @@ -262,3 +262,9 @@ export const getFocusedSeriesIndex = (chart: ECharts): number => { } return -1; }; + +export interface DataZoomEvent { + start: number; + end: number; + batch?: Array<{ start: number; end: number }>; +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts index fe8c51bcee..91ce230539 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts @@ -293,7 +293,9 @@ private static mapTooltipParams(params: CallbackDataParams[] | CallbackDataParam TimeSeriesChartTooltip.appendTooltipItem(result, seriesParams, series); } else if (Array.isArray(params)) { for (seriesParams of params) { - TimeSeriesChartTooltip.appendTooltipItem(result, seriesParams, series); + if (seriesParams.value) { + TimeSeriesChartTooltip.appendTooltipItem(result, seriesParams, series); + } } } return result; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts index aa94ee717c..dc9ddf7cb8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts @@ -137,6 +137,7 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV ngAfterViewInit() { this.timeSeriesChart = new TbTimeSeriesChart(this.ctx, this.settings, this.chartShape.nativeElement, this.renderer); + this.ctx.widgetActions = this.timeSeriesChart.getWidgetActions(); } ngOnDestroy() { 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 e815eefe11..902e2189e2 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 @@ -699,6 +699,7 @@ export interface TimeSeriesChartSettings extends TimeSeriesChartTooltipWidgetSet thresholds: TimeSeriesChartThreshold[]; darkMode: boolean; dataZoom: boolean; + dataZoomUpdateTimewindow: boolean; stack: boolean; grid: TimeSeriesChartGridSettings; yAxes: TimeSeriesChartYAxes; @@ -714,6 +715,7 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = { thresholds: [], darkMode: false, dataZoom: true, + dataZoomUpdateTimewindow: false, stack: false, grid: mergeDeep({} as TimeSeriesChartGridSettings, timeSeriesChartGridDefaultSettings), 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 d1928d75f0..7f9f144b87 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 @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { WidgetContext } from '@home/models/widget-component.models'; +import { WidgetAction, WidgetContext } from '@home/models/widget-component.models'; import { adjustTimeAxisExtentToData, calculateThresholdsOffset, @@ -23,7 +23,8 @@ import { createTimeSeriesYAxis, defaultTimeSeriesChartYAxisSettings, generateChartData, - LineSeriesStepType, normalizeAxisLimit, + LineSeriesStepType, + normalizeAxisLimit, parseThresholdData, TimeSeriesChartAxis, TimeSeriesChartDataItem, @@ -47,9 +48,11 @@ import { } from '@home/components/widget/lib/chart/time-series-chart.models'; import { calculateAxisSize, + DataZoomEvent, ECharts, echartsModule, EChartsOption, + getAxis, getAxisExtent, getFocusedSeriesIndex, measureAxisNameSize @@ -141,6 +144,13 @@ export class TbTimeSeriesChart { private hasVisualMap = false; private visualMapSelectedRanges: {[key: number]: boolean}; + private dataZoomResetting = false; + private dataZoomUpdatePending = false; + private dataZoomDebounce: ReturnType | null = null; + private lastDataZoomStart = 0; + private lastDataZoomEnd = 100; + private timewindowChanged = false; + private timeSeriesChart: ECharts; private timeSeriesChartOptions: EChartsOption; @@ -265,6 +275,12 @@ export class TbTimeSeriesChart { if (this.highlightedDataKey) { this.keyEnter(this.highlightedDataKey); } + if (this.dataZoomUpdatePending) { + this.dataZoomUpdatePending = false; + this.dataZoomResetting = true; + this.timeSeriesChart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 }); + this.dataZoomResetting = false; + } } } @@ -386,6 +402,10 @@ export class TbTimeSeriesChart { } public destroy(): void { + if (this.dataZoomDebounce !== null) { + clearTimeout(this.dataZoomDebounce); + this.dataZoomDebounce = null; + } if (this.shapeResize$) { this.shapeResize$.disconnect(); } @@ -417,6 +437,25 @@ export class TbTimeSeriesChart { return this.darkMode; } + public getWidgetActions(): WidgetAction[] { + if (this.settings.dataZoom && this.settings.dataZoomUpdateTimewindow) { + return [{ + name: 'widgets.time-series-chart.reset-timewindow', + icon: 'restore', + onAction: () => { + if (this.dataZoomDebounce !== null) { + clearTimeout(this.dataZoomDebounce); + this.dataZoomDebounce = null; + } + this.timewindowChanged = false; + this.ctx.defaultSubscription.onResetTimewindow(); + }, + show: ()=> this.timewindowChanged + }]; + } + return []; + } + private setupData(): void { const noAggregationBarWidthSettings = this.settings.noAggregationBarWidthSettings; const targetBarWidth = noAggregationBarWidthSettings.strategy === TimeSeriesChartNoAggregationBarWidthStrategy.group ? @@ -846,8 +885,39 @@ export class TbTimeSeriesChart { this.updateAxes(false); if (this.settings.dataZoom) { - this.timeSeriesChart.on('datazoom', () => { + this.timeSeriesChart.on('datazoom', (event: DataZoomEvent) => { this.updateAxes(); + if (this.settings.dataZoomUpdateTimewindow && !this.dataZoomResetting) { + const evStart = event.batch?.length ? event.batch[0].start : event.start; + const evEnd = event.batch?.length ? event.batch[0].end : event.end; + this.lastDataZoomStart = evStart; + this.lastDataZoomEnd = evEnd; + if (this.dataZoomDebounce !== null) { + clearTimeout(this.dataZoomDebounce); + } + this.dataZoomDebounce = setTimeout(() => { + this.dataZoomDebounce = null; + if (this.timeSeriesChart?.isDisposed()) { + return; + } + if (Math.round(this.lastDataZoomStart) === 0 && Math.round(this.lastDataZoomEnd) === 100) { + this.ctx.defaultSubscription.onResetTimewindow(); + this.timewindowChanged = false; + } else { + const axis = getAxis(this.timeSeriesChart, 'xAxis', 'main'); + if (axis) { + const extent = axis.scale.getExtent(); + const startMs = Math.round(extent[0]); + const endMs = Math.round(extent[1]); + if (startMs < endMs) { + this.dataZoomUpdatePending = true; + this.timewindowChanged = true; + this.ctx.defaultSubscription.onUpdateTimewindow(startMs, endMs); + } + } + } + }, 500); + } }); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html index bda194828e..793921b4dc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html @@ -23,6 +23,11 @@ {{ 'widgets.time-series-chart.data-zoom' | translate }} +
+ + {{ 'widgets.time-series-chart.data-zoom-update-timewindow' | translate }} + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts index 55ed3d5035..9cb686cf78 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts @@ -78,6 +78,7 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom this.barChartWidgetSettingsForm = this.fb.group({ dataZoom: [settings.dataZoom, []], + dataZoomUpdateTimewindow: [settings.dataZoomUpdateTimewindow, []], showBarLabel: [settings.showBarLabel, []], barLabelFont: [settings.barLabelFont, []], @@ -130,10 +131,11 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom } protected validatorTriggers(): string[] { - return ['showBarLabel', 'showBarValue', 'showBarBorder', 'showLegend', 'showTooltip', 'tooltipShowDate']; + return ['dataZoom', 'showBarLabel', 'showBarValue', 'showBarBorder', 'showLegend', 'showTooltip', 'tooltipShowDate']; } protected updateValidators(emitEvent: boolean) { + const dataZoom: boolean = this.barChartWidgetSettingsForm.get('dataZoom').value; const showBarLabel: boolean = this.barChartWidgetSettingsForm.get('showBarLabel').value; const showBarValue: boolean = this.barChartWidgetSettingsForm.get('showBarValue').value; const showBarBorder: boolean = this.barChartWidgetSettingsForm.get('showBarBorder').value; @@ -141,6 +143,12 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom const showTooltip: boolean = this.barChartWidgetSettingsForm.get('showTooltip').value; const tooltipShowDate: boolean = this.barChartWidgetSettingsForm.get('tooltipShowDate').value; + if (dataZoom) { + this.barChartWidgetSettingsForm.get('dataZoomUpdateTimewindow').enable(); + } else { + this.barChartWidgetSettingsForm.get('dataZoomUpdateTimewindow').disable(); + } + if (showBarLabel) { this.barChartWidgetSettingsForm.get('barLabelFont').enable(); this.barChartWidgetSettingsForm.get('barLabelColor').enable(); 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 b49d8ad902..c51bc07eb1 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 @@ -86,6 +86,11 @@ {{ 'widgets.time-series-chart.data-zoom' | translate }} +
+ + {{ 'widgets.time-series-chart.data-zoom-update-timewindow' | translate }} + +
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 8a96f31445..f20320a773 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 @@ -135,6 +135,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon thresholds: [settings.thresholds, []], dataZoom: [settings.dataZoom, []], + dataZoomUpdateTimewindow: [settings.dataZoomUpdateTimewindow, []], stack: [settings.stack, []], grid: [settings.grid, []], @@ -181,16 +182,23 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon } protected validatorTriggers(): string[] { - return ['comparisonEnabled', 'showLegend', 'showTooltip', 'tooltipShowDate', 'stack']; + return ['comparisonEnabled', 'dataZoom', 'showLegend', 'showTooltip', 'tooltipShowDate', 'stack']; } protected updateValidators(emitEvent: boolean) { const comparisonEnabled: boolean = this.timeSeriesChartWidgetSettingsForm.get('comparisonEnabled').value; + const dataZoom: boolean = this.timeSeriesChartWidgetSettingsForm.get('dataZoom').value; 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 stack: boolean = this.timeSeriesChartWidgetSettingsForm.get('stack').value; + if (dataZoom) { + this.timeSeriesChartWidgetSettingsForm.get('dataZoomUpdateTimewindow').enable(); + } else { + this.timeSeriesChartWidgetSettingsForm.get('dataZoomUpdateTimewindow').disable(); + } + if (comparisonEnabled) { this.timeSeriesChartWidgetSettingsForm.get('timeForComparison').enable(); this.timeSeriesChartWidgetSettingsForm.get('comparisonCustomIntervalValue').enable(); diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html index 69cf1de06a..be2ef9d8cf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html @@ -103,7 +103,7 @@ @for (action of widget.widgetActions; track action) {