From 40252c99b1f330696903a15ab1aae5ee661e1103 Mon Sep 17 00:00:00 2001 From: Chantsova Ekaterina Date: Thu, 22 Jul 2021 15:39:57 +0300 Subject: [PATCH] UI: add custom interval option to charts comparison --- ui-ngx/src/app/core/api/widget-api.models.ts | 1 + ui-ngx/src/app/core/api/widget-subscription.ts | 5 ++++- .../components/widget/lib/flot-widget.models.ts | 14 ++++++++++++++ .../home/components/widget/widget.component.ts | 3 ++- ui-ngx/src/app/shared/models/time/time.models.ts | 15 ++++++++++++--- ui-ngx/src/app/shared/models/widget.models.ts | 1 + .../src/assets/locale/locale.constant-en_US.json | 1 + 7 files changed, 35 insertions(+), 5 deletions(-) diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts index d473296a4c..d17d065de7 100644 --- a/ui-ngx/src/app/core/api/widget-api.models.ts +++ b/ui-ngx/src/app/core/api/widget-api.models.ts @@ -238,6 +238,7 @@ export interface WidgetSubscriptionOptions { legendConfig?: LegendConfig; comparisonEnabled?: boolean; timeForComparison?: moment_.unitOfTime.DurationConstructor; + comparisonCustomIntervalValue?: number; decimals?: number; units?: string; callbacks?: WidgetSubscriptionCallbacks; diff --git a/ui-ngx/src/app/core/api/widget-subscription.ts b/ui-ngx/src/app/core/api/widget-subscription.ts index 32f0f90005..4e6c5f3738 100644 --- a/ui-ngx/src/app/core/api/widget-subscription.ts +++ b/ui-ngx/src/app/core/api/widget-subscription.ts @@ -109,6 +109,7 @@ export class WidgetSubscription implements IWidgetSubscription { units: string; comparisonEnabled: boolean; timeForComparison: ComparisonDuration; + comparisonCustomIntervalValue: number; comparisonTimeWindow: WidgetTimewindow; timewindowForComparison: SubscriptionTimewindow; @@ -233,6 +234,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; @@ -1154,7 +1156,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; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts index 836897740a..6186db3fe1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts +++ b/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: [ diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index dee17a000c..81ac4037bf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts @@ -907,7 +907,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); diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts index c9520f09df..96a8ec720b 100644 --- a/ui-ngx/src/app/shared/models/time/time.models.ts +++ b/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(); diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index edf0eb803a..378fc5f70e 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/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 { 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 1c5bc2ed8e..8addfd4c72 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2258,6 +2258,7 @@ "total": "total", "comparison-time-ago": { "previousInterval": "(previous interval)", + "customInterval": "(custom interval)", "days": "(day ago)", "weeks": "(week ago)", "months": "(month ago)",