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.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts
index b8b879bf70..c1cd4eac30 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',
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..265e3a186f 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,10 @@ export const getFocusedSeriesIndex = (chart: ECharts): number => {
}
return -1;
};
+
+
+export interface DataZoom {
+ end: number;
+ start: number;
+ batch?: Array<{ start: number; end: number }>;
+}
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..fd5ab9d4bb 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
@@ -46,10 +46,10 @@ import {
updateXAxisTimeWindow
} from '@home/components/widget/lib/chart/time-series-chart.models';
import {
- calculateAxisSize,
+ calculateAxisSize, DataZoom,
ECharts,
echartsModule,
- EChartsOption,
+ EChartsOption, getAxis,
getAxisExtent,
getFocusedSeriesIndex,
measureAxisNameSize
@@ -846,8 +846,24 @@ export class TbTimeSeriesChart {
this.updateAxes(false);
if (this.settings.dataZoom) {
- this.timeSeriesChart.on('datazoom', () => {
+ this.timeSeriesChart.on('datazoom', (event: DataZoom) => {
this.updateAxes();
+ if (this.settings.dataZoomUpdateTimewindow) {
+ 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]);
+ const evStart = event.batch?.length ? event.batch[0].start : event.start;
+ const evEnd = event.batch?.length ? event.batch[0].end : event.end;
+ if (Math.round(evStart) === 0 && Math.round(evEnd) === 100) {
+ this.ctx.defaultSubscription.onResetTimewindow();
+ } else if (startMs < endMs) {
+ this.ctx.defaultSubscription.onUpdateTimewindow(startMs, endMs);
+ }
+
+ }
+ }
});
}
}
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/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index b1a3996e3c..1e30cd292c 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -9718,6 +9718,7 @@
"chart": "Chart",
"chart-style": "Chart style",
"data-zoom": "Data zoom",
+ "data-zoom-update-timewindow": "Update time window on zoom",
"stack-mode": "Stack mode",
"stack-mode-hint": "Stacks series on the chart. The series with the same unit would be put on top of each other.",
"axes": "Axes",