@c8y/ngx-components 1023.14.157 → 1023.14.160

package/echart/index.d.ts

@@ -306,15 +306,17 @@ declare class ChartsComponent implements OnChanges, OnInit, OnDestroy {
     loadMoreData(): void;
     debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void;
     /**
-     * Toggles the visibility of a series in the chart based on the provided datapoint.
-     * Uses explicit legendSelect/legendUnSelect based on __active state.
+     * Toggles datapoint series visibility via legendSelect/legendUnSelect.
+     * Also syncs mark-point (icon) visibility: hidden when the datapoint is hidden
+     * (icon has nothing to attach to), re-shown only if the alarm/event is still visible.
+     * Mark-lines (vertical lines) are left untouched — they stay visible regardless.
      * @param datapoint - The datapoint to toggle visibility for.
      */
     toggleDatapointSeriesVisibility(datapoint: DatapointsGraphKPIDetails): void;
     /**
-     * Toggles the visibility of alarm/event series in the chart.
-     * Uses explicit legendSelect/legendUnSelect based on __hidden state.
-     * Targets specific device's series using type + deviceId.
+     * Toggles alarm/event series visibility via legendSelect/legendUnSelect.
+     * Matches all mark-line and mark-point series for the alarm type across every axis,
+     * because getAlarmOrEventSeries creates one series per datapoint axis.
      * @param alarmOrEvent - The alarm or event to toggle visibility for.
      */
     toggleAlarmEventSeriesVisibility(alarmOrEvent: AlarmOrEventExtended): void;

package/echart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sources":["../../echart/models/datapoints-graph-widget.model.ts","../../echart/models/chart.model.ts","../../echart/models/svg-icons.model.ts","../../echart/charts.component.ts","../../echart/services/chart-alarms.service.ts","../../echart/services/chart-events.service.ts","../../echart/services/chart-helpers.service.ts","../../echart/select-aggregated-datapoint/select-aggregated-datapoint.component.ts"],"sourcesContent":[null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;AAoBM;;;;AAKA;AACJ;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AASA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;;;;;;;;;;AAWI;;;;;;;;;;AAUJ;;;AAII;;AAEJ;AACA;;AAGI;;;AAIN;;AAEG;;AAGG;AAIN;AACE;AACA;AACD;AAED;AACM;;AAEL;AAED;;;;AAIM;;;;;;;AAQL;AAED;;;;;AAUE;;;;;AAGD;;AAGC;;AAEA;;AAEE;;AAEF;;;AACD;;;;;;;AAQC;AACA;AACD;AAEK;AACA;AAEA;AAEA;AAEN;;;;AAKA;;;;;;;;;;;;;AAcM;AACA;AAEA;;;;AAKA;;;;;;;;;;;;AAaL;AAED;;;;;;;;AAUE;AACA;AACD;;ACtND;;;;;;AAMG;AACH;AACE;;;;AAIA;;;AACD;;;AAIA;;;AAIA;AAEK;AACA;AACJ;AACE;AACD;AACF;;AAGC;AACA;AACD;AAED;AACE;AACA;AACA;AACD;;AC3CD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;;;;;;;;;;;AC2DA;AA4BE;;AAEA;;;;;;;;AAQA;;;;;;AAMK;AACK;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEV;;;;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AA4DA;;;;;AAoKuB;;;AAA4B;AAiDnD;AAOA;AAIA;AAwBA;AA6BA;AAWA;;;;AAIG;AACH;AAcA;;;;;AAKG;AACH;AAgCA;AAeA;AA0BA;;AA8DA;;;AAsNA;AAiEA;AAsDA;AAmBA;AAWA;AAYA;;;AA6BD;;ACjiCD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAqCP;;AC/CD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAuBP;;AChCD;AAEE;;;;AAIG;;;;;;;;;;;AAcH;AAcA;;;AAGD;;ACtBD;;AAqBW;AACC;AAEV;;AAGA;;;AAiBA;;;AAgBD;;;"}
+{"version":3,"file":"index.d.ts","sources":["../../echart/models/datapoints-graph-widget.model.ts","../../echart/models/chart.model.ts","../../echart/models/svg-icons.model.ts","../../echart/charts.component.ts","../../echart/services/chart-alarms.service.ts","../../echart/services/chart-events.service.ts","../../echart/services/chart-helpers.service.ts","../../echart/select-aggregated-datapoint/select-aggregated-datapoint.component.ts"],"sourcesContent":[null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;AAoBM;;;;AAKA;AACJ;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AASA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;;;;;;;;;;AAWI;;;;;;;;;;AAUJ;;;AAII;;AAEJ;AACA;;AAGI;;;AAIN;;AAEG;;AAGG;AAIN;AACE;AACA;AACD;AAED;AACM;;AAEL;AAED;;;;AAIM;;;;;;;AAQL;AAED;;;;;AAUE;;;;;AAGD;;AAGC;;AAEA;;AAEE;;AAEF;;;AACD;;;;;;;AAQC;AACA;AACD;AAEK;AACA;AAEA;AAEA;AAEN;;;;AAKA;;;;;;;;;;;;;AAcM;AACA;AAEA;;;;AAKA;;;;;;;;;;;;AAaL;AAED;;;;;;;;AAUE;AACA;AACD;;ACtND;;;;;;AAMG;AACH;AACE;;;;AAIA;;;AACD;;;AAIA;;;AAIA;AAEK;AACA;AACJ;AACE;AACD;AACF;;AAGC;AACA;AACD;AAED;AACE;AACA;AACA;AACD;;AC3CD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;;;;;;;;;;;AC2DA;AA4BE;;AAEA;;;;;;;;AAQA;;;;;;AAMK;AACK;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEV;;;;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AA4DA;;;;;AAoKuB;;;AAA4B;AAiDnD;AAOA;AAIA;AAwBA;AA6BA;AAWA;;;;;;AAMG;AACH;AAoCA;;;;;AAKG;AACH;AA4BA;AAeA;AA0BA;;AA8DA;;;AA4OA;AAiEA;AAsDA;AAmBA;AAWA;AAYA;;;AA6BD;;AC3kCD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAqCP;;AC/CD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAuBP;;AChCD;AAEE;;;;AAIG;;;;;;;;;;;AAcH;AAcA;;;AAGD;;ACtBD;;AAqBW;AACC;AAEV;;AAGA;;;AAiBA;;;AAgBD;;;"}

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

@@ -565,8 +565,8 @@ class EchartsOptionsService {
                 show: false
             },
             xAxis: {
-                min: Object.keys(aggregatedDatapoint.values || {}).length > 0
-                    ? Math.min(Object.keys(aggregatedDatapoint.values)
+                min: Object.keys(aggregatedDatapoint?.values || {}).length > 0
+                    ? Math.min(Object.keys(aggregatedDatapoint?.values || {})
                         .map(date => new Date(date).valueOf())
                         .sort((a, b) => a - b)[0], new Date(timeRange.dateFrom).valueOf())
                     : new Date(timeRange.dateFrom).valueOf() - intervalInMs,
@@ -662,6 +662,9 @@ class EchartsOptionsService {
         return intervalInMs;
     }
     getAggregatedSeries(aggregatedDatapoint, displayOptions) {
+        if (!aggregatedDatapoint) {
+            return { type: 'line', data: [], id: 'aggregated-empty' };
+        }
         const series = [];
         const renderType = aggregatedDatapoint?.renderType || 'min';
         const idx = 0;
@@ -1116,6 +1119,25 @@ class EchartsOptionsService {
             eventSeries = [...eventSeries, ...newEventSeries];
             alarmSeries = [...alarmSeries, ...newAlarmSeries];
         });
+        // markLine series are x-axis-only vertical lines: they render identically regardless of
+        // yAxisIndex. getAlarmOrEventSeries creates one per datapoint (as a side-effect of always
+        // pairing markLine with markPoint), so with N datapoints there are N redundant copies.
+        // Deduplicate to one per alarm/event type before the selectedDatapoint deduplication below.
+        const deduplicateMarkLines = (seriesList) => {
+            const seenTypes = new Set();
+            return seriesList.filter(s => {
+                const id = s.id;
+                if (!id.endsWith('-markLine')) {
+                    return true;
+                }
+                const [type] = id.split('/');
+                const isFirstOfType = !seenTypes.has(type);
+                seenTypes.add(type);
+                return isFirstOfType;
+            });
+        };
+        alarmSeries = deduplicateMarkLines(alarmSeries);
+        eventSeries = deduplicateMarkLines(eventSeries);
         const deduplicateFilterCallback = (obj1, i, arr) => {
             const duplicates = arr.filter(obj2 => obj1['id'] === obj2['id'] && i !== arr.indexOf(obj2));
             if (duplicates.length > 0) {
@@ -1530,7 +1552,7 @@ class ChartRealtimeService {
         this.activeDatapoints = [];
         this.outOfSyncDatapoints = new Set();
     }
-    startRealtime(echartsInstance, datapoints, timeRange, datapointOutOfSyncCallback, datapointBackInSyncCallback, timeRangeChangedCallback, alarmOrEventConfig = [], displayOptions, alarms, events) {
+    startRealtime(echartsInstance, datapoints, timeRange, datapointOutOfSyncCallback, datapointBackInSyncCallback, timeRangeChangedCallback, alarmOrEventConfig = [], displayOptions, alarms, events, alarmOrEventReceivedCallback) {
         this.echartsInstance = echartsInstance;
         this.activeDatapoints = datapoints;
         this.currentTimeRange = {
@@ -1631,6 +1653,7 @@ class ChartRealtimeService {
                 alarmOrEvent['selectedDatapoint'] = foundAlarmOrEvent.selectedDatapoint;
                 const key = String(alarmOrEvent.id || alarmOrEvent.creationTime);
                 this.pendingAlarmsOrEvents.set(key, alarmOrEvent);
+                alarmOrEventReceivedCallback?.(alarmOrEvent);
             }
             return null;
         }))
@@ -1770,15 +1793,16 @@ class ChartRealtimeService {
                     allDataSeries.push(...newEventSeries);
                 }
                 else if (isAlarm(alarmOrEvent)) {
-                    // For alarms, remove existing series for this alarm type + device before adding.
-                    // This ensures alarm status changes (e.g., ACTIVE → CLEARED) are reflected.
-                    // Series ID format: ${alarmType}/${deviceId}-markPoint/markLine
+                    // For alarms, remove ALL existing series for this alarm type before adding the updated
+                    // series. The markLine series is keyed to whichever datapoint was first in the initial
+                    // render loop — not necessarily the alarm source device. Filtering by the alarm's
+                    // source device ID alone would miss it, leaving a stale markLine on the chart.
                     const alarm = alarmOrEvent;
                     const alarmType = alarm.type;
-                    const datapointTargetId = datapoint.__target?.id;
                     allDataSeries = allDataSeries.filter((series) => {
                         const seriesId = series['id'];
-                        return !seriesId?.startsWith(`${alarmType}/${datapointTargetId}`);
+                        return !(seriesId?.startsWith(`${alarmType}/`) &&
+                            (seriesId?.endsWith('-markLine') || seriesId?.endsWith('-markPoint')));
                     });
                     // For alarms, pass null as id - we want one series per alarm type/device.
                     // Series ID will be: alarmType/deviceId-markPoint (no unique suffix).
@@ -2366,24 +2390,46 @@ class ChartsComponent {
         };
     }
     /**
-     * Toggles the visibility of a series in the chart based on the provided datapoint.
-     * Uses explicit legendSelect/legendUnSelect based on __active state.
+     * Toggles datapoint series visibility via legendSelect/legendUnSelect.
+     * Also syncs mark-point (icon) visibility: hidden when the datapoint is hidden
+     * (icon has nothing to attach to), re-shown only if the alarm/event is still visible.
+     * Mark-lines (vertical lines) are left untouched — they stay visible regardless.
      * @param datapoint - The datapoint to toggle visibility for.
      */
     toggleDatapointSeriesVisibility(datapoint) {
-        const series = this.echartsInstance.getOption().series;
-        const seriesToUpdate = series.find(s => s.datapointId === `${datapoint.__target?.id}${datapoint.fragment}${datapoint.series}`);
+        const allSeries = this.echartsInstance.getOption().series;
+        const seriesToUpdate = allSeries.find(s => s.datapointId === `${datapoint.__target?.id}${datapoint.fragment}${datapoint.series}`);
         if (seriesToUpdate) {
             this.echartsInstance.dispatchAction({
                 type: datapoint.__active ? 'legendSelect' : 'legendUnSelect',
                 name: seriesToUpdate.name
             });
         }
+        const deviceId = datapoint.__target?.id;
+        const isHiding = !datapoint.__active;
+        const visibleTypes = new Set(this.config.alarmsEventsConfigs
+            ?.filter(ae => !ae.__hidden && ae.__active)
+            .map(ae => ae.filters.type));
+        allSeries
+            .filter(s => typeof s.name === 'string' && s.name.endsWith(`/${deviceId}-markPoint`))
+            .forEach(s => {
+            const name = s.name;
+            if (isHiding) {
+                this.echartsInstance.dispatchAction({ type: 'legendUnSelect', name });
+            }
+            else {
+                // Re-show only if the alarm/event is itself still visible
+                const type = name.split('/')[0];
+                if (visibleTypes?.has(type)) {
+                    this.echartsInstance.dispatchAction({ type: 'legendSelect', name });
+                }
+            }
+        });
     }
     /**
-     * Toggles the visibility of alarm/event series in the chart.
-     * Uses explicit legendSelect/legendUnSelect based on __hidden state.
-     * Targets specific device's series using type + deviceId.
+     * Toggles alarm/event series visibility via legendSelect/legendUnSelect.
+     * Matches all mark-line and mark-point series for the alarm type across every axis,
+     * because getAlarmOrEventSeries creates one series per datapoint axis.
      * @param alarmOrEvent - The alarm or event to toggle visibility for.
      */
     toggleAlarmEventSeriesVisibility(alarmOrEvent) {
@@ -2396,13 +2442,9 @@ class ChartsComponent {
             return;
         }
         const type = alarmOrEvent.filters.type;
-        const deviceId = alarmOrEvent.__target?.id;
         const actionType = alarmOrEvent.__hidden ? 'legendUnSelect' : 'legendSelect';
-        // Series names are: ${type}/${deviceId}-markPoint and ${type}/${deviceId}-markLine
-        const markPointName = `${type}/${deviceId}-markPoint`;
-        const markLineName = `${type}/${deviceId}-markLine`;
-        // Find series matching this specific alarm type + device
-        const matchingSeries = allSeries.filter(s => s.name === markPointName || s.name === markLineName);
+        const matchingSeries = allSeries.filter(s => s.name?.startsWith(`${type}/`) &&
+            (s.name?.endsWith('-markLine') || s.name?.endsWith('-markPoint')));
         matchingSeries.forEach(series => {
             this.echartsInstance.dispatchAction({
                 type: actionType,
@@ -2510,7 +2552,27 @@ class ChartsComponent {
                 showLabelAndUnit: this.config.showLabelAndUnit || false,
                 showSlider: this.config.showSlider || false,
                 showOnlyAlarmsOrEvents
-            }, this.alarms, this.events);
+            }, this.alarms, this.events, 
+            // Keep this.alarms/events in sync with realtime updates so that
+            // isAlarmOrEventClick() and the tooltip formatter have current data.
+            alarmOrEvent => {
+                if ('severity' in alarmOrEvent) {
+                    const alarm = alarmOrEvent;
+                    const existingIdx = this.alarms.findIndex(a => a.id === alarm.id);
+                    if (existingIdx !== -1) {
+                        this.alarms[existingIdx] = alarm;
+                    }
+                    else {
+                        this.alarms.push(alarm);
+                    }
+                }
+                else {
+                    const event = alarmOrEvent;
+                    if (!this.events.some(e => e.id === event.id)) {
+                        this.events.push(event);
+                    }
+                }
+            });
         }
     }
     /*
@@ -2568,10 +2630,12 @@ class ChartsComponent {
             });
             const extendedDateFrom = new Date(new Date(timeRange.dateFrom).valueOf() - extendedIntervalMs).toISOString();
             this.widgetTimeContextDateRangeService.updateInitialTimeRange(timeRange);
-            const aggregatedDatapoints = await lastValueFrom(this.fetchAggregatedSeriesForSelectedDatapoint$({
-                dateFrom: extendedDateFrom,
-                dateTo: timeRange.dateTo
-            }, this.config.aggregatedDatapoint));
+            const aggregatedDatapoint = this.config.showSlider
+                ? await lastValueFrom(this.fetchAggregatedSeriesForSelectedDatapoint$({
+                    dateFrom: extendedDateFrom,
+                    dateTo: timeRange.dateTo
+                }, this.config.aggregatedDatapoint))
+                : undefined;
             return this.echartsOptionsService.getChartOptions(datapointsWithValues, timeRange, {
                 YAxis: this.config.yAxisSplitLines || false,
                 XAxis: this.config.xAxisSplitLines || false
@@ -2586,7 +2650,7 @@ class ChartsComponent {
                 numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? 2,
                 axisColor: this.axisColor,
                 sliderPositionMode
-            }, undefined, aggregatedDatapoints);
+            }, undefined, aggregatedDatapoint);
         }
         else {
             const cachedTimeRange = this.widgetTimeContextDateRangeService.initialTimeRange();
@@ -2596,10 +2660,12 @@ class ChartsComponent {
                 dateTo: cachedTimeRange.dateTo
             });
             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));
+            const aggregatedDatapoint = this.config.showSlider
+                ? await lastValueFrom(this.fetchAggregatedSeriesForSelectedDatapoint$({
+                    dateFrom: initialExtendedDateFrom,
+                    dateTo: new Date(this.widgetTimeContextDateRangeService.initialTimeRange().dateTo).toISOString()
+                }, this.config.aggregatedDatapoint))
+                : undefined;
             // we need to update the initial time range by adding the refresh interval to the dateFrom and dateTo
             const initialTimeRange = this.widgetTimeContextDateRangeService.initialTimeRange();
             // needed due to a race condition where the time range is updated before the chart options are fetched...
@@ -2626,7 +2692,7 @@ class ChartsComponent {
                 numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? 2,
                 axisColor: this.axisColor,
                 sliderPositionMode
-            }, timeRange, aggregatedDatapoints, true);
+            }, timeRange, aggregatedDatapoint, true);
         }
     }
     fetchSeriesForDatapoints$() {