@c8y/ngx-components 1023.66.4 → 1023.67.0

package/echart/index.d.ts

@@ -299,15 +299,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/chart-alerts/chart-alerts.component.ts","../../echart/select-aggregated-datapoint/select-aggregated-datapoint.component.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBM;;;;AAKA;AACJ;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;AAOA;;AAEA;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;;;;;;;;;;;AAYL;AAED;;;;;;;;AAUE;AACA;AACD;;AChND;;;;;;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;;;;;;;;;;;AC0DA;AA4BE;;AAEA;;;;;;;;AAQA;;;;;;AAMK;AACK;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEV;;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AAsDA;;;;;AAoKuB;;;AAA4B;AAiDnD;AAOA;AAIA;AAwBA;AA6BA;AAWA;;;;AAIG;AACH;AAcA;;;;;AAKG;AACH;AAgCA;AAeA;AA0BA;;AA8DA;;;AAiNA;AAiEA;AAsDA;AAkBA;AAWA;AAYA;;;AA6BD;;AC3gCD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAqCP;;AC/CD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAuBP;;AChCD;AAEE;;;;AAIG;;;;;;;;;;;AAcH;AAcA;;;AAGD;;AC9BD;;AAQmC;AAEjC;;;;AAQD;;ACVD;;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/chart-alerts/chart-alerts.component.ts","../../echart/select-aggregated-datapoint/select-aggregated-datapoint.component.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBM;;;;AAKA;AACJ;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;AAOA;;AAEA;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;;;;;;;;;;;AAYL;AAED;;;;;;;;AAUE;AACA;AACD;;AChND;;;;;;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;;;;;;;;;;;AC0DA;AA4BE;;AAEA;;;;;;;;AAQA;;;;;;AAMK;AACK;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEV;;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AAsDA;;;;;AAoKuB;;;AAA4B;AAiDnD;AAOA;AAIA;AAwBA;AA6BA;AAWA;;;;;;AAMG;AACH;AAoCA;;;;;AAKG;AACH;AA4BA;AAeA;AA0BA;;AA8DA;;;AAmOA;AAiEA;AAsDA;AAkBA;AAWA;AAYA;;;AA6BD;;ACjjCD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAqCP;;AC/CD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAuBP;;AChCD;AAEE;;;;AAIG;;;;;;;;;;;AAcH;AAcA;;;AAGD;;AC9BD;;AAQmC;AAEjC;;;;AAQD;;ACVD;;AAqBW;AACC;AAEV;;AAGA;;;AAiBA;;;AAgBD;;;"}

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

@@ -1110,6 +1110,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) {
@@ -1525,7 +1544,7 @@ class ChartRealtimeService {
         this.currentEvents = [];
         this.activeDatapoints = [];
     }
-    startRealtime(echartsInstance, datapoints, timeRange, datapointOutOfSyncCallback, timeRangeChangedCallback, alarmOrEventConfig = [], displayOptions, alarms, events) {
+    startRealtime(echartsInstance, datapoints, timeRange, datapointOutOfSyncCallback, timeRangeChangedCallback, alarmOrEventConfig = [], displayOptions, alarms, events, alarmOrEventReceivedCallback) {
         this.echartsInstance = echartsInstance;
         this.activeDatapoints = datapoints;
         this.currentTimeRange = {
@@ -1624,6 +1643,7 @@ class ChartRealtimeService {
                 alarmOrEvent['selectedDatapoint'] = foundAlarmOrEvent.selectedDatapoint;
                 const key = String(alarmOrEvent.id || alarmOrEvent.creationTime);
                 this.pendingAlarmsOrEvents.set(key, alarmOrEvent);
+                alarmOrEventReceivedCallback?.(alarmOrEvent);
             }
             return null;
         }))
@@ -1763,15 +1783,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).
@@ -2342,24 +2363,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) {
@@ -2372,13 +2415,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,
@@ -2486,7 +2525,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);
+                    }
+                }
+            });
         }
     }
     /*