@c8y/ngx-components 1023.14.102 → 1023.14.104

package/echart/index.d.ts

@@ -293,14 +293,17 @@ declare class ChartsComponent implements OnChanges, OnInit, OnDestroy {
     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.
      * @param datapoint - The datapoint to toggle visibility for.
      */
     toggleDatapointSeriesVisibility(datapoint: DatapointsGraphKPIDetails): void;
     /**
-     * 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: AlarmDetailsExtended | EventDetailsExtended): void;
+    toggleAlarmEventSeriesVisibility(alarmOrEvent: AlarmOrEventExtended): void;
     private getDefaultChartOptions;
     private getMarkedAreaData;
     private getMarkedLineData;

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":";;;;;;;;;;;;;;AAmBM;;;;AAKA;AACJ;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;AAOA;;AAEA;AACA;AACA;AACA;;;AAGA;;;;;;;;;AAUI;;;;;;;;;;AAUJ;;AAGI;;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;;AC9MD;;;;;;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;;;;;;;;;;;ACwDA;AA4BE;;AAEA;;;;;;;;AAQA;;;;;;AAMK;AACK;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEV;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;AAgDA;;;;;AA2IuB;;;AAA4B;AAiDnD;AAOA;AAIA;AAwBA;AA6BA;AAWA;;;AAGG;AACH;AAcA;;;AAGG;AACH;AAmBA;AAeA;AA0BA;;AA8DA;;;AA8MA;AA0DA;AA0CA;AAkBA;AAWA;AAYA;;;AA6BD;;AC97BD;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":";;;;;;;;;;;;;;AAmBM;;;;AAKA;AACJ;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;AAOA;;AAEA;AACA;AACA;AACA;;;AAGA;;;;;;;;;AAUI;;;;;;;;;;AAUJ;;AAGI;;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;;AC9MD;;;;;;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;;;;;;;;;;;ACwDA;AA4BE;;AAEA;;;;;;;;AAQA;;;;;;AAMK;AACK;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEV;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;AAgDA;;;;;AA2IuB;;;AAA4B;AAiDnD;AAOA;AAIA;AAwBA;AA6BA;AAWA;;;;AAIG;AACH;AAcA;;;;;AAKG;AACH;AAgCA;AAeA;AA0BA;;AA8DA;;;AA8MA;AA0DA;AA0CA;AAkBA;AAWA;AAYA;;;AA6BD;;AC98BD;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

@@ -432,6 +432,7 @@ class EchartsOptionsService {
         this.severityLabelPipe = severityLabelPipe;
         this.translate = translate;
         this.router = router;
+        this.AGGREGATED_SERIES_TYPE = 'aggr';
         this.TOOLTIP_WIDTH = 300;
     }
     getChartOptions(datapointsWithValues, timeRange, showSplitLines, events, alarms, displayOptions, selectedTimeRange, aggregatedDatapoint, sliderZoomUsed = false) {
@@ -654,11 +655,11 @@ class EchartsOptionsService {
         const renderType = aggregatedDatapoint?.renderType || 'min';
         const idx = 0;
         if (renderType === 'area') {
-            series.push(this.getSingleSeries(aggregatedDatapoint, 'min', idx, true, displayOptions, 'aggr'));
-            series.push(this.getSingleSeries(aggregatedDatapoint, 'max', idx, true, displayOptions, 'aggr'));
+            series.push(this.getSingleSeries(aggregatedDatapoint, 'min', idx, true, displayOptions, this.AGGREGATED_SERIES_TYPE));
+            series.push(this.getSingleSeries(aggregatedDatapoint, 'max', idx, true, displayOptions, this.AGGREGATED_SERIES_TYPE));
         }
         else {
-            series.push(this.getSingleSeries(aggregatedDatapoint, renderType, idx, false, displayOptions, 'aggr'));
+            series.push(this.getSingleSeries(aggregatedDatapoint, renderType, idx, false, displayOptions, this.AGGREGATED_SERIES_TYPE));
         }
         series.forEach((s) => {
             s.datapointId = 'aggregated';
@@ -736,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,
@@ -754,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,
@@ -1393,6 +1394,13 @@ class EchartsOptionsService {
     }
     getSingleSeries(dp, renderType, idx, isMinMaxChart = false, displayOptions, seriesType = '') {
         const datapointId = dp.__target?.id + dp.fragment + dp.series;
+        const isAggr = seriesType === this.AGGREGATED_SERIES_TYPE;
+        const data = isAggr && Object.keys(dp.values).length <= 1
+            ? []
+            : Object.entries(dp.values).map(([dateString, values]) => [
+                dateString,
+                values[0][renderType]
+            ]);
         return {
             datapointId,
             datapointUnit: dp.unit || '',
@@ -1401,11 +1409,8 @@ class EchartsOptionsService {
                 ? `${datapointId}/${renderType}${seriesType}`
                 : `${datapointId}${seriesType}`,
             name: `${dp.label} (${dp.__target?.['name']})`,
-            // datapointLabel used to proper display of tooltip
             datapointLabel: dp.label || '',
-            data: Object.entries(dp.values).map(([dateString, values]) => {
-                return [dateString, values[0][renderType]];
-            }),
+            data,
             ...(displayOptions.forceMergeDatapoints ? {} : { yAxisIndex: idx }),
             ...this.chartTypesService.getSeriesOptions(dp, isMinMaxChart, renderType)
         };
@@ -1511,9 +1516,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)
@@ -1602,7 +1609,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;
@@ -1670,6 +1679,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,
@@ -1683,46 +1693,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: [
                 {
@@ -1735,7 +1779,7 @@ class ChartRealtimeService {
                 max: this.currentTimeRange?.dateTo
             },
             series: allDataSeries
-        });
+        }, { replaceMerge: ['series'] });
     }
     /**
      * Detects if a datapoint has measurements with future timestamps (out-of-sync).
@@ -2247,6 +2291,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) {
@@ -2254,26 +2299,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 {