@c8y/ngx-components 1023.92.0 → 1023.97.3

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

@@ -748,12 +748,15 @@ class EchartsOptionsService {
             let isDpTemplateSelected = false;
             // MarkPoint data
             const markPointData = itemsOfType.reduce((acc, item) => {
-                isDpTemplateSelected =
-                    item['selectedDatapoint'] &&
-                        dp['__target'] &&
-                        item['selectedDatapoint']['fragment'] === dp['fragment'] &&
-                        item['selectedDatapoint']['series'] === dp['series'] &&
-                        item['selectedDatapoint']['target'] === dp['__target']['id'];
+                // Mark the series as bound to the selected datapoint if ANY item of this type matches
+                // the current datapoint. Accumulating (instead of overwriting per item) keeps the flag
+                // correct when multiple alarms/events of the same type exist.
+                const itemMatchesSelectedDp = !!(item['selectedDatapoint'] &&
+                    dp['__target'] &&
+                    item['selectedDatapoint']['fragment'] === dp['fragment'] &&
+                    item['selectedDatapoint']['series'] === dp['series'] &&
+                    item['selectedDatapoint']['target'] === dp['__target']['id']);
+                isDpTemplateSelected = isDpTemplateSelected || itemMatchesSelectedDp;
                 if (dp.__target?.id === item.source.id) {
                     const isCleared = isAlarm && item.status === AlarmStatus.CLEARED;
                     const isEvent = !isAlarm;
@@ -787,7 +790,7 @@ class EchartsOptionsService {
                     symbolKeepAspect: true,
                     data: markPointData
                 },
-                yAxisIndex: idx,
+                ...(displayOptions.forceMergeDatapoints ? {} : { yAxisIndex: idx }),
                 ...this.chartTypesService.getSeriesOptions(dp, isMinMaxChart, renderType)
             };
             const markLineData = this.createMarkLine(itemsOfType, itemType);
@@ -847,7 +850,7 @@ class EchartsOptionsService {
             allAlarms.find(a => a.type === params.data.itemType && params.data.value === a.creationTime); // fallback to creationTime for cleared alarms.
         let value = '';
         if (event) {
-            value = this.processEvent(event, XAxisValue);
+            value = this.processEvent(event);
         }
         if (alarm) {
             this.processAlarm(alarm).then(alarmVal => {
@@ -1050,7 +1053,7 @@ class EchartsOptionsService {
                 value = this.processRegularSeries(series, XAxisValue, displayOptions);
             }
             if (value) {
-                const color = echarts.format.encodeHTML(series.itemStyle.color);
+                const color = echarts.format.encodeHTML(series.itemStyle?.color);
                 const label = echarts.format.encodeHTML(series.datapointLabel);
                 if (displayOptions.showCompactTooltip) {
                     YAxisReadings.push(this.buildCompactTooltipRow(color, label, value));
@@ -1118,11 +1121,11 @@ class EchartsOptionsService {
      * @param event - The event object.
      * @returns The processed value.
      */
-    processEvent(event, XAxisValue) {
+    processEvent(event) {
         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-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event type')))}</label><span class="small m-l-auto"><code title="${echarts.format.encodeHTML(event.type)}">${echarts.format.encodeHTML(event.type)}</code></span></li>`;
         value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event text')))}</label><span class="small 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="${echarts.format.encodeHTML(event.text)}">${echarts.format.encodeHTML(event.text)}</span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event time')))}</label><span class="small m-l-auto">${echarts.format.encodeHTML(this.datePipe.transform(XAxisValue))}<span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event time')))}</label><span class="small m-l-auto">${echarts.format.encodeHTML(this.datePipe.transform(event.time))}<span></li>`;
         value += `</ul>`;
         return value;
     }
@@ -1192,22 +1195,27 @@ class EchartsOptionsService {
         };
         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) {
-                return obj1['isDpTemplateSelected'];
-            }
-            return true;
+        // markPoint series for multiple datapoints on the same target and alarm/event type collide by
+        // id. Resolve each id independently: keep the series bound to the selected datapoint when a
+        // selection exists, otherwise keep the first. Grouping by id (rather than filtering against the
+        // whole list with a global emptiness fallback) guarantees every id resolves to exactly one
+        // surviving series, so a paired markLine can never suppress its markPoint and the event/alarm
+        // icons persist across datapoint selection changes and data refreshes.
+        const deduplicateById = (seriesList) => {
+            const groupsById = new Map();
+            seriesList.forEach(series => {
+                const id = series.id;
+                const group = groupsById.get(id) ?? [];
+                group.push(series);
+                groupsById.set(id, group);
+            });
+            return Array.from(groupsById.values(), group => {
+                const selected = group.find(series => series['isDpTemplateSelected']);
+                return selected ?? group[0];
+            });
         };
-        const deduplicateFilterCallbackFallback = (obj1, i, arr) => arr.findIndex(obj2 => obj2['id'] === obj1['id']) === i;
-        let deduplicatedEvents = eventSeries.filter(deduplicateFilterCallback);
-        let deduplicatedAlarms = alarmSeries.filter(deduplicateFilterCallback);
-        if (deduplicatedAlarms.length === 0) {
-            deduplicatedAlarms = alarmSeries.filter(deduplicateFilterCallbackFallback);
-        }
-        if (deduplicatedEvents.length === 0) {
-            deduplicatedEvents = eventSeries.filter(deduplicateFilterCallbackFallback);
-        }
+        const deduplicatedEvents = deduplicateById(eventSeries);
+        const deduplicatedAlarms = deduplicateById(alarmSeries);
         return [...series, ...deduplicatedEvents, ...deduplicatedAlarms];
     }
     groupByType(items, typeField) {
@@ -1296,12 +1304,16 @@ class EchartsOptionsService {
         }));
         const creationTime = new Date(item.creationTime).getTime();
         const lastUpdatedTime = new Date(item['lastUpdated']).getTime();
+        // Events are positioned on the chart by their `time` (when the event occurred), while alarms
+        // use their creation time.
+        const anchorTime = isEvent ? new Date(item['time']).getTime() : creationTime;
+        const anchorTimeValue = isEvent ? item['time'] : item.creationTime;
         let coordCreationTime;
         let coordLastUpdatedTime;
         if (realtime) {
             const lastValue = dpValuesArray[dpValuesArray.length - 1];
             coordCreationTime = [
-                item.creationTime,
+                anchorTimeValue,
                 lastValue?.values[0]?.min ?? lastValue?.values[1] ?? null
             ];
             coordLastUpdatedTime = [
@@ -1310,12 +1322,12 @@ class EchartsOptionsService {
             ];
         }
         else {
-            const closestDpValue = this.interpolateBetweenTwoDps(dpValuesArray, creationTime);
-            const dpValuesForNewAlarms = this.getClosestDpValueToTargetTime(dpValuesArray, creationTime);
+            const closestDpValue = this.interpolateBetweenTwoDps(dpValuesArray, anchorTime);
+            const dpValuesForNewAlarms = this.getClosestDpValueToTargetTime(dpValuesArray, anchorTime);
             const closestDpValueLastUpdated = this.interpolateBetweenTwoDps(dpValuesArray, lastUpdatedTime);
             const dpValuesForNewAlarmsLastUpdated = this.getClosestDpValueToTargetTime(dpValuesArray, lastUpdatedTime);
             coordCreationTime = [
-                item.creationTime,
+                anchorTimeValue,
                 closestDpValue?.values[0]?.min ??
                     closestDpValue?.values[1] ??
                     dpValuesForNewAlarms?.values[0]?.min ??
@@ -2708,18 +2720,22 @@ class ChartsComponent {
     }
     async loadAlarmsAndEvents(customTimeRange) {
         const timeRange = this.getTimeRange();
-        const updatedTimeRange = {
-            lastUpdatedFrom: customTimeRange ? customTimeRange.dateFrom : timeRange.dateFrom,
-            createdTo: customTimeRange ? customTimeRange.dateTo : timeRange.dateTo
-        };
+        const dateFrom = customTimeRange ? customTimeRange.dateFrom : timeRange.dateFrom;
+        const dateTo = customTimeRange ? customTimeRange.dateTo : timeRange.dateTo;
+        // Events are positioned on the chart by their `time` property, so they must be retrieved by
+        // the same property (`dateFrom`/`dateTo` filter the events API on `time`). Filtering by the
+        // update/creation window instead dropped events whose `time` fell inside the visible range.
+        const eventsTimeRange = { dateFrom, dateTo };
+        // Alarms keep the update window: an alarm active within the range may have been created earlier.
+        const alarmsTimeRange = { lastUpdatedFrom: dateFrom, createdTo: dateTo };
         if (!this.config.alarmsEventsConfigs)
             return;
         const visibleAlarmsOrEvents = this.config.alarmsEventsConfigs?.filter(alarmOrEvent => !alarmOrEvent.__hidden && alarmOrEvent.__active);
         const alarms = visibleAlarmsOrEvents?.filter(alarmOrEvent => alarmOrEvent.timelineType === 'ALARM');
         const events = visibleAlarmsOrEvents?.filter(alarmOrEvent => alarmOrEvent.timelineType === 'EVENT');
         const [listedEvents, listedAlarms] = await Promise.all([
-            this.chartEventsService.listEvents(updatedTimeRange, events),
-            this.chartAlarmsService.listAlarms(updatedTimeRange, alarms)
+            this.chartEventsService.listEvents(eventsTimeRange, events),
+            this.chartAlarmsService.listAlarms(alarmsTimeRange, alarms)
         ]);
         this.events = listedEvents;
         this.alarms = listedAlarms;