Merge pull request #4958 from ChantsovaEkaterina/feature/charts-comparison-custom-interval

[3.3.1] UI: add custom interval option to charts comparison

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

@@ -243,6 +243,7 @@ export interface WidgetSubscriptionOptions {
   legendConfig?: LegendConfig;
   comparisonEnabled?: boolean;
   timeForComparison?: moment_.unitOfTime.DurationConstructor;
+  comparisonCustomIntervalValue?: number;
   decimals?: number;
   units?: string;
   callbacks?: WidgetSubscriptionCallbacks;

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

@@ -110,6 +110,7 @@ export class WidgetSubscription implements IWidgetSubscription {
   units: string;
   comparisonEnabled: boolean;
   timeForComparison: ComparisonDuration;
+  comparisonCustomIntervalValue: number;
   comparisonTimeWindow: WidgetTimewindow;
   timewindowForComparison: SubscriptionTimewindow;
 
@@ -234,6 +235,7 @@ export class WidgetSubscription implements IWidgetSubscription {
       this.comparisonEnabled = options.comparisonEnabled && isHistoryTypeTimewindow(this.timeWindowConfig);
       if (this.comparisonEnabled) {
         this.timeForComparison = options.timeForComparison;
+        this.comparisonCustomIntervalValue = options.comparisonCustomIntervalValue;
 
         this.comparisonTimeWindow = {};
         this.timewindowForComparison = null;
@@ -1183,7 +1185,8 @@ export class WidgetSubscription implements IWidgetSubscription {
   }
 
   private updateSubscriptionForComparison(): SubscriptionTimewindow {
-    this.timewindowForComparison = createTimewindowForComparison(this.subscriptionTimewindow, this.timeForComparison);
+    this.timewindowForComparison = createTimewindowForComparison(this.subscriptionTimewindow, this.timeForComparison,
+      this.comparisonCustomIntervalValue);
     this.updateComparisonTimewindow();
     return this.timewindowForComparison;
   }

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

@@ -145,6 +145,7 @@ export interface TbFlotComparisonSettings {
   comparisonEnabled: boolean;
   timeForComparison: ComparisonDuration;
   xaxisSecond: TbFlotSecondXAxisSettings;
+  comparisonCustomIntervalValue?: number;
 }
 
 export interface TbFlotThresholdsSettings {
@@ -546,6 +547,11 @@ const chartSettingsSchemaForComparison: JsonSettingsSchema = {
         type: 'string',
         default: 'previousInterval'
       },
+      comparisonCustomIntervalValue: {
+        title: 'Custom interval value (ms)',
+        type: 'number',
+        default: 7200000
+      },
       xaxisSecond: {
         title: 'Second X axis',
         type: 'object',
@@ -596,9 +602,17 @@ const chartSettingsSchemaForComparison: JsonSettingsSchema = {
         {
           value: 'years',
           label: 'Year ago'
+        },
+        {
+          value: 'customInterval',
+          label: 'Custom interval'
         }
       ]
     },
+    {
+      key: 'comparisonCustomIntervalValue',
+      condition: 'model.timeForComparison === "customInterval"'
+    },
     {
       key: 'xaxisSecond',
       items: [

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

@@ -908,7 +908,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         warnOnPageDataOverflow: this.typeParameters.warnOnPageDataOverflow,
         ignoreDataUpdateOnIntervalTick: this.typeParameters.ignoreDataUpdateOnIntervalTick,
         comparisonEnabled: comparisonSettings.comparisonEnabled,
-        timeForComparison: comparisonSettings.timeForComparison
+        timeForComparison: comparisonSettings.timeForComparison,
+        comparisonCustomIntervalValue: comparisonSettings.comparisonCustomIntervalValue
       };
       if (this.widget.type === widgetType.alarm) {
         options.alarmSource = deepClone(this.widget.config.alarmSource);

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

@@ -15,7 +15,7 @@
 ///
 
 import { TimeService } from '@core/services/time.service';
-import { deepClone, isDefined, isUndefined } from '@app/core/utils';
+import { deepClone, isDefined, isNumeric, isUndefined } from '@app/core/utils';
 import * as moment_ from 'moment';
 import * as momentTz from 'moment-timezone';
 
@@ -28,7 +28,7 @@ export const DAY = 24 * HOUR;
 export const WEEK = 7 * DAY;
 export const YEAR = DAY * 365;
 
-export type ComparisonDuration = moment_.unitOfTime.DurationConstructor | 'previousInterval';
+export type ComparisonDuration = moment_.unitOfTime.DurationConstructor | 'previousInterval' | 'customInterval';
 
 export enum TimewindowType {
   REALTIME,
@@ -640,7 +640,7 @@ export function calculateIntervalComparisonEndTime(interval: QuickTimeInterval,
 }
 
 export function createTimewindowForComparison(subscriptionTimewindow: SubscriptionTimewindow,
-                                              timeUnit: ComparisonDuration): SubscriptionTimewindow {
+                                              timeUnit: ComparisonDuration, customIntervalValue: number): SubscriptionTimewindow {
   const timewindowForComparison: SubscriptionTimewindow = {
     fixedWindow: null,
     realtimeWindowMs: null,
@@ -667,6 +667,15 @@ export function createTimewindowForComparison(subscriptionTimewindow: Subscripti
         endTimeMs = subscriptionTimewindow.fixedWindow.startTimeMs;
         startTimeMs = endTimeMs - timeInterval;
       }
+    } else if (timeUnit === 'customInterval') {
+      if (isNumeric(customIntervalValue) && isFinite(customIntervalValue) && customIntervalValue > 0) {
+        const timeInterval = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs;
+        endTimeMs = subscriptionTimewindow.fixedWindow.endTimeMs - Math.round(customIntervalValue);
+        startTimeMs = endTimeMs - timeInterval;
+      } else {
+        endTimeMs = subscriptionTimewindow.fixedWindow.endTimeMs;
+        startTimeMs = subscriptionTimewindow.fixedWindow.startTimeMs;
+      }
     } else {
       const timeInterval = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs;
       endTimeMs = moment(subscriptionTimewindow.fixedWindow.endTimeMs).subtract(1, timeUnit).valueOf();

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

@@ -467,6 +467,7 @@ export interface WidgetActionDescriptor extends CustomActionDescriptor {
 export interface WidgetComparisonSettings {
   comparisonEnabled?: boolean;
   timeForComparison?: moment_.unitOfTime.DurationConstructor;
+  comparisonCustomIntervalValue?: number;
 }
 
 export interface WidgetConfig {

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

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