Commit 40252c99b1f330696903a15ab1aae5ee661e1103
1 parent
74aca329
UI: add custom interval option to charts comparison
Showing
7 changed files
with
35 additions
and
5 deletions
@@ -238,6 +238,7 @@ export interface WidgetSubscriptionOptions { | @@ -238,6 +238,7 @@ export interface WidgetSubscriptionOptions { | ||
238 | legendConfig?: LegendConfig; | 238 | legendConfig?: LegendConfig; |
239 | comparisonEnabled?: boolean; | 239 | comparisonEnabled?: boolean; |
240 | timeForComparison?: moment_.unitOfTime.DurationConstructor; | 240 | timeForComparison?: moment_.unitOfTime.DurationConstructor; |
241 | + comparisonCustomIntervalValue?: number; | ||
241 | decimals?: number; | 242 | decimals?: number; |
242 | units?: string; | 243 | units?: string; |
243 | callbacks?: WidgetSubscriptionCallbacks; | 244 | callbacks?: WidgetSubscriptionCallbacks; |
@@ -109,6 +109,7 @@ export class WidgetSubscription implements IWidgetSubscription { | @@ -109,6 +109,7 @@ export class WidgetSubscription implements IWidgetSubscription { | ||
109 | units: string; | 109 | units: string; |
110 | comparisonEnabled: boolean; | 110 | comparisonEnabled: boolean; |
111 | timeForComparison: ComparisonDuration; | 111 | timeForComparison: ComparisonDuration; |
112 | + comparisonCustomIntervalValue: number; | ||
112 | comparisonTimeWindow: WidgetTimewindow; | 113 | comparisonTimeWindow: WidgetTimewindow; |
113 | timewindowForComparison: SubscriptionTimewindow; | 114 | timewindowForComparison: SubscriptionTimewindow; |
114 | 115 | ||
@@ -233,6 +234,7 @@ export class WidgetSubscription implements IWidgetSubscription { | @@ -233,6 +234,7 @@ export class WidgetSubscription implements IWidgetSubscription { | ||
233 | this.comparisonEnabled = options.comparisonEnabled && isHistoryTypeTimewindow(this.timeWindowConfig); | 234 | this.comparisonEnabled = options.comparisonEnabled && isHistoryTypeTimewindow(this.timeWindowConfig); |
234 | if (this.comparisonEnabled) { | 235 | if (this.comparisonEnabled) { |
235 | this.timeForComparison = options.timeForComparison; | 236 | this.timeForComparison = options.timeForComparison; |
237 | + this.comparisonCustomIntervalValue = options.comparisonCustomIntervalValue; | ||
236 | 238 | ||
237 | this.comparisonTimeWindow = {}; | 239 | this.comparisonTimeWindow = {}; |
238 | this.timewindowForComparison = null; | 240 | this.timewindowForComparison = null; |
@@ -1154,7 +1156,8 @@ export class WidgetSubscription implements IWidgetSubscription { | @@ -1154,7 +1156,8 @@ export class WidgetSubscription implements IWidgetSubscription { | ||
1154 | } | 1156 | } |
1155 | 1157 | ||
1156 | private updateSubscriptionForComparison(): SubscriptionTimewindow { | 1158 | private updateSubscriptionForComparison(): SubscriptionTimewindow { |
1157 | - this.timewindowForComparison = createTimewindowForComparison(this.subscriptionTimewindow, this.timeForComparison); | 1159 | + this.timewindowForComparison = createTimewindowForComparison(this.subscriptionTimewindow, this.timeForComparison, |
1160 | + this.comparisonCustomIntervalValue); | ||
1158 | this.updateComparisonTimewindow(); | 1161 | this.updateComparisonTimewindow(); |
1159 | return this.timewindowForComparison; | 1162 | return this.timewindowForComparison; |
1160 | } | 1163 | } |
@@ -145,6 +145,7 @@ export interface TbFlotComparisonSettings { | @@ -145,6 +145,7 @@ export interface TbFlotComparisonSettings { | ||
145 | comparisonEnabled: boolean; | 145 | comparisonEnabled: boolean; |
146 | timeForComparison: ComparisonDuration; | 146 | timeForComparison: ComparisonDuration; |
147 | xaxisSecond: TbFlotSecondXAxisSettings; | 147 | xaxisSecond: TbFlotSecondXAxisSettings; |
148 | + comparisonCustomIntervalValue?: number; | ||
148 | } | 149 | } |
149 | 150 | ||
150 | export interface TbFlotThresholdsSettings { | 151 | export interface TbFlotThresholdsSettings { |
@@ -546,6 +547,11 @@ const chartSettingsSchemaForComparison: JsonSettingsSchema = { | @@ -546,6 +547,11 @@ const chartSettingsSchemaForComparison: JsonSettingsSchema = { | ||
546 | type: 'string', | 547 | type: 'string', |
547 | default: 'previousInterval' | 548 | default: 'previousInterval' |
548 | }, | 549 | }, |
550 | + comparisonCustomIntervalValue: { | ||
551 | + title: 'Custom interval value (ms)', | ||
552 | + type: 'number', | ||
553 | + default: 7200000 | ||
554 | + }, | ||
549 | xaxisSecond: { | 555 | xaxisSecond: { |
550 | title: 'Second X axis', | 556 | title: 'Second X axis', |
551 | type: 'object', | 557 | type: 'object', |
@@ -596,10 +602,18 @@ const chartSettingsSchemaForComparison: JsonSettingsSchema = { | @@ -596,10 +602,18 @@ const chartSettingsSchemaForComparison: JsonSettingsSchema = { | ||
596 | { | 602 | { |
597 | value: 'years', | 603 | value: 'years', |
598 | label: 'Year ago' | 604 | label: 'Year ago' |
605 | + }, | ||
606 | + { | ||
607 | + value: 'customInterval', | ||
608 | + label: 'Custom interval' | ||
599 | } | 609 | } |
600 | ] | 610 | ] |
601 | }, | 611 | }, |
602 | { | 612 | { |
613 | + key: 'comparisonCustomIntervalValue', | ||
614 | + condition: 'model.timeForComparison === "customInterval"' | ||
615 | + }, | ||
616 | + { | ||
603 | key: 'xaxisSecond', | 617 | key: 'xaxisSecond', |
604 | items: [ | 618 | items: [ |
605 | { | 619 | { |
@@ -907,7 +907,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI | @@ -907,7 +907,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI | ||
907 | warnOnPageDataOverflow: this.typeParameters.warnOnPageDataOverflow, | 907 | warnOnPageDataOverflow: this.typeParameters.warnOnPageDataOverflow, |
908 | ignoreDataUpdateOnIntervalTick: this.typeParameters.ignoreDataUpdateOnIntervalTick, | 908 | ignoreDataUpdateOnIntervalTick: this.typeParameters.ignoreDataUpdateOnIntervalTick, |
909 | comparisonEnabled: comparisonSettings.comparisonEnabled, | 909 | comparisonEnabled: comparisonSettings.comparisonEnabled, |
910 | - timeForComparison: comparisonSettings.timeForComparison | 910 | + timeForComparison: comparisonSettings.timeForComparison, |
911 | + comparisonCustomIntervalValue: comparisonSettings.comparisonCustomIntervalValue | ||
911 | }; | 912 | }; |
912 | if (this.widget.type === widgetType.alarm) { | 913 | if (this.widget.type === widgetType.alarm) { |
913 | options.alarmSource = deepClone(this.widget.config.alarmSource); | 914 | options.alarmSource = deepClone(this.widget.config.alarmSource); |
@@ -15,7 +15,7 @@ | @@ -15,7 +15,7 @@ | ||
15 | /// | 15 | /// |
16 | 16 | ||
17 | import { TimeService } from '@core/services/time.service'; | 17 | import { TimeService } from '@core/services/time.service'; |
18 | -import { deepClone, isDefined, isUndefined } from '@app/core/utils'; | 18 | +import { deepClone, isDefined, isNumeric, isUndefined } from '@app/core/utils'; |
19 | import * as moment_ from 'moment'; | 19 | import * as moment_ from 'moment'; |
20 | import * as momentTz from 'moment-timezone'; | 20 | import * as momentTz from 'moment-timezone'; |
21 | 21 | ||
@@ -28,7 +28,7 @@ export const DAY = 24 * HOUR; | @@ -28,7 +28,7 @@ export const DAY = 24 * HOUR; | ||
28 | export const WEEK = 7 * DAY; | 28 | export const WEEK = 7 * DAY; |
29 | export const YEAR = DAY * 365; | 29 | export const YEAR = DAY * 365; |
30 | 30 | ||
31 | -export type ComparisonDuration = moment_.unitOfTime.DurationConstructor | 'previousInterval'; | 31 | +export type ComparisonDuration = moment_.unitOfTime.DurationConstructor | 'previousInterval' | 'customInterval'; |
32 | 32 | ||
33 | export enum TimewindowType { | 33 | export enum TimewindowType { |
34 | REALTIME, | 34 | REALTIME, |
@@ -640,7 +640,7 @@ export function calculateIntervalComparisonEndTime(interval: QuickTimeInterval, | @@ -640,7 +640,7 @@ export function calculateIntervalComparisonEndTime(interval: QuickTimeInterval, | ||
640 | } | 640 | } |
641 | 641 | ||
642 | export function createTimewindowForComparison(subscriptionTimewindow: SubscriptionTimewindow, | 642 | export function createTimewindowForComparison(subscriptionTimewindow: SubscriptionTimewindow, |
643 | - timeUnit: ComparisonDuration): SubscriptionTimewindow { | 643 | + timeUnit: ComparisonDuration, customIntervalValue: number): SubscriptionTimewindow { |
644 | const timewindowForComparison: SubscriptionTimewindow = { | 644 | const timewindowForComparison: SubscriptionTimewindow = { |
645 | fixedWindow: null, | 645 | fixedWindow: null, |
646 | realtimeWindowMs: null, | 646 | realtimeWindowMs: null, |
@@ -667,6 +667,15 @@ export function createTimewindowForComparison(subscriptionTimewindow: Subscripti | @@ -667,6 +667,15 @@ export function createTimewindowForComparison(subscriptionTimewindow: Subscripti | ||
667 | endTimeMs = subscriptionTimewindow.fixedWindow.startTimeMs; | 667 | endTimeMs = subscriptionTimewindow.fixedWindow.startTimeMs; |
668 | startTimeMs = endTimeMs - timeInterval; | 668 | startTimeMs = endTimeMs - timeInterval; |
669 | } | 669 | } |
670 | + } else if (timeUnit === 'customInterval') { | ||
671 | + if (isNumeric(customIntervalValue) && isFinite(customIntervalValue) && customIntervalValue > 0) { | ||
672 | + const timeInterval = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs; | ||
673 | + endTimeMs = subscriptionTimewindow.fixedWindow.endTimeMs - Math.round(customIntervalValue); | ||
674 | + startTimeMs = endTimeMs - timeInterval; | ||
675 | + } else { | ||
676 | + endTimeMs = subscriptionTimewindow.fixedWindow.endTimeMs; | ||
677 | + startTimeMs = subscriptionTimewindow.fixedWindow.startTimeMs; | ||
678 | + } | ||
670 | } else { | 679 | } else { |
671 | const timeInterval = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs; | 680 | const timeInterval = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs; |
672 | endTimeMs = moment(subscriptionTimewindow.fixedWindow.endTimeMs).subtract(1, timeUnit).valueOf(); | 681 | endTimeMs = moment(subscriptionTimewindow.fixedWindow.endTimeMs).subtract(1, timeUnit).valueOf(); |
@@ -467,6 +467,7 @@ export interface WidgetActionDescriptor extends CustomActionDescriptor { | @@ -467,6 +467,7 @@ export interface WidgetActionDescriptor extends CustomActionDescriptor { | ||
467 | export interface WidgetComparisonSettings { | 467 | export interface WidgetComparisonSettings { |
468 | comparisonEnabled?: boolean; | 468 | comparisonEnabled?: boolean; |
469 | timeForComparison?: moment_.unitOfTime.DurationConstructor; | 469 | timeForComparison?: moment_.unitOfTime.DurationConstructor; |
470 | + comparisonCustomIntervalValue?: number; | ||
470 | } | 471 | } |
471 | 472 | ||
472 | export interface WidgetConfig { | 473 | export interface WidgetConfig { |
@@ -2258,6 +2258,7 @@ | @@ -2258,6 +2258,7 @@ | ||
2258 | "total": "total", | 2258 | "total": "total", |
2259 | "comparison-time-ago": { | 2259 | "comparison-time-ago": { |
2260 | "previousInterval": "(previous interval)", | 2260 | "previousInterval": "(previous interval)", |
2261 | + "customInterval": "(custom interval)", | ||
2261 | "days": "(day ago)", | 2262 | "days": "(day ago)", |
2262 | "weeks": "(week ago)", | 2263 | "weeks": "(week ago)", |
2263 | "months": "(month ago)", | 2264 | "months": "(month ago)", |