@c8y/ngx-components 1023.43.3 → 1023.48.0

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) {
@@ -557,9 +558,9 @@ class EchartsOptionsService {
             },
             xAxis: {
                 min: Object.keys(aggregatedDatapoint.values || {}).length > 0
-                    ? Object.keys(aggregatedDatapoint.values || {})
+                    ? Math.min(Object.keys(aggregatedDatapoint.values)
                         .map(date => new Date(date).valueOf())
-                        .sort((a, b) => a - b)[0]
+                        .sort((a, b) => a - b)[0], new Date(timeRange.dateFrom).valueOf())
                     : new Date(timeRange.dateFrom).valueOf() - intervalInMs,
                 max: new Date(timeRange.dateTo).valueOf(),
                 type: 'time',
@@ -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';
@@ -800,8 +801,9 @@ class EchartsOptionsService {
         const allDataPointSeries = allSeries.filter(series => series['typeOfSeries'] !== 'alarm' && series['typeOfSeries'] !== 'event');
         this.processSeries(allDataPointSeries, XAxisValue, YAxisReadings, displayOptions);
         // find event and alarm of the same type as the hovered markedLine or markedPoint
-        const event = allEvents.find(e => e.type === params.data.itemType);
-        const alarm = allAlarms.find(a => a.type === params.data.itemType);
+        const event = allEvents.find(e => e.type === params.data.itemType && params.data.value === e.time);
+        const alarm = allAlarms.find(a => a.type === params.data.itemType && params.data.value === a.lastUpdated) ??
+            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);
@@ -1393,6 +1395,13 @@ class EchartsOptionsService {
     getSingleSeries(dp, renderType, idx, isMinMaxChart = false, displayOptions, seriesType = '') {
         const datapointId = dp.__target?.id + dp.fragment + dp.series;
         const isLine = dp.lineType === 'line' || dp.lineType === 'linePoints';
+        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 +1410,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),
             ...(isLine && { smooth: displayOptions.smoothLines ?? false })