@c8y/ngx-components 1022.21.3 → 1022.27.0

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

@@ -1,68 +1,23 @@
 import * as i0 from '@angular/core';
 import { Injectable, Input, Component, EventEmitter, inject, ViewChild, Output } from '@angular/core';
-import { defer, from, merge, interval, BehaviorSubject, of, lastValueFrom, forkJoin } from 'rxjs';
-import { switchMap, finalize, mergeMap, map, tap, throttleTime, buffer } from 'rxjs/operators';
-import * as i1 from '@c8y/client';
-import { MeasurementService, AlarmStatus, aggregationType } from '@c8y/client';
-import { fromFetch } from 'rxjs/fetch';
-import * as i2 from '@c8y/ngx-components/api';
-import { cloneDeep } from 'lodash-es';
-import * as i1$1 from '@c8y/ngx-components';
+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 * as i1$1 from '@c8y/client';
+import { AlarmStatus, MeasurementService, aggregationType } from '@c8y/client';
 import * as i6 from '@angular/router';
 import * as i4 from '@c8y/ngx-components/alarms';
 import { AlarmsModule, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe } from '@c8y/ngx-components/alarms';
 import { INTERVALS } from '@c8y/ngx-components/interval-picker';
 import * as i5 from '@ngx-translate/core';
-import * as i2$1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule as CommonModule$1 } from '@angular/common';
 import * as i3 from 'ngx-echarts';
 import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 
-class CustomMeasurementService extends MeasurementService {
-    constructor(client, realtime, apiService) {
-        super(client, realtime);
-        this.apiService = apiService;
-    }
-    listSeries$(params) {
-        const url = `/${this.baseUrl}/${this.listUrl}/series`;
-        const fetchOptions = {
-            params: {
-                revert: true,
-                ...params
-            }
-        };
-        const options = this.client.getFetchOptions(fetchOptions);
-        const fullUrl = this.client.getUrl(url, fetchOptions);
-        const callOnStart = {
-            options,
-            method: 'GET',
-            url
-        };
-        const callOnFinish = {
-            ...cloneDeep(callOnStart),
-            response: { status: null }
-        };
-        return defer(() => {
-            this.apiService.onStart(callOnStart);
-            return fromFetch(fullUrl, options);
-        }).pipe(switchMap(async (res) => {
-            callOnFinish.response = res;
-            const data = await res.json();
-            return { res: res, data };
-        }), finalize(() => {
-            this.apiService.onFinish(callOnFinish);
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomMeasurementService, deps: [{ token: i1.FetchClient }, { token: i1.Realtime }, { token: i2.ApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomMeasurementService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomMeasurementService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: i1.Realtime }, { type: i2.ApiService }] });
-
 class YAxisService {
     constructor(appStateService) {
         this.appStateService = appStateService;
@@ -236,12 +191,12 @@ class YAxisService {
             return 'left';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YAxisService, deps: [{ token: i1$1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YAxisService, deps: [{ token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YAxisService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YAxisService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.AppStateService }] });
+        }], ctorParameters: () => [{ type: i1.AppStateService }] });
 
 function assertUnreachable(_) {
     throw new Error('Case unreachable.');
@@ -698,7 +653,7 @@ class EchartsOptionsService {
      * @param allAlarms - All alarms.
      * @returns The formatted string for the tooltip.
      */
-    getTooltipFormatterForAlarmAndEvents(tooltipParams, params, allEvents, allAlarms) {
+    getTooltipFormatterForAlarmAndEvents(tooltipParams, params, allEvents, allAlarms, displayOptions) {
         if (!Array.isArray(tooltipParams)) {
             return '';
         }
@@ -707,7 +662,7 @@ class EchartsOptionsService {
         const allSeries = this.echartsInstance?.getOption()['series'];
         // filter out alarm and event series
         const allDataPointSeries = allSeries.filter(series => series['typeOfSeries'] !== 'alarm' && series['typeOfSeries'] !== 'event');
-        this.processSeries(allDataPointSeries, XAxisValue, YAxisReadings);
+        this.processSeries(allDataPointSeries, XAxisValue, YAxisReadings, displayOptions);
         // find event and alarm of the same type as the hovered markedLine or markedPoint
         const event = allEvents.find(e => e.type === params.data.itemType);
         const alarm = allAlarms.find(a => a.type === params.data.itemType);
@@ -896,17 +851,17 @@ class EchartsOptionsService {
      * @param XAxisValue - The X Axis value.
      * @param YAxisReadings - The Y Axis readings.
      */
-    processSeries(allDataPointSeries, XAxisValue, YAxisReadings) {
+    processSeries(allDataPointSeries, XAxisValue, YAxisReadings, displayOptions) {
         allDataPointSeries.forEach((series) => {
             if (series.datapointId === 'aggregated') {
                 return;
             }
             let value = '';
             if (series.id.endsWith('/min')) {
-                value = this.processMinSeries(series, allDataPointSeries, XAxisValue);
+                value = this.processMinSeries(series, allDataPointSeries, XAxisValue, displayOptions);
             }
             else if (!series.id.endsWith('/max')) {
-                value = this.processRegularSeries(series, XAxisValue);
+                value = this.processRegularSeries(series, XAxisValue, displayOptions);
             }
             if (value) {
                 YAxisReadings.push(`<div class="d-flex a-i-center p-b-8 text-default"><span class='dlt-c8y-icon-circle m-r-4' style='color: ${series.itemStyle.color};'></span>` + // color circle
@@ -923,7 +878,7 @@ class EchartsOptionsService {
      * @param XAxisValue - The X Axis value.
      * @returns The processed value.
      */
-    processMinSeries(series, allDataPointSeries, XAxisValue) {
+    processMinSeries(series, allDataPointSeries, XAxisValue, displayOptions) {
         const minValue = this.findValueForExactOrEarlierTimestamp(series.data, XAxisValue);
         if (!minValue) {
             return '';
@@ -931,7 +886,7 @@ class EchartsOptionsService {
         const maxSeries = allDataPointSeries.find(s => s['id'] === series.id.replace('/min', '/max'));
         const maxValue = this.findValueForExactOrEarlierTimestamp(maxSeries?.['data'], XAxisValue);
         return (`<div class="d-flex a-i-center separator-top p-t-8 p-b-8 text-default"><label class="text-12 m-r-8 m-b-0">${this.datePipe.transform(minValue[0])}</label>` +
-            `<span class="m-l-auto text-12">${minValue[1]} — ${maxValue?.[1]}` +
+            `<span class="m-l-auto text-12">${minValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--'} — ${maxValue?.[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--'}` +
             (series.datapointUnit ? ` ${series.datapointUnit}` : '') +
             `</span></div>`);
     }
@@ -941,14 +896,14 @@ class EchartsOptionsService {
      * @param XAxisValue - The X Axis value.
      * @returns The processed value.
      */
-    processRegularSeries(series, XAxisValue) {
+    processRegularSeries(series, XAxisValue, displayOptions) {
         const seriesValue = this.findValueForExactOrEarlierTimestamp(series.data, XAxisValue);
         if (!seriesValue) {
             return '';
         }
         return (`<div class="d-flex a-i-center p-t-8 p-b-8 separator-top text-default">` +
             `<label class="m-b-0 m-r-8 text-12">${this.datePipe.transform(seriesValue[0])}</label><span class="m-l-auto text-12">` +
-            seriesValue[1]?.toString() +
+            `${seriesValue[1]?.toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--'}` +
             (series.datapointUnit ? ` ${series.datapointUnit}` : '') +
             `</span></div>`);
     }
@@ -959,9 +914,9 @@ class EchartsOptionsService {
      */
     processEvent(event, XAxisValue) {
         let value = `<ul class="list-unstyled small separator-top text-default">`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">Event type</label><code class="m-l-auto">${event.type}</code></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">Event text</label><span class="m-l-auto">${event.text}<span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">Event time</label><span class="m-l-auto">${this.datePipe.transform(XAxisValue)}<span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${this.translate.instant(gettext('Event type'))}</label><code class="m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px; -webkit-line-clamp: 2;" title="${event.type}">${event.type}</code></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${this.translate.instant(gettext('Event text'))}</label><span class="m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px; -webkit-line-clamp: 5;" title="${event.text}">${event.text}</span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${this.translate.instant(gettext('Event time'))}</label><span class="m-l-auto">${this.datePipe.transform(XAxisValue)}<span></li>`;
         value += `</ul>`;
         return value;
     }
@@ -972,19 +927,19 @@ class EchartsOptionsService {
      */
     async processAlarm(alarm) {
         let value = `<ul class="list-unstyled small separator-top text-default m-0">`;
-        value += `<li class="p-t-4 p-b-4 d-flex a-i-center separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">Alarm Severity</label>`;
+        value += `<li class="p-t-4 p-b-4 d-flex a-i-center separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Alarm severity'))}</label>`;
         value += `<span class="small d-inline-flex a-i-center gap-4 m-l-auto"><i class="stroked-icon icon-14 status dlt-c8y-icon-${this.severityIconPipe.transform(alarm.severity)} ${alarm.severity.toLowerCase()}" > </i> ${this.severityLabelPipe.transform(alarm.severity)} </span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">Alarm Type</label><span class="small m-l-auto"><code>${alarm.type}</code></span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">Message</label><span class="small m-l-auto" style="overflow: hidden; text-overflow: ellipsis;" title="${alarm.text}">${alarm.text}</span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">Last Updated</label><span class="small m-l-auto">${this.datePipe.transform(alarm['lastUpdated'])}</span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Alarm type'))}</label><span class="small m-l-auto"><code>${alarm.type}</code></span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Message'))}</label><span class="small m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px;" title="${this.translate.instant(alarm.text)}">${this.translate.instant(alarm.text)}</span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Last updated'))}</label><span class="small m-l-auto">${this.datePipe.transform(alarm['lastUpdated'])}</span></li>`;
         const exists = await this.alarmRouteExists();
         if (exists) {
             const currentUrl = window.location.href;
             const baseUrlIndex = currentUrl.indexOf(INDEX_HTML);
             const baseUrl = currentUrl.substring(0, baseUrlIndex + INDEX_HTML.length);
-            value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">Link</label><span class="small m-l-auto"><a href="${baseUrl}#/alarms/${alarm.id}/details?showCleared=true">${this.translate.instant(gettext('Alarm details'))}</a></span></li>`;
+            value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Open details'))}</label><span class="small m-l-auto"><a href="${baseUrl}#/alarms/${alarm.id}/details?showCleared=true">${this.translate.instant(gettext('Alarm details'))}</a></span></li>`;
         }
-        value += `<li class="p-t-4 p-b-4 d-flex text-no-wrap"><label class="text-label-small m-b-0 m-r-8">Alarm count</label><span class="small m-l-auto"><span class="badge badge-info">${alarm.count}</span></span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Alarm count'))}</label><span class="small m-l-auto"><span class="badge badge-info">${alarm.count}</span></span></li>`;
         value += `</ul>`;
         return value;
     }
@@ -1307,7 +1262,7 @@ class EchartsOptionsService {
     getTooltipFormatter(displayOptions) {
         return params => {
             if (!Array.isArray(params) || !params[0]?.data) {
-                return '';
+                return null;
             }
             const data = params[0].data;
             const XAxisValue = data[0];
@@ -1335,7 +1290,7 @@ class EchartsOptionsService {
                     value =
                         `<div class="d-flex a-i-center separator-top text-default p-t-8 p-b-8">` +
                             `<label class="text-12 m-r-8 m-b-0">${this.datePipe.transform(minValue[0])}</label>` +
-                            `<div class="m-l-auto text-12" >${minValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2)} — ${maxValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2)}` +
+                            `<div class="m-l-auto text-12" >${minValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--'} — ${maxValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--'}` +
                             (series['datapointUnit'] ? ` ${series['datapointUnit']}` : '') +
                             `</div></div>`;
                 }
@@ -1351,7 +1306,7 @@ class EchartsOptionsService {
                     value =
                         `<div class="d-flex a-i-center separator-top text-default p-t-8 p-b-8">` +
                             `<label class="text-12 m-r-8 m-b-0">${this.datePipe.transform(seriesValue[0])}</label>` +
-                            `<div class="m-l-auto text-12" >${seriesValue[1]?.toFixed(displayOptions.numberOfDecimalPlaces ?? 2)}` +
+                            `<div class="m-l-auto text-12" >${seriesValue[1]?.toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--'}` +
                             (series['datapointUnit'] ? ` ${series['datapointUnit']}` : '') +
                             `</div></div>`;
                 }
@@ -1377,12 +1332,12 @@ class EchartsOptionsService {
             return acc;
         }, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1$1.DatePipe }, { token: YAxisService }, { token: ChartTypesService }, { token: i4.AlarmSeverityToIconPipe }, { token: i4.AlarmSeverityToLabelPipe }, { token: i5.TranslateService }, { token: i6.Router }, { token: i1$1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1.DatePipe }, { token: YAxisService }, { token: ChartTypesService }, { token: i4.AlarmSeverityToIconPipe }, { token: i4.AlarmSeverityToLabelPipe }, { token: i5.TranslateService }, { token: i6.Router }, { token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EchartsOptionsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EchartsOptionsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: YAxisService }, { type: ChartTypesService }, { type: i4.AlarmSeverityToIconPipe }, { type: i4.AlarmSeverityToLabelPipe }, { type: i5.TranslateService }, { type: i6.Router }, { type: i1$1.AppStateService }] });
+        }], ctorParameters: () => [{ type: i1.DatePipe }, { type: YAxisService }, { type: ChartTypesService }, { type: i4.AlarmSeverityToIconPipe }, { type: i4.AlarmSeverityToLabelPipe }, { type: i5.TranslateService }, { type: i6.Router }, { type: i1.AppStateService }] });
 
 class ChartRealtimeService {
     constructor(measurementRealtime, alarmRealtimeService, eventRealtimeService, echartsOptionsService) {
@@ -1632,20 +1587,20 @@ class ChartRealtimeService {
             datapointOutOfSyncCallback(datapoint);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartRealtimeService, deps: [{ token: i1$1.MeasurementRealtimeService }, { token: i1$1.AlarmRealtimeService }, { token: i1$1.EventRealtimeService }, { token: EchartsOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartRealtimeService, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlarmRealtimeService }, { token: i1.EventRealtimeService }, { token: EchartsOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartRealtimeService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartRealtimeService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.MeasurementRealtimeService }, { type: i1$1.AlarmRealtimeService }, { type: i1$1.EventRealtimeService }, { type: EchartsOptionsService }] });
+        }], ctorParameters: () => [{ type: i1.MeasurementRealtimeService }, { type: i1.AlarmRealtimeService }, { type: i1.EventRealtimeService }, { type: EchartsOptionsService }] });
 
 class ChartAlertsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ChartAlertsComponent, isStandalone: true, selector: "c8y-chart-alerts", inputs: { alerts: "alerts" }, ngImport: i0, template: "<div\n  class=\"overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24\"\n  *ngIf=\"alerts?.anyAlertExists$ | async\"\n>\n  <ng-container *ngFor=\"let alertGroup of alerts?.alertGroups\">\n    <div\n      *ngIf=\"alertGroup.value.alerts.length\"\n      class=\"alert\"\n      role=\"alert\"\n      [ngClass]=\"'alert-' + alertGroup.type\"\n    >\n      <button\n        class=\"close\"\n        type=\"button\"\n        (click)=\"\n          alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)\n        \"\n      >\n        <span aria-hidden=\"true\">\u00D7</span>\n        <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n      </button>\n      <p *ngFor=\"let alertItem of alertGroup.value.alerts\">\n        {{ alertItem.text | translate }}\n      </p>\n      <label\n        title=\"{{ 'Don\\'t show again' | translate }}\"\n        class=\"c8y-checkbox m-t-16\"\n      >\n        <input type=\"checkbox\" #dismissPermanently />\n        <span></span>\n        <span>{{ \"Don't show again\" | translate }}</span>\n      </label>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ChartAlertsComponent, isStandalone: true, selector: "c8y-chart-alerts", inputs: { alerts: "alerts" }, ngImport: i0, template: "<div\n  class=\"overlay-center-vertically d-col p-16 p-r-24 p-l-24\"\n  *ngIf=\"alerts?.anyAlertExists$ | async\"\n>\n  <ng-container *ngFor=\"let alertGroup of alerts?.alertGroups\">\n    <div\n      class=\"alert\"\n      role=\"alert\"\n      *ngIf=\"alertGroup.value.alerts.length\"\n      [ngClass]=\"'alert-' + alertGroup.type\"\n    >\n      <button\n        class=\"close\"\n        type=\"button\"\n        (click)=\"alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)\"\n      >\n        <span aria-hidden=\"true\">\u00D7</span>\n        <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n      </button>\n      <p *ngFor=\"let alertItem of alertGroup.value.alerts\">\n        {{ alertItem.text | translate }}\n      </p>\n      <label\n        class=\"c8y-checkbox m-t-16\"\n        title=\"{{ 'Don\\'t show again' | translate }}\"\n      >\n        <input\n          type=\"checkbox\"\n          #dismissPermanently\n        />\n        <span></span>\n        <span>{{ \"Don't show again\" | translate }}</span>\n      </label>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartAlertsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-chart-alerts', standalone: true, imports: [CommonModule], template: "<div\n  class=\"overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24\"\n  *ngIf=\"alerts?.anyAlertExists$ | async\"\n>\n  <ng-container *ngFor=\"let alertGroup of alerts?.alertGroups\">\n    <div\n      *ngIf=\"alertGroup.value.alerts.length\"\n      class=\"alert\"\n      role=\"alert\"\n      [ngClass]=\"'alert-' + alertGroup.type\"\n    >\n      <button\n        class=\"close\"\n        type=\"button\"\n        (click)=\"\n          alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)\n        \"\n      >\n        <span aria-hidden=\"true\">\u00D7</span>\n        <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n      </button>\n      <p *ngFor=\"let alertItem of alertGroup.value.alerts\">\n        {{ alertItem.text | translate }}\n      </p>\n      <label\n        title=\"{{ 'Don\\'t show again' | translate }}\"\n        class=\"c8y-checkbox m-t-16\"\n      >\n        <input type=\"checkbox\" #dismissPermanently />\n        <span></span>\n        <span>{{ \"Don't show again\" | translate }}</span>\n      </label>\n    </div>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'c8y-chart-alerts', standalone: true, imports: [CommonModule], template: "<div\n  class=\"overlay-center-vertically d-col p-16 p-r-24 p-l-24\"\n  *ngIf=\"alerts?.anyAlertExists$ | async\"\n>\n  <ng-container *ngFor=\"let alertGroup of alerts?.alertGroups\">\n    <div\n      class=\"alert\"\n      role=\"alert\"\n      *ngIf=\"alertGroup.value.alerts.length\"\n      [ngClass]=\"'alert-' + alertGroup.type\"\n    >\n      <button\n        class=\"close\"\n        type=\"button\"\n        (click)=\"alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)\"\n      >\n        <span aria-hidden=\"true\">\u00D7</span>\n        <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n      </button>\n      <p *ngFor=\"let alertItem of alertGroup.value.alerts\">\n        {{ alertItem.text | translate }}\n      </p>\n      <label\n        class=\"c8y-checkbox m-t-16\"\n        title=\"{{ 'Don\\'t show again' | translate }}\"\n      >\n        <input\n          type=\"checkbox\"\n          #dismissPermanently\n        />\n        <span></span>\n        <span>{{ \"Don't show again\" | translate }}</span>\n      </label>\n    </div>\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { alerts: [{
                 type: Input
             }] } });
@@ -1683,12 +1638,12 @@ class ChartEventsService {
         const result = await Promise.all(promises);
         return result.flat();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartEventsService, deps: [{ token: i1.EventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartEventsService, deps: [{ token: i1$1.EventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartEventsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartEventsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.EventService }] });
+        }], ctorParameters: () => [{ type: i1$1.EventService }] });
 
 class ChartAlarmsService {
     constructor(alarmService) {
@@ -1737,12 +1692,12 @@ class ChartAlarmsService {
         const result = await Promise.all(promises);
         return result.flat();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartAlarmsService, deps: [{ token: i1.AlarmService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartAlarmsService, deps: [{ token: i1$1.AlarmService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartAlarmsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartAlarmsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.AlarmService }] });
+        }], ctorParameters: () => [{ type: i1$1.AlarmService }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ChartsComponent {
@@ -1757,7 +1712,7 @@ class ChartsComponent {
         this.updateAlarmsAndEvents = new EventEmitter();
         this.isMarkedAreaEnabled = new EventEmitter();
         this.configChangedSubject = new BehaviorSubject(null);
-        this.measurementService = inject(CustomMeasurementService);
+        this.measurementService = inject(MeasurementService);
         this.echartsOptionsService = inject(EchartsOptionsService);
         this.chartRealtimeService = inject(ChartRealtimeService);
         this.chartEventsService = inject(ChartEventsService);
@@ -1859,7 +1814,15 @@ class ChartsComponent {
                 return;
             }
             updatedOptions.tooltip.formatter = (tooltipParams) => {
-                return this.echartsOptionsService.getTooltipFormatterForAlarmAndEvents(tooltipParams, params, this.events, this.alarms);
+                return this.echartsOptionsService.getTooltipFormatterForAlarmAndEvents(tooltipParams, params, this.events, this.alarms, {
+                    displayMarkedLine: this.config.displayMarkedLine || false,
+                    displayMarkedPoint: this.config.displayMarkedPoint || false,
+                    mergeMatchingDatapoints: this.config.mergeMatchingDatapoints || false,
+                    forceMergeDatapoints: this.config.forceMergeDatapoints || false,
+                    showLabelAndUnit: this.config.showLabelAndUnit || false,
+                    showSlider: this.config.showSlider || false,
+                    numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? 2
+                });
             };
             this.echartsInstance.setOption(updatedOptions);
         });
@@ -1873,7 +1836,7 @@ class ChartsComponent {
     }
     onChartClick(params) {
         const options = this.echartsInstance.getOption();
-        if (!this.isAlarmClick(params)) {
+        if (!this.isAlarmOrEventClick(params)) {
             this.echartsInstance.setOption({
                 tooltip: { triggerOn: 'mousemove' },
                 series: [{ markArea: { data: [] }, markLine: { data: [] } }]
@@ -1881,6 +1844,17 @@ class ChartsComponent {
             return;
         }
         const clickedAlarms = this.alarms.filter(alarm => alarm.type === params.data.itemType);
+        const clickedEvents = this.events.filter(event => event.type === params.data.itemType);
+        if (clickedEvents.length > 0) {
+            const updatedOptions = {
+                tooltip: {
+                    enterable: true,
+                    triggerOn: 'click'
+                }
+            };
+            this.echartsInstance.setOption(updatedOptions);
+            return;
+        }
         this.isMarkedAreaEnabled.emit(this.hasMarkArea(options));
         const updatedOptions = !this.hasMarkArea(options)
             ? {
@@ -1903,8 +1877,9 @@ class ChartsComponent {
                 };
         this.echartsInstance.setOption(updatedOptions);
     }
-    isAlarmClick(params) {
-        return this.alarms.some(alarm => alarm.type === params.data.itemType);
+    isAlarmOrEventClick(params) {
+        return (this.alarms.some(alarm => alarm.type === params.data.itemType) ||
+            this.events.some(event => event.type === params.data.itemType));
     }
     hasMarkArea(options) {
         return options?.series?.[0]?.markArea?.data?.length > 0;
@@ -2173,8 +2148,8 @@ class ChartsComponent {
         const datapointsWithValuesRequests = [];
         const timeRange = this.getTimeRange(60_000);
         for (const dp of activeDatapoints) {
-            const request = this.measurementService
-                .listSeries$({
+            const request = defer(() => this.measurementService.listSeries({
+                revert: true,
                 ...(customTimeRange ? customTimeRange : timeRange),
                 source: dp.__target?.id || '',
                 series: [`${dp.fragment}.${dp.series}`],
@@ -2183,14 +2158,13 @@ class ChartsComponent {
                         aggregationType: customTimeRange ? aggregationType.HOURLY : this.config.aggregation
                     }
                     : {})
-            })
-                .pipe(map(res => {
+            })).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) {
+                    if (this.alerts && !customTimeRange) {
                         this.alerts.clear();
                     }
                 }
@@ -2251,11 +2225,10 @@ class ChartsComponent {
             EventRealtimeService,
             ChartTypesService,
             EchartsOptionsService,
-            CustomMeasurementService,
             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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$1.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\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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartsComponent, decorators: [{
             type: Component,
@@ -2267,7 +2240,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         EventRealtimeService,
                         ChartTypesService,
                         EchartsOptionsService,
-                        CustomMeasurementService,
                         YAxisService,
                         AlarmSeverityToIconPipe,
                         AlarmSeverityToLabelPipe
@@ -2299,6 +2271,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 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.14", ngImport: i0, type: ChartHelpersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartHelpersService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartHelpersService, decorators: [{
+            type: Injectable
+        }] });
+
 var DATE_SELECTION_EXTENDED;
 (function (DATE_SELECTION_EXTENDED) {
     DATE_SELECTION_EXTENDED["CONFIG"] = "config";
@@ -2308,6 +2306,19 @@ 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`'),
@@ -2319,5 +2330,5 @@ const SEVERITY_LABELS = {
  * Generated bundle index. Do not edit.
  */
 
-export { ChartAlarmsService, ChartEventsService, ChartsComponent, DATE_SELECTION_EXTENDED, ICONS_MAP, REALTIME_TEXTS, SEVERITY_LABELS };
+export { ChartAlarmsService, ChartEventsService, ChartHelpersService, ChartsComponent, DATE_SELECTION_EXTENDED, ICONS_MAP, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, REALTIME_TEXTS, SEVERITY_LABELS };
 //# sourceMappingURL=c8y-ngx-components-echart.mjs.map