@c8y/ngx-components 1021.75.8 → 1021.77.0

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

@@ -71,6 +71,37 @@ class YAxisService {
     }
     getYAxis(datapointsWithValues, YAxisOptions) {
         const YAxisPlacement = this.getYAxisPlacement(datapointsWithValues);
+        if (YAxisOptions.forceMergeDatapoints) {
+            return {
+                nameLocation: 'middle',
+                nameGap: 20,
+                type: 'value',
+                animation: true,
+                axisLabel: {
+                    fontSize: 10,
+                    show: true
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'black'
+                    },
+                    onZero: false
+                },
+                splitLine: {
+                    show: YAxisOptions.showSplitLines
+                },
+                axisTick: {
+                    show: true
+                },
+                axisPointer: {
+                    show: false,
+                    label: {
+                        show: false
+                    }
+                }
+            };
+        }
         const matchingDpSet = new Set();
         const firstOccurrence = new Set();
         return datapointsWithValues.map((dp, index) => {
@@ -348,11 +379,12 @@ class EchartsOptionsService {
         const yAxis = this.yAxisService.getYAxis(datapointsWithValues, {
             showSplitLines: showSplitLines.YAxis,
             mergeMatchingDatapoints: displayOptions.mergeMatchingDatapoints,
+            forceMergeDatapoints: displayOptions.forceMergeDatapoints,
             showLabelAndUnit: displayOptions.showLabelAndUnit
         });
-        const leftAxis = yAxis.filter(yx => yx.position === 'left');
-        const gridLeft = leftAxis.length ? leftAxis.length * this.yAxisService.Y_AXIS_OFFSET : 16;
-        const rightAxis = yAxis.filter(yx => yx.position === 'right');
+        const leftAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'left') : [];
+        const gridLeft = leftAxis.length ? leftAxis.length * this.yAxisService.Y_AXIS_OFFSET : 32;
+        const rightAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'right') : [];
         const gridRight = rightAxis.length ? rightAxis.length * this.yAxisService.Y_AXIS_OFFSET : 16;
         let intervalInMs = this.calculateExtendedIntervalInMs(selectedTimeRange?.interval || timeRange.interval || 'hours', selectedTimeRange || timeRange);
         if (sliderZoomUsed) {
@@ -437,7 +469,7 @@ class EchartsOptionsService {
             },
             yAxis,
             series: [
-                ...this.getAggregatedSeries(aggregatedDatapoints || []).filter(series => series !== undefined),
+                ...this.getAggregatedSeries(aggregatedDatapoints || [], displayOptions).filter(series => series !== undefined),
                 ...this.getChartSeries(datapointsWithValues, events, alarms, displayOptions)
             ]
         };
@@ -472,16 +504,16 @@ class EchartsOptionsService {
         }
         return intervalInMs;
     }
-    getAggregatedSeries(aggregatedDatapoints) {
+    getAggregatedSeries(aggregatedDatapoints, displayOptions) {
         const series = [];
         aggregatedDatapoints.forEach((dp, idx) => {
             const renderType = dp.renderType || 'min';
             if (renderType === 'area') {
-                series.push(this.getSingleSeries(dp, 'min', idx, true, 'aggr'));
-                series.push(this.getSingleSeries(dp, 'max', idx, true, 'aggr'));
+                series.push(this.getSingleSeries(dp, 'min', idx, true, displayOptions, 'aggr'));
+                series.push(this.getSingleSeries(dp, 'max', idx, true, displayOptions, 'aggr'));
             }
             else {
-                series.push(this.getSingleSeries(dp, renderType, idx, false, 'aggr'));
+                series.push(this.getSingleSeries(dp, renderType, idx, false, displayOptions, 'aggr'));
             }
         });
         series.forEach((s) => {
@@ -507,7 +539,14 @@ class EchartsOptionsService {
      * @param itemType - The item type.
      * @param id - The id of the device
      */
-    getAlarmOrEventSeries(dp, renderType, isMinMaxChart = false, items = [], itemType = 'alarm', displayOptions = { displayMarkedLine: true, displayMarkedPoint: true }, id, idx, realtime) {
+    getAlarmOrEventSeries(dp, renderType, isMinMaxChart = false, items = [], itemType = 'alarm', displayOptions = {
+        displayMarkedLine: true,
+        displayMarkedPoint: true,
+        mergeMatchingDatapoints: false,
+        forceMergeDatapoints: false,
+        showLabelAndUnit: false,
+        showSlider: false
+    }, id, idx, realtime) {
         if (!items.length) {
             return [];
         }
@@ -804,11 +843,11 @@ class EchartsOptionsService {
         datapointsWithValues.forEach((dp, idx) => {
             const renderType = dp.renderType || 'min';
             if (renderType === 'area') {
-                series.push(this.getSingleSeries(dp, 'min', idx, true));
-                series.push(this.getSingleSeries(dp, 'max', idx, true));
+                series.push(this.getSingleSeries(dp, 'min', idx, true, displayOptions));
+                series.push(this.getSingleSeries(dp, 'max', idx, true, displayOptions));
             }
             else {
-                series.push(this.getSingleSeries(dp, renderType, idx, false));
+                series.push(this.getSingleSeries(dp, renderType, idx, false, displayOptions));
             }
             const newEventSeries = this.getAlarmOrEventSeries(dp, renderType, false, events, 'event', displayOptions, null, idx);
             const newAlarmSeries = this.getAlarmOrEventSeries(dp, renderType, false, alarms, 'alarm', displayOptions, null, idx);
@@ -1084,7 +1123,7 @@ class EchartsOptionsService {
             }
         }, []);
     }
-    getSingleSeries(dp, renderType, idx, isMinMaxChart = false, seriesType = '') {
+    getSingleSeries(dp, renderType, idx, isMinMaxChart = false, displayOptions, seriesType = '') {
         const datapointId = dp.__target?.id + dp.fragment + dp.series;
         return {
             datapointId,
@@ -1099,7 +1138,7 @@ class EchartsOptionsService {
             data: Object.entries(dp.values).map(([dateString, values]) => {
                 return [dateString, values[0][renderType]];
             }),
-            yAxisIndex: idx,
+            ...(displayOptions.forceMergeDatapoints ? {} : { yAxisIndex: idx }),
             ...this.chartTypesService.getSeriesOptions(dp, isMinMaxChart, renderType)
         };
     }
@@ -1799,7 +1838,11 @@ class ChartsComponent {
         if (activeDatapoints && this.config.realtime && this.echartsInstance) {
             this.chartRealtimeService.startRealtime(this.echartsInstance, activeDatapoints, this.getTimeRange(), dp => this.datapointOutOfSync.emit(dp), timeRange => this.timeRangeChangeOnRealtime.emit(timeRange), this.config.alarmsEventsConfigs, {
                 displayMarkedLine: this.config.displayMarkedLine || false,
-                displayMarkedPoint: this.config.displayMarkedPoint || false
+                displayMarkedPoint: this.config.displayMarkedPoint || false,
+                mergeMatchingDatapoints: this.config.mergeMatchingDatapoints || false,
+                forceMergeDatapoints: this.config.forceMergeDatapoints || false,
+                showLabelAndUnit: this.config.showLabelAndUnit || false,
+                showSlider: this.config.showSlider || false
             });
         }
     }
@@ -1840,6 +1883,7 @@ class ChartsComponent {
                 displayMarkedLine: this.config.displayMarkedLine || false,
                 displayMarkedPoint: this.config.displayMarkedPoint || false,
                 mergeMatchingDatapoints: this.config.mergeMatchingDatapoints || false,
+                forceMergeDatapoints: this.config.forceMergeDatapoints || false,
                 showLabelAndUnit: this.config.showLabelAndUnit || false,
                 showSlider: this.config.showSlider || false
             }, undefined, aggregatedDatapoints);
@@ -1860,6 +1904,7 @@ class ChartsComponent {
                 displayMarkedLine: this.config.displayMarkedLine || false,
                 displayMarkedPoint: this.config.displayMarkedPoint || false,
                 mergeMatchingDatapoints: this.config.mergeMatchingDatapoints || false,
+                forceMergeDatapoints: this.config.forceMergeDatapoints || false,
                 showLabelAndUnit: this.config.showLabelAndUnit || false,
                 showSlider: this.config.showSlider || false
             }, timeRange, aggregatedDatapoints, true);