@c8y/ngx-components 1023.14.70 → 1023.14.76

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

@@ -97,6 +97,8 @@ class YAxisService {
     }
     getYAxis(datapointsWithValues, YAxisOptions) {
         const YAxisPlacement = this.getYAxisPlacement(datapointsWithValues, YAxisOptions);
+        const hasValues = datapointsWithValues.some(dp => dp.values && Object.keys(dp.values).length > 0);
+        const nameGap = hasValues ? 25 : 15;
         if (YAxisOptions.forceMergeDatapoints) {
             return {
                 name: Array.from(datapointsWithValues)
@@ -106,7 +108,7 @@ class YAxisService {
                 nameTruncate: {
                     maxWidth: 350
                 },
-                nameGap: 25,
+                nameGap,
                 nameTextStyle: {
                     // add rich text to support multiple colors for different dp units
                     rich: this.buildRichTextStyle(datapointsWithValues)
@@ -172,7 +174,7 @@ class YAxisService {
                 nameTruncate: {
                     maxWidth: 350
                 },
-                nameGap: 25,
+                nameGap,
                 nameTextStyle: {
                     rich: this.buildRichTextStyle(uniqueUnitDps)
                 },
@@ -440,15 +442,11 @@ class EchartsOptionsService {
             setYaxisStartToZero: displayOptions.setYaxisStartToZero,
             showLabelAndUnit: displayOptions.showLabelAndUnit
         });
-        const AXIS_PADDING = 20;
+        const hasValues = datapointsWithValues.some(dp => dp.values && Object.keys(dp.values).length > 0);
         const leftAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'left') : [];
-        const gridLeft = leftAxis.length
-            ? leftAxis.length * (this.yAxisService.Y_AXIS_OFFSET - AXIS_PADDING)
-            : 32;
         const rightAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'right') : [];
-        const gridRight = rightAxis.length
-            ? rightAxis.length * (this.yAxisService.Y_AXIS_OFFSET - AXIS_PADDING)
-            : 16;
+        const gridLeft = this.calculateGridLeft(leftAxis.length, displayOptions.forceMergeDatapoints);
+        const gridRight = this.calculateGridRight(rightAxis.length, hasValues);
         const selectedLanguage = this.translate.currentLang;
         let intervalInMs = this.calculateExtendedIntervalInMs(selectedTimeRange?.interval || timeRange.interval || 'hours', selectedTimeRange || timeRange);
         if (sliderZoomUsed) {
@@ -487,17 +485,23 @@ class EchartsOptionsService {
                     filterMode: datapointsWithValues.some(dp => dp.lineType === 'bars') ? 'filter' : 'none',
                     zoomOnMouseWheel: true,
                     startValue: selectedTimeRange
-                        ? selectedTimeRange.dateFrom.valueOf()
-                        : timeRange.dateFrom.valueOf(),
+                        ? new Date(selectedTimeRange.dateFrom).valueOf()
+                        : new Date(timeRange.dateFrom).valueOf(),
                     endValue: selectedTimeRange
-                        ? selectedTimeRange.dateTo.valueOf()
-                        : timeRange.dateTo.valueOf()
+                        ? new Date(selectedTimeRange.dateTo).valueOf()
+                        : new Date(timeRange.dateTo).valueOf()
                 },
                 {
                     type: 'slider',
                     show: displayOptions.showSlider,
                     bottom: 8,
                     realtime: false,
+                    startValue: selectedTimeRange
+                        ? new Date(selectedTimeRange.dateFrom).valueOf()
+                        : new Date(timeRange.dateFrom).valueOf(),
+                    endValue: selectedTimeRange
+                        ? new Date(selectedTimeRange.dateTo).valueOf()
+                        : new Date(timeRange.dateTo).valueOf(),
                     left: displayOptions.sliderPositionMode === 'compact' ? '64px' : '64px',
                     right: displayOptions.sliderPositionMode === 'compact' ? '172px' : '64px',
                     labelFormatter(_value, valueStr) {
@@ -557,7 +561,7 @@ class EchartsOptionsService {
                         .map(date => new Date(date).valueOf())
                         .sort((a, b) => a - b)[0]
                     : new Date(timeRange.dateFrom).valueOf() - intervalInMs,
-                max: timeRange.dateTo,
+                max: new Date(timeRange.dateTo).valueOf(),
                 type: 'time',
                 animation: false,
                 axisPointer: {
@@ -1123,6 +1127,24 @@ class EchartsOptionsService {
             return grouped;
         }, {});
     }
+    calculateGridLeft(leftAxisCount, forceMergeDatapoints) {
+        const AXIS_PADDING = 20;
+        if (!leftAxisCount) {
+            return forceMergeDatapoints ? this.yAxisService.Y_AXIS_OFFSET : 32;
+        }
+        return leftAxisCount * (this.yAxisService.Y_AXIS_OFFSET - AXIS_PADDING);
+    }
+    calculateGridRight(rightAxisCount, hasValues) {
+        const RIGHT_AXIS_BASE_SPACE = 48;
+        const RIGHT_AXIS_INCREMENT_WITH_DATA = 32;
+        if (!rightAxisCount) {
+            return 32;
+        }
+        if (hasValues) {
+            return rightAxisCount * RIGHT_AXIS_INCREMENT_WITH_DATA;
+        }
+        return (rightAxisCount - 1) * this.yAxisService.Y_AXIS_OFFSET + RIGHT_AXIS_BASE_SPACE;
+    }
     /**
      * This method interpolates between two data points. The goal is to place the markPoint on the chart in the right place.
      * @param dpValuesArray array of data points
@@ -2041,6 +2063,12 @@ class ChartsComponent {
             }
         }
         else {
+            // Only reset initialTimeRange if the change is NOT from a slider zoom on another widget
+            if (!this.mediator.isSliderZoomUpdate()) {
+                this.widgetTimeContextDateRangeService.updateInitialTimeRange(null);
+            }
+            // Clear the slider zoom flag after processing
+            this.mediator.isSliderZoomUpdate.set(false);
             this.configChangedSubject.next();
         }
     }
@@ -2065,6 +2093,8 @@ class ChartsComponent {
             const options = this.echartsInstance.getOption();
             const dataZoom = options['dataZoom'][0];
             this.isChangeFromZoom = true;
+            // Set global flag so other widgets know this change is from slider zoom
+            this.mediator.isSliderZoomUpdate.set(true);
             const zoomDates = {
                 dateFrom: new Date(dataZoom['startValue']),
                 dateTo: new Date(dataZoom['endValue']),