Chart Widgets: zoom interaction now syncs the active time window (#15624)

* Chart Widgets: zoom interaction now syncs the active time window

* Fix for comparison mode

* Minor fixes

* Minor improvements

* Minor code fixes

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.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() {

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<TimeSeriesChartSettings> => ({
   dataZoom: settings.dataZoom,
+  dataZoomUpdateTimewindow: settings.dataZoomUpdateTimewindow,
   grid: settings.grid,
   yAxes: {
     default: settings.yAxis

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

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;

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

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

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

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/app/modules/home/components/widget/widget-container.component.html

@@ -103,7 +103,7 @@
       @for (action of widget.widgetActions; track action) {
         <button mat-icon-button
                 type="button"
-                [class.!hidden]="isEdit || !action.show"
+                [class.!hidden]="isEdit || !actionVisible(action)"
                 (click)="action.onAction($event)"
                 matTooltip="{{ action.name | translate }}"
                 matTooltipPosition="above">

ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts

@@ -49,6 +49,7 @@ import { WidgetHeaderActionButtonType } from '@shared/models/widget.models';
 import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 import ITooltipsterGeoHelper = JQueryTooltipster.ITooltipsterGeoHelper;
 import { WidgetComponent } from '@home/components/widget/widget.component';
+import { WidgetAction } from '@home/models/widget-component.models';
 
 export enum WidgetComponentActionType {
   MOUSE_DOWN,
@@ -294,6 +295,10 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
     }
   }
 
+  actionVisible(action: WidgetAction): boolean {
+    return typeof action.show === 'function' ? action.show() : action.show;
+  }
+
   private initEditWidgetActionTooltip(parent: HTMLElement) {
     let componentRef: ComponentRef<EditWidgetActionsTooltipComponent>;
     from(import('tooltipster')).subscribe(() => {

ui-ngx/src/app/modules/home/models/widget-component.models.ts

@@ -151,7 +151,7 @@ export interface WidgetHeaderAction extends IWidgetAction {
 }
 
 export interface WidgetAction extends IWidgetAction {
-  show: boolean;
+  show: boolean | (()=> boolean);
 }
 
 export interface IDashboardWidget {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -9992,6 +9992,8 @@
             "chart": "Chart",
             "chart-style": "Chart style",
             "data-zoom": "Data zoom",
+            "data-zoom-update-timewindow": "Update time window on zoom",
+            "reset-timewindow": "Back to original time window",
             "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",