diff --git a/ui-ngx/src/app/core/http/client-session.service.ts b/ui-ngx/src/app/core/http/client-session.service.ts
index 6dd963e96..d6ab4659f 100644
--- a/ui-ngx/src/app/core/http/client-session.service.ts
+++ b/ui-ngx/src/app/core/http/client-session.service.ts
@@ -78,8 +78,8 @@ export class ClientSessionService {
     return this.http.get<ClientSessionCredentials>(`/api/client-session/details?clientId=${encodeURIComponent(clientId)}`, defaultHttpOptionsFromConfig(config));
   }
 
-  public getSessionMetrics(clientId: string, config?: RequestConfig): Observable<PageData<SessionMetrics>> {
-    return this.statsService.getLatestTimeseries(clientId, SessionMetricsList, true, config).pipe(
+  public getSessionMetrics(clientId: string): Observable<PageData<SessionMetrics>> {
+    return this.statsService.getLatestTimeseries(clientId, SessionMetricsList, true).pipe(
       map((metrics) => {
         const data = [];
         for (const [key, value] of Object.entries(metrics)) {
diff --git a/ui-ngx/src/app/core/http/stats.service.ts b/ui-ngx/src/app/core/http/stats.service.ts
index 90f2371d3..2b914308a 100644
--- a/ui-ngx/src/app/core/http/stats.service.ts
+++ b/ui-ngx/src/app/core/http/stats.service.ts
@@ -19,9 +19,9 @@ import { defaultHttpOptionsFromConfig, RequestConfig } from './http-utils';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { isDefinedAndNotNull } from '@core/utils';
-import { AggregationType } from '@shared/models/time/time.models';
+import { AggregationType, Interval } from '@shared/models/time/time.models';
 import { Direction } from '@shared/models/page/sort-order';
-import { CHART_ALL, TimeseriesData, timeseriesDataLimit } from '@shared/models/chart.model';
+import { CHART_ALL, TimeseriesData, MAX_DATAPOINTS_LIMIT } from '@shared/models/chart.model';
 
 @Injectable({
   providedIn: 'root'
@@ -32,8 +32,8 @@ export class StatsService {
   }
 
   public getEntityTimeseries(entityId: string, startTs: number, endTs: number, keys: Array<string> = CHART_ALL,
-                             limit: number = timeseriesDataLimit, agg: AggregationType = AggregationType.NONE, interval?: number,
-                             orderBy: Direction = Direction.DESC, useStrictDataTypes: boolean = false): Observable<TimeseriesData> {
+                             limit: number = MAX_DATAPOINTS_LIMIT, agg: AggregationType = AggregationType.NONE, interval?: Interval,
+                             orderBy: Direction = Direction.DESC, useStrictDataTypes: boolean = true): Observable<TimeseriesData> {
     let url = `/api/timeseries/${encodeURIComponent(entityId)}/values?keys=${keys.join(',')}&startTs=${startTs}&endTs=${endTs}`;
     if (isDefinedAndNotNull(limit)) {
       url += `&limit=${limit}`;
@@ -58,7 +58,7 @@ export class StatsService {
   }
 
   public getLatestTimeseries(entityId: string, keys: Array<string> = CHART_ALL,
-                             useStrictDataTypes: boolean = false, config?: RequestConfig): Observable<TimeseriesData> {
+                             useStrictDataTypes: boolean = true): Observable<TimeseriesData> {
     let url = `/api/timeseries/latest?entityId=${encodeURIComponent(entityId)}&keys=${keys.join(',')}`;
     if (isDefinedAndNotNull(useStrictDataTypes)) {
       url += `&useStrictDataTypes=${useStrictDataTypes}`;
diff --git a/ui-ngx/src/app/core/services/time.service.ts b/ui-ngx/src/app/core/services/time.service.ts
index 0b93b7fda..7c98ffd12 100644
--- a/ui-ngx/src/app/core/services/time.service.ts
+++ b/ui-ngx/src/app/core/services/time.service.ts
@@ -19,28 +19,19 @@ import {
   AggregationType,
   DAY,
   defaultTimeIntervals,
-  defaultTimewindow, HOUR, MINUTE,
-  SECOND,
+  defaultTimewindow,
+  Interval,
+  IntervalMath,
+  MINUTE,
+  TimeInterval,
   Timewindow
 } from '@shared/models/time/time.models';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { defaultHttpOptions } from '@core/http/http-utils';
-import { map } from 'rxjs/operators';
 import { isDefined } from '@core/utils';
-
-export interface TimeInterval {
-  name: string;
-  translateParams: { [key: string]: any };
-  value: number;
-}
+import { MAX_DATAPOINTS_LIMIT } from '@app/shared/models/chart.model';
 
 const MIN_INTERVAL = MINUTE;
 const MAX_INTERVAL = 365 * 20 * DAY;
-
-const MIN_LIMIT = 7;
-
-const MAX_DATAPOINTS_LIMIT = 500;
+const MIN_LIMIT = 1;
 
 @Injectable({
   providedIn: 'root'
@@ -49,32 +40,18 @@ export class TimeService {
 
   private maxDatapointsLimit = MAX_DATAPOINTS_LIMIT;
 
-  constructor(
-    private http: HttpClient
-  ) {}
-
-  public loadMaxDatapointsLimit(): Observable<number> {
-    return this.http.get<number>('/api/dashboard/maxDatapointsLimit',
-      defaultHttpOptions(true)).pipe(
-      map((limit) => {
-        this.maxDatapointsLimit = limit;
-        if (!this.maxDatapointsLimit || this.maxDatapointsLimit <= MIN_LIMIT) {
-          this.maxDatapointsLimit = MIN_LIMIT + 1;
-        }
-        return this.maxDatapointsLimit;
-      })
-    );
-  }
+  constructor() {}
 
-  public matchesExistingInterval(min: number, max: number, intervalMs: number): boolean {
-    const intervals = this.getIntervals(min, max);
-    return intervals.findIndex(interval => interval.value === intervalMs) > -1;
+  public matchesExistingInterval(min: number, max: number, interval: Interval, useCalendarIntervals = false): boolean {
+    const intervals = this.getIntervals(min, max, useCalendarIntervals);
+    return intervals.findIndex(timeInterval => timeInterval.value === interval) > -1;
   }
 
-  public getIntervals(min: number, max: number): Array<TimeInterval> {
+  public getIntervals(min: number, max: number, useCalendarIntervals = false): Array<TimeInterval> {
     min = this.boundMinInterval(min);
     max = this.boundMaxInterval(max);
-    return defaultTimeIntervals.filter((interval) => interval.value >= min && interval.value <= max);
+    return defaultTimeIntervals.filter((interval) => (useCalendarIntervals || typeof interval.value === 'number') &&
+      IntervalMath.numberValue(interval.value) >= min && IntervalMath.numberValue(interval.value) <= max);
   }
 
   public boundMinInterval(min: number): number {
@@ -91,35 +68,26 @@ export class TimeService {
     return this.toBound(max, MIN_INTERVAL, MAX_INTERVAL, MAX_INTERVAL);
   }
 
-  public boundToPredefinedInterval(min: number, max: number, intervalMs: number): number {
-    const intervals = this.getIntervals(min, max);
+  public boundToPredefinedInterval(min: number, max: number, interval: Interval, useCalendarIntervals = false): Interval {
+    const intervals = this.getIntervals(min, max, useCalendarIntervals);
     let minDelta = MAX_INTERVAL;
-    const boundedInterval = intervalMs || min;
+    const boundedInterval = interval || min;
     if (!intervals.length) {
       return boundedInterval;
     }
-    let matchedInterval: TimeInterval = intervals[0];
-    intervals.forEach((interval) => {
-      const delta = Math.abs(interval.value - boundedInterval);
-      if (delta < minDelta) {
-        matchedInterval = interval;
-        minDelta = delta;
-      }
-    });
-    return matchedInterval.value;
-  }
-
-  public boundIntervalToTimewindow(timewindow: number, intervalMs: number, aggType: AggregationType): number {
-    if (aggType === AggregationType.NONE) {
-      return HOUR;
+    const found = intervals.find(timeInterval => timeInterval.value === boundedInterval);
+    if (found) {
+      return found.value;
     } else {
-      const min = this.minIntervalLimit(timewindow);
-      const max = this.maxIntervalLimit(timewindow);
-      if (intervalMs) {
-        return this.toBound(intervalMs, min, max, intervalMs);
-      } else {
-        return this.boundToPredefinedInterval(min, max, this.avgInterval(timewindow));
-      }
+      let matchedInterval: TimeInterval = intervals[0];
+      intervals.forEach((timeInterval) => {
+        const delta = Math.abs(IntervalMath.numberValue(timeInterval.value) - IntervalMath.numberValue(boundedInterval));
+        if (delta <= minDelta) {
+          matchedInterval = timeInterval;
+          minDelta = delta;
+        }
+      });
+      return matchedInterval.value;
     }
   }
 
@@ -131,11 +99,6 @@ export class TimeService {
     return MIN_LIMIT;
   }
 
-  public avgInterval(timewindow: number): number {
-    const avg = timewindow / 200;
-    return this.boundMinInterval(avg);
-  }
-
   public minIntervalLimit(timewindowMs: number): number {
     const min = timewindowMs / 500;
     return this.boundMinInterval(min);
@@ -150,6 +113,18 @@ export class TimeService {
     return defaultTimewindow(this);
   }
 
+  public timewindowGroupingInterval(timewindow: Timewindow): Interval {
+    if (timewindow.aggregation.type === AggregationType.NONE) {
+      return 0;
+    }
+    if (isDefined(timewindow.realtime)) {
+      return timewindow.realtime.interval;
+    }
+    if (isDefined(timewindow.history)) {
+      return timewindow.history.interval;
+    }
+  }
+
   private toBound(value: number, min: number, max: number, defValue: number): number {
     if (isDefined(value)) {
       value = Math.max(value, min);
@@ -159,5 +134,4 @@ export class TimeService {
       return defValue;
     }
   }
-
 }
diff --git a/ui-ngx/src/app/modules/home/components/getting-started/getting-started-home.component.ts b/ui-ngx/src/app/modules/home/components/getting-started/getting-started-home.component.ts
index 16fcc0f54..d50910f92 100644
--- a/ui-ngx/src/app/modules/home/components/getting-started/getting-started-home.component.ts
+++ b/ui-ngx/src/app/modules/home/components/getting-started/getting-started-home.component.ts
@@ -14,8 +14,6 @@
 /// limitations under the License.
 ///
 
-// @ts-nocheck
-
 import { Component, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { InstructionsService } from '@core/http/instructions.service';
diff --git a/ui-ngx/src/app/modules/home/pages/monitoring/monitoring.component.html b/ui-ngx/src/app/modules/home/pages/monitoring/monitoring.component.html
index 95d42c749..7daacabef 100644
--- a/ui-ngx/src/app/modules/home/pages/monitoring/monitoring.component.html
+++ b/ui-ngx/src/app/modules/home/pages/monitoring/monitoring.component.html
@@ -22,8 +22,7 @@
                  asButton
                  flatButton
                  tooltipPosition="left"
-                 aggregation="false"
-                 timezone="false">
+                 aggregation="true">
   </tb-timewindow>
 </mat-toolbar>
 <div class="mat-padding" fxFlex fxLayout="column" fxLayoutGap="16px">
diff --git a/ui-ngx/src/app/modules/home/pages/monitoring/monitoring.component.ts b/ui-ngx/src/app/modules/home/pages/monitoring/monitoring.component.ts
index ffa4fdec9..a01d93f32 100644
--- a/ui-ngx/src/app/modules/home/pages/monitoring/monitoring.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/monitoring/monitoring.component.ts
@@ -14,35 +14,40 @@
 /// limitations under the License.
 ///
 
-// @ts-nocheck
-
 import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   OnDestroy,
   OnInit,
+  QueryList,
   ViewChildren
 } from '@angular/core';
-import { calculateFixedWindowTimeMs, FixedWindow, Timewindow, TimewindowType } from '@shared/models/time/time.models';
+import {
+  calculateFixedWindowTimeMs,
+  FixedWindow,
+  Timewindow,
+  TimewindowType
+} from '@shared/models/time/time.models';
 import { forkJoin, Observable, Subject, timer } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 import { TimeService } from '@core/services/time.service';
 import { StatsService } from '@core/http/stats.service';
 import { share, switchMap, takeUntil } from 'rxjs/operators';
 import {
-  CHART_TOTAL_ONLY,
   CHART_ALL,
+  CHART_TOTAL_ONLY,
   chartJsParams,
   ChartPage,
   ChartTooltipTranslationMap,
   getColor,
   LegendConfig,
   LegendKey,
+  MAX_DATAPOINTS_LIMIT,
   StatsChartType,
   StatsChartTypeTranslationMap,
   TimeseriesData,
-  timeseriesDataLimit,
   TOTAL_KEY
 } from '@shared/models/chart.model';
 import { PageComponent } from '@shared/components/page.component';
@@ -63,7 +68,7 @@ import {
   calculateTotal,
   convertDataSizeUnits
 } from '@core/utils';
-import { ChartDataSets } from 'chart.js';
+import { ChartConfiguration, ChartDataset } from 'chart.js';
 
 Chart.register([Zoom]);
 
@@ -105,8 +110,8 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
   private fixedWindowTimeMs: FixedWindow;
   private brokerIds: string[];
 
-  private stopPolling$ = new Subject();
-  private destroy$ = new Subject();
+  private stopPolling$ = new Subject<void>();
+  private destroy$ = new Subject<void>();
 
   chartTooltip = (chartType: string) => this.translate.instant(ChartTooltipTranslationMap.get(chartType));
 
@@ -153,7 +158,7 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
     }
   }
 
-  onFullScreen(chartType: string) {
+  onFullScreen(chartType?: string) {
     this.isFullscreen = !this.isFullscreen;
     if (this.isFullscreen) {
       this.fullscreenChart = chartType;
@@ -214,8 +219,8 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
     }
   }
 
-  totalOnly(chartType: StatsChartType): boolean {
-    return CHART_TOTAL_ONLY.includes(chartType);
+  totalOnly(chartType: string): boolean {
+    return CHART_TOTAL_ONLY.includes(chartType as StatsChartType);
   }
 
   private initData() {
@@ -229,7 +234,17 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
   private fetchEntityTimeseries(initCharts = false) {
     const $getEntityTimeseriesTasks: Observable<TimeseriesData>[] = [];
     for (const brokerId of this.brokerIds) {
-      $getEntityTimeseriesTasks.push(this.statsService.getEntityTimeseries(brokerId, this.fixedWindowTimeMs.startTimeMs, this.fixedWindowTimeMs.endTimeMs, CHART_ALL));
+      $getEntityTimeseriesTasks.push(
+        this.statsService.getEntityTimeseries(
+          brokerId,
+          this.fixedWindowTimeMs.startTimeMs,
+          this.fixedWindowTimeMs.endTimeMs,
+          CHART_ALL,
+          MAX_DATAPOINTS_LIMIT,
+          this.timewindow.aggregation.type,
+          this.timeService.timewindowGroupingInterval(this.timewindow)
+        )
+      );
     }
     forkJoin($getEntityTimeseriesTasks)
       .pipe(takeUntil(this.stopPolling$))
@@ -276,7 +291,7 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
         }
       }
       const params = {...chartJsParams(this.chartPage), ...datasets};
-      this.charts[chartType] = new Chart(ctx, params);
+      this.charts[chartType] = new Chart(ctx, params as ChartConfiguration);
       if (chartType === StatsChartType.processedBytes) {
         this.charts[chartType].options.plugins.tooltip.callbacks.label = (context) => {
           const value = Number.isInteger(context.parsed.y) ? context.parsed.y : context.parsed.y.toFixed(2);
@@ -291,7 +306,7 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
     }
   }
 
-  private getDataset(dataset, chartType, i, brokerId): ChartDataSets {
+  private getDataset(dataset, chartType, i, brokerId): ChartDataset {
     const color = getColor(chartType, i);
     return {
       label: brokerId,
@@ -333,10 +348,11 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
     this.fixedWindowTimeMs.endTimeMs += POLLING_INTERVAL;
   }
 
-  private prepareData(chartType: StatsChartType, data: TimeseriesData[]) {
+  private prepareData(chartType: string, data: TimeseriesData[]) {
     if (chartType === StatsChartType.processedBytes) {
       const tsValue = data[0][StatsChartType.processedBytes][0];
       data[0][StatsChartType.processedBytes][0] = {
+        // @ts-ignore
         value: convertDataSizeUnits(tsValue.value, DataSizeUnitType.BYTE, this.currentDataSizeUnitType),
         ts: tsValue.ts
       }
@@ -391,7 +407,7 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
     for (const brokerData of data) {
       for (const key in brokerData) {
         const dataLength = brokerData[key].length;
-        if (dataLength === timeseriesDataLimit) {
+        if (dataLength === MAX_DATAPOINTS_LIMIT) {
           showWarning = true;
           break;
         }
@@ -410,17 +426,17 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
     }
   }
 
-  private resetLegendKeys(chartType: StatsChartType) {
+  private resetLegendKeys(chartType: string) {
     this.legendKeys[chartType] = {};
     this.legendKeys[chartType].keys = [];
   }
 
-  private resetLegendData(chartType: StatsChartType) {
+  private resetLegendData(chartType: string) {
     this.legendData[chartType] = {};
     this.legendData[chartType].data = [];
   }
 
-  private updateLegendKeys(chartType: StatsChartType) {
+  private updateLegendKeys(chartType: string) {
     for (let i = 0; i < this.brokerIds.length; i++) {
       const color = getColor(chartType, i);
       const brokerId = this.brokerIds[i];
@@ -434,7 +450,7 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
     }
   }
 
-  private updateLegendData(data: any[], chartType: StatsChartType) {
+  private updateLegendData(data: any[], chartType: string) {
     if (data?.length) {
       this.legendData[chartType].data.push({
         min: Math.floor(calculateMin(data)),
@@ -454,7 +470,7 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
     }
   }
 
-  private addLegendKey(chartType: StatsChartType, index: number, brokerId: string, color: string) {
+  private addLegendKey(chartType: string, index: number, brokerId: string, color: string) {
     this.legendKeys[chartType].keys.push({
       dataKey: {
         label: brokerId,
@@ -465,7 +481,7 @@ export class MonitoringComponent extends PageComponent implements OnInit, AfterV
     });
   }
 
-  private updateLegend(chartType: StatsChartType) {
+  private updateLegend(chartType: string) {
     this.resetLegendData(chartType);
     for (let i = 0; i < this.brokerIds.length; i++) {
       const brokerId = this.brokerIds[i];
diff --git a/ui-ngx/src/app/shared/components/time/datetime-period.component.html b/ui-ngx/src/app/shared/components/time/datetime-period.component.html
index 0a798c3dd..fd6c1cf85 100644
--- a/ui-ngx/src/app/shared/components/time/datetime-period.component.html
+++ b/ui-ngx/src/app/shared/components/time/datetime-period.component.html
@@ -19,13 +19,13 @@
   <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px"
            fxLayout.xs="column" fxLayoutAlign.xs="start stretch"  fxLayoutGap.xs="0">
     <mat-form-field>
-      <mat-placeholder translate>datetime.date-from</mat-placeholder>
+      <mat-label translate>datetime.date-from</mat-label>
       <mat-datetimepicker-toggle [for]="startDatePicker" matPrefix></mat-datetimepicker-toggle>
       <mat-datetimepicker #startDatePicker type="date" openOnFocus="true"></mat-datetimepicker>
       <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startDatePicker" (ngModelChange)="onStartDateChange()">
     </mat-form-field>
     <mat-form-field>
-      <mat-placeholder translate>datetime.time-from</mat-placeholder>
+      <mat-label translate>datetime.time-from</mat-label>
       <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
       <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
       <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startTimePicker" (ngModelChange)="onStartDateChange()">
@@ -34,13 +34,13 @@
   <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px"
            fxLayout.xs="column" fxLayoutAlign.xs="start stretch"  fxLayoutGap.xs="0">
     <mat-form-field>
-      <mat-placeholder translate>datetime.date-to</mat-placeholder>
+      <mat-label translate>datetime.date-to</mat-label>
       <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
       <mat-datetimepicker #endDatePicker type="date" openOnFocus="true"></mat-datetimepicker>
       <input matInput [disabled]="disabled" [(ngModel)]="endDate" [matDatetimepicker]="endDatePicker" (ngModelChange)="onEndDateChange()">
     </mat-form-field>
     <mat-form-field>
-      <mat-placeholder translate>datetime.time-to</mat-placeholder>
+      <mat-label translate>datetime.time-to</mat-label>
       <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
       <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
       <input matInput [disabled]="disabled" [(ngModel)]="endDate" [matDatetimepicker]="endTimePicker" (ngModelChange)="onEndDateChange()">
diff --git a/ui-ngx/src/app/shared/components/time/datetime-period.component.scss b/ui-ngx/src/app/shared/components/time/datetime-period.component.scss
index 1177b0bbe..c074b5c1d 100644
--- a/ui-ngx/src/app/shared/components/time/datetime-period.component.scss
+++ b/ui-ngx/src/app/shared/components/time/datetime-period.component.scss
@@ -16,14 +16,8 @@
 @import 'constants';
 
 :host ::ng-deep {
-  .mat-form-field-wrapper {
-    padding-bottom: 8px;
-  }
-  .mat-form-field-underline {
-    bottom: 8px;
-  }
-  .mat-form-field-infix {
-    width: 150px;
+  .mat-mdc-form-field-infix {
+    width: 100px;
 
     @media #{$mat-xs} {
       width: 100%;
diff --git a/ui-ngx/src/app/shared/components/time/datetime.component.scss b/ui-ngx/src/app/shared/components/time/datetime.component.scss
deleted file mode 100644
index 017d2fb28..000000000
--- a/ui-ngx/src/app/shared/components/time/datetime.component.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host ::ng-deep {
-  .mat-form-field-wrapper {
-    padding-bottom: 8px;
-  }
-  .mat-form-field-underline {
-    bottom: 8px;
-  }
-  .mat-form-field-infix {
-    width: auto;
-    min-width: 100px;
-  }
-  mat-form-field {
-    &.no-label {
-      .mat-form-field-infix {
-        border-top-width: 0.2em;
-      }
-    }
-  }
-}
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.html b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
index f740efb96..04292b4d9 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.html
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
@@ -15,13 +15,12 @@
     limitations under the License.
 
 -->
-<section fxLayout="row">
-  <section fxLayout="column" [fxShow]="isEdit">
+<section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px">
+  <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
     <label class="tb-small hide-label" translate>timewindow.hide</label>
     <mat-checkbox [(ngModel)]="hideFlag" (ngModelChange)="onHideFlagChange()"></mat-checkbox>
   </section>
   <section class="interval-section" fxLayout="column" fxFlex [fxShow]="advanced && (isEdit || !hideFlag)">
-    <label class="tb-small interval-label" translate>{{ predefinedName }}</label>
     <section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px">
       <mat-form-field class="number-input">
         <mat-label translate>timeinterval.days</mat-label>
@@ -41,18 +40,18 @@
       </mat-form-field>
     </section>
   </section>
-  <section class="interval-section" fxLayout="row" fxFlex [fxShow]="!advanced && (isEdit || !hideFlag)">
-    <mat-form-field fxFlex>
-      <mat-label translate>{{ predefinedName }}</mat-label>
-      <mat-select [disabled]="hideFlag || disabled" [(ngModel)]="intervalMs" (ngModelChange)="onIntervalMsChange()" style="min-width: 150px;">
+  <section fxLayout="row" fxFlex [fxShow]="!advanced && (isEdit || !hideFlag)">
+    <mat-form-field fxFlex [subscriptSizing]="subscriptSizing">
+      <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
+      <mat-select [disabled]="hideFlag || disabled" [(ngModel)]="interval" (ngModelChange)="onIntervalChange()" style="min-width: 150px;">
         <mat-option *ngFor="let interval of intervals" [value]="interval.value">
           {{ interval.name | translate:interval.translateParams }}
         </mat-option>
       </mat-select>
     </mat-form-field>
   </section>
-  <!--<section fxLayout="column" fxLayoutAlign="center center" [fxShow]="(isEdit || !hideFlag)">
+  <section fxLayout="column" fxLayoutAlign="center center" [fxShow]="(isEdit || !hideFlag) && !disabledAdvanced">
     <label class="tb-small advanced-label" translate>timeinterval.advanced</label>
     <mat-slide-toggle [disabled]="hideFlag || disabled" class="advanced-switch" [(ngModel)]="advanced" (ngModelChange)="onAdvancedChange()"></mat-slide-toggle>
-  </section>-->
+  </section>
 </section>
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.scss b/ui-ngx/src/app/shared/components/time/timeinterval.component.scss
index 6eb24d1ef..69e6344e8 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.scss
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.scss
@@ -47,8 +47,8 @@
 
 :host ::ng-deep {
   .number-input {
-    .mat-form-field-infix {
-      width: 70px;
+    .mat-mdc-form-field-infix {
+      width: 50px;
     }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts
index e2ca42276..8ed6fb203 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts
@@ -16,8 +16,12 @@
 
 import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { TimeInterval, TimeService } from '@core/services/time.service';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { TimeService } from '@core/services/time.service';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { SubscriptSizing } from '@angular/material/form-field';
+import { coerceBoolean } from '@shared/decorators/coercion';
+import { Interval, IntervalMath, TimeInterval } from '@shared/models/time/time.models';
+import { isDefined } from '@core/utils';
 
 @Component({
   selector: 'tb-timeinterval',
@@ -38,8 +42,9 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
 
   @Input()
   set min(min: number) {
-    if (typeof min !== 'undefined' && min !== this.minValue) {
-      this.minValue = min;
+    const minValueData = coerceNumberProperty(min);
+    if (typeof minValueData !== 'undefined' && minValueData !== this.minValue) {
+      this.minValue = minValueData;
       this.maxValue = Math.max(this.maxValue, this.minValue);
       this.updateView();
     }
@@ -47,55 +52,56 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
 
   @Input()
   set max(max: number) {
-    if (typeof max !== 'undefined' && max !== this.maxValue) {
-      this.maxValue = max;
+    const maxValueData = coerceNumberProperty(max);
+    if (typeof maxValueData !== 'undefined' && maxValueData !== this.maxValue) {
+      this.maxValue = maxValueData;
       this.minValue = Math.min(this.minValue, this.maxValue);
-      this.updateView();
+      this.updateView(true);
     }
   }
 
   @Input() predefinedName: string;
 
-  isEditValue = false;
-
   @Input()
-  set isEdit(val) {
-    this.isEditValue = coerceBooleanProperty(val);
-  }
-
-  get isEdit() {
-    return this.isEditValue;
-  }
+  @coerceBoolean()
+  isEdit = false;
 
-  hideFlagValue = false;
+  @Input()
+  @coerceBoolean()
+  hideFlag = false;
 
   @Input()
-  get hideFlag() {
-    return this.hideFlagValue;
-  }
+  @coerceBoolean()
+  disabledAdvanced = false;
 
-  set hideFlag(val) {
-    this.hideFlagValue = val;
-  }
+  @Input()
+  @coerceBoolean()
+  useCalendarIntervals = false;
 
   @Output() hideFlagChange = new EventEmitter<boolean>();
 
   @Input() disabled: boolean;
 
+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed';
+
   days = 0;
   hours = 0;
   mins = 1;
   secs = 0;
 
-  intervalMs = 0;
-  modelValue: number;
+  interval: Interval = 0;
+  intervals: Array<TimeInterval>;
 
   advanced = false;
-  rendered = false;
 
-  intervals: Array<TimeInterval>;
+  private modelValue: Interval;
+  private rendered = false;
+  private propagateChangeValue: any;
 
-  private propagateChange = (_: any) => {};
+  private propagateChange = (value: any) => {
+    this.propagateChangeValue = value;
+  };
 
   constructor(private timeService: TimeService) {
   }
@@ -106,6 +112,9 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
 
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
+    if (isDefined(this.propagateChangeValue)) {
+      this.propagateChange(this.propagateChangeValue);
+    }
   }
 
   registerOnTouched(fn: any): void {
@@ -115,101 +124,102 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
     this.disabled = isDisabled;
   }
 
-  writeValue(intervalMs: number): void {
-    this.modelValue = intervalMs;
+  writeValue(interval: Interval): void {
+    this.modelValue = interval;
     this.rendered = true;
     if (typeof this.modelValue !== 'undefined') {
       const min = this.timeService.boundMinInterval(this.minValue);
       const max = this.timeService.boundMaxInterval(this.maxValue);
-      if (this.modelValue >= min && this.modelValue <= max) {
-        this.advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue);
-        this.setIntervalMs(this.modelValue);
+      if (IntervalMath.numberValue(this.modelValue) >= min && IntervalMath.numberValue(this.modelValue) <= max) {
+        this.advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue, this.useCalendarIntervals);
+        this.setInterval(this.modelValue);
       } else {
         this.boundInterval();
       }
     }
   }
 
-  setIntervalMs(intervalMs: number) {
+  private setInterval(interval: Interval) {
     if (!this.advanced) {
-      this.intervalMs = intervalMs;
+      this.interval = interval;
     }
-    const intervalSeconds = Math.floor(intervalMs / 1000);
+    const intervalSeconds = Math.floor(IntervalMath.numberValue(interval) / 1000);
     this.days = Math.floor(intervalSeconds / 86400);
     this.hours = Math.floor((intervalSeconds % 86400) / 3600);
     this.mins = Math.floor(((intervalSeconds % 86400) % 3600) / 60);
     this.secs = intervalSeconds % 60;
   }
 
-  boundInterval() {
+  private boundInterval(updateToPreferred = false) {
     const min = this.timeService.boundMinInterval(this.minValue);
     const max = this.timeService.boundMaxInterval(this.maxValue);
-    this.intervals = this.timeService.getIntervals(this.minValue, this.maxValue);
+    this.intervals = this.timeService.getIntervals(this.minValue, this.maxValue, this.useCalendarIntervals);
     if (this.rendered) {
-      let newIntervalMs = this.modelValue;
+      let newInterval = this.modelValue;
+      const newIntervalMs = IntervalMath.numberValue(newInterval);
       if (newIntervalMs < min) {
-        newIntervalMs = min;
-      } else if (newIntervalMs > max) {
-        newIntervalMs = max;
+        newInterval = min;
+      } else if (newIntervalMs >= max && updateToPreferred) {
+        newInterval = this.timeService.boundMaxInterval(max / 7);
       }
       if (!this.advanced) {
-        newIntervalMs = this.timeService.boundToPredefinedInterval(min, max, newIntervalMs);
+        newInterval = this.timeService.boundToPredefinedInterval(min, max, newInterval, this.useCalendarIntervals);
       }
-      if (newIntervalMs !== this.modelValue) {
-        this.setIntervalMs(newIntervalMs);
+      if (newInterval !== this.modelValue) {
+        this.setInterval(newInterval);
         this.updateView();
       }
     }
   }
 
-  updateView() {
+  private updateView(updateToPreferred = false) {
     if (!this.rendered) {
       return;
     }
-    let value = null;
-    let intervalMs;
+    let value: Interval = null;
+    let interval: Interval;
     if (!this.advanced) {
-      intervalMs = this.intervalMs;
-      if (!intervalMs || isNaN(intervalMs)) {
-        intervalMs = this.calculateIntervalMs();
+      interval = this.interval;
+      if (!interval || typeof interval === 'number' && isNaN(interval)) {
+        interval = this.calculateIntervalMs();
       }
     } else {
-      intervalMs = this.calculateIntervalMs();
+      interval = this.calculateIntervalMs();
     }
-    if (!isNaN(intervalMs) && intervalMs > 0) {
-      value = intervalMs;
+    if (typeof interval === 'string' || !isNaN(interval) && interval > 0) {
+      value = interval;
     }
     this.modelValue = value;
     this.propagateChange(this.modelValue);
-    this.boundInterval();
+    this.boundInterval(updateToPreferred);
   }
 
-  calculateIntervalMs(): number {
+  private calculateIntervalMs(): number {
     return (this.days * 86400 +
       this.hours * 3600 +
       this.mins * 60 +
       this.secs) * 1000;
   }
 
-  onIntervalMsChange() {
+  onIntervalChange() {
     this.updateView();
   }
 
   onAdvancedChange() {
     if (!this.advanced) {
-      this.intervalMs = this.calculateIntervalMs();
+      this.interval = this.calculateIntervalMs();
     } else {
-      let intervalMs = this.intervalMs;
-      if (!intervalMs || isNaN(intervalMs)) {
-        intervalMs = this.calculateIntervalMs();
+      let interval = this.interval;
+      if (!interval || typeof interval === 'number' && isNaN(interval)) {
+        interval = this.calculateIntervalMs();
       }
-      this.setIntervalMs(intervalMs);
+      this.setInterval(interval);
     }
     this.updateView();
   }
 
   onHideFlagChange() {
-    this.hideFlagChange.emit(this.hideFlagValue);
+    this.hideFlagChange.emit(this.hideFlag);
   }
 
   onTimeInputChange(type: string) {
@@ -229,7 +239,7 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
     }
   }
 
-  onSecsChange() {
+  private onSecsChange() {
     if (typeof this.secs === 'undefined') {
       return;
     }
@@ -249,7 +259,7 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
     this.updateView();
   }
 
-  onMinsChange() {
+  private onMinsChange() {
     if (typeof this.mins === 'undefined') {
       return;
     }
@@ -269,7 +279,7 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
     this.updateView();
   }
 
-  onHoursChange() {
+  private onHoursChange() {
     if (typeof this.hours === 'undefined') {
       return;
     }
@@ -289,7 +299,7 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
     this.updateView();
   }
 
-  onDaysChange() {
+  private onDaysChange() {
     if (typeof this.days === 'undefined') {
       return;
     }
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
index 7ff430ee7..996bb9ecb 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
@@ -16,138 +16,207 @@
 
 -->
 <form [formGroup]="timewindowForm" (ngSubmit)="update()">
-  <fieldset [disabled]="(isLoading$ | async)">
-    <div class="mat-content" fxLayout="column">
-      <mat-tab-group dynamicHeight [ngClass]="{'tb-headless': historyOnly}"
-                     (selectedIndexChange)="timewindowForm.markAsDirty()" [(selectedIndex)]="timewindow.selectedTab">
-        <mat-tab label="{{ 'timewindow.realtime' | translate }}">
-          <section fxLayout="row">
-            <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center"
-                     style="padding-top: 8px; padding-left: 16px;">
-              <label class="tb-small hide-label" translate>timewindow.hide</label>
-              <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
-                            (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
-            </section>
-            <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
-              <div formGroupName="realtime" class="mat-content mat-padding" style="padding-top: 8px;">
-                <mat-radio-group *ngIf="!quickIntervalOnly"
-                                 [fxShow]="isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)"
-                                 formControlName="realtimeType">
-                  <mat-radio-button [value]="realtimeTypes.LAST_INTERVAL" color="primary">
-                    <section fxLayout="row">
-                      <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
-                        <label class="tb-small hide-label" translate>timewindow.hide</label>
-                        <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideLastInterval"
-                                      (ngModelChange)="onHideLastIntervalChanged()"></mat-checkbox>
-                      </section>
-                      <section fxLayout="column">
-                        <span translate>timewindow.last</span>
-                        <tb-timeinterval
-                          formControlName="timewindowMs"
-                          predefinedName="timewindow.last"
-                          [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
-                          [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
-                                  timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
-                          style="padding-top: 8px;"></tb-timeinterval>
-                      </section>
+    <mat-tab-group dynamicHeight="true" [ngClass]="{'tb-headless': historyOnly}"
+                   (selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab">
+      <mat-tab label="{{ 'timewindow.realtime' | translate }}">
+        <section fxLayout="row">
+          <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
+            <div formGroupName="realtime" class="mat-content mat-padding" style="padding-top: 8px;">
+              <mat-radio-group *ngIf="!quickIntervalOnly"
+                               [fxShow]="isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)"
+                               formControlName="realtimeType">
+                <mat-radio-button [value]="realtimeTypes.LAST_INTERVAL" color="primary">
+                  <section fxLayout="row">
+                    <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
+                      <label class="tb-small hide-label" translate>timewindow.hide</label>
+                      <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideLastInterval"
+                                    (ngModelChange)="onHideLastIntervalChanged()"></mat-checkbox>
                     </section>
-                  </mat-radio-button>
-                  <mat-radio-button [value]="realtimeTypes.INTERVAL" color="primary">
-                    <section fxLayout="row">
-                      <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
-                        <label class="tb-small hide-label" translate>timewindow.hide</label>
-                        <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideQuickInterval"
-                                      (ngModelChange)="onHideQuickIntervalChanged()"></mat-checkbox>
-                      </section>
-                      <section fxLayout="column">
-                        <span translate>timewindow.interval</span>
-                        <tb-quick-time-interval
-                          formControlName="quickInterval"
-                          onlyCurrentInterval="true"
-                          [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
-                          [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
-                                  timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
-                          style="padding-top: 8px"></tb-quick-time-interval>
-                      </section>
-                    </section>
-                  </mat-radio-button>
-                </mat-radio-group>
-                <tb-timeinterval *ngIf="!isEdit && !timewindow.hideLastInterval && timewindow.hideQuickInterval"
-                                 formControlName="timewindowMs"
-                                 predefinedName="timewindow.last"
-                                 required
-                                 style="padding-top: 8px;"></tb-timeinterval>
-                <tb-quick-time-interval
-                  *ngIf="quickIntervalOnly || !isEdit && timewindow.hideLastInterval && !timewindow.hideQuickInterval"
-                  formControlName="quickInterval"
-                  onlyCurrentInterval="true"
-                  required
-                  style="padding-top: 8px"></tb-quick-time-interval>
-              </div>
-            </section>
-          </section>
-        </mat-tab>
-        <mat-tab label="{{ 'timewindow.history' | translate }}">
-          <section fxLayout="row">
-            <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center"
-                     style="padding-top: 8px; padding-left: 16px;">
-              <label class="tb-small hide-label" translate>timewindow.hide</label>
-              <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
-                            (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
-            </section>
-            <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
-              <div formGroupName="history" class="mat-content mat-padding" style="padding-top: 8px;">
-                <mat-radio-group formControlName="historyType">
-                  <mat-radio-button *ngIf="forAllTimeEnabled" [value]="historyTypes.FOR_ALL_TIME" color="primary">
-                    <section fxLayout="column">
-                      <span translate>timewindow.for-all-time</span>
-                    </section>
-                  </mat-radio-button>
-                  <mat-radio-button [value]="historyTypes.LAST_INTERVAL" color="primary">
                     <section fxLayout="column">
                       <span translate>timewindow.last</span>
                       <tb-timeinterval
                         formControlName="timewindowMs"
                         predefinedName="timewindow.last"
-                        class="history-time-input"
-                        [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
-                        [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
-                                timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
+                        [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
+                        [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+                                timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
                         style="padding-top: 8px;"></tb-timeinterval>
                     </section>
-                  </mat-radio-button>
-                  <mat-radio-button [value]="historyTypes.FIXED" color="primary">
-                    <section fxLayout="column">
-                      <span translate>timewindow.time-period</span>
-                      <tb-datetime-period
-                        formControlName="fixedTimewindow"
-                        class="history-time-input"
-                        [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
-                        [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
-                                timewindowForm.get('history.historyType').value === historyTypes.FIXED"
-                        style="padding-top: 8px;"></tb-datetime-period>
+                  </section>
+                </mat-radio-button>
+                <mat-radio-button [value]="realtimeTypes.INTERVAL" color="primary">
+                  <section fxLayout="row">
+                    <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
+                      <label class="tb-small hide-label" translate>timewindow.hide</label>
+                      <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideQuickInterval"
+                                    (ngModelChange)="onHideQuickIntervalChanged()"></mat-checkbox>
                     </section>
-                  </mat-radio-button>
-                  <mat-radio-button [value]="historyTypes.INTERVAL" color="primary">
                     <section fxLayout="column">
                       <span translate>timewindow.interval</span>
                       <tb-quick-time-interval
                         formControlName="quickInterval"
-                        class="history-time-input"
-                        [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
-                        [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
-                              timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
+                        onlyCurrentInterval="true"
+                        [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
+                        [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+                                timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
                         style="padding-top: 8px"></tb-quick-time-interval>
                     </section>
-                  </mat-radio-button>
-                </mat-radio-group>
-              </div>
-            </section>
+                  </section>
+                </mat-radio-button>
+              </mat-radio-group>
+              <tb-timeinterval *ngIf="!isEdit && !timewindow.hideLastInterval && timewindow.hideQuickInterval"
+                               formControlName="timewindowMs"
+                               predefinedName="timewindow.last"
+                               required
+                               style="padding-top: 8px;"></tb-timeinterval>
+              <tb-quick-time-interval
+                *ngIf="quickIntervalOnly || !isEdit && timewindow.hideLastInterval && !timewindow.hideQuickInterval"
+                formControlName="quickInterval"
+                onlyCurrentInterval="true"
+                required
+                style="padding-top: 8px"></tb-quick-time-interval>
+            </div>
+          </section>
+        </section>
+      </mat-tab>
+      <mat-tab label="{{ 'timewindow.history' | translate }}">
+        <section fxLayout="row">
+          <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
+            <div formGroupName="history" class="mat-content mat-padding" style="padding-top: 8px;">
+              <mat-radio-group formControlName="historyType">
+                <mat-radio-button *ngIf="forAllTimeEnabled" [value]="historyTypes.FOR_ALL_TIME" color="primary">
+                  <section fxLayout="column">
+                    <span translate>timewindow.for-all-time</span>
+                  </section>
+                </mat-radio-button>
+                <mat-radio-button [value]="historyTypes.LAST_INTERVAL" color="primary">
+                  <section fxLayout="column">
+                    <span translate>timewindow.last</span>
+                    <tb-timeinterval
+                      formControlName="timewindowMs"
+                      predefinedName="timewindow.last"
+                      class="history-time-input"
+                      [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
+                      [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+                              timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
+                      style="padding-top: 8px;"></tb-timeinterval>
+                  </section>
+                </mat-radio-button>
+                <mat-radio-button [value]="historyTypes.FIXED" color="primary">
+                  <section fxLayout="column">
+                    <span translate>timewindow.time-period</span>
+                    <tb-datetime-period
+                      formControlName="fixedTimewindow"
+                      class="history-time-input"
+                      [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
+                      [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+                              timewindowForm.get('history.historyType').value === historyTypes.FIXED"
+                      style="padding-top: 8px;"></tb-datetime-period>
+                  </section>
+                </mat-radio-button>
+                <mat-radio-button [value]="historyTypes.INTERVAL" color="primary">
+                  <section fxLayout="column">
+                    <span translate>timewindow.interval</span>
+                    <tb-quick-time-interval
+                      formControlName="quickInterval"
+                      class="history-time-input"
+                      [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
+                      [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+                            timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
+                      style="padding-top: 8px"></tb-quick-time-interval>
+                  </section>
+                </mat-radio-button>
+              </mat-radio-group>
+            </div>
+          </section>
+        </section>
+        <ng-container *ngTemplateOutlet="additionalData">
+        </ng-container>
+      </mat-tab>
+    </mat-tab-group>
+    <ng-template #additionalData>
+      <div *ngIf="aggregation" formGroupName="aggregation" class="mat-content mat-padding" fxLayout="column">
+        <section fxLayout="row">
+          <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
+            <label class="tb-small hide-label" translate>timewindow.hide</label>
+            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggregation"
+                          (ngModelChange)="onHideAggregationChanged()"></mat-checkbox>
           </section>
-        </mat-tab>
-      </mat-tab-group>
-    </div>
-  </fieldset>
+          <section fxFlex fxLayout="column" [fxShow]="isEdit || !timewindow.hideAggregation">
+            <mat-form-field>
+              <mat-label translate>aggregation.function</mat-label>
+              <mat-select formControlName="type" style="min-width: 150px;">
+                <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
+                  {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </section>
+        </section>
+        <section fxLayout="row" *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
+          <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
+            <label class="tb-small hide-label" translate>timewindow.hide</label>
+            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval"
+                          (ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox>
+          </section>
+          <!--<section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideAggInterval">
+            <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
+                 fxLayout.xs="column" fxLayoutAlign.xs="stretch">
+              <label translate>aggregation.limit</label>
+              <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
+                <mat-slider fxFlex
+                            discrete
+                            min="{{minDatapointsLimit()}}"
+                            max="{{maxDatapointsLimit()}}"><input matSliderThumb formControlName="limit"/>
+                </mat-slider>
+                <mat-form-field class="limit-slider-value">
+                  <input matInput formControlName="limit" type="number" step="1"
+                         [value]="timewindowForm.get('aggregation.limit').value"
+                         min="{{minDatapointsLimit()}}"
+                         max="{{maxDatapointsLimit()}}"/>
+                </mat-form-field>
+              </div>
+            </div>
+          </section>-->
+        </section>
+      </div>
+      <div formGroupName="realtime"
+           *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
+     timewindow.selectedTab === timewindowTypes.REALTIME" class="mat-content mat-padding" fxLayout="column">
+        <tb-timeinterval
+          formControlName="interval"
+          [isEdit]="isEdit"
+          [(hideFlag)]="timewindow.hideAggInterval"
+          (hideFlagChange)="onHideAggIntervalChanged()"
+          [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
+          useCalendarIntervals
+          predefinedName="aggregation.group-interval">
+        </tb-timeinterval>
+      </div>
+      <div formGroupName="history"
+           *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
+     timewindow.selectedTab === timewindowTypes.HISTORY" class="mat-content mat-padding" fxLayout="column">
+        <tb-timeinterval
+          formControlName="interval"
+          [isEdit]="isEdit"
+          [(hideFlag)]="timewindow.hideAggInterval"
+          (hideFlagChange)="onHideAggIntervalChanged()"
+          [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
+          predefinedName="aggregation.group-interval">
+        </tb-timeinterval>
+      </div>
+      <div *ngIf="timezone" class="mat-content mat-padding" fxLayout="row">
+        <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
+          <label class="tb-small hide-label" translate>timewindow.hide</label>
+          <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideTimezone"
+                        (ngModelChange)="onHideTimezoneChanged()"></mat-checkbox>
+        </section>
+        <tb-timezone-select fxFlex [fxShow]="isEdit || !timewindow.hideTimezone"
+                            localBrowserTimezonePlaceholderOnEmpty="true"
+                            formControlName="timezone">
+        </tb-timezone-select>
+      </div>
+    </ng-template>
 </form>
 <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
   <button type="button"
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
index 06b2717cd..605eaf8f8 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
@@ -53,33 +53,19 @@ export const TIMEWINDOW_PANEL_DATA = new InjectionToken<any>('TimewindowPanelDat
 export class TimewindowPanelComponent extends PageComponent implements OnInit {
 
   historyOnly = false;
-
   forAllTimeEnabled = false;
-
   quickIntervalOnly = false;
-
-  aggregation = false;
-
+  aggregation = true;
   timezone = false;
-
   isEdit = false;
-
   timewindow: Timewindow;
-
   timewindowForm: UntypedFormGroup;
-
   historyTypes = HistoryWindowType;
-
   realtimeTypes = RealtimeWindowType;
-
   timewindowTypes = TimewindowType;
-
   aggregationTypes = AggregationType;
-
   aggregations = Object.keys(AggregationType);
-
   aggregationTypesTranslations = aggregationTranslations;
-
   result: Timewindow;
 
   constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData,
@@ -186,6 +172,38 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
     this.timewindowForm.get('aggregation.limit').updateValueAndValidity({emitEvent: false});
   }
 
+  onTimewindowTypeChange() {
+    this.timewindowForm.markAsDirty();
+    const timewindowFormValue = this.timewindowForm.getRawValue();
+    if (this.timewindow.selectedTab === TimewindowType.REALTIME) {
+      if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED) {
+        this.timewindowForm.get('realtime').patchValue({
+          realtimeType: Object.keys(RealtimeWindowType).includes(HistoryWindowType[timewindowFormValue.history.historyType]) ?
+            RealtimeWindowType[HistoryWindowType[timewindowFormValue.history.historyType]] :
+            timewindowFormValue.realtime.realtimeType,
+          timewindowMs: timewindowFormValue.history.timewindowMs,
+          quickInterval: timewindowFormValue.history.quickInterval.startsWith('CURRENT') ?
+            timewindowFormValue.history.quickInterval : timewindowFormValue.realtime.quickInterval
+        });
+        setTimeout(() => this.timewindowForm.get('realtime.interval').patchValue(timewindowFormValue.history.interval));
+      }
+    } else {
+      this.timewindowForm.get('history').patchValue({
+        historyType: HistoryWindowType[RealtimeWindowType[timewindowFormValue.realtime.realtimeType]],
+        timewindowMs: timewindowFormValue.realtime.timewindowMs,
+        quickInterval: timewindowFormValue.realtime.quickInterval
+      });
+      setTimeout(() => this.timewindowForm.get('history.interval').patchValue(timewindowFormValue.realtime.interval));
+    }
+    this.timewindowForm.patchValue({
+      aggregation: {
+        type: timewindowFormValue.aggregation.type,
+        limit: timewindowFormValue.aggregation.limit
+      },
+      timezone: timewindowFormValue.timezone
+    });
+  }
+
   update() {
     const timewindowFormValue = this.timewindowForm.getRawValue();
     this.timewindow.realtime = {
diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.scss b/ui-ngx/src/app/shared/components/time/timewindow.component.scss
index 92673a41a..99f3d8367 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.scss
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.scss
@@ -58,6 +58,7 @@
     .mdc-button__label {
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }
diff --git a/ui-ngx/src/app/shared/models/chart.model.ts b/ui-ngx/src/app/shared/models/chart.model.ts
index ed4e2dd0d..a50818817 100644
--- a/ui-ngx/src/app/shared/models/chart.model.ts
+++ b/ui-ngx/src/app/shared/models/chart.model.ts
@@ -40,7 +40,7 @@ export enum StatsChartType {
 export const CHART_ALL = Object.values(StatsChartType);
 export const CHART_TOTAL_ONLY = [StatsChartType.sessions, StatsChartType.subscriptions];
 export const TOTAL_KEY = 'total';
-export const timeseriesDataLimit = 50000;
+export const MAX_DATAPOINTS_LIMIT = 50000;
 
 export enum ChartPage {
   home = 'home',
@@ -96,47 +96,50 @@ Tooltip.positioners.tbPositioner = function(elements, eventPosition) {
   };
 };
 
+const crosshairPlugin = {
+  id: 'corsair',
+  afterDatasetsDraw(chart) {
+    const { ctx, chartArea, corsair } = chart;
+    if (corsair?.x && corsair?.y) {
+      const { x, y } = corsair;
+      if (
+        x >= chartArea.left &&
+        x <= chartArea.right &&
+        y >= chartArea.top &&
+        y <= chartArea.bottom
+      ) {
+        ctx.save();
+        ctx.strokeStyle = '#960000';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(x, chartArea.top);
+        ctx.lineTo(x, chartArea.bottom);
+        ctx.stroke();
+        ctx.restore();
+      }
+    }
+  },
+  afterEvent(chart, evt) {
+    const { chartArea } = chart;
+    const { x, y } = evt.event;
+    if (
+      x >= chartArea.left &&
+      x <= chartArea.right &&
+      y >= chartArea.top &&
+      y <= chartArea.bottom
+    ) {
+      chart.corsair = { x, y };
+    } else {
+      chart.corsair = null;
+    }
+    chart.draw();
+  },
+};
+
 const lineChartParams = {
   type: 'line',
   plugins: [
-    {
-      id: 'corsair',
-      afterInit: (chart) => { chart.corsair = {x: 0, y: 0}; },
-      afterEvent: (chart, evt) => {
-        const {chartArea: {top, bottom}} = chart;
-        const {event: {x, y}} = evt;
-        if (y < top || y > bottom || x < 20) {
-          chart.corsair = {x, y, draw: false};
-          chart.draw();
-          return;
-        }
-        chart.corsair = {x, y, draw: true};
-        chart.draw();
-      },
-      afterDatasetsDraw: (chart, _, opts) => {
-        const {ctx, chartArea: {top, bottom}} = chart;
-        const {x, draw} = chart.corsair;
-        if (!draw) return;
-        const {datasets} = chart.data;
-        let hasData = false;
-        for (let i = 0; i < datasets.length; i += 1) {
-          const dataset = datasets[i];
-          hasData = dataset.data.length > 0;
-        }
-        if (hasData) {
-          ctx.lineWidth = opts.width || 0;
-          ctx.setLineDash(opts.dash || []);
-          ctx.strokeStyle = '#960000';
-
-          ctx.save();
-          ctx.beginPath();
-          ctx.moveTo(x, bottom);
-          ctx.lineTo(x, top);
-          ctx.stroke();
-          ctx.restore();
-        }
-      }
-    }
+    crosshairPlugin,
   ],
   options: {
     animation: false,
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 511c135d6..fdd1243bb 100644
--- a/ui-ngx/src/app/shared/models/time/time.models.ts
+++ b/ui-ngx/src/app/shared/models/time/time.models.ts
@@ -26,10 +26,10 @@ export const MINUTE = 60 * SECOND;
 export const HOUR = 60 * MINUTE;
 export const DAY = 24 * HOUR;
 export const WEEK = 7 * DAY;
+export const AVG_MONTH = Math.floor(30.44 * DAY);
+export const AVG_QUARTER = Math.floor(DAY * 365.2425 / 4);
 export const YEAR = DAY * 365;
 
-export type ComparisonDuration = moment_.unitOfTime.DurationConstructor | 'previousInterval' | 'customInterval';
-
 export enum TimewindowType {
   REALTIME,
   HISTORY
@@ -47,8 +47,36 @@ export enum HistoryWindowType {
   FOR_ALL_TIME
 }
 
+export enum IntervalType {
+  MILLISECONDS = 'MILLISECONDS',
+  WEEK = 'WEEK',
+  WEEK_ISO = 'WEEK_ISO',
+  MONTH = 'MONTH',
+  QUARTER = 'QUARTER'
+}
+
+export type Interval = number | IntervalType;
+
+export class IntervalMath {
+  public static max(...values: Interval[]): Interval {
+    const numberArr = values.map(v => IntervalMath.numberValue(v));
+    const index = numberArr.indexOf(Math.max(...numberArr));
+    return values[index];
+  }
+
+  public static min(...values: Interval[]): Interval {
+    const numberArr = values.map(v => IntervalMath.numberValue(v));
+    const index = numberArr.indexOf(Math.min(...numberArr));
+    return values[index];
+  }
+
+  public static numberValue(value: Interval): number {
+    return typeof value === 'number' ? value : IntervalTypeValuesMap.get(value);
+  }
+}
+
 export interface IntervalWindow {
-  interval?: number;
+  interval?: Interval;
   timewindowMs?: number;
   quickInterval?: QuickTimeInterval;
 }
@@ -68,12 +96,12 @@ export interface HistoryWindow extends IntervalWindow {
 }
 
 export enum AggregationType {
+  NONE = 'NONE',
   MIN = 'MIN',
   MAX = 'MAX',
   AVG = 'AVG',
   SUM = 'SUM',
-  COUNT = 'COUNT',
-  NONE = 'NONE'
+  COUNT = 'COUNT'
 }
 
 export const aggregationTranslations = new Map<AggregationType, string>(
@@ -88,7 +116,7 @@ export const aggregationTranslations = new Map<AggregationType, string>(
 );
 
 export interface Aggregation {
-  interval?: number;
+  interval?: Interval;
   type: AggregationType;
   limit: number;
 }
@@ -110,23 +138,6 @@ export interface Timewindow {
   fixedTimewindow?: FixedWindow;
 }
 
-export interface SubscriptionAggregation extends Aggregation {
-  interval?: number;
-  timeWindow?: number;
-  stateData?: boolean;
-}
-
-export interface SubscriptionTimewindow {
-  startTs?: number;
-  quickInterval?: QuickTimeInterval;
-  timezone?: string;
-  tsOffset?: number;
-  realtimeWindowMs?: number;
-  fixedWindow?: FixedWindow;
-  aggregation?: SubscriptionAggregation;
-  timeForComparison?: ComparisonDuration;
-}
-
 export enum QuickTimeInterval {
   YESTERDAY = 'YESTERDAY',
   DAY_BEFORE_YESTERDAY = 'DAY_BEFORE_YESTERDAY',
@@ -181,6 +192,13 @@ export const QuickTimeIntervalTranslationMap = new Map<QuickTimeInterval, string
   [QuickTimeInterval.CURRENT_YEAR_SO_FAR, 'timeinterval.predefined.current-year-so-far']
 ]);
 
+export const IntervalTypeValuesMap = new Map<IntervalType, number>([
+  [IntervalType.WEEK, WEEK],
+  [IntervalType.WEEK_ISO, WEEK],
+  [IntervalType.MONTH, AVG_MONTH],
+  [IntervalType.QUARTER, AVG_QUARTER]
+]);
+
 export const forAllTimeInterval = (): Timewindow => ({
   selectedTab: TimewindowType.HISTORY,
   history: {
@@ -224,7 +242,7 @@ export const defaultTimewindow = (timeService: TimeService): Timewindow => {
       quickInterval: QuickTimeInterval.CURRENT_DAY
     },
     aggregation: {
-      type: AggregationType.AVG,
+      type: AggregationType.NONE,
       limit: Math.floor(timeService.getMaxDatapointsLimit() / 2)
     }
   };
@@ -316,71 +334,6 @@ export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalO
   return model;
 };
 
-export const toHistoryTimewindow = (timewindow: Timewindow, startTimeMs: number, endTimeMs: number,
-                                    interval: number, timeService: TimeService): Timewindow => {
-  if (timewindow.history) {
-    interval = isDefined(interval) ? interval : timewindow.history.interval;
-  } else if (timewindow.realtime) {
-    interval = timewindow.realtime.interval;
-  }  else {
-    interval = 0;
-  }
-  let aggType: AggregationType;
-  let limit: number;
-  if (timewindow.aggregation) {
-    aggType = timewindow.aggregation.type || AggregationType.AVG;
-    limit = timewindow.aggregation.limit || timeService.getMaxDatapointsLimit();
-  } else {
-    aggType = AggregationType.AVG;
-    limit = timeService.getMaxDatapointsLimit();
-  }
-  return {
-    hideInterval: timewindow.hideInterval || false,
-    hideLastInterval: timewindow.hideLastInterval || false,
-    hideQuickInterval: timewindow.hideQuickInterval || false,
-    hideAggregation: timewindow.hideAggregation || false,
-    hideAggInterval: timewindow.hideAggInterval || false,
-    hideTimezone: timewindow.hideTimezone || false,
-    selectedTab: TimewindowType.HISTORY,
-    history: {
-      historyType: HistoryWindowType.FIXED,
-      fixedTimewindow: {
-        startTimeMs,
-        endTimeMs
-      },
-      interval: timeService.boundIntervalToTimewindow(endTimeMs - startTimeMs, interval, AggregationType.AVG)
-    },
-    aggregation: {
-      type: aggType,
-      limit
-    },
-    timezone: timewindow.timezone
-  };
-};
-
-export const timewindowTypeChanged = (newTimewindow: Timewindow, oldTimewindow: Timewindow): boolean => {
-  if (!newTimewindow || !oldTimewindow) {
-    return false;
-  }
-  const newType = getTimewindowType(newTimewindow);
-  const oldType = getTimewindowType(oldTimewindow);
-  return newType !== oldType;
-};
-
-export const getTimezone = (tz: string): moment_.Moment => moment.tz(tz);
-
-export const calculateTsOffset = (timezone?: string): number => {
-  if (timezone) {
-    const tz = getTimezone(timezone);
-    const localOffset = moment().utcOffset();
-    return (tz.utcOffset() - localOffset) * 60 * 1000;
-  } else {
-    return 0;
-  }
-};
-
-export const isHistoryTypeTimewindow = (timewindow: Timewindow): boolean => getTimewindowType(timewindow) === TimewindowType.HISTORY;
-
 export const getCurrentTime = (tz?: string): moment_.Moment => {
   if (tz) {
     return moment().tz(tz);
@@ -389,42 +342,6 @@ export const getCurrentTime = (tz?: string): moment_.Moment => {
   }
 };
 
-const getSubscriptionRealtimeWindowFromTimeInterval = (interval: QuickTimeInterval, tz?: string): number => {
-  let currentDate;
-  switch (interval) {
-    case QuickTimeInterval.CURRENT_HOUR:
-      return HOUR;
-    case QuickTimeInterval.CURRENT_DAY:
-    case QuickTimeInterval.CURRENT_DAY_SO_FAR:
-      return DAY;
-    case QuickTimeInterval.CURRENT_WEEK:
-    case QuickTimeInterval.CURRENT_WEEK_ISO:
-    case QuickTimeInterval.CURRENT_WEEK_SO_FAR:
-    case QuickTimeInterval.CURRENT_WEEK_ISO_SO_FAR:
-      return WEEK;
-    case QuickTimeInterval.CURRENT_MONTH:
-    case QuickTimeInterval.CURRENT_MONTH_SO_FAR:
-      currentDate = getCurrentTime(tz);
-      return currentDate.endOf('month').diff(currentDate.clone().startOf('month'));
-    case QuickTimeInterval.CURRENT_QUARTER:
-    case QuickTimeInterval.CURRENT_QUARTER_SO_FAR:
-      currentDate = getCurrentTime(tz);
-      return currentDate.endOf('quarter').diff(currentDate.clone().startOf('quarter'));
-    case QuickTimeInterval.CURRENT_HALF_YEAR:
-    case QuickTimeInterval.CURRENT_HALF_YEAR_SO_FAR:
-      currentDate = getCurrentTime(tz);
-      if (currentDate.get('quarter') < 3) {
-        return currentDate.clone().set('quarter', 2).endOf('quarter').diff(currentDate.startOf('year'));
-      } else {
-        return currentDate.endOf('year').diff(currentDate.clone().set('quarter', 3).startOf('quarter'));
-      }
-    case QuickTimeInterval.CURRENT_YEAR:
-    case QuickTimeInterval.CURRENT_YEAR_SO_FAR:
-      currentDate = getCurrentTime(tz);
-      return currentDate.endOf('year').diff(currentDate.clone().startOf('year'));
-  }
-};
-
 export const calculateIntervalStartTime = (interval: QuickTimeInterval, currentDate: moment_.Moment): moment_.Moment => {
   switch (interval) {
     case QuickTimeInterval.YESTERDAY:
@@ -534,108 +451,6 @@ export const calculateIntervalStartEndTime = (interval: QuickTimeInterval, tz?:
   return startEndTs;
 };
 
-export const createSubscriptionTimewindow = (timewindow: Timewindow, stDiff: number, stateData: boolean,
-                                             timeService: TimeService): SubscriptionTimewindow => {
-  const subscriptionTimewindow: SubscriptionTimewindow = {
-    fixedWindow: null,
-    realtimeWindowMs: null,
-    aggregation: {
-      interval: SECOND,
-      limit: timeService.getMaxDatapointsLimit(),
-      type: AggregationType.AVG
-    },
-    timezone: timewindow.timezone,
-    tsOffset: calculateTsOffset(timewindow.timezone)
-  };
-  let aggTimewindow;
-  if (stateData) {
-    subscriptionTimewindow.aggregation.type = AggregationType.NONE;
-    subscriptionTimewindow.aggregation.stateData = true;
-  }
-  if (isDefined(timewindow.aggregation) && !stateData) {
-    subscriptionTimewindow.aggregation = {
-      type: timewindow.aggregation.type || AggregationType.AVG,
-      limit: timewindow.aggregation.limit || timeService.getMaxDatapointsLimit()
-    };
-  }
-  const selectedTab = getTimewindowType(timewindow);
-  if (selectedTab === TimewindowType.REALTIME) {
-    let realtimeType = timewindow.realtime.realtimeType;
-    if (isUndefined(realtimeType)) {
-      if (isDefined(timewindow.realtime.quickInterval)) {
-        realtimeType = RealtimeWindowType.INTERVAL;
-      } else {
-        realtimeType = RealtimeWindowType.LAST_INTERVAL;
-      }
-    }
-    if (realtimeType === RealtimeWindowType.INTERVAL) {
-      subscriptionTimewindow.realtimeWindowMs =
-        getSubscriptionRealtimeWindowFromTimeInterval(timewindow.realtime.quickInterval, timewindow.timezone);
-      subscriptionTimewindow.quickInterval = timewindow.realtime.quickInterval;
-      const currentDate = getCurrentTime(timewindow.timezone);
-      subscriptionTimewindow.startTs = calculateIntervalStartTime(timewindow.realtime.quickInterval, currentDate).valueOf();
-    } else {
-      subscriptionTimewindow.realtimeWindowMs = timewindow.realtime.timewindowMs;
-      const currentDate = getCurrentTime(timewindow.timezone);
-      subscriptionTimewindow.startTs = currentDate.valueOf() + stDiff - subscriptionTimewindow.realtimeWindowMs;
-    }
-    subscriptionTimewindow.aggregation.interval =
-      timeService.boundIntervalToTimewindow(subscriptionTimewindow.realtimeWindowMs, timewindow.realtime.interval,
-        subscriptionTimewindow.aggregation.type);
-    aggTimewindow = subscriptionTimewindow.realtimeWindowMs;
-    if (realtimeType !== RealtimeWindowType.INTERVAL) {
-      const startDiff = subscriptionTimewindow.startTs % subscriptionTimewindow.aggregation.interval;
-      if (startDiff) {
-        subscriptionTimewindow.startTs -= startDiff;
-        aggTimewindow += subscriptionTimewindow.aggregation.interval;
-      }
-    }
-  } else {
-    let historyType = timewindow.history.historyType;
-    if (isUndefined(historyType)) {
-      if (isDefined(timewindow.history.timewindowMs)) {
-        historyType = HistoryWindowType.LAST_INTERVAL;
-      } else if (isDefined(timewindow.history.quickInterval)) {
-        historyType = HistoryWindowType.INTERVAL;
-      } else {
-        historyType = HistoryWindowType.FIXED;
-      }
-    }
-    if (historyType === HistoryWindowType.LAST_INTERVAL) {
-      const currentDate = getCurrentTime(timewindow.timezone);
-      const currentTime = currentDate.valueOf();
-      subscriptionTimewindow.fixedWindow = {
-        startTimeMs: currentTime - timewindow.history.timewindowMs,
-        endTimeMs: currentTime
-      };
-      aggTimewindow = timewindow.history.timewindowMs;
-    } else if (historyType === HistoryWindowType.INTERVAL) {
-      const startEndTime = calculateIntervalStartEndTime(timewindow.history.quickInterval, timewindow.timezone);
-      subscriptionTimewindow.fixedWindow = {
-        startTimeMs: startEndTime[0],
-        endTimeMs: startEndTime[1]
-      };
-      aggTimewindow = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs;
-      subscriptionTimewindow.quickInterval = timewindow.history.quickInterval;
-    } else {
-      subscriptionTimewindow.fixedWindow = {
-        startTimeMs: timewindow.history.fixedTimewindow.startTimeMs - subscriptionTimewindow.tsOffset,
-        endTimeMs: timewindow.history.fixedTimewindow.endTimeMs - subscriptionTimewindow.tsOffset
-      };
-      aggTimewindow = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs;
-    }
-    subscriptionTimewindow.startTs = subscriptionTimewindow.fixedWindow.startTimeMs;
-    subscriptionTimewindow.aggregation.interval =
-      timeService.boundIntervalToTimewindow(aggTimewindow, timewindow.history.interval, subscriptionTimewindow.aggregation.type);
-  }
-  const aggregation = subscriptionTimewindow.aggregation;
-  aggregation.timeWindow = aggTimewindow;
-  if (aggregation.type !== AggregationType.NONE) {
-    aggregation.limit = Math.ceil(aggTimewindow / subscriptionTimewindow.aggregation.interval);
-  }
-  return subscriptionTimewindow;
-};
-
 export const quickTimeIntervalPeriod = (interval: QuickTimeInterval): number => {
   switch (interval) {
     case QuickTimeInterval.CURRENT_HOUR:
@@ -672,132 +487,6 @@ export const quickTimeIntervalPeriod = (interval: QuickTimeInterval): number =>
   }
 };
 
-export const calculateIntervalComparisonStartTime = (interval: QuickTimeInterval,
-                                                     startDate: moment_.Moment): moment_.Moment => {
-  switch (interval) {
-    case QuickTimeInterval.YESTERDAY:
-    case QuickTimeInterval.DAY_BEFORE_YESTERDAY:
-    case QuickTimeInterval.CURRENT_DAY:
-    case QuickTimeInterval.CURRENT_DAY_SO_FAR:
-      startDate.subtract(1, 'days');
-      return startDate.startOf('day');
-    case QuickTimeInterval.THIS_DAY_LAST_WEEK:
-      startDate.subtract(1, 'weeks');
-      return startDate.startOf('day');
-    case QuickTimeInterval.PREVIOUS_WEEK:
-    case QuickTimeInterval.CURRENT_WEEK:
-    case QuickTimeInterval.CURRENT_WEEK_SO_FAR:
-      startDate.subtract(1, 'weeks');
-      return startDate.startOf('week');
-    case QuickTimeInterval.PREVIOUS_WEEK_ISO:
-    case QuickTimeInterval.CURRENT_WEEK_ISO:
-    case QuickTimeInterval.CURRENT_WEEK_ISO_SO_FAR:
-      startDate.subtract(1, 'weeks');
-      return startDate.startOf('isoWeek');
-    case QuickTimeInterval.PREVIOUS_MONTH:
-    case QuickTimeInterval.CURRENT_MONTH:
-    case QuickTimeInterval.CURRENT_MONTH_SO_FAR:
-      startDate.subtract(1, 'months');
-      return startDate.startOf('month');
-    case QuickTimeInterval.PREVIOUS_QUARTER:
-    case QuickTimeInterval.CURRENT_QUARTER:
-    case QuickTimeInterval.CURRENT_QUARTER_SO_FAR:
-      startDate.subtract(1, 'quarters');
-      return startDate.startOf('quarter');
-    case QuickTimeInterval.PREVIOUS_HALF_YEAR:
-    case QuickTimeInterval.CURRENT_HALF_YEAR:
-    case QuickTimeInterval.CURRENT_HALF_YEAR_SO_FAR:
-      startDate.subtract(2, 'quarters');
-      if (startDate.get('quarter') < 3) {
-        return startDate.startOf('year');
-      } else {
-        return startDate.clone().set('quarter', 3).startOf('quarter');
-      }
-    case QuickTimeInterval.PREVIOUS_YEAR:
-    case QuickTimeInterval.CURRENT_YEAR:
-    case QuickTimeInterval.CURRENT_YEAR_SO_FAR:
-      startDate.subtract(1, 'years');
-      return startDate.startOf('year');
-    case QuickTimeInterval.CURRENT_HOUR:
-      startDate.subtract(1, 'hour');
-      return startDate.startOf('hour');
-  }
-};
-
-export const calculateIntervalComparisonEndTime = (interval: QuickTimeInterval,
-                                                   comparisonStartDate: moment_.Moment,
-                                                   endDate: moment_.Moment): number => {
-  switch (interval) {
-    case QuickTimeInterval.CURRENT_DAY_SO_FAR:
-      return endDate.subtract(1, 'days').valueOf();
-    case QuickTimeInterval.CURRENT_WEEK_SO_FAR:
-    case QuickTimeInterval.CURRENT_WEEK_ISO_SO_FAR:
-      return endDate.subtract(1, 'week').valueOf();
-    case QuickTimeInterval.CURRENT_MONTH_SO_FAR:
-      return endDate.subtract(1, 'month').valueOf();
-    case QuickTimeInterval.CURRENT_QUARTER_SO_FAR:
-      return endDate.subtract(1, 'quarter').valueOf();
-    case QuickTimeInterval.CURRENT_HALF_YEAR_SO_FAR:
-      return endDate.subtract(2, 'quarters').valueOf();
-    case QuickTimeInterval.CURRENT_YEAR_SO_FAR:
-      return endDate.subtract(1, 'year').valueOf();
-    default:
-      return calculateIntervalEndTime(interval, comparisonStartDate);
-  }
-};
-
-export const createTimewindowForComparison = (subscriptionTimewindow: SubscriptionTimewindow,
-                                              timeUnit: ComparisonDuration, customIntervalValue: number): SubscriptionTimewindow => {
-  const timewindowForComparison: SubscriptionTimewindow = {
-    fixedWindow: null,
-    realtimeWindowMs: null,
-    aggregation: subscriptionTimewindow.aggregation,
-    tsOffset: subscriptionTimewindow.tsOffset
-  };
-
-  if (subscriptionTimewindow.fixedWindow) {
-    let startTimeMs;
-    let endTimeMs;
-    if (timeUnit === 'previousInterval') {
-      if (subscriptionTimewindow.quickInterval) {
-        const startDate = moment(subscriptionTimewindow.fixedWindow.startTimeMs);
-        const endDate = moment(subscriptionTimewindow.fixedWindow.endTimeMs);
-        if (subscriptionTimewindow.timezone) {
-          startDate.tz(subscriptionTimewindow.timezone);
-          endDate.tz(subscriptionTimewindow.timezone);
-        }
-        const comparisonStartDate = calculateIntervalComparisonStartTime(subscriptionTimewindow.quickInterval, startDate);
-        startTimeMs = comparisonStartDate.valueOf();
-        endTimeMs = calculateIntervalComparisonEndTime(subscriptionTimewindow.quickInterval, comparisonStartDate, endDate);
-      } else {
-        const timeInterval = subscriptionTimewindow.fixedWindow.endTimeMs - subscriptionTimewindow.fixedWindow.startTimeMs;
-        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();
-      startTimeMs = endTimeMs - timeInterval;
-    }
-    timewindowForComparison.startTs = startTimeMs;
-    timewindowForComparison.fixedWindow = {
-      startTimeMs: timewindowForComparison.startTs,
-      endTimeMs
-    };
-  }
-
-  return timewindowForComparison;
-};
-
 export const cloneSelectedTimewindow = (timewindow: Timewindow): Timewindow => {
   const cloned: Timewindow = {};
   cloned.hideInterval = timewindow.hideInterval || false;
@@ -822,7 +511,7 @@ export const cloneSelectedTimewindow = (timewindow: Timewindow): Timewindow => {
 export interface TimeInterval {
   name: string;
   translateParams: {[key: string]: any};
-  value: number;
+  value: Interval;
 }
 
 export const defaultTimeIntervals = new Array<TimeInterval>(
@@ -916,36 +605,33 @@ export const defaultTimeIntervals = new Array<TimeInterval>(
     translateParams: {days: 7},
     value: 7 * DAY
   },
+  {
+    name: 'timeinterval.type.week',
+    translateParams: {},
+    value: IntervalType.WEEK
+  },
+  {
+    name: 'timeinterval.type.week-iso',
+    translateParams: {},
+    value: IntervalType.WEEK_ISO
+  },
   {
     name: 'timeinterval.days-interval',
     translateParams: {days: 30},
     value: 30 * DAY
+  },
+  {
+    name: 'timeinterval.type.month',
+    translateParams: {},
+    value: IntervalType.MONTH
+  },
+  {
+    name: 'timeinterval.type.quarter',
+    translateParams: {},
+    value: IntervalType.QUARTER
   }
 );
 
-export enum TimeUnit {
-  SECONDS = 'SECONDS',
-  MINUTES = 'MINUTES',
-  HOURS = 'HOURS',
-  DAYS = 'DAYS'
-}
-
-export enum TimeUnitMilli {
-  MILLISECONDS = 'MILLISECONDS'
-}
-
-export type FullTimeUnit = TimeUnit | TimeUnitMilli;
-
-export const timeUnitTranslationMap = new Map<FullTimeUnit, string>(
-  [
-    [TimeUnitMilli.MILLISECONDS, 'timeunit.milliseconds'],
-    [TimeUnit.SECONDS, 'timeunit.seconds'],
-    [TimeUnit.MINUTES, 'timeunit.minutes'],
-    [TimeUnit.HOURS, 'timeunit.hours'],
-    [TimeUnit.DAYS, 'timeunit.days']
-  ]
-);
-
 export interface TimezoneInfo {
   id: string;
   name: string;
@@ -1006,9 +692,6 @@ export const getTime = (ts: number, tz?: string): moment_.Moment => {
   }
 };
 
-export const getCurrentTimeForComparison = (timeForComparison: moment_.unitOfTime.DurationConstructor, tz?: string): moment_.Moment =>
-  getCurrentTime(tz).subtract(1, timeForComparison);
-
 export const calculateFixedWindowTimeMs = (timewindow: Timewindow): FixedWindow => {
   const currentTime = Date.now();
   let startTimeMs: number = 0;
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 99ec2ee3b..eb53125c7 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -194,6 +194,18 @@
       "port-required": "Port is required."
     }
   },
+  "aggregation": {
+    "aggregation": "Aggregation",
+    "function": "Data aggregation function",
+    "limit": "Max values",
+    "group-interval": "Grouping interval",
+    "min": "Min",
+    "max": "Max",
+    "avg": "Average",
+    "sum": "Sum",
+    "count": "Count",
+    "none": "None"
+  },
   "confirm-on-exit": {
     "message": "You have unsaved changes. Are you sure you want to leave this page?",
     "html-message": "You have unsaved changes.<br/>Are you sure you want to leave this page?",
@@ -737,6 +749,12 @@
       "current-half-year-so-far": "Current half year so far",
       "current-year": "Current year",
       "current-year-so-far": "Current year so far"
+    },
+    "type": {
+      "week": "Week (Sun - Sat)",
+      "week-iso": "Week (Mon - Sun)",
+      "month": "Month",
+      "quarter": "Quarter"
     }
   },
   "timeunit": {