@c8y/ngx-components 1022.16.2 → 1022.26.1

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

@@ -368,7 +368,7 @@ const ICONS_MAP = {
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const INDEX_HTML = '/index.html';
 class EchartsOptionsService {
-    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router) {
+    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router, appState) {
         this.datePipe = datePipe;
         this.yAxisService = yAxisService;
         this.chartTypesService = chartTypesService;
@@ -376,6 +376,7 @@ class EchartsOptionsService {
         this.severityLabelPipe = severityLabelPipe;
         this.translate = translate;
         this.router = router;
+        this.appState = appState;
         this.TOOLTIP_WIDTH = 300;
     }
     getChartOptions(datapointsWithValues, timeRange, showSplitLines, events, alarms, displayOptions, selectedTimeRange, aggregatedDatapoints, sliderZoomUsed = false) {
@@ -389,6 +390,8 @@ class EchartsOptionsService {
         const gridLeft = leftAxis.length ? leftAxis.length * this.yAxisService.Y_AXIS_OFFSET : 32;
         const rightAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'right') : [];
         const gridRight = rightAxis.length ? rightAxis.length * this.yAxisService.Y_AXIS_OFFSET : 16;
+        const currentUser = this.appState.currentUser?.getValue();
+        const selectedLanguage = currentUser?.customProperties?.['c8y_UserPreference-language'] || 'en';
         let intervalInMs = this.calculateExtendedIntervalInMs(selectedTimeRange?.interval || timeRange.interval || 'hours', selectedTimeRange || timeRange);
         if (sliderZoomUsed) {
             intervalInMs = this.calculateExtendedIntervalInMs(timeRange.interval || 'hours', timeRange);
@@ -482,7 +485,36 @@ class EchartsOptionsService {
                 axisLabel: {
                     hideOverlap: true,
                     borderWidth: 2, // as there is no margin for labels spacing, transparent border is a workaround
-                    borderColor: 'transparent'
+                    borderColor: 'transparent',
+                    formatter: value => {
+                        const date = new Date(value);
+                        const locale = selectedLanguage.replace('_', '-');
+                        const isStartOfMinute = date.getSeconds() === 0;
+                        const isStartOfDay = date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0;
+                        const isStartOfYear = date.getMonth() === 0 && date.getDate() === 1 && isStartOfDay;
+                        let options;
+                        // Case 1: Tick is start of year
+                        // Shows only the year, e.g. "2025"
+                        if (isStartOfYear) {
+                            options = { year: 'numeric' };
+                        }
+                        // Case 2: Tick is start of day
+                        // Shows abbreviated month and day, e.g. "Jan 13"
+                        else if (isStartOfDay) {
+                            options = { month: 'short', day: 'numeric' };
+                        }
+                        // Case 3: Tick is start of minute
+                        // Shows hour and minute, e.g. "14:30" (format depends on locale)
+                        else if (isStartOfMinute) {
+                            options = { hour: 'numeric', minute: '2-digit' };
+                        }
+                        // Case 4: Interval is 1 minute or less
+                        // Shows seconds, e.g. ":45"
+                        else {
+                            options = { second: '2-digit' };
+                        }
+                        return new Intl.DateTimeFormat(locale, options).format(date);
+                    }
                 },
                 splitLine: {
                     show: showSplitLines.XAxis,
@@ -666,7 +698,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 '';
         }
@@ -675,7 +707,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);
@@ -864,17 +896,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
@@ -891,7 +923,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 '';
@@ -899,7 +931,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>`);
     }
@@ -909,14 +941,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>`);
     }
@@ -927,9 +959,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;
     }
@@ -940,19 +972,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;
     }
@@ -1275,7 +1307,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];
@@ -1303,7 +1335,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>`;
                 }
@@ -1319,7 +1351,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>`;
                 }
@@ -1345,12 +1377,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 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    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.ɵ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 }] });
+        }], 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 }] });
 
 class ChartRealtimeService {
     constructor(measurementRealtime, alarmRealtimeService, eventRealtimeService, echartsOptionsService) {
@@ -1362,6 +1394,7 @@ class ChartRealtimeService {
         this.MIN_REALTIME_TIMEOUT = 250;
         this.MAX_REALTIME_TIMEOUT = 5_000;
         this.lastMeasurements = new Map();
+        this.pendingAlarmsOrEvents = new Map();
         this.currentAlarms = [];
         this.currentEvents = [];
     }
@@ -1403,7 +1436,7 @@ class ChartRealtimeService {
                 dateFrom: this.currentTimeRange.dateFrom.toISOString(),
                 dateTo: this.currentTimeRange.dateTo.toISOString()
             });
-            interval(this.INTERVAL)
+            this.realtimeIntervalSubscription = interval(this.INTERVAL)
                 .pipe(tap(() => {
                 const windowSize = this.currentTimeRange.dateTo.valueOf() - this.currentTimeRange.dateFrom.valueOf();
                 const now = Date.now();
@@ -1438,7 +1471,16 @@ class ChartRealtimeService {
         this.realtimeSubscriptionMeasurements = measurement$
             .pipe(buffer(bufferReset$))
             .subscribe(measurements => {
-            this.updateChartInstance(measurements, null, displayOptions, datapointOutOfSyncCallback);
+            const alarmsOrEvents = Array.from(this.pendingAlarmsOrEvents.values());
+            this.pendingAlarmsOrEvents.clear();
+            if (alarmsOrEvents.length) {
+                alarmsOrEvents.forEach(alarmOrEvent => {
+                    this.updateChartInstance(measurements, alarmOrEvent, displayOptions, datapointOutOfSyncCallback);
+                });
+            }
+            else {
+                this.updateChartInstance(measurements, null, displayOptions, datapointOutOfSyncCallback);
+            }
             // Store the last measurements
             measurements.forEach(measurement => {
                 this.lastMeasurements.set(measurement.datapoint.fragment, measurement);
@@ -1446,27 +1488,21 @@ class ChartRealtimeService {
         });
         this.realtimeSubscriptionAlarmsEvents = allAlarmsAndEvents$
             .pipe(map(alarmOrEvent => {
-            const foundAlarmOrEvent = activeAlarmsOrEvents.find(aOrE => {
-                return aOrE.filters.type === alarmOrEvent.type;
-            });
+            const foundAlarmOrEvent = activeAlarmsOrEvents.find(aOrE => aOrE.filters.type === alarmOrEvent.type);
             if (foundAlarmOrEvent) {
                 alarmOrEvent['color'] = foundAlarmOrEvent.color;
                 alarmOrEvent['selectedDatapoint'] = foundAlarmOrEvent.selectedDatapoint;
+                const key = String(alarmOrEvent.id || alarmOrEvent.creationTime);
+                this.pendingAlarmsOrEvents.set(key, alarmOrEvent);
             }
-            if (foundAlarmOrEvent) {
-                const fragment = alarmOrEvent['selectedDatapoint']?.fragment;
-                if (fragment && this.lastMeasurements.has(fragment)) {
-                    const lastMeasurement = this.lastMeasurements.get(fragment);
-                    this.updateChartInstance([lastMeasurement], alarmOrEvent, displayOptions, datapointOutOfSyncCallback);
-                }
-            }
-            return foundAlarmOrEvent ? alarmOrEvent : null;
+            return null;
         }))
             .subscribe();
     }
     stopRealtime() {
         this.realtimeSubscriptionMeasurements?.unsubscribe();
         this.realtimeSubscriptionAlarmsEvents?.unsubscribe();
+        this.realtimeIntervalSubscription?.unsubscribe();
     }
     /**
      * Updates the chart with the current alarms and events data. Only used when no active datapoints are selected.
@@ -1605,11 +1641,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 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$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" }] }); }
 }
 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
             }] } });
@@ -1823,7 +1859,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);
         });
@@ -1837,7 +1881,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: [] } }]
@@ -1845,6 +1889,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)
             ? {
@@ -1867,8 +1922,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;
@@ -2154,7 +2210,7 @@ class ChartsComponent {
                     values[new Date(this.config.dateFrom).toISOString()] = [{ min: null, max: null }];
                 }
                 else {
-                    if (this.alerts) {
+                    if (this.alerts && !customTimeRange) {
                         this.alerts.clear();
                     }
                 }
@@ -2263,6 +2319,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";
@@ -2272,6 +2354,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`'),
@@ -2283,5 +2378,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