@c8y/ngx-components 1023.48.2 → 1023.50.2

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

@@ -737,8 +737,8 @@ class EchartsOptionsService {
             }, []);
             // Construct series with markPoint
             const seriesWithMarkPoint = {
-                id: `${type}/${dp.__target?.id}+${id ? id : ''}-markPoint`,
-                name: `${type}-markPoint`,
+                id: `${type}/${dp.__target?.id}${id ? '+' + id : ''}-markPoint`,
+                name: `${type}/${dp.__target?.id}-markPoint`,
                 typeOfSeries: itemType,
                 data: mainData,
                 isDpTemplateSelected,
@@ -755,8 +755,8 @@ class EchartsOptionsService {
             const markLineData = this.createMarkLine(itemsOfType, itemType);
             // Construct series with markLine
             const seriesWithMarkLine = {
-                id: `${type}/${dp.__target?.id}+${id ? id : ''}-markLine`,
-                name: `${type}-markLine`,
+                id: `${type}/${dp.__target?.id}${id ? '+' + id : ''}-markLine`,
+                name: `${type}/${dp.__target?.id}-markLine`,
                 typeOfSeries: itemType,
                 isDpTemplateSelected,
                 data: mainData,
@@ -1518,9 +1518,11 @@ class ChartRealtimeService {
         this.pendingAlarmsOrEvents = new Map();
         this.currentAlarms = [];
         this.currentEvents = [];
+        this.activeDatapoints = [];
     }
     startRealtime(echartsInstance, datapoints, timeRange, datapointOutOfSyncCallback, timeRangeChangedCallback, alarmOrEventConfig = [], displayOptions, alarms, events) {
         this.echartsInstance = echartsInstance;
+        this.activeDatapoints = datapoints;
         this.currentTimeRange = {
             dateFrom: new Date(timeRange.dateFrom),
             dateTo: new Date(timeRange.dateTo)
@@ -1609,7 +1611,9 @@ class ChartRealtimeService {
         });
         this.realtimeSubscriptionAlarmsEvents = allAlarmsAndEvents$
             .pipe(map(alarmOrEvent => {
-            const foundAlarmOrEvent = activeAlarmsOrEvents.find(aOrE => aOrE.filters.type === alarmOrEvent.type);
+            // Match by both type AND device source
+            const foundAlarmOrEvent = activeAlarmsOrEvents.find(aOrE => aOrE.filters.type === alarmOrEvent.type &&
+                aOrE.__target?.id === alarmOrEvent.source?.id);
             if (foundAlarmOrEvent) {
                 alarmOrEvent['color'] = foundAlarmOrEvent.color;
                 alarmOrEvent['selectedDatapoint'] = foundAlarmOrEvent.selectedDatapoint;
@@ -1677,6 +1681,7 @@ class ChartRealtimeService {
             seriesDataToUpdate.get(datapoint)?.push(measurement);
         });
         let allDataSeries = this.echartsInstance?.getOption()['series'];
+        // Process measurements for each datapoint
         seriesDataToUpdate.forEach((measurements, datapoint) => {
             const newValues = measurements.map(m => [
                 m.time,
@@ -1690,46 +1695,80 @@ class ChartRealtimeService {
             const seriesDataToUpdate = seriesMatchingDatapoint['data'];
             seriesDataToUpdate.push(...newValues);
             seriesMatchingDatapoint['data'] = this.removeValuesBeforeTimeRange(seriesMatchingDatapoint);
-            if (alarmOrEvent) {
+            this.checkForValuesAfterTimeRange(seriesMatchingDatapoint['data'], datapoint, datapointOutOfSyncCallback);
+        });
+        // Process alarm/event OUTSIDE the measurement loop.
+        // Previously this was inside seriesDataToUpdate.forEach(), which meant alarms/events
+        // were only processed when measurements existed for that datapoint. This caused
+        // alarms/events to not appear on the chart when no measurements arrived in the interval.
+        if (alarmOrEvent) {
+            // The alarm config's selectedDatapoint is a partial object { target, fragment, series },
+            // not a full DatapointsGraphKPIDetails. We need to find the matching full datapoint.
+            const selectedDp = alarmOrEvent['selectedDatapoint'];
+            // Find the correct datapoint to position this alarm/event on the chart:
+            // 1. Use selectedDatapoint from alarm config (user-configured)
+            // 2. Match by alarm's source device ID
+            // 3. Fall back to first datapoint
+            let datapoint = selectedDp
+                ? this.activeDatapoints.find(dp => dp.__target?.id === selectedDp.target &&
+                    dp.fragment === selectedDp.fragment &&
+                    dp.series === selectedDp.series)
+                : undefined;
+            if (!datapoint && alarmOrEvent['source']?.id) {
+                datapoint = this.activeDatapoints.find(dp => dp.__target?.id === alarmOrEvent['source'].id);
+            }
+            if (!datapoint) {
+                datapoint = this.activeDatapoints[0];
+            }
+            if (datapoint) {
+                const datapointId = datapoint.__target?.id + datapoint.fragment + datapoint.series;
+                const matchingSeries = allDataSeries.find(s => s['datapointId'] === datapointId);
+                const seriesData = matchingSeries ? matchingSeries['data'] : [];
+                // Convert ECharts series data format to the format expected by getAlarmOrEventSeries.
+                // ECharts: [[timestamp, value], ...] → Expected: { [timestamp]: [{min, max}] }
+                const values = {};
+                seriesData.forEach(([timestamp, value]) => {
+                    values[timestamp] = [{ min: value, max: value }];
+                });
                 const renderType = datapoint.renderType || 'min';
                 const dp = {
                     ...datapoint,
-                    values: seriesMatchingDatapoint['data']
+                    values
                 };
                 if (isEvent(alarmOrEvent)) {
-                    // if event series with the same id already exists, return
-                    const eventExists = allDataSeries.some(series => series['data'].some(data => data[0] === alarmOrEvent.creationTime));
+                    // Check if event already exists on chart to avoid duplicates
+                    const eventExists = allDataSeries.some(series => series['data']?.some(data => data[0] === alarmOrEvent.creationTime));
                     if (eventExists) {
                         return;
                     }
+                    // For events, pass creationTime as unique id to create unique series per event.
+                    // This allows multiple events of the same type/device to coexist on the chart.
+                    // Series ID will be: eventType/deviceId+creationTime-markPoint
                     const newEventSeries = this.echartsOptionsService.getAlarmOrEventSeries(dp, renderType, false, [alarmOrEvent], 'event', displayOptions, alarmOrEvent.creationTime, null, true);
                     allDataSeries.push(...newEventSeries);
                 }
                 else if (isAlarm(alarmOrEvent)) {
-                    const alarmExists = allDataSeries.some((series) => {
-                        const seriesData = series['data'];
-                        return seriesData.some((data) => data[0] === alarmOrEvent.creationTime);
+                    // 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
+                    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}`);
                     });
-                    if (alarmExists) {
-                        const alarmSeries = allDataSeries.filter((series) => {
-                            const seriesData = series['data'];
-                            return seriesData.some((data) => data[0] === alarmOrEvent.creationTime);
-                        });
-                        // remove all matching alarm series which are in the array
-                        alarmSeries.forEach(series => {
-                            allDataSeries = allDataSeries.filter(s => s['id'] !== series['id']);
-                        });
-                        const newAlarmSeries = this.echartsOptionsService.getAlarmOrEventSeries(dp, renderType, false, [alarmOrEvent], 'alarm', displayOptions, alarmOrEvent.creationTime, null, true);
-                        allDataSeries.push(...newAlarmSeries);
-                    }
-                    else {
-                        const newAlarmSeries = this.echartsOptionsService.getAlarmOrEventSeries(dp, renderType, false, [alarmOrEvent], 'alarm', displayOptions, alarmOrEvent.id, null, true);
-                        allDataSeries.push(...newAlarmSeries);
-                    }
+                    // For alarms, pass null as id - we want one series per alarm type/device.
+                    // Series ID will be: alarmType/deviceId-markPoint (no unique suffix).
+                    // We already removed the old series above, so this replaces it.
+                    const newAlarmSeries = this.echartsOptionsService.getAlarmOrEventSeries(dp, renderType, false, [alarm], 'alarm', displayOptions, null, null, true);
+                    allDataSeries.push(...newAlarmSeries);
                 }
             }
-            this.checkForValuesAfterTimeRange(seriesMatchingDatapoint['data'], datapoint, datapointOutOfSyncCallback);
-        });
+        }
+        // Use replaceMerge for series to ensure removed alarm series don't persist.
+        // Without this, ECharts merges the new series array with existing ones,
+        // which can leave stale alarm/event series on the chart.
         this.echartsInstance?.setOption({
             dataZoom: [
                 {
@@ -1742,7 +1781,7 @@ class ChartRealtimeService {
                 max: this.currentTimeRange?.dateTo
             },
             series: allDataSeries
-        });
+        }, { replaceMerge: ['series'] });
     }
     /**
      * Detects if a datapoint has measurements with future timestamps (out-of-sync).
@@ -2254,6 +2293,7 @@ class ChartsComponent {
     }
     /**
      * Toggles the visibility of a series in the chart based on the provided datapoint.
+     * Uses explicit legendSelect/legendUnSelect based on __active state.
      * @param datapoint - The datapoint to toggle visibility for.
      */
     toggleDatapointSeriesVisibility(datapoint) {
@@ -2261,26 +2301,40 @@ class ChartsComponent {
         const seriesToUpdate = series.find(s => s.datapointId === `${datapoint.__target?.id}${datapoint.fragment}${datapoint.series}`);
         if (seriesToUpdate) {
             this.echartsInstance.dispatchAction({
-                type: 'legendToggleSelect',
+                type: datapoint.__active ? 'legendSelect' : 'legendUnSelect',
                 name: seriesToUpdate.name
             });
         }
     }
     /**
-     * Toggles the visibility of a series in the chart based on the provided alarm or event.
+     * 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.
      * @param alarmOrEvent - The alarm or event to toggle visibility for.
      */
     toggleAlarmEventSeriesVisibility(alarmOrEvent) {
-        const series = this.echartsInstance.getOption().series;
-        const seriesToUpdate = series.filter(s => s.name === `${alarmOrEvent.label}-markPoint` || s.name === `${alarmOrEvent.label}-markLine`);
-        if (seriesToUpdate) {
-            seriesToUpdate.forEach(s => {
-                this.echartsInstance.dispatchAction({
-                    type: 'legendToggleSelect',
-                    name: s.name
-                });
-            });
+        if (!this.echartsInstance) {
+            return;
         }
+        const options = this.echartsInstance.getOption();
+        const allSeries = options.series;
+        if (!allSeries || allSeries.length === 0) {
+            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);
+        matchingSeries.forEach(series => {
+            this.echartsInstance.dispatchAction({
+                type: actionType,
+                name: series.name
+            });
+        });
     }
     getDefaultChartOptions() {
         return {