@c8y/ngx-components 1022.34.0 → 1022.35.1

package/fesm2022/c8y-ngx-components-echart.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, EventEmitter, inject, ViewChild, Output } from '@angular/core';
+import { Injectable, Input, Component, EventEmitter, inject, Output, ViewChild } from '@angular/core';
+import { gettext } from '@c8y/ngx-components/gettext';
 import { from, merge, interval, BehaviorSubject, of, lastValueFrom, defer, forkJoin } from 'rxjs';
 import { mergeMap, map, tap, throttleTime, buffer, switchMap } from 'rxjs/operators';
 import * as i1 from '@c8y/ngx-components';
-import { gettext, CommonModule, WidgetTimeContextDateRangeService, DismissAlertStrategy, DynamicComponentAlert, CoreModule, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService } from '@c8y/ngx-components';
+import { CommonModule, FormsModule, C8yTranslatePipe, IconDirective, WidgetTimeContextDateRangeService, DismissAlertStrategy, DynamicComponentAlert, CoreModule, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService } from '@c8y/ngx-components';
 import * as i1$1 from '@c8y/client';
 import { AlarmStatus, MeasurementService, aggregationType } from '@c8y/client';
 import * as i6 from '@angular/router';
@@ -12,11 +13,74 @@ import { AlarmsModule, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe } from
 import { INTERVALS } from '@c8y/ngx-components/interval-picker';
 import * as i5 from '@ngx-translate/core';
 import * as i2 from '@angular/common';
-import { CommonModule as CommonModule$1 } from '@angular/common';
-import * as i3 from 'ngx-echarts';
+import { NgIf, NgForOf, CommonModule as CommonModule$1 } from '@angular/common';
+import * as i3$1 from 'ngx-echarts';
 import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import * as i1$2 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
+import * as i2$1 from 'ngx-bootstrap/dropdown';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import * as i3 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+
+var DATE_SELECTION_EXTENDED;
+(function (DATE_SELECTION_EXTENDED) {
+    DATE_SELECTION_EXTENDED["CONFIG"] = "config";
+    DATE_SELECTION_EXTENDED["DASHBOARD_CONTEXT"] = "dashboard_context";
+})(DATE_SELECTION_EXTENDED || (DATE_SELECTION_EXTENDED = {}));
+const REALTIME_TEXTS = {
+    ACTIVE: gettext('Realtime active'),
+    INACTIVE: gettext('Realtime inactive')
+};
+const PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH = {
+    EVENTS: {
+        DATA_EXPLORER_AND_GRAPH: 'data-explorer-and-graph'
+    },
+    COMPONENTS: {
+        DATA_EXPLORER_DETAILS: 'data-explorer-details'
+    },
+    ACTIONS: {
+        DATA_EXPLORER_CONFIG_INIT: 'data-explorer-config-init',
+        DATA_EXPLORER_CONFIG_CHANGE: 'data-explorer-config-change',
+        DATA_GRAPH_WIDGET_CONFIG: 'data-graph-widget-config'
+    }
+};
+const SEVERITY_LABELS = {
+    CRITICAL: gettext('Critical`alarm`'),
+    MAJOR: gettext('Major`alarm`'),
+    MINOR: gettext('Minor`alarm`'),
+    WARNING: gettext('Warning`alarm`')
+};
+
+var CHART_VIEW_CONTEXT;
+(function (CHART_VIEW_CONTEXT) {
+    CHART_VIEW_CONTEXT["WIDGET_VIEW"] = "widget_view";
+    CHART_VIEW_CONTEXT["WIDGET_CONFIG"] = "widget_config";
+    CHART_VIEW_CONTEXT["DATAPOINT_EXPLORER"] = "datapoint_explorer";
+})(CHART_VIEW_CONTEXT || (CHART_VIEW_CONTEXT = {}));
+
+var ICONS;
+(function (ICONS) {
+    ICONS["ALARM"] = "path://M18.375 15.8462L20.4423 17.9135V18.9231H4V17.9135L6.06731 15.8462V10.75C6.06731 9.14744 6.47596 7.75321 7.29327 6.56731C8.11058 5.38141 9.24038 4.61218 10.6827 4.25962V3.53846C10.6827 3.12179 10.8269 2.76122 11.1154 2.45673C11.4038 2.15224 11.7724 2 12.2212 2C12.6699 2 13.0385 2.15224 13.3269 2.45673C13.6154 2.76122 13.7596 3.12179 13.7596 3.53846V4.25962C15.2019 4.61218 16.3317 5.38141 17.149 6.56731C17.9663 7.75321 18.375 9.14744 18.375 10.75V15.8462ZM12.2212 22C11.6442 22 11.1554 21.8077 10.7548 21.4231C10.3542 21.0385 10.1538 20.5577 10.1538 19.9808H14.2885C14.2885 20.5256 14.0801 20.9984 13.6635 21.399C13.2468 21.7997 12.766 22 12.2212 22Z";
+    ICONS["EVENT"] = "path://M97.3013 63L128.939 95.1315C79.296 134.335 47.7653 191.526 47.7653 255.276C47.7653 319.027 79.296 376.218 128.917 415.421L97.28 447.574C37.76 400.552 0 331.93 0 255.276C0 178.622 37.76 110.001 97.3013 63ZM414.72 63C474.24 110.001 512 178.622 512 255.276C512 331.93 474.24 400.552 414.72 447.574L383.083 415.421C432.704 376.218 464.235 319.027 464.235 255.276C464.235 191.526 432.704 134.335 383.083 95.1315L414.72 63ZM160.405 127.092L192 159.181C162.24 182.681 143.317 217.013 143.317 255.276C143.317 293.539 162.219 327.871 192 351.372L160.405 383.461C120.725 352.119 95.552 306.379 95.552 255.276C95.552 204.174 120.725 158.433 160.405 127.092ZM351.595 127.092C391.296 158.433 416.448 204.174 416.448 255.276C416.448 306.379 391.275 352.119 351.595 383.461L320 351.372C349.781 327.871 368.683 293.539 368.683 255.276C368.683 217.013 349.781 182.703 320 159.181L351.595 127.092ZM256 192.722C291.505 192.722 320.287 221.504 320.287 257.009C320.287 292.514 291.505 321.296 256 321.296C220.495 321.296 191.713 292.514 191.713 257.009C191.713 221.504 220.495 192.722 256 192.722Z";
+    ICONS["ACKNOWLEDGED"] = "path://M10.4795 2H13.4807V4.18054C14.1215 4.35248 14.7155 4.61821 15.2626 4.97773C15.8097 5.35287 16.2864 5.79836 16.6928 6.31419C17.0993 6.81438 17.4119 7.3771 17.6307 8.00234C17.8652 8.62759 17.9824 9.29191 17.9824 9.99531V13.7702L16.9742 12.762V12.7855L9.72919 5.54045C9.74482 5.54045 9.75264 5.54045 9.75264 5.54045L9.00234 4.79015C9.22118 4.64947 9.45565 4.53224 9.70574 4.43845C9.95584 4.34467 10.2138 4.25869 10.4795 4.18054V2ZM4.4068 3.03165L21.4291 20.0305L19.9988 21.4373L17.5604 18.9988H13.6917C13.7855 19.1551 13.8558 19.3193 13.9027 19.4912C13.9496 19.6475 13.973 19.8195 13.973 20.007C13.973 20.5541 13.7776 21.0231 13.3869 21.4138C12.9961 21.8046 12.5272 22 11.9801 22C11.4174 22 10.9406 21.8046 10.5498 21.4138C10.159 21.0231 9.96366 20.5541 9.96366 20.007C9.96366 19.8195 9.9871 19.6475 10.034 19.4912C10.0809 19.3193 10.1512 19.1551 10.245 18.9988H3.96131V17.9906L5.97773 15.9977V9.99531C5.97773 9.60453 6.00899 9.22939 6.07151 8.86987C6.14967 8.51036 6.25127 8.15866 6.37632 7.81477L3 4.43845L4.4068 3.03165Z";
+    ICONS["CLEARED"] = "path://M9.09375 19.5977C9.09375 20.2617 9.32812 20.8281 9.79688 21.2969C10.2786 21.7656 10.8516 22 11.5156 22C12.1927 22 12.7656 21.7656 13.2344 21.2969C13.7161 20.8281 13.957 20.2617 13.957 19.5977H9.09375ZM16.8672 10.418C16.3203 10.5091 15.7995 10.6784 15.3047 10.9258C14.8229 11.1732 14.3867 11.4922 13.9961 11.8828C13.5013 12.3776 13.1172 12.944 12.8438 13.582C12.5833 14.2201 12.4531 14.8841 12.4531 15.5742C12.4531 16.0299 12.5052 16.4727 12.6094 16.9023C12.7266 17.332 12.8958 17.7422 13.1172 18.1328H3V16.375C4.04167 16.0495 4.74479 15.3919 5.10938 14.4023C5.47396 13.4128 5.76693 12.3385 5.98828 11.1797C6.20964 10.0208 6.48958 8.88802 6.82812 7.78125C7.16667 6.6875 7.83724 5.85417 8.83984 5.28125C9.11328 5.125 9.32812 4.91667 9.48438 4.65625C9.64062 4.38281 9.71875 4.08984 9.71875 3.77734C9.71875 3.28255 9.88802 2.86589 10.2266 2.52734C10.5781 2.17578 11.0013 2 11.4961 2C11.9909 2 12.4076 2.17578 12.7461 2.52734C13.0977 2.86589 13.2734 3.28255 13.2734 3.77734C13.2734 4.08984 13.3516 4.38281 13.5078 4.65625C13.6771 4.91667 13.8984 5.125 14.1719 5.28125C15.0443 5.78906 15.6562 6.51172 16.0078 7.44922C16.3724 8.38672 16.6589 9.3763 16.8672 10.418ZM11.4961 4.48047C11.6914 4.48047 11.8607 4.41536 12.0039 4.28516C12.1471 4.14193 12.2188 3.97266 12.2188 3.77734C12.2188 3.56901 12.1471 3.39974 12.0039 3.26953C11.8607 3.1263 11.6914 3.05469 11.4961 3.05469C11.3008 3.05469 11.1315 3.1263 10.9883 3.26953C10.8451 3.39974 10.7734 3.56901 10.7734 3.77734C10.7734 3.97266 10.8451 4.14193 10.9883 4.28516C11.1315 4.41536 11.3008 4.48047 11.4961 4.48047ZM16.9062 17.6055L19.9922 14.5195L19.2305 13.7773L16.9062 16.1016L15.8906 15.0859L15.1289 15.8477L16.9062 17.6055ZM17.5312 11.8633C18.5599 11.8633 19.4388 12.2279 20.168 12.957C20.8971 13.6862 21.2617 14.5651 21.2617 15.5938C21.2617 16.6224 20.8971 17.5013 20.168 18.2305C19.4388 18.9596 18.5599 19.3242 17.5312 19.3242C16.5026 19.3242 15.6237 18.9596 14.8945 18.2305C14.1654 17.5013 13.8008 16.6224 13.8008 15.5938C13.8008 14.5651 14.1654 13.6862 14.8945 12.957C15.6237 12.2279 16.5026 11.8633 17.5312 11.8633Z";
+    ICONS["MINOR"] = "path://M21.9787 11.9894L11.9894 22L2 11.9894L11.9894 2L21.9787 11.9894ZM12.9052 16.5474V14.7157H11.0735V16.5474H12.9052ZM12.9052 12.9052V7.45261H11.0735V12.9052H12.9052Z";
+    ICONS["MAJOR"] = "path://M12.8936 13.8936V10.234H11.1064V13.8936H12.8936ZM12.8936 17.5106V15.6809H11.1064V17.5106H12.8936ZM2 20.234L12 3L22 20.234H2Z";
+    ICONS["CRITICAL"] = "path://M12.0117 22C10.6362 22 9.3388 21.7343 8.11958 21.2028C6.90035 20.687 5.83744 19.9758 4.93083 19.0692C4.02423 18.1626 3.31301 17.0996 2.79719 15.8804C2.26573 14.6768 2 13.3794 2 11.9883C2 10.6127 2.26573 9.31536 2.79719 8.09613C3.31301 6.89254 4.02423 5.83744 4.93083 4.93083C5.83744 4.02423 6.90035 3.3052 8.11958 2.77374C9.3388 2.25791 10.6362 2 12.0117 2C13.3873 2 14.6846 2.25791 15.9039 2.77374C17.1231 3.3052 18.186 4.02423 19.0926 4.93083C19.9992 5.83744 20.7104 6.89254 21.2263 8.09613C21.7577 9.31536 22.0234 10.6127 22.0234 11.9883C22.0234 13.3794 21.7577 14.6768 21.2263 15.8804C20.7104 17.0996 19.9992 18.1626 19.0926 19.0692C18.186 19.9758 17.1231 20.687 15.9039 21.2028C14.6846 21.7343 13.3873 22 12.0117 22ZM13.0199 6.99414H11.0035V12.9965H13.0199V6.99414ZM13.0199 14.9894H11.0035V17.0059H13.0199V14.9894Z";
+    ICONS["WARNING"] = "path://M12 2C13.3772 2 14.6761 2.25822 15.8967 2.77465C17.1174 3.29108 18.1815 4.00313 19.0892 4.9108C19.9969 5.81847 20.7089 6.88263 21.2254 8.10329C21.7418 9.32394 22 10.6228 22 12C22 13.3772 21.7418 14.6761 21.2254 15.8967C20.7089 17.1174 19.9969 18.1815 19.0892 19.0892C18.1815 19.9969 17.1174 20.7089 15.8967 21.2254C14.6761 21.7418 13.3772 22 12 22C10.6228 22 9.32394 21.7418 8.10329 21.2254C6.88263 20.7089 5.81847 19.9969 4.9108 19.0892C4.00313 18.1815 3.29108 17.1174 2.77465 15.8967C2.25822 14.6761 2 13.3772 2 12C2 10.6228 2.25822 9.32394 2.77465 8.10329C3.29108 6.88263 4.00313 5.81847 4.9108 4.9108C5.81847 4.00313 6.88263 3.29108 8.10329 2.77465C9.32394 2.25822 10.6228 2 12 2Z";
+})(ICONS || (ICONS = {}));
+const ICONS_MAP = {
+    ALARM: ICONS.ALARM,
+    EVENT: ICONS.EVENT,
+    ACKNOWLEDGED: ICONS.ACKNOWLEDGED,
+    CLEARED: ICONS.CLEARED,
+    MINOR: ICONS.MINOR,
+    MAJOR: ICONS.MAJOR,
+    CRITICAL: ICONS.CRITICAL,
+    WARNING: ICONS.WARNING
+};
 
 class YAxisService {
     constructor(appStateService) {
@@ -298,28 +362,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Injectable
         }] });
 
-var ICONS;
-(function (ICONS) {
-    ICONS["ALARM"] = "path://M18.375 15.8462L20.4423 17.9135V18.9231H4V17.9135L6.06731 15.8462V10.75C6.06731 9.14744 6.47596 7.75321 7.29327 6.56731C8.11058 5.38141 9.24038 4.61218 10.6827 4.25962V3.53846C10.6827 3.12179 10.8269 2.76122 11.1154 2.45673C11.4038 2.15224 11.7724 2 12.2212 2C12.6699 2 13.0385 2.15224 13.3269 2.45673C13.6154 2.76122 13.7596 3.12179 13.7596 3.53846V4.25962C15.2019 4.61218 16.3317 5.38141 17.149 6.56731C17.9663 7.75321 18.375 9.14744 18.375 10.75V15.8462ZM12.2212 22C11.6442 22 11.1554 21.8077 10.7548 21.4231C10.3542 21.0385 10.1538 20.5577 10.1538 19.9808H14.2885C14.2885 20.5256 14.0801 20.9984 13.6635 21.399C13.2468 21.7997 12.766 22 12.2212 22Z";
-    ICONS["EVENT"] = "path://M97.3013 63L128.939 95.1315C79.296 134.335 47.7653 191.526 47.7653 255.276C47.7653 319.027 79.296 376.218 128.917 415.421L97.28 447.574C37.76 400.552 0 331.93 0 255.276C0 178.622 37.76 110.001 97.3013 63ZM414.72 63C474.24 110.001 512 178.622 512 255.276C512 331.93 474.24 400.552 414.72 447.574L383.083 415.421C432.704 376.218 464.235 319.027 464.235 255.276C464.235 191.526 432.704 134.335 383.083 95.1315L414.72 63ZM160.405 127.092L192 159.181C162.24 182.681 143.317 217.013 143.317 255.276C143.317 293.539 162.219 327.871 192 351.372L160.405 383.461C120.725 352.119 95.552 306.379 95.552 255.276C95.552 204.174 120.725 158.433 160.405 127.092ZM351.595 127.092C391.296 158.433 416.448 204.174 416.448 255.276C416.448 306.379 391.275 352.119 351.595 383.461L320 351.372C349.781 327.871 368.683 293.539 368.683 255.276C368.683 217.013 349.781 182.703 320 159.181L351.595 127.092ZM256 192.722C291.505 192.722 320.287 221.504 320.287 257.009C320.287 292.514 291.505 321.296 256 321.296C220.495 321.296 191.713 292.514 191.713 257.009C191.713 221.504 220.495 192.722 256 192.722Z";
-    ICONS["ACKNOWLEDGED"] = "path://M10.4795 2H13.4807V4.18054C14.1215 4.35248 14.7155 4.61821 15.2626 4.97773C15.8097 5.35287 16.2864 5.79836 16.6928 6.31419C17.0993 6.81438 17.4119 7.3771 17.6307 8.00234C17.8652 8.62759 17.9824 9.29191 17.9824 9.99531V13.7702L16.9742 12.762V12.7855L9.72919 5.54045C9.74482 5.54045 9.75264 5.54045 9.75264 5.54045L9.00234 4.79015C9.22118 4.64947 9.45565 4.53224 9.70574 4.43845C9.95584 4.34467 10.2138 4.25869 10.4795 4.18054V2ZM4.4068 3.03165L21.4291 20.0305L19.9988 21.4373L17.5604 18.9988H13.6917C13.7855 19.1551 13.8558 19.3193 13.9027 19.4912C13.9496 19.6475 13.973 19.8195 13.973 20.007C13.973 20.5541 13.7776 21.0231 13.3869 21.4138C12.9961 21.8046 12.5272 22 11.9801 22C11.4174 22 10.9406 21.8046 10.5498 21.4138C10.159 21.0231 9.96366 20.5541 9.96366 20.007C9.96366 19.8195 9.9871 19.6475 10.034 19.4912C10.0809 19.3193 10.1512 19.1551 10.245 18.9988H3.96131V17.9906L5.97773 15.9977V9.99531C5.97773 9.60453 6.00899 9.22939 6.07151 8.86987C6.14967 8.51036 6.25127 8.15866 6.37632 7.81477L3 4.43845L4.4068 3.03165Z";
-    ICONS["CLEARED"] = "path://M9.09375 19.5977C9.09375 20.2617 9.32812 20.8281 9.79688 21.2969C10.2786 21.7656 10.8516 22 11.5156 22C12.1927 22 12.7656 21.7656 13.2344 21.2969C13.7161 20.8281 13.957 20.2617 13.957 19.5977H9.09375ZM16.8672 10.418C16.3203 10.5091 15.7995 10.6784 15.3047 10.9258C14.8229 11.1732 14.3867 11.4922 13.9961 11.8828C13.5013 12.3776 13.1172 12.944 12.8438 13.582C12.5833 14.2201 12.4531 14.8841 12.4531 15.5742C12.4531 16.0299 12.5052 16.4727 12.6094 16.9023C12.7266 17.332 12.8958 17.7422 13.1172 18.1328H3V16.375C4.04167 16.0495 4.74479 15.3919 5.10938 14.4023C5.47396 13.4128 5.76693 12.3385 5.98828 11.1797C6.20964 10.0208 6.48958 8.88802 6.82812 7.78125C7.16667 6.6875 7.83724 5.85417 8.83984 5.28125C9.11328 5.125 9.32812 4.91667 9.48438 4.65625C9.64062 4.38281 9.71875 4.08984 9.71875 3.77734C9.71875 3.28255 9.88802 2.86589 10.2266 2.52734C10.5781 2.17578 11.0013 2 11.4961 2C11.9909 2 12.4076 2.17578 12.7461 2.52734C13.0977 2.86589 13.2734 3.28255 13.2734 3.77734C13.2734 4.08984 13.3516 4.38281 13.5078 4.65625C13.6771 4.91667 13.8984 5.125 14.1719 5.28125C15.0443 5.78906 15.6562 6.51172 16.0078 7.44922C16.3724 8.38672 16.6589 9.3763 16.8672 10.418ZM11.4961 4.48047C11.6914 4.48047 11.8607 4.41536 12.0039 4.28516C12.1471 4.14193 12.2188 3.97266 12.2188 3.77734C12.2188 3.56901 12.1471 3.39974 12.0039 3.26953C11.8607 3.1263 11.6914 3.05469 11.4961 3.05469C11.3008 3.05469 11.1315 3.1263 10.9883 3.26953C10.8451 3.39974 10.7734 3.56901 10.7734 3.77734C10.7734 3.97266 10.8451 4.14193 10.9883 4.28516C11.1315 4.41536 11.3008 4.48047 11.4961 4.48047ZM16.9062 17.6055L19.9922 14.5195L19.2305 13.7773L16.9062 16.1016L15.8906 15.0859L15.1289 15.8477L16.9062 17.6055ZM17.5312 11.8633C18.5599 11.8633 19.4388 12.2279 20.168 12.957C20.8971 13.6862 21.2617 14.5651 21.2617 15.5938C21.2617 16.6224 20.8971 17.5013 20.168 18.2305C19.4388 18.9596 18.5599 19.3242 17.5312 19.3242C16.5026 19.3242 15.6237 18.9596 14.8945 18.2305C14.1654 17.5013 13.8008 16.6224 13.8008 15.5938C13.8008 14.5651 14.1654 13.6862 14.8945 12.957C15.6237 12.2279 16.5026 11.8633 17.5312 11.8633Z";
-    ICONS["MINOR"] = "path://M21.9787 11.9894L11.9894 22L2 11.9894L11.9894 2L21.9787 11.9894ZM12.9052 16.5474V14.7157H11.0735V16.5474H12.9052ZM12.9052 12.9052V7.45261H11.0735V12.9052H12.9052Z";
-    ICONS["MAJOR"] = "path://M12.8936 13.8936V10.234H11.1064V13.8936H12.8936ZM12.8936 17.5106V15.6809H11.1064V17.5106H12.8936ZM2 20.234L12 3L22 20.234H2Z";
-    ICONS["CRITICAL"] = "path://M12.0117 22C10.6362 22 9.3388 21.7343 8.11958 21.2028C6.90035 20.687 5.83744 19.9758 4.93083 19.0692C4.02423 18.1626 3.31301 17.0996 2.79719 15.8804C2.26573 14.6768 2 13.3794 2 11.9883C2 10.6127 2.26573 9.31536 2.79719 8.09613C3.31301 6.89254 4.02423 5.83744 4.93083 4.93083C5.83744 4.02423 6.90035 3.3052 8.11958 2.77374C9.3388 2.25791 10.6362 2 12.0117 2C13.3873 2 14.6846 2.25791 15.9039 2.77374C17.1231 3.3052 18.186 4.02423 19.0926 4.93083C19.9992 5.83744 20.7104 6.89254 21.2263 8.09613C21.7577 9.31536 22.0234 10.6127 22.0234 11.9883C22.0234 13.3794 21.7577 14.6768 21.2263 15.8804C20.7104 17.0996 19.9992 18.1626 19.0926 19.0692C18.186 19.9758 17.1231 20.687 15.9039 21.2028C14.6846 21.7343 13.3873 22 12.0117 22ZM13.0199 6.99414H11.0035V12.9965H13.0199V6.99414ZM13.0199 14.9894H11.0035V17.0059H13.0199V14.9894Z";
-    ICONS["WARNING"] = "path://M12 2C13.3772 2 14.6761 2.25822 15.8967 2.77465C17.1174 3.29108 18.1815 4.00313 19.0892 4.9108C19.9969 5.81847 20.7089 6.88263 21.2254 8.10329C21.7418 9.32394 22 10.6228 22 12C22 13.3772 21.7418 14.6761 21.2254 15.8967C20.7089 17.1174 19.9969 18.1815 19.0892 19.0892C18.1815 19.9969 17.1174 20.7089 15.8967 21.2254C14.6761 21.7418 13.3772 22 12 22C10.6228 22 9.32394 21.7418 8.10329 21.2254C6.88263 20.7089 5.81847 19.9969 4.9108 19.0892C4.00313 18.1815 3.29108 17.1174 2.77465 15.8967C2.25822 14.6761 2 13.3772 2 12C2 10.6228 2.25822 9.32394 2.77465 8.10329C3.29108 6.88263 4.00313 5.81847 4.9108 4.9108C5.81847 4.00313 6.88263 3.29108 8.10329 2.77465C9.32394 2.25822 10.6228 2 12 2Z";
-})(ICONS || (ICONS = {}));
-const ICONS_MAP = {
-    ALARM: ICONS.ALARM,
-    EVENT: ICONS.EVENT,
-    ACKNOWLEDGED: ICONS.ACKNOWLEDGED,
-    CLEARED: ICONS.CLEARED,
-    MINOR: ICONS.MINOR,
-    MAJOR: ICONS.MAJOR,
-    CRITICAL: ICONS.CRITICAL,
-    WARNING: ICONS.WARNING
-};
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const INDEX_HTML = '/index.html';
 class EchartsOptionsService {
@@ -334,7 +376,7 @@ class EchartsOptionsService {
         this.appState = appState;
         this.TOOLTIP_WIDTH = 300;
     }
-    getChartOptions(datapointsWithValues, timeRange, showSplitLines, events, alarms, displayOptions, selectedTimeRange, aggregatedDatapoints, sliderZoomUsed = false) {
+    getChartOptions(datapointsWithValues, timeRange, showSplitLines, events, alarms, displayOptions, selectedTimeRange, aggregatedDatapoint, sliderZoomUsed = false) {
         const yAxis = this.yAxisService.getYAxis(datapointsWithValues, {
             showSplitLines: showSplitLines.YAxis,
             mergeMatchingDatapoints: displayOptions.mergeMatchingDatapoints,
@@ -394,7 +436,28 @@ class EchartsOptionsService {
                     type: 'slider',
                     show: displayOptions.showSlider,
                     bottom: 8,
-                    realtime: false
+                    realtime: false,
+                    left: displayOptions.sliderPositionMode === 'compact' ? '64px' : '64px',
+                    right: displayOptions.sliderPositionMode === 'compact' ? '172px' : '64px',
+                    labelFormatter(_value, valueStr) {
+                        const locale = selectedLanguage.replace('_', '-');
+                        const date = new Date(valueStr);
+                        const datePart = new Intl.DateTimeFormat(locale, {
+                            year: 'numeric',
+                            month: 'short',
+                            day: '2-digit'
+                        }).format(date);
+                        const timePart = new Intl.DateTimeFormat(locale, {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                            second: '2-digit'
+                        }).format(date);
+                        return `${datePart}\n${timePart}`;
+                    },
+                    textStyle: {
+                        fontSize: 9,
+                        lineHeight: 14
+                    }
                 }
             ], // on realtime, 'none' will cause extending chart line to left edge of the chart
             animation: false,
@@ -424,7 +487,11 @@ class EchartsOptionsService {
                 show: false
             },
             xAxis: {
-                min: new Date(timeRange.dateFrom).valueOf() - intervalInMs,
+                min: aggregatedDatapoint
+                    ? Object.keys(aggregatedDatapoint.values)
+                        .map(date => new Date(date).valueOf())
+                        .sort((a, b) => a - b)[0]
+                    : new Date(timeRange.dateFrom).valueOf() - intervalInMs,
                 max: timeRange.dateTo,
                 type: 'time',
                 animation: false,
@@ -478,7 +545,7 @@ class EchartsOptionsService {
             },
             yAxis,
             series: [
-                ...this.getAggregatedSeries(aggregatedDatapoints || [], displayOptions).filter(series => series !== undefined),
+                this.getAggregatedSeries(aggregatedDatapoint || null, displayOptions),
                 ...this.getChartSeries(datapointsWithValues, events, alarms, displayOptions)
             ]
         };
@@ -513,18 +580,17 @@ class EchartsOptionsService {
         }
         return intervalInMs;
     }
-    getAggregatedSeries(aggregatedDatapoints, displayOptions) {
+    getAggregatedSeries(aggregatedDatapoint, displayOptions) {
         const series = [];
-        aggregatedDatapoints.forEach((dp, idx) => {
-            const renderType = dp.renderType || 'min';
-            if (renderType === 'area') {
-                series.push(this.getSingleSeries(dp, 'min', idx, true, displayOptions, 'aggr'));
-                series.push(this.getSingleSeries(dp, 'max', idx, true, displayOptions, 'aggr'));
-            }
-            else {
-                series.push(this.getSingleSeries(dp, renderType, idx, false, displayOptions, 'aggr'));
-            }
-        });
+        const renderType = aggregatedDatapoint?.renderType || 'min';
+        const idx = 0;
+        if (renderType === 'area') {
+            series.push(this.getSingleSeries(aggregatedDatapoint, 'min', idx, true, displayOptions, 'aggr'));
+            series.push(this.getSingleSeries(aggregatedDatapoint, 'max', idx, true, displayOptions, 'aggr'));
+        }
+        else {
+            series.push(this.getSingleSeries(aggregatedDatapoint, renderType, idx, false, displayOptions, 'aggr'));
+        }
         series.forEach((s) => {
             s.datapointId = 'aggregated';
             s.typeOfSeries = 'fake';
@@ -537,7 +603,7 @@ class EchartsOptionsService {
                 opacity: 0
             };
         });
-        return [series[0]];
+        return series[0];
     }
     /**
      * This method is used to get the series for alarms and events.
@@ -1699,6 +1765,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.AlarmService }] });
 
+class ChartHelpersService {
+    /**
+     * Cleans the widget configuration which will be sent to Gainsight by removing unnecessary properties.
+     * @param config The widget configuration to clean.
+     * @returns The cleaned widget configuration.
+     */
+    getConfigSummaryForGainsight(config) {
+        return {
+            datapointCount: config.datapoints?.length ?? 0,
+            alarmsEventsCount: config.alarmsEventsConfigs?.length ?? 0,
+            interval: config.interval,
+            forceMergeDatapoints: config.forceMergeDatapoints,
+            mergeMatchingDatapoints: config.mergeMatchingDatapoints,
+            showSlider: config.showSlider,
+            widgetInstanceGlobalTimeContext: config.widgetInstanceGlobalTimeContext,
+            dateFrom: config.dateFrom,
+            dateTo: config.dateTo
+        };
+    }
+    findMatchingDatapoint(datapoints, selected) {
+        if (!selected)
+            return undefined;
+        return datapoints.find(dp => this.getTargetId(dp) === this.getTargetId(selected) &&
+            dp.fragment === selected.fragment &&
+            dp.series === selected.series);
+    }
+    getTargetId(obj) {
+        return obj?.__target?.id ?? obj?.target;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChartHelpersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChartHelpersService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChartHelpersService, decorators: [{
+            type: Injectable
+        }] });
+
+class SelectAggregatedDatapointComponent {
+    constructor() {
+        this.activeDatapoints = [];
+        this.value = null;
+        this.valueChange = new EventEmitter();
+        this.chartHelpersService = inject(ChartHelpersService);
+        this.selectedDatapointLabel = gettext('Select data point');
+        this.selectedDatapointColor = '';
+    }
+    ngOnChanges(changes) {
+        if (changes['value'] || changes['activeDatapoints']) {
+            this.updateSelectedDatapointInfo();
+        }
+    }
+    changeDatapointSelection(datapoint) {
+        const trimmedDatapoint = {
+            target: datapoint.__target.id,
+            fragment: datapoint.fragment,
+            series: datapoint.series
+        };
+        this.valueChange.emit(trimmedDatapoint);
+    }
+    updateSelectedDatapointInfo() {
+        if (!this.value) {
+            return;
+        }
+        const found = this.chartHelpersService.findMatchingDatapoint(this.activeDatapoints, this.value);
+        if (this.value && !found) {
+            this.selectedDatapointLabel = this.value.label || '';
+            this.selectedDatapointColor = this.value.color || '';
+            return;
+        }
+        this.selectedDatapointLabel = found?.label || '';
+        this.selectedDatapointColor = found?.color || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectAggregatedDatapointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SelectAggregatedDatapointComponent, isStandalone: true, selector: "c8y-select-aggregated-datapoint", inputs: { activeDatapoints: "activeDatapoints", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "d-contents" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"dropdown dropup\"\n  dropdown\n  #datapointDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"datapointDropdown.isOpen\"\n  *ngIf=\"activeDatapoints?.length > 0\"\n>\n  <ng-template #selectedDatapoint>\n    <div class=\"text-left\">\n      <strong>{{ selectedDatapointLabel }}</strong>\n      <br />\n      {{ 'Click to change' | translate }}\n    </div>\n  </ng-template>\n  <button\n    class=\"btn btn-default d-flex a-i-center dropdown-toggle c8y-dropdown\"\n    title=\"{{'Select a data point to view its aggregated values in the time slider.' | translate }}\"\n    type=\"button\"\n    dropdownToggle\n    >\n    <span\n      [style.background-color]=\"selectedDatapointColor\"\n      style=\"display: inline-block; width: 16px; height: 16px; border-radius: 50%\"\n    ></span>\n    <span class=\"caret\"></span>\n  </button>\n  <ul\n    class=\"dropdown-menu dropdown-menu-right\"\n    *dropdownMenu\n  >\n    <li *ngFor=\"let datapoint of activeDatapoints\">\n      <button\n        class=\"p-r-8\"\n        type=\"button\"\n        (click)=\"changeDatapointSelection(datapoint)\"\n      >\n        <span\n          class=\"d-inline-block m-r-4\"\n          [style.background-color]=\"datapoint?.color\"\n          style=\"width: 16px; height: 16px; border-radius: 50%\"\n        ></span>\n        <span class=\"text-truncate\" style=\"max-width:220px!important\" title=\"{{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\">\n          {{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\n        </span>\n        <span\n          class=\"m-l-auto flex-no-shrink\"\n          *ngIf=\"\n            datapoint.__target.id === value?.__target.id &&\n            datapoint.fragment === value?.fragment &&\n            datapoint.series === value?.series\n          \"\n        >\n          <i\n            class=\"text-success h4\"\n            [c8yIcon]=\"'check'\"\n          ></i>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n<button\n  class=\"btn-help\"\n  [attr.aria-label]=\"'Help' | translate\"\n  popover=\"{{\n    'Select a data point to view its aggregated values in the time slider.' | translate\n  }}\"\n  placement=\"left\"\n  triggers=\"focus\"\n  container=\"body\"\n></button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i2$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectAggregatedDatapointComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-select-aggregated-datapoint', host: {
+                        class: 'd-contents'
+                    }, standalone: true, imports: [
+                        FormsModule,
+                        C8yTranslatePipe,
+                        PopoverModule,
+                        TooltipModule,
+                        BsDropdownModule,
+                        A11yModule,
+                        IconDirective,
+                        NgIf,
+                        NgForOf
+                    ], template: "<div\n  class=\"dropdown dropup\"\n  dropdown\n  #datapointDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"datapointDropdown.isOpen\"\n  *ngIf=\"activeDatapoints?.length > 0\"\n>\n  <ng-template #selectedDatapoint>\n    <div class=\"text-left\">\n      <strong>{{ selectedDatapointLabel }}</strong>\n      <br />\n      {{ 'Click to change' | translate }}\n    </div>\n  </ng-template>\n  <button\n    class=\"btn btn-default d-flex a-i-center dropdown-toggle c8y-dropdown\"\n    title=\"{{'Select a data point to view its aggregated values in the time slider.' | translate }}\"\n    type=\"button\"\n    dropdownToggle\n    >\n    <span\n      [style.background-color]=\"selectedDatapointColor\"\n      style=\"display: inline-block; width: 16px; height: 16px; border-radius: 50%\"\n    ></span>\n    <span class=\"caret\"></span>\n  </button>\n  <ul\n    class=\"dropdown-menu dropdown-menu-right\"\n    *dropdownMenu\n  >\n    <li *ngFor=\"let datapoint of activeDatapoints\">\n      <button\n        class=\"p-r-8\"\n        type=\"button\"\n        (click)=\"changeDatapointSelection(datapoint)\"\n      >\n        <span\n          class=\"d-inline-block m-r-4\"\n          [style.background-color]=\"datapoint?.color\"\n          style=\"width: 16px; height: 16px; border-radius: 50%\"\n        ></span>\n        <span class=\"text-truncate\" style=\"max-width:220px!important\" title=\"{{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\">\n          {{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\n        </span>\n        <span\n          class=\"m-l-auto flex-no-shrink\"\n          *ngIf=\"\n            datapoint.__target.id === value?.__target.id &&\n            datapoint.fragment === value?.fragment &&\n            datapoint.series === value?.series\n          \"\n        >\n          <i\n            class=\"text-success h4\"\n            [c8yIcon]=\"'check'\"\n          ></i>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n<button\n  class=\"btn-help\"\n  [attr.aria-label]=\"'Help' | translate\"\n  popover=\"{{\n    'Select a data point to view its aggregated values in the time slider.' | translate\n  }}\"\n  placement=\"left\"\n  triggers=\"focus\"\n  container=\"body\"\n></button>\n" }]
+        }], propDecorators: { activeDatapoints: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ChartsComponent {
     constructor() {
@@ -1706,11 +1869,15 @@ class ChartsComponent {
         this.alarms = [];
         this.events = [];
         this.sliderZoomUsed = false;
+        this.activeDatapoints = [];
         this.configChangeOnZoomOut = new EventEmitter();
         this.timeRangeChangeOnRealtime = new EventEmitter();
         this.datapointOutOfSync = new EventEmitter();
         this.updateAlarmsAndEvents = new EventEmitter();
         this.isMarkedAreaEnabled = new EventEmitter();
+        this.updateActiveDatapoints = new EventEmitter();
+        this.updateAggregatedSliderDatapoint = new EventEmitter();
+        this.CHART_VIEW_CONTEXT = CHART_VIEW_CONTEXT;
         this.configChangedSubject = new BehaviorSubject(null);
         this.measurementService = inject(MeasurementService);
         this.echartsOptionsService = inject(EchartsOptionsService);
@@ -2042,12 +2209,12 @@ class ChartsComponent {
         this.updateAlarmsAndEvents.emit(this.config.alarmsEventsConfigs);
     }
     startRealtimeIfPossible() {
-        const activeDatapoints = this.config?.datapoints?.filter(dp => dp.__active);
-        if ((activeDatapoints || this.config.alarmsEventsConfigs?.length > 0) &&
+        this.activeDatapoints = this.config?.datapoints?.filter(dp => dp.__active);
+        if ((this.activeDatapoints || this.config.alarmsEventsConfigs?.length > 0) &&
             this.config.realtime &&
             this.echartsInstance) {
-            const showOnlyAlarmsOrEvents = this.config.alarmsEventsConfigs?.length > 0 && activeDatapoints?.length === 0;
-            this.chartRealtimeService.startRealtime(this.echartsInstance, activeDatapoints, this.getTimeRange(), dp => this.datapointOutOfSync.emit(dp), timeRange => this.timeRangeChangeOnRealtime.emit(timeRange), this.config.alarmsEventsConfigs, {
+            const showOnlyAlarmsOrEvents = this.config.alarmsEventsConfigs?.length > 0 && this.activeDatapoints?.length === 0;
+            this.chartRealtimeService.startRealtime(this.echartsInstance, this.activeDatapoints, this.getTimeRange(), dp => this.datapointOutOfSync.emit(dp), timeRange => this.timeRangeChangeOnRealtime.emit(timeRange), this.config.alarmsEventsConfigs, {
                 displayMarkedLine: this.config.displayMarkedLine || false,
                 displayMarkedPoint: this.config.displayMarkedPoint || false,
                 mergeMatchingDatapoints: this.config.mergeMatchingDatapoints || false,
@@ -2081,8 +2248,8 @@ class ChartsComponent {
     }
     async getChartOptions(datapointsWithValues) {
         const timeRange = { ...this.getTimeRange(), interval: this.config.interval };
-        const activeDatapoints = this.config?.datapoints?.filter(dp => dp.__active);
-        if ((!activeDatapoints || activeDatapoints.length === 0) &&
+        const sliderPositionMode = this.getSliderPositionMode();
+        if ((!this.activeDatapoints || this.activeDatapoints.length === 0) &&
             this.config.alarmsEventsConfigs?.length > 0) {
             return this.echartsOptionsService.getChartOptions(datapointsWithValues, timeRange, {
                 YAxis: this.config.yAxisSplitLines || false,
@@ -2098,12 +2265,16 @@ class ChartsComponent {
             });
         }
         if (!this.widgetTimeContextDateRangeService.initialTimeRange()) {
+            const extendedDateFrom = new Date(new Date(timeRange.dateFrom).valueOf() -
+                this.echartsOptionsService.calculateExtendedIntervalInMs(this.config.interval || 'custom', {
+                    dateFrom: timeRange.dateFrom,
+                    dateTo: timeRange.dateTo
+                })).toISOString();
             this.widgetTimeContextDateRangeService.updateInitialTimeRange(timeRange);
-            const aggregatedDatapoints = await lastValueFrom(this.fetchSeriesForDatapoints$({
-                dateFrom: new Date(new Date(timeRange.dateFrom).valueOf() -
-                    this.echartsOptionsService.calculateExtendedIntervalInMs(this.config.interval || 'custom', { dateFrom: timeRange.dateFrom, dateTo: timeRange.dateTo })).toISOString(),
+            const aggregatedDatapoints = await lastValueFrom(this.fetchAggregatedSeriesForSelectedDatapoint$({
+                dateFrom: extendedDateFrom,
                 dateTo: timeRange.dateTo
-            }));
+            }, this.config.aggregatedDatapoint));
             return this.echartsOptionsService.getChartOptions(datapointsWithValues, timeRange, {
                 YAxis: this.config.yAxisSplitLines || false,
                 XAxis: this.config.xAxisSplitLines || false
@@ -2114,18 +2285,23 @@ class ChartsComponent {
                 forceMergeDatapoints: this.config.forceMergeDatapoints || false,
                 showLabelAndUnit: this.config.showLabelAndUnit || false,
                 showSlider: this.config.showSlider || false,
-                numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? 2
+                numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? 2,
+                sliderPositionMode
             }, undefined, aggregatedDatapoints);
         }
         else {
-            const aggregatedDatapoints = await lastValueFrom(this.fetchSeriesForDatapoints$({
-                dateFrom: new Date(new Date(this.widgetTimeContextDateRangeService.initialTimeRange().dateFrom).valueOf() -
-                    this.echartsOptionsService.calculateExtendedIntervalInMs(this.config.interval || 'custom', {
-                        dateFrom: this.widgetTimeContextDateRangeService.initialTimeRange().dateFrom,
-                        dateTo: this.widgetTimeContextDateRangeService.initialTimeRange().dateTo
-                    })).toISOString(),
+            const initialDateFromValue = new Date(this.widgetTimeContextDateRangeService.initialTimeRange().dateFrom).valueOf();
+            const calculateInitialIntervalInMs = this.echartsOptionsService.calculateExtendedIntervalInMs(this.widgetTimeContextDateRangeService.initialTimeRange().interval || 'custom', {
+                dateFrom: this.widgetTimeContextDateRangeService.initialTimeRange().dateFrom,
+                dateTo: this.widgetTimeContextDateRangeService.initialTimeRange().dateTo
+            });
+            // The extended date from is the initial date from (which was selected by the user) minus the calculated interval in milliseconds (this is the extended range for the slider).
+            // This extended date from is used to fetch the aggregated datapoints for the slider.
+            const initialExtendedDateFrom = new Date(initialDateFromValue - calculateInitialIntervalInMs).toISOString();
+            const aggregatedDatapoints = await lastValueFrom(this.fetchAggregatedSeriesForSelectedDatapoint$({
+                dateFrom: initialExtendedDateFrom,
                 dateTo: new Date(this.widgetTimeContextDateRangeService.initialTimeRange().dateTo).toISOString()
-            }));
+            }, this.config.aggregatedDatapoint));
             return this.echartsOptionsService.getChartOptions(datapointsWithValues, this.widgetTimeContextDateRangeService.initialTimeRange(), {
                 YAxis: this.config.yAxisSplitLines || false,
                 XAxis: this.config.xAxisSplitLines || false
@@ -2136,35 +2312,36 @@ class ChartsComponent {
                 forceMergeDatapoints: this.config.forceMergeDatapoints || false,
                 showLabelAndUnit: this.config.showLabelAndUnit || false,
                 showSlider: this.config.showSlider || false,
-                numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? 2
+                numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? 2,
+                sliderPositionMode
             }, timeRange, aggregatedDatapoints, true);
         }
     }
-    fetchSeriesForDatapoints$(customTimeRange) {
-        const activeDatapoints = this.config?.datapoints?.filter(dp => dp.__active);
-        if (!activeDatapoints || activeDatapoints.length === 0) {
+    fetchSeriesForDatapoints$() {
+        this.activeDatapoints = this.config?.datapoints?.filter(dp => dp.__active);
+        if (!this.activeDatapoints || this.activeDatapoints.length === 0) {
+            this.updateActiveDatapoints.emit([]);
             return of([]);
         }
+        this.updateActiveDatapoints.emit(this.activeDatapoints);
         const datapointsWithValuesRequests = [];
         const timeRange = this.getTimeRange(60_000);
-        for (const dp of activeDatapoints) {
+        for (const dp of this.activeDatapoints) {
             const request = defer(() => this.measurementService.listSeries({
                 revert: true,
-                ...(customTimeRange ? customTimeRange : timeRange),
+                ...timeRange,
                 source: dp.__target?.id || '',
                 series: [`${dp.fragment}.${dp.series}`],
-                ...(this.config.aggregation || customTimeRange
-                    ? {
-                        aggregationType: customTimeRange ? aggregationType.HOURLY : this.config.aggregation
-                    }
-                    : {})
+                ...(this.config.aggregation && {
+                    aggregationType: this.config.aggregation
+                })
             })).pipe(map(res => {
                 const values = res.data.values;
                 if (res.data.truncated && this.config.dateFrom) {
                     values[new Date(this.config.dateFrom).toISOString()] = [{ min: null, max: null }];
                 }
                 else {
-                    if (this.alerts && !customTimeRange) {
+                    if (this.alerts) {
                         this.alerts.clear();
                     }
                 }
@@ -2178,6 +2355,58 @@ class ChartsComponent {
             }
         }));
     }
+    fetchAggregatedSeriesForSelectedDatapoint$(customTimeRange, aggregatedDatapoint) {
+        const timeRange = this.getTimeRange(60_000);
+        aggregatedDatapoint = aggregatedDatapoint
+            ? aggregatedDatapoint
+            : this.config?.datapoints?.filter(dp => dp.__active)[0];
+        const request = defer(() => this.measurementService.listSeries({
+            ...(customTimeRange ? customTimeRange : timeRange),
+            source: aggregatedDatapoint?.target || aggregatedDatapoint.__target?.id || '',
+            series: [`${aggregatedDatapoint.fragment}.${aggregatedDatapoint.series}`],
+            ...(this.config.aggregation || customTimeRange
+                ? {
+                    aggregationType: this.getAggregationTypeForTimeRange()
+                }
+                : {})
+        })).pipe(map(res => {
+            const values = res.data.values;
+            if (res.data.truncated && this.config.dateFrom) {
+                values[new Date(this.config.dateFrom).toISOString()] = [{ min: null, max: null }];
+            }
+            return { ...aggregatedDatapoint, values, truncated: res.data.truncated };
+        }));
+        return request.pipe(tap((dpsWithValues) => {
+            if (dpsWithValues['truncated']) {
+                this.addTruncatedDataAlert();
+            }
+        }));
+    }
+    getAggregationTypeForTimeRange() {
+        const interval = this.widgetTimeContextDateRangeService.initialTimeRange().interval;
+        switch (interval) {
+            case 'minutes':
+                return aggregationType.MINUTELY;
+            case 'hours':
+                return aggregationType.HOURLY;
+            case 'days':
+                return aggregationType.DAILY;
+            case 'weeks':
+                return aggregationType.DAILY;
+            case 'months':
+                return aggregationType.DAILY;
+            case 'custom':
+                return aggregationType.HOURLY;
+        }
+    }
+    getSliderPositionMode() {
+        if ((this.chartViewContext === CHART_VIEW_CONTEXT.DATAPOINT_EXPLORER ||
+            this.chartViewContext === CHART_VIEW_CONTEXT.WIDGET_CONFIG) &&
+            this.activeDatapoints.length > 1) {
+            return 'compact';
+        }
+        return 'default';
+    }
     addTruncatedDataAlert() {
         if (this.alerts?.alertGroups.find(a => a.type === 'warning')?.value?.alerts?.length) {
             return;
@@ -2217,7 +2446,7 @@ class ChartsComponent {
         return { dateFrom: timeRange.dateFrom.toISOString(), dateTo: timeRange.dateTo.toISOString() };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChartsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ChartsComponent, isStandalone: true, selector: "c8y-charts", inputs: { config: "config", alerts: "alerts" }, outputs: { configChangeOnZoomOut: "configChangeOnZoomOut", timeRangeChangeOnRealtime: "timeRangeChangeOnRealtime", datapointOutOfSync: "datapointOutOfSync", updateAlarmsAndEvents: "updateAlarmsAndEvents", isMarkedAreaEnabled: "isMarkedAreaEnabled" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ChartsComponent, isStandalone: true, selector: "c8y-charts", inputs: { config: "config", alerts: "alerts", chartViewContext: "chartViewContext" }, outputs: { configChangeOnZoomOut: "configChangeOnZoomOut", timeRangeChangeOnRealtime: "timeRangeChangeOnRealtime", datapointOutOfSync: "datapointOutOfSync", updateAlarmsAndEvents: "updateAlarmsAndEvents", isMarkedAreaEnabled: "isMarkedAreaEnabled", updateActiveDatapoints: "updateActiveDatapoints", updateAggregatedSliderDatapoint: "updateAggregatedSliderDatapoint" }, providers: [
             { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) },
             ChartRealtimeService,
             MeasurementRealtimeService,
@@ -2228,7 +2457,7 @@ class ChartsComponent {
             YAxisService,
             AlarmSeverityToIconPipe,
             AlarmSeverityToLabelPipe
-        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-relative fit-h chart-container\"\n>\n  <div\n    class=\"fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOption$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n\n  <div *ngIf=\"showLoadMore\" class=\"chart-load-more\">\n    <button\n      class=\"btn btn-primary btn-sm btn-block\"\n      (click)=\"loadMoreData()\"\n    >\n      <i c8yIcon=\"restore\"></i>\n      {{ 'Load more' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: NgxEchartsModule }, { kind: "directive", type: i3.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: ChartAlertsComponent, selector: "c8y-chart-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: AlarmsModule }] }); }
+        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-relative fit-h chart-container\">\n  <div\n    class=\"fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOption$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n\n  <div\n    class=\"chart-load-more\"\n    *ngIf=\"showLoadMore\"\n  >\n    <button\n      class=\"btn btn-primary btn-block\"\n      (click)=\"loadMoreData()\"\n    >\n      <i c8yIcon=\"restore\"></i>\n      {{ 'Load more' | translate }}\n    </button>\n  </div>\n\n  <div\n    class=\"e-charts--aggregated-datapoint\"\n    *ngIf=\"\n      activeDatapoints.length > 1 &&\n      config?.showSlider &&\n      chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW\n    \"\n  >\n    <c8y-select-aggregated-datapoint\n      [value]=\"config?.aggregatedDatapoint || activeDatapoints[0]\"\n      (valueChange)=\"updateAggregatedSliderDatapoint.emit($event)\"\n      [activeDatapoints]=\"activeDatapoints\"\n    ></c8y-select-aggregated-datapoint>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: NgxEchartsModule }, { kind: "directive", type: i3$1.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: ChartAlertsComponent, selector: "c8y-chart-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: SelectAggregatedDatapointComponent, selector: "c8y-select-aggregated-datapoint", inputs: ["activeDatapoints", "value"], outputs: ["valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChartsComponent, decorators: [{
             type: Component,
@@ -2250,12 +2479,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         TooltipModule,
                         PopoverModule,
                         ChartAlertsComponent,
-                        AlarmsModule
-                    ], template: "<div\n  class=\"p-relative fit-h chart-container\"\n>\n  <div\n    class=\"fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOption$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n\n  <div *ngIf=\"showLoadMore\" class=\"chart-load-more\">\n    <button\n      class=\"btn btn-primary btn-sm btn-block\"\n      (click)=\"loadMoreData()\"\n    >\n      <i c8yIcon=\"restore\"></i>\n      {{ 'Load more' | translate }}\n    </button>\n  </div>\n</div>\n" }]
+                        AlarmsModule,
+                        SelectAggregatedDatapointComponent
+                    ], template: "<div class=\"p-relative fit-h chart-container\">\n  <div\n    class=\"fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOption$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n\n  <div\n    class=\"chart-load-more\"\n    *ngIf=\"showLoadMore\"\n  >\n    <button\n      class=\"btn btn-primary btn-block\"\n      (click)=\"loadMoreData()\"\n    >\n      <i c8yIcon=\"restore\"></i>\n      {{ 'Load more' | translate }}\n    </button>\n  </div>\n\n  <div\n    class=\"e-charts--aggregated-datapoint\"\n    *ngIf=\"\n      activeDatapoints.length > 1 &&\n      config?.showSlider &&\n      chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW\n    \"\n  >\n    <c8y-select-aggregated-datapoint\n      [value]=\"config?.aggregatedDatapoint || activeDatapoints[0]\"\n      (valueChange)=\"updateAggregatedSliderDatapoint.emit($event)\"\n      [activeDatapoints]=\"activeDatapoints\"\n    ></c8y-select-aggregated-datapoint>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], alerts: [{
                 type: Input
+            }], chartViewContext: [{
+                type: Input
             }], configChangeOnZoomOut: [{
                 type: Output
             }], timeRangeChangeOnRealtime: [{
@@ -2266,69 +2498,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Output
             }], isMarkedAreaEnabled: [{
                 type: Output
+            }], updateActiveDatapoints: [{
+                type: Output
+            }], updateAggregatedSliderDatapoint: [{
+                type: Output
             }], chart: [{
                 type: ViewChild,
                 args: ['chart']
             }] } });
 
-class ChartHelpersService {
-    /**
-     * Cleans the widget configuration which will be sent to Gainsight by removing unnecessary properties.
-     * @param config The widget configuration to clean.
-     * @returns The cleaned widget configuration.
-     */
-    getConfigSummaryForGainsight(config) {
-        return {
-            datapointCount: config.datapoints?.length ?? 0,
-            alarmsEventsCount: config.alarmsEventsConfigs?.length ?? 0,
-            interval: config.interval,
-            forceMergeDatapoints: config.forceMergeDatapoints,
-            mergeMatchingDatapoints: config.mergeMatchingDatapoints,
-            showSlider: config.showSlider,
-            widgetInstanceGlobalTimeContext: config.widgetInstanceGlobalTimeContext,
-            dateFrom: config.dateFrom,
-            dateTo: config.dateTo
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChartHelpersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChartHelpersService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChartHelpersService, decorators: [{
-            type: Injectable
-        }] });
-
-var DATE_SELECTION_EXTENDED;
-(function (DATE_SELECTION_EXTENDED) {
-    DATE_SELECTION_EXTENDED["CONFIG"] = "config";
-    DATE_SELECTION_EXTENDED["DASHBOARD_CONTEXT"] = "dashboard_context";
-})(DATE_SELECTION_EXTENDED || (DATE_SELECTION_EXTENDED = {}));
-const REALTIME_TEXTS = {
-    ACTIVE: gettext('Realtime active'),
-    INACTIVE: gettext('Realtime inactive')
-};
-const PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH = {
-    EVENTS: {
-        DATA_EXPLORER_AND_GRAPH: 'data-explorer-and-graph'
-    },
-    COMPONENTS: {
-        DATA_EXPLORER_DETAILS: 'data-explorer-details'
-    },
-    ACTIONS: {
-        DATA_EXPLORER_CONFIG_INIT: 'data-explorer-config-init',
-        DATA_EXPLORER_CONFIG_CHANGE: 'data-explorer-config-change',
-        DATA_GRAPH_WIDGET_CONFIG: 'data-graph-widget-config'
-    }
-};
-const SEVERITY_LABELS = {
-    CRITICAL: gettext('Critical`alarm`'),
-    MAJOR: gettext('Major`alarm`'),
-    MINOR: gettext('Minor`alarm`'),
-    WARNING: gettext('Warning`alarm`')
-};
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ChartAlarmsService, ChartEventsService, ChartHelpersService, ChartsComponent, DATE_SELECTION_EXTENDED, ICONS_MAP, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, REALTIME_TEXTS, SEVERITY_LABELS };
+export { CHART_VIEW_CONTEXT, ChartAlarmsService, ChartEventsService, ChartHelpersService, ChartsComponent, DATE_SELECTION_EXTENDED, ICONS_MAP, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, REALTIME_TEXTS, SEVERITY_LABELS, SelectAggregatedDatapointComponent };
 //# sourceMappingURL=c8y-ngx-components-echart.mjs.map