Merge branch 'vvlladd28-improvement/comparison-flot'

ui-ngx/src/app/core/api/data-aggregator.ts

@@ -16,14 +16,17 @@
 
 import { SubscriptionData, SubscriptionDataHolder } from '@app/shared/models/telemetry/telemetry.models';
 import {
-  AggregationType,
+  AggregationType, calculateIntervalComparisonEndTime,
   calculateIntervalEndTime,
-  calculateIntervalStartTime, getCurrentTime,
+  calculateIntervalStartTime,
-  QuickTimeInterval, SubscriptionTimewindow
+  getCurrentTime,
+  getCurrentTimeForComparison,
+  SubscriptionTimewindow
 } from '@shared/models/time/time.models';
 import { UtilsService } from '@core/services/utils.service';
 import { deepClone } from '@core/utils';
 import Timeout = NodeJS.Timeout;
+import * as moment_ from 'moment';
 
 export declare type onAggregatedData = (data: SubscriptionData, detectChanges: boolean) => void;
 
@@ -85,7 +88,7 @@ export class DataAggregator {
   private intervalTimeoutHandle: Timeout;
   private intervalScheduledTime: number;
 
-  private startTs = this.subsTw.startTs + this.subsTw.tsOffset;
+  private startTs: number;
   private endTs: number;
   private elapsed: number;
 
@@ -137,12 +140,7 @@ export class DataAggregator {
     }
     this.subsTw = subsTw;
     this.intervalScheduledTime = this.utils.currentPerfTime();
-    this.startTs = this.subsTw.startTs + this.subsTw.tsOffset;
+    this.calculateStartEndTs();
-    if (this.subsTw.quickInterval) {
-      this.endTs = calculateIntervalEndTime(this.subsTw.quickInterval, null, this.subsTw.timezone) + this.subsTw.tsOffset;
-    } else {
-      this.endTs = this.startTs + this.subsTw.aggregation.timeWindow;
-    }
     this.elapsed = 0;
     this.aggregationTimeout = Math.max(this.subsTw.aggregation.interval, 1000);
     this.resetPending = true;
@@ -165,11 +163,7 @@ export class DataAggregator {
       if (!this.dataReceived) {
         this.elapsed = 0;
         this.dataReceived = true;
-        if (this.subsTw.quickInterval) {
+        this.calculateStartEndTs();
-          this.endTs = calculateIntervalEndTime(this.subsTw.quickInterval, null, this.subsTw.timezone) + this.subsTw.tsOffset;
-        } else {
-          this.endTs = this.startTs + this.subsTw.aggregation.timeWindow;
-        }
       }
       if (this.resetPending) {
         this.resetPending = false;
@@ -194,6 +188,21 @@ export class DataAggregator {
     }
   }
 
+  private calculateStartEndTs() {
+    this.startTs = this.subsTw.startTs + this.subsTw.tsOffset;
+    if (this.subsTw.quickInterval) {
+      if (this.subsTw.timeForComparison === 'previousInterval') {
+        const currentDate = getCurrentTime(this.subsTw.timezone);
+        this.endTs = calculateIntervalComparisonEndTime(this.subsTw.quickInterval, currentDate) + this.subsTw.tsOffset;
+      } else {
+        const currentDate = this.getCurrentTime();
+        this.endTs = calculateIntervalEndTime(this.subsTw.quickInterval, currentDate) + this.subsTw.tsOffset;
+      }
+    } else {
+      this.endTs = this.startTs + this.subsTw.aggregation.timeWindow;
+    }
+  }
+
   private onInterval(history?: boolean, detectChanges?: boolean) {
     const now = this.utils.currentPerfTime();
     this.elapsed += now - this.intervalScheduledTime;
@@ -207,7 +216,7 @@ export class DataAggregator {
       if (delta || !this.data) {
         const tickTs = delta * this.subsTw.aggregation.interval;
         if (this.subsTw.quickInterval) {
-          const currentDate = getCurrentTime(this.subsTw.timezone);
+          const currentDate = this.getCurrentTime();
           this.startTs = calculateIntervalStartTime(this.subsTw.quickInterval, currentDate) + this.subsTw.tsOffset;
           this.endTs = calculateIntervalEndTime(this.subsTw.quickInterval, currentDate) + this.subsTw.tsOffset;
         } else {
@@ -356,5 +365,13 @@ export class DataAggregator {
     }
   }
 
+  private getCurrentTime() {
+    if (this.subsTw.timeForComparison) {
+      return getCurrentTimeForComparison(this.subsTw.timeForComparison as moment_.unitOfTime.DurationConstructor, this.subsTw.timezone);
+    } else {
+      return getCurrentTime(this.subsTw.timezone);
+    }
+  }
+
 }
 

ui-ngx/src/app/core/api/entity-data-subscription.ts

@@ -419,8 +419,8 @@ export class EntityDataSubscription {
         latestTsOffsetChanged = this.subscriber.setTsOffset(this.latestTsOffset);
       }
       if (latestTsOffsetChanged) {
-        if (this.listener.initialPageDataChanged) {
+        if (this.listener.forceReInit) {
-          this.listener.initialPageDataChanged(this.pageData);
+          this.listener.forceReInit();
         }
       } else if (!this.subsCommand.isEmpty()) {
         this.subscriber.subscriptionCommands = [this.subsCommand];
@@ -428,8 +428,8 @@ export class EntityDataSubscription {
       }
     } else if (this.datasourceType === DatasourceType.entityCount) {
       if (this.subscriber.setTsOffset(this.latestTsOffset)) {
-        if (this.listener.initialPageDataChanged) {
+        if (this.listener.forceReInit) {
-          this.listener.initialPageDataChanged(this.pageData);
+          this.listener.forceReInit();
         }
       }
     } else if (this.datasourceType === DatasourceType.function) {

ui-ngx/src/app/core/api/entity-data.service.ts

@@ -40,6 +40,7 @@ export interface EntityDataListener {
                datasourceIndex: number, pageLink: EntityDataPageLink) => void;
   dataUpdated: (data: DataSetHolder, datasourceIndex: number, dataIndex: number, dataKeyIndex: number, detectChanges: boolean) => void;
   initialPageDataChanged?: (nextPageData: PageData<EntityData>) => void;
+  forceReInit?: () => void;
   updateRealtimeSubscription?: () => SubscriptionTimewindow;
   setRealtimeSubscription?: (subscriptionTimewindow: SubscriptionTimewindow) => void;
   subscriptionOptions?: EntityDataSubscriptionOptions;

ui-ngx/src/app/core/api/widget-api.models.ts

@@ -209,6 +209,7 @@ export interface WidgetSubscriptionCallbacks {
   onDataUpdateError?: (subscription: IWidgetSubscription, e: any) => void;
   onSubscriptionMessage?: (subscription: IWidgetSubscription, message: SubscriptionMessage) => void;
   onInitialPageDataChanged?: (subscription: IWidgetSubscription, nextPageData: PageData<EntityData>) => void;
+  forceReInit?: () => void;
   dataLoading?: (subscription: IWidgetSubscription) => void;
   legendDataUpdated?: (subscription: IWidgetSubscription, detectChanges: boolean) => void;
   timeWindowUpdated?: (subscription: IWidgetSubscription, timeWindowConfig: Timewindow) => void;
@@ -269,6 +270,7 @@ export interface IWidgetSubscription {
   hiddenData?: Array<{data: DataSet}>;
   timeWindowConfig?: Timewindow;
   timeWindow?: WidgetTimewindow;
+  comparisonEnabled?: boolean;
   comparisonTimeWindow?: WidgetTimewindow;
 
   alarms?: PageData<AlarmData>;

ui-ngx/src/app/core/api/widget-subscription.ts

@@ -39,12 +39,12 @@ import { HttpErrorResponse } from '@angular/common/http';
 import {
   calculateIntervalEndTime,
   calculateIntervalStartTime,
-  calculateTsOffset,
+  calculateTsOffset, ComparisonDuration,
   createSubscriptionTimewindow,
   createTimewindowForComparison,
-  getCurrentTime,
+  getCurrentTime, isHistoryTypeTimewindow,
   SubscriptionTimewindow,
-  Timewindow,
+  Timewindow, timewindowTypeChanged,
   toHistoryTimewindow,
   WidgetTimewindow
 } from '@app/shared/models/time/time.models';
@@ -107,7 +107,7 @@ export class WidgetSubscription implements IWidgetSubscription {
   decimals: number;
   units: string;
   comparisonEnabled: boolean;
-  timeForComparison: moment_.unitOfTime.DurationConstructor;
+  timeForComparison: ComparisonDuration;
   comparisonTimeWindow: WidgetTimewindow;
   timewindowForComparison: SubscriptionTimewindow;
 
@@ -198,6 +198,7 @@ export class WidgetSubscription implements IWidgetSubscription {
       this.callbacks.onDataUpdateError = this.callbacks.onDataUpdateError || (() => {});
       this.callbacks.onSubscriptionMessage = this.callbacks.onSubscriptionMessage || (() => {});
       this.callbacks.onInitialPageDataChanged = this.callbacks.onInitialPageDataChanged || (() => {});
+      this.callbacks.forceReInit = this.callbacks.forceReInit || (() => {});
       this.callbacks.dataLoading = this.callbacks.dataLoading || (() => {});
       this.callbacks.legendDataUpdated = this.callbacks.legendDataUpdated || (() => {});
       this.callbacks.timeWindowUpdated = this.callbacks.timeWindowUpdated || (() => {});
@@ -228,7 +229,7 @@ export class WidgetSubscription implements IWidgetSubscription {
       }
 
       this.subscriptionTimewindow = null;
-      this.comparisonEnabled = options.comparisonEnabled;
+      this.comparisonEnabled = options.comparisonEnabled && isHistoryTypeTimewindow(this.timeWindowConfig);
       if (this.comparisonEnabled) {
         this.timeForComparison = options.timeForComparison;
 
@@ -418,20 +419,13 @@ export class WidgetSubscription implements IWidgetSubscription {
           this.dataLoaded(pageData, data1, datasourceIndex, pageLink, true);
         },
         initialPageDataChanged: this.initialPageDataChanged.bind(this),
+        forceReInit: this.forceReInit.bind(this),
         dataUpdated: this.dataUpdated.bind(this),
         updateRealtimeSubscription: () => {
-          if (this.comparisonEnabled && datasource.isAdditional) {
+          return this.updateRealtimeSubscription();
-            return this.updateSubscriptionForComparison();
-          } else {
-            return this.updateRealtimeSubscription();
-          }
         },
         setRealtimeSubscription: (subscriptionTimewindow) => {
-          if (this.comparisonEnabled && datasource.isAdditional) {
+          this.updateRealtimeSubscription(deepClone(subscriptionTimewindow));
-            this.updateSubscriptionForComparison(subscriptionTimewindow);
-          } else {
-            this.updateRealtimeSubscription(deepClone(subscriptionTimewindow));
-          }
         }
       };
       this.entityDataListeners.push(listener);
@@ -584,8 +578,9 @@ export class WidgetSubscription implements IWidgetSubscription {
     if (this.type === widgetType.timeseries || this.type === widgetType.alarm) {
       if (this.useDashboardTimewindow) {
         if (!isEqual(this.timeWindowConfig, newDashboardTimewindow) && newDashboardTimewindow) {
+          const isTimewindowTypeChanged = timewindowTypeChanged(this.timeWindowConfig, newDashboardTimewindow);
           this.timeWindowConfig = deepClone(newDashboardTimewindow);
-          this.update();
+          this.update(isTimewindowTypeChanged);
         }
       }
     } else if (this.type === widgetType.latest) {
@@ -614,8 +609,9 @@ export class WidgetSubscription implements IWidgetSubscription {
 
   updateTimewindowConfig(newTimewindow: Timewindow): void {
     if (!this.useDashboardTimewindow) {
+      const isTimewindowTypeChanged = timewindowTypeChanged(this.timeWindowConfig, newTimewindow);
       this.timeWindowConfig = newTimewindow;
-      this.update();
+      this.update(isTimewindowTypeChanged);
     }
   }
 
@@ -624,10 +620,11 @@ export class WidgetSubscription implements IWidgetSubscription {
       this.ctx.dashboardTimewindowApi.onResetTimewindow();
     } else {
       if (this.originalTimewindow) {
+        const isTimewindowTypeChanged = timewindowTypeChanged(this.timeWindowConfig, this.originalTimewindow);
         this.timeWindowConfig = deepClone(this.originalTimewindow);
         this.originalTimewindow = null;
         this.callbacks.timeWindowUpdated(this, this.timeWindowConfig);
-        this.update();
+        this.update(isTimewindowTypeChanged);
       }
     }
   }
@@ -641,7 +638,8 @@ export class WidgetSubscription implements IWidgetSubscription {
       }
       this.timeWindowConfig = toHistoryTimewindow(this.timeWindowConfig, startTimeMs, endTimeMs, interval, this.ctx.timeService);
       this.callbacks.timeWindowUpdated(this, this.timeWindowConfig);
-      this.update();
+      const isTimewindowTypeChanged = timewindowTypeChanged(this.timeWindowConfig, this.originalTimewindow);
+      this.update(isTimewindowTypeChanged);
     }
   }
 
@@ -770,16 +768,20 @@ export class WidgetSubscription implements IWidgetSubscription {
     }
   }
 
-  update() {
+  update(isTimewindowTypeChanged = false) {
     if (this.type !== widgetType.rpc) {
       if (this.type === widgetType.alarm) {
         this.updateAlarmDataSubscription();
       } else {
-        if (this.hasDataPageLink) {
+        if (this.type === widgetType.timeseries && this.options.comparisonEnabled && isTimewindowTypeChanged) {
-          this.updateDataSubscriptions();
+          this.forceReInit();
         } else {
-          this.notifyDataLoading();
+          if (this.hasDataPageLink) {
-          this.dataSubscribe();
+            this.updateDataSubscriptions();
+          } else {
+            this.notifyDataLoading();
+            this.dataSubscribe();
+          }
         }
       }
     }
@@ -1143,24 +1145,14 @@ export class WidgetSubscription implements IWidgetSubscription {
   private updateComparisonTimewindow() {
     this.comparisonTimeWindow.interval = this.timewindowForComparison.aggregation.interval || 1000;
     this.comparisonTimeWindow.timezone = this.timewindowForComparison.timezone;
-    if (this.timewindowForComparison.realtimeWindowMs) {
+    if (this.timewindowForComparison.fixedWindow) {
-      this.comparisonTimeWindow.maxTime = moment(this.timeWindow.maxTime).subtract(1, this.timeForComparison).valueOf();
-      this.comparisonTimeWindow.minTime = moment(this.timeWindow.minTime).subtract(1, this.timeForComparison).valueOf();
-    } else if (this.timewindowForComparison.fixedWindow) {
       this.comparisonTimeWindow.maxTime = this.timewindowForComparison.fixedWindow.endTimeMs + this.timewindowForComparison.tsOffset;
       this.comparisonTimeWindow.minTime = this.timewindowForComparison.fixedWindow.startTimeMs + this.timewindowForComparison.tsOffset;
     }
   }
 
-  private updateSubscriptionForComparison(subscriptionTimewindow?: SubscriptionTimewindow): SubscriptionTimewindow {
+  private updateSubscriptionForComparison(): SubscriptionTimewindow {
-    if (subscriptionTimewindow) {
+    this.timewindowForComparison = createTimewindowForComparison(this.subscriptionTimewindow, this.timeForComparison);
-      this.timewindowForComparison = subscriptionTimewindow;
-    } else {
-      if (!this.subscriptionTimewindow) {
-        this.subscriptionTimewindow = this.updateRealtimeSubscription();
-      }
-      this.timewindowForComparison = createTimewindowForComparison(this.subscriptionTimewindow, this.timeForComparison);
-    }
     this.updateComparisonTimewindow();
     return this.timewindowForComparison;
   }
@@ -1169,6 +1161,10 @@ export class WidgetSubscription implements IWidgetSubscription {
     this.callbacks.onInitialPageDataChanged(this, nextPageData);
   }
 
+  private forceReInit() {
+    this.callbacks.forceReInit();
+  }
+
   private dataLoaded(pageData: PageData<EntityData>,
                      data: Array<Array<DataSetHolder>>,
                      datasourceIndex: number, pageLink: EntityDataPageLink, isUpdate: boolean) {

ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts

@@ -20,6 +20,7 @@
 import { DataKey, Datasource, DatasourceData, JsonSettingsSchema } from '@shared/models/widget.models';
 import * as moment_ from 'moment';
 import { DataKeyType } from "@shared/models/telemetry/telemetry.models";
+import { ComparisonDuration } from '@shared/models/time/time.models';
 
 export declare type ChartType = 'line' | 'pie' | 'bar' | 'state' | 'graph';
 
@@ -142,7 +143,7 @@ export interface TbFlotBaseSettings {
 
 export interface TbFlotComparisonSettings {
   comparisonEnabled: boolean;
-  timeForComparison: moment_.unitOfTime.DurationConstructor;
+  timeForComparison: ComparisonDuration;
   xaxisSecond: TbFlotSecondXAxisSettings;
 }
 
@@ -543,7 +544,7 @@ const chartSettingsSchemaForComparison: JsonSettingsSchema = {
       timeForComparison: {
         title: 'Time to show historical data',
         type: 'string',
-        default: 'months'
+        default: 'previousInterval'
       },
       xaxisSecond: {
         title: 'Second X axis',
@@ -576,6 +577,10 @@ const chartSettingsSchemaForComparison: JsonSettingsSchema = {
       type: 'rc-select',
       multiple: false,
       items: [
+        {
+          value: 'previousInterval',
+          label: 'Previous interval (default)'
+        },
         {
           value: 'days',
           label: 'Day ago'
@@ -586,7 +591,7 @@ const chartSettingsSchemaForComparison: JsonSettingsSchema = {
         },
         {
           value: 'months',
-          label: 'Month ago (default)'
+          label: 'Month ago'
         },
         {
           value: 'years',

ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts

@@ -74,6 +74,7 @@ export class TbFlot {
   private readonly utils: UtilsService;
 
   private settings: TbFlotSettings;
+  private comparisonEnabled: boolean;
 
   private readonly tooltip: JQuery<any>;
 
@@ -263,29 +264,7 @@ export class TbFlot {
         };
       }
 
-      if (this.settings.comparisonEnabled) {
+      this.options.series = {};
-        const xaxis = deepClone(this.xaxis);
-        xaxis.position = 'top';
-        if (this.settings.xaxisSecond) {
-          if (this.settings.xaxisSecond.showLabels === false) {
-            xaxis.tickFormatter = () => {
-              return '';
-            };
-          }
-          xaxis.label = this.utils.customTranslation(this.settings.xaxisSecond.title, this.settings.xaxisSecond.title) || null;
-          xaxis.position = this.settings.xaxisSecond.axisPosition;
-        }
-        xaxis.tickLength = 0;
-        this.options.xaxes.push(xaxis);
-
-        this.options.series = {
-          stack: false
-        };
-      } else {
-        this.options.series = {
-          stack: this.settings.stack === true
-        };
-      }
 
       this.options.crosshair = {
         mode: 'x'
@@ -364,7 +343,6 @@ export class TbFlot {
 
       // Experimental
       this.animatedPie = this.settings.animatedPie === true;
-
     }
 
     if (this.ctx.defaultSubscription) {
@@ -372,10 +350,29 @@ export class TbFlot {
     }
   }
 
-
   private init($element: JQuery<any>, subscription: IWidgetSubscription) {
-    this.subscription = subscription;
     this.$element = $element;
+    this.subscription = subscription;
+    this.comparisonEnabled = this.subscription ? this.subscription.comparisonEnabled : this.settings.comparisonEnabled;
+    if (this.comparisonEnabled) {
+      const xaxis = deepClone(this.xaxis);
+      xaxis.position = 'top';
+      if (this.settings.xaxisSecond) {
+        if (this.settings.xaxisSecond.showLabels === false) {
+          xaxis.tickFormatter = () => {
+            return '';
+          };
+        }
+        xaxis.label = this.utils.customTranslation(this.settings.xaxisSecond.title, this.settings.xaxisSecond.title) || null;
+        xaxis.position = this.settings.xaxisSecond.axisPosition;
+      }
+      xaxis.tickLength = 0;
+      this.options.xaxes.push(xaxis);
+
+      this.options.series.stack = false;
+    } else {
+      this.options.series.stack = this.settings.stack === true;
+    }
     const colors: string[] = [];
     this.yaxes = [];
     const yaxesMap: {[units: string]: TbFlotAxisOptions} = {};
@@ -387,7 +384,7 @@ export class TbFlot {
       this.settings.dataKeysListForLabels.forEach((item) => {
         item.settings = {};
       });
-      subscription.datasources.forEach((item) => {
+      this.subscription.datasources.forEach((item) => {
         const datasource: Datasource = {
           type: item.type,
           entityType: item.entityType,
@@ -425,7 +422,7 @@ export class TbFlot {
         fill: keySettings.fillLines === true
       };
 
-      if (this.settings.stack && !this.settings.comparisonEnabled) {
+      if (this.settings.stack && !this.comparisonEnabled) {
         series.stack = !keySettings.excludeFromStacking;
       } else {
         series.stack = false;
@@ -557,7 +554,7 @@ export class TbFlot {
       }
       this.options.xaxes[0].min = this.subscription.timeWindow.minTime;
       this.options.xaxes[0].max = this.subscription.timeWindow.maxTime;
-      if (this.settings.comparisonEnabled) {
+      if (this.comparisonEnabled) {
         this.options.xaxes[1].min = this.subscription.comparisonTimeWindow.minTime;
         this.options.xaxes[1].max = this.subscription.comparisonTimeWindow.maxTime;
       }
@@ -636,7 +633,7 @@ export class TbFlot {
 
           this.options.xaxes[0].min = this.subscription.timeWindow.minTime;
           this.options.xaxes[0].max = this.subscription.timeWindow.maxTime;
-          if (this.settings.comparisonEnabled) {
+          if (this.comparisonEnabled) {
             this.options.xaxes[1].min = this.subscription.comparisonTimeWindow.minTime;
             this.options.xaxes[1].max = this.subscription.comparisonTimeWindow.maxTime;
           }
@@ -654,7 +651,7 @@ export class TbFlot {
           } else {
             this.plot.getOptions().xaxes[0].min = this.subscription.timeWindow.minTime;
             this.plot.getOptions().xaxes[0].max = this.subscription.timeWindow.maxTime;
-            if (this.settings.comparisonEnabled) {
+            if (this.comparisonEnabled) {
               this.plot.getOptions().xaxes[1].min = this.subscription.comparisonTimeWindow.minTime;
               this.plot.getOptions().xaxes[1].max = this.subscription.comparisonTimeWindow.maxTime;
             }
@@ -1293,7 +1290,7 @@ export class TbFlot {
     const results: TbFlotHoverInfo[] = [{
       seriesHover: []
     }];
-    if (this.settings.comparisonEnabled) {
+    if (this.comparisonEnabled) {
       results.push({
         seriesHover: []
       });

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

@@ -857,6 +857,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
       onInitialPageDataChanged: (subscription, nextPageData) => {
         this.reInit();
       },
+      forceReInit: () => {
+        this.reInit();
+      },
       dataLoading: (subscription) => {
         if (this.loadingData !== subscription.loadingData) {
           this.loadingData = subscription.loadingData;

ui-ngx/src/app/shared/models/time/time.models.ts

@@ -28,6 +28,8 @@ export const DAY = 24 * HOUR;
 export const WEEK = 7 * DAY;
 export const YEAR = DAY * 365;
 
+export type ComparisonDuration = moment_.unitOfTime.DurationConstructor | 'previousInterval';
+
 export enum TimewindowType {
   REALTIME,
   HISTORY
@@ -118,6 +120,7 @@ export interface SubscriptionTimewindow {
   realtimeWindowMs?: number;
   fixedWindow?: FixedWindow;
   aggregation?: SubscriptionAggregation;
+  timeForComparison?: ComparisonDuration;
 }
 
 export interface WidgetTimewindow {
@@ -208,6 +211,14 @@ export function defaultTimewindow(timeService: TimeService): Timewindow {
   return timewindow;
 }
 
+function getTimewindowType(timewindow: Timewindow): TimewindowType {
+  if (isUndefined(timewindow.selectedTab)) {
+    return isDefined(timewindow.realtime) ? TimewindowType.REALTIME : TimewindowType.HISTORY;
+  } else {
+    return timewindow.selectedTab;
+  }
+}
+
 export function initModelFromDefaultTimewindow(value: Timewindow, timeService: TimeService): Timewindow {
   const model = defaultTimewindow(timeService);
   if (value) {
@@ -215,15 +226,7 @@ export function initModelFromDefaultTimewindow(value: Timewindow, timeService: T
     model.hideAggregation = value.hideAggregation;
     model.hideAggInterval = value.hideAggInterval;
     model.hideTimezone = value.hideTimezone;
-    if (isUndefined(value.selectedTab)) {
+    model.selectedTab = getTimewindowType(value);
-      if (value.realtime) {
-        model.selectedTab = TimewindowType.REALTIME;
-      } else {
-        model.selectedTab = TimewindowType.HISTORY;
-      }
-    } else {
-      model.selectedTab = value.selectedTab;
-    }
     if (model.selectedTab === TimewindowType.REALTIME) {
       if (isDefined(value.realtime.interval)) {
         model.realtime.interval = value.realtime.interval;
@@ -318,6 +321,15 @@ export function toHistoryTimewindow(timewindow: Timewindow, startTimeMs: number,
   return historyTimewindow;
 }
 
+export function timewindowTypeChanged(newTimewindow: Timewindow, oldTimewindow: Timewindow): boolean {
+  if (!newTimewindow || !oldTimewindow) {
+    return false;
+  }
+  const newType = getTimewindowType(newTimewindow);
+  const oldType = getTimewindowType(oldTimewindow);
+  return newType !== oldType;
+}
+
 export function calculateTsOffset(timezone?: string): number {
   if (timezone) {
     const tz = getTimezone(timezone);
@@ -328,6 +340,10 @@ export function calculateTsOffset(timezone?: string): number {
   }
 }
 
+export function isHistoryTypeTimewindow(timewindow: Timewindow): boolean {
+  return getTimewindowType(timewindow) === TimewindowType.HISTORY;
+}
+
 export function createSubscriptionTimewindow(timewindow: Timewindow, stDiff: number, stateData: boolean,
                                              timeService: TimeService): SubscriptionTimewindow {
   const subscriptionTimewindow: SubscriptionTimewindow = {
@@ -352,10 +368,7 @@ export function createSubscriptionTimewindow(timewindow: Timewindow, stDiff: num
       limit: timewindow.aggregation.limit || timeService.getMaxDatapointsLimit()
     };
   }
-  let selectedTab = timewindow.selectedTab;
+  const selectedTab = getTimewindowType(timewindow);
-  if (isUndefined(selectedTab)) {
-    selectedTab = isDefined(timewindow.realtime) ? TimewindowType.REALTIME : TimewindowType.HISTORY;
-  }
   if (selectedTab === TimewindowType.REALTIME) {
     let realtimeType = timewindow.realtime.realtimeType;
     if (isUndefined(realtimeType)) {
@@ -553,22 +566,109 @@ export function quickTimeIntervalPeriod(interval: QuickTimeInterval): number {
   }
 }
 
+export function calculateIntervalComparisonStartTime(interval: QuickTimeInterval,
+                                                     currentDate: moment_.Moment): number {
+  switch (interval) {
+    case QuickTimeInterval.YESTERDAY:
+    case QuickTimeInterval.DAY_BEFORE_YESTERDAY:
+    case QuickTimeInterval.CURRENT_DAY:
+    case QuickTimeInterval.CURRENT_DAY_SO_FAR:
+      currentDate.subtract(1, 'days');
+      return currentDate.startOf('day').valueOf();
+    case QuickTimeInterval.THIS_DAY_LAST_WEEK:
+      currentDate.subtract(1, 'weeks');
+      return currentDate.startOf('day').valueOf();
+    case QuickTimeInterval.PREVIOUS_WEEK:
+    case QuickTimeInterval.CURRENT_WEEK:
+    case QuickTimeInterval.CURRENT_WEEK_SO_FAR:
+      currentDate.subtract(1, 'weeks');
+      return currentDate.startOf('week').valueOf();
+    case QuickTimeInterval.PREVIOUS_MONTH:
+    case QuickTimeInterval.CURRENT_MONTH:
+    case QuickTimeInterval.CURRENT_MONTH_SO_FAR:
+      currentDate.subtract(1, 'months');
+      return currentDate.startOf('month').valueOf();
+    case QuickTimeInterval.PREVIOUS_YEAR:
+    case QuickTimeInterval.CURRENT_YEAR:
+    case QuickTimeInterval.CURRENT_YEAR_SO_FAR:
+      currentDate.subtract(1, 'years');
+      return currentDate.startOf('year').valueOf();
+    case QuickTimeInterval.CURRENT_HOUR:
+      currentDate.subtract(1, 'hour');
+      return currentDate.startOf('hour').valueOf();
+  }
+}
+
+export function calculateIntervalComparisonEndTime(interval: QuickTimeInterval,
+                                                   currentDate: moment_.Moment): number {
+  switch (interval) {
+    case QuickTimeInterval.YESTERDAY:
+    case QuickTimeInterval.DAY_BEFORE_YESTERDAY:
+    case QuickTimeInterval.CURRENT_DAY:
+      currentDate.subtract(1, 'days');
+      return currentDate.endOf('day').valueOf();
+    case QuickTimeInterval.CURRENT_DAY_SO_FAR:
+      return currentDate.subtract(1, 'days').valueOf();
+    case QuickTimeInterval.THIS_DAY_LAST_WEEK:
+      currentDate.subtract(1, 'weeks');
+      return currentDate.endOf('day').valueOf();
+    case QuickTimeInterval.PREVIOUS_WEEK:
+    case QuickTimeInterval.CURRENT_WEEK:
+      currentDate.subtract(1, 'weeks');
+      return currentDate.endOf('week').valueOf();
+    case QuickTimeInterval.CURRENT_WEEK_SO_FAR:
+      return currentDate.subtract(1, 'week').valueOf();
+    case QuickTimeInterval.PREVIOUS_MONTH:
+    case QuickTimeInterval.CURRENT_MONTH:
+      currentDate.subtract(1, 'months');
+      return currentDate.endOf('month').valueOf();
+    case QuickTimeInterval.CURRENT_MONTH_SO_FAR:
+      return currentDate.subtract(1, 'month').valueOf();
+    case QuickTimeInterval.PREVIOUS_YEAR:
+    case QuickTimeInterval.CURRENT_YEAR:
+      currentDate.subtract(1, 'years');
+      return currentDate.endOf('year').valueOf();
+    case QuickTimeInterval.CURRENT_YEAR_SO_FAR:
+      return currentDate.subtract(1, 'year').valueOf();
+    case QuickTimeInterval.CURRENT_HOUR:
+      currentDate.subtract(1, 'hour');
+      return currentDate.endOf('hour').valueOf();
+  }
+}
+
 export function createTimewindowForComparison(subscriptionTimewindow: SubscriptionTimewindow,
-                                              timeUnit: moment_.unitOfTime.DurationConstructor): SubscriptionTimewindow {
+                                              timeUnit: ComparisonDuration): SubscriptionTimewindow {
   const timewindowForComparison: SubscriptionTimewindow = {
     fixedWindow: null,
     realtimeWindowMs: null,
-    aggregation: subscriptionTimewindow.aggregation
+    aggregation: subscriptionTimewindow.aggregation,
+    tsOffset: subscriptionTimewindow.tsOffset
   };
 
-  if (subscriptionTimewindow.realtimeWindowMs) {
+  if (subscriptionTimewindow.fixedWindow) {
-    timewindowForComparison.startTs = moment(subscriptionTimewindow.startTs).subtract(1, timeUnit).valueOf();
+    let startTimeMs;
-    timewindowForComparison.realtimeWindowMs = subscriptionTimewindow.realtimeWindowMs;
+    let endTimeMs;
-  } else if (subscriptionTimewindow.fixedWindow) {
+    if (timeUnit === 'previousInterval') {
-    const timeInterval = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs;
+      if (subscriptionTimewindow.quickInterval) {
-    const endTimeMs = moment(subscriptionTimewindow.fixedWindow.endTimeMs).subtract(1, timeUnit).valueOf();
+        const startDate = moment(subscriptionTimewindow.fixedWindow.startTimeMs);
-
+        const endDate = moment(subscriptionTimewindow.fixedWindow.endTimeMs);
-    timewindowForComparison.startTs = endTimeMs - timeInterval;
+        if (subscriptionTimewindow.timezone) {
+          startDate.tz(subscriptionTimewindow.timezone);
+          endDate.tz(subscriptionTimewindow.timezone);
+        }
+        startTimeMs = calculateIntervalComparisonStartTime(subscriptionTimewindow.quickInterval, startDate);
+        endTimeMs = calculateIntervalComparisonEndTime(subscriptionTimewindow.quickInterval, endDate);
+      } else {
+        const timeInterval = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs;
+        endTimeMs = subscriptionTimewindow.fixedWindow.startTimeMs;
+        startTimeMs = endTimeMs - timeInterval;
+      }
+    } else {
+      const timeInterval = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs;
+      endTimeMs = moment(subscriptionTimewindow.fixedWindow.endTimeMs).subtract(1, timeUnit).valueOf();
+      startTimeMs = endTimeMs - timeInterval;
+    }
+    timewindowForComparison.startTs = startTimeMs;
     timewindowForComparison.fixedWindow = {
       startTimeMs: timewindowForComparison.startTs,
       endTimeMs
@@ -797,3 +897,7 @@ export function getCurrentTime(tz?: string): moment_.Moment {
 export function getTimezone(tz: string): moment_.Moment {
     return moment.tz(tz);
 }
+
+export function getCurrentTimeForComparison(timeForComparison: moment_.unitOfTime.DurationConstructor, tz?: string): moment_.Moment {
+  return getCurrentTime(tz).subtract(1, timeForComparison);
+}

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

@@ -1798,6 +1798,7 @@
         "avg": "avg",
         "total": "total",
         "comparison-time-ago": {
+            "previousInterval": "(previous interval)",
             "days": "(day ago)",
             "weeks": "(week ago)",
             "months": "(month ago)",