@c8y/ngx-components 1023.81.3 → 1023.82.1

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

@@ -105,12 +105,14 @@ class YAxisService {
     constructor(appStateService) {
         this.appStateService = appStateService;
         this.Y_AXIS_OFFSET = 48;
+        this.Y_AXIS_OFFSET_WITH_DP_VALUES = 22;
+        this.Y_AXIS_OFFSET_WITHOUT_DP_VALUES = 15;
         this.intlNumberFormatCompliantLocale = this.appStateService.state.lang.replace('_', '-');
     }
     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 ? 22 : 15;
+        const hasValues = dp => dp.values && Object.keys(dp.values).length > 0;
+        const anyDpHasValues = datapointsWithValues.some(dp => hasValues(dp));
         if (YAxisOptions.forceMergeDatapoints) {
             return {
                 name: Array.from(datapointsWithValues)
@@ -120,7 +122,9 @@ class YAxisService {
                 nameTruncate: {
                     maxWidth: 350
                 },
-                nameGap,
+                nameGap: anyDpHasValues
+                    ? this.Y_AXIS_OFFSET_WITH_DP_VALUES
+                    : this.Y_AXIS_OFFSET_WITHOUT_DP_VALUES,
                 nameTextStyle: {
                     // add rich text to support multiple colors for different dp units
                     rich: this.buildRichTextStyle(datapointsWithValues)
@@ -187,7 +191,9 @@ class YAxisService {
                 nameTruncate: {
                     maxWidth: 350
                 },
-                nameGap,
+                nameGap: hasValues(dp)
+                    ? this.Y_AXIS_OFFSET_WITH_DP_VALUES
+                    : this.Y_AXIS_OFFSET_WITHOUT_DP_VALUES,
                 nameTextStyle: {
                     rich: this.buildRichTextStyle(uniqueUnitDps)
                 },
@@ -576,8 +582,8 @@ class EchartsOptionsService {
                 show: false
             },
             xAxis: {
-                min: Object.keys(aggregatedDatapoint.values || {}).length > 0
-                    ? Math.min(Object.keys(aggregatedDatapoint.values)
+                min: Object.keys(aggregatedDatapoint?.values || {}).length > 0
+                    ? Math.min(Object.keys(aggregatedDatapoint?.values || {})
                         .map(date => new Date(date).valueOf())
                         .sort((a, b) => a - b)[0], new Date(timeRange.dateFrom).valueOf())
                     : new Date(timeRange.dateFrom).valueOf() - intervalInMs,
@@ -673,6 +679,9 @@ class EchartsOptionsService {
         return intervalInMs;
     }
     getAggregatedSeries(aggregatedDatapoint, displayOptions) {
+        if (!aggregatedDatapoint) {
+            return { type: 'line', data: [], id: 'aggregated-empty' };
+        }
         const series = [];
         const renderType = aggregatedDatapoint?.renderType || 'min';
         const idx = 0;
@@ -2641,17 +2650,19 @@ class ChartsComponent {
             });
             const extendedDateFrom = new Date(new Date(timeRange.dateFrom).valueOf() - extendedIntervalMs).toISOString();
             this.widgetTimeContextDateRangeService.updateInitialTimeRange(timeRange);
-            const aggregatedDatapoints = await lastValueFrom(this.fetchAggregatedSeriesForSelectedDatapoint$({
-                dateFrom: extendedDateFrom,
-                dateTo: timeRange.dateTo
-            }, this.config.aggregatedDatapoint));
+            const aggregatedDatapoint = this.config.showSlider
+                ? await lastValueFrom(this.fetchAggregatedSeriesForSelectedDatapoint$({
+                    dateFrom: extendedDateFrom,
+                    dateTo: timeRange.dateTo
+                }, this.config.aggregatedDatapoint))
+                : undefined;
             return this.echartsOptionsService.getChartOptions(datapointsWithValues, timeRange, {
                 YAxis: this.config.yAxisSplitLines || false,
                 XAxis: this.config.xAxisSplitLines || false
             }, this.events, this.alarms, {
                 sliderPositionMode,
                 ...this.displayOptions
-            }, undefined, aggregatedDatapoints);
+            }, undefined, aggregatedDatapoint);
         }
         else {
             const cachedTimeRange = this.widgetTimeContextDateRangeService.initialTimeRange();
@@ -2661,10 +2672,12 @@ class ChartsComponent {
                 dateTo: cachedTimeRange.dateTo
             });
             const initialExtendedDateFrom = new Date(initialDateFromValue - calculateInitialIntervalInMs).toISOString();
-            const aggregatedDatapoints = await lastValueFrom(this.fetchAggregatedSeriesForSelectedDatapoint$({
-                dateFrom: initialExtendedDateFrom,
-                dateTo: new Date(this.widgetTimeContextDateRangeService.initialTimeRange().dateTo).toISOString()
-            }, this.config.aggregatedDatapoint));
+            const aggregatedDatapoint = this.config.showSlider
+                ? await lastValueFrom(this.fetchAggregatedSeriesForSelectedDatapoint$({
+                    dateFrom: initialExtendedDateFrom,
+                    dateTo: new Date(this.widgetTimeContextDateRangeService.initialTimeRange().dateTo).toISOString()
+                }, this.config.aggregatedDatapoint))
+                : undefined;
             // we need to update the initial time range by adding the refresh interval to the dateFrom and dateTo
             const initialTimeRange = this.widgetTimeContextDateRangeService.initialTimeRange();
             // needed due to a race condition where the time range is updated before the chart options are fetched...
@@ -2683,7 +2696,7 @@ class ChartsComponent {
             }, this.events, this.alarms, {
                 sliderPositionMode,
                 ...this.displayOptions
-            }, timeRange, aggregatedDatapoints, true);
+            }, timeRange, aggregatedDatapoint, true);
         }
     }
     fetchSeriesForDatapoints$() {