Chart Widgets: zoom interaction now syncs the active time window

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 }}
       </mat-slide-toggle>
     </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="dataZoomUpdateTimewindow">
+        {{ 'widgets.time-series-chart.data-zoom-update-timewindow' | translate }}
+      </mat-slide-toggle>
+    </div>
     <tb-time-series-chart-grid-settings
       formControlName="grid">
     </tb-time-series-chart-grid-settings>

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();

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 }}
       </mat-slide-toggle>
     </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="dataZoomUpdateTimewindow">
+        {{ 'widgets.time-series-chart.data-zoom-update-timewindow' | translate }}
+      </mat-slide-toggle>
+    </div>
     <tb-time-series-chart-grid-settings
       formControlName="grid">
     </tb-time-series-chart-grid-settings>

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<AppState>,
               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();

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',

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 }>;
+}

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),

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);
+            }
+
+          }
+        }
       });
     }
   }

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 }}
       </mat-slide-toggle>
     </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="dataZoomUpdateTimewindow">
+        {{ 'widgets.time-series-chart.data-zoom-update-timewindow' | translate }}
+      </mat-slide-toggle>
+    </div>
     <tb-time-series-chart-grid-settings
       formControlName="grid">
     </tb-time-series-chart-grid-settings>

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();

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 }}
       </mat-slide-toggle>
     </div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="dataZoomUpdateTimewindow">
+        {{ 'widgets.time-series-chart.data-zoom-update-timewindow' | translate }}
+      </mat-slide-toggle>
+    </div>
     <tb-time-series-chart-grid-settings
       formControlName="grid">
     </tb-time-series-chart-grid-settings>

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();

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",