@c8y/ngx-components 1023.68.7 → 1023.71.1

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

@@ -4,7 +4,7 @@ import { gettext } from '@c8y/ngx-components/gettext';
 import { from, merge, interval, BehaviorSubject, of, lastValueFrom, defer, forkJoin } from 'rxjs';
 import { mergeMap, map, tap, throttleTime, buffer, switchMap } from 'rxjs/operators';
 import * as i1 from '@c8y/ngx-components';
-import { CommonModule, FormsModule, IconDirective, C8yTranslatePipe, WidgetTimeContextMediatorService, WidgetTimeContextDateRangeService, DismissAlertStrategy, DynamicComponentAlert, CoreModule, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService } from '@c8y/ngx-components';
+import { CommonModule, FormsModule, IconDirective, C8yTranslatePipe, WidgetTimeContextMediatorService, WidgetTimeContextDateRangeService, ThemeSwitcherService, DismissAlertStrategy, DynamicComponentAlert, CoreModule, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService } from '@c8y/ngx-components';
 import * as echarts from 'echarts';
 import * as i1$2 from '@c8y/client';
 import { AlarmStatus, aggregationType, MeasurementService } from '@c8y/client';
@@ -110,7 +110,7 @@ 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;
+        const nameGap = hasValues ? 22 : 15;
         if (YAxisOptions.forceMergeDatapoints) {
             return {
                 name: Array.from(datapointsWithValues)
@@ -129,12 +129,13 @@ class YAxisService {
                 animation: true,
                 axisLabel: {
                     fontSize: 10,
-                    show: true
+                    show: true,
+                    color: YAxisOptions.axisColor
                 },
                 axisLine: {
                     show: true,
                     lineStyle: {
-                        color: '#6f7079'
+                        color: YAxisOptions.axisColor
                     },
                     onZero: false
                 },
@@ -195,13 +196,14 @@ class YAxisService {
                 axisLine: {
                     show: !(matchingDpRange && YAxisOptions.mergeMatchingDatapoints),
                     lineStyle: {
-                        color: firstOccurrence.has(dp) ? '#6f7079' : dp.color
+                        color: firstOccurrence.has(dp) ? YAxisOptions.axisColor : dp.color
                     },
                     onZero: false
                 },
                 axisLabel: {
                     fontSize: 10,
                     show: !matchingDpRange || !YAxisOptions.mergeMatchingDatapoints,
+                    color: YAxisOptions.axisColor,
                     formatter: val => {
                         if (this.isDefined(dp.min) && this.isDefined(dp.max)) {
                             const range = dp.max - dp.min;
@@ -457,7 +459,8 @@ class EchartsOptionsService {
             mergeMatchingDatapoints: displayOptions.mergeMatchingDatapoints,
             forceMergeDatapoints: displayOptions.forceMergeDatapoints,
             setYaxisStartToZero: displayOptions.setYaxisStartToZero,
-            showLabelAndUnit: displayOptions.showLabelAndUnit
+            showLabelAndUnit: displayOptions.showLabelAndUnit,
+            axisColor: displayOptions.axisColor
         });
         const hasValues = datapointsWithValues.some(dp => dp.values && Object.keys(dp.values).length > 0);
         const leftAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'left') : [];
@@ -587,13 +590,16 @@ class EchartsOptionsService {
                     }
                 },
                 axisLine: {
-                    // align X axis to 0 of Y axis of datapoint with lineType 'bars'
-                    onZeroAxisIndex: datapointsWithValues.findIndex(dp => dp.lineType === 'bars')
+                    lineStyle: {
+                        color: displayOptions.axisColor
+                    },
+                    onZeroAxisIndex: datapointsWithValues.findIndex(dp => dp.lineType === 'bars') // align X axis to 0 of Y axis of datapoint with lineType 'bars'
                 },
                 axisLabel: {
                     hideOverlap: true,
                     borderWidth: 2, // as there is no margin for labels spacing, transparent border is a workaround
                     borderColor: 'transparent',
+                    color: displayOptions.axisColor,
                     formatter: value => {
                         const date = new Date(value);
                         const locale = selectedLanguage?.replace('_', '-');
@@ -2076,6 +2082,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ChartsComponent {
+    get axisColor() {
+        return (getComputedStyle(this.chart.nativeElement).getPropertyValue('--text-muted')?.trim() ||
+            getComputedStyle(this.chart.nativeElement).getPropertyValue('--c8y-text-muted')?.trim());
+    }
     constructor() {
         this.showLoadMore = false;
         this.alarms = [];
@@ -2106,6 +2116,7 @@ class ChartsComponent {
         this.chartAlarmsService = inject(ChartAlarmsService);
         this.mediator = inject(WidgetTimeContextMediatorService);
         this.widgetTimeContextDateRangeService = inject(WidgetTimeContextDateRangeService);
+        this.themeSwitcherService = inject(ThemeSwitcherService);
         this.loadedTimeRange = null;
         /** Tracks if the last data fetch returned truncated data */
         this.dataWasTruncated = false;
@@ -2147,6 +2158,11 @@ class ChartsComponent {
                 this.configChangedSubject.next();
             }
         });
+        this.themeSwitcherService.currentlyAppliedTheme$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.configChangedSubject.next();
+        });
     }
     ngOnChanges() {
         // Skip config updates while the user is dragging the slider to prevent
@@ -2438,7 +2454,8 @@ class ChartsComponent {
             showLabelAndUnit: this.config.showLabelAndUnit ?? chartDefaults.showLabelAndUnit,
             showSlider: this.config.showSlider ?? chartDefaults.showSlider,
             smoothLines: this.config.smoothLines ?? chartDefaults.smoothLines,
-            numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? chartDefaults.numberOfDecimalPlaces
+            numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? chartDefaults.numberOfDecimalPlaces,
+            axisColor: this.axisColor
         };
     }
     getDefaultChartOptions() {
@@ -2582,11 +2599,13 @@ class ChartsComponent {
     async getChartOptions(datapointsWithValues) {
         const timeRange = {
             ...this.getTimeRange(),
-            interval: this.config.dateTimeContext?.interval || this.config.interval
+            interval: (this.config.dateTimeContext?.interval ||
+                this.config.interval ||
+                'custom')
         };
         const sliderPositionMode = this.getSliderPositionMode();
         if ((!this.activeDatapoints || this.activeDatapoints.length === 0) &&
-            this.config.alarmsEventsConfigs?.length > 0) {
+            (this.config.alarmsEventsConfigs?.length ?? 0) > 0) {
             return this.echartsOptionsService.getChartOptions(datapointsWithValues, timeRange, {
                 YAxis: this.config.yAxisSplitLines || false,
                 XAxis: this.config.xAxisSplitLines || false
@@ -2599,11 +2618,12 @@ class ChartsComponent {
                 showLabelAndUnit: false,
                 smoothLines: false,
                 showSlider: false,
-                showOnlyAlarmsOrEvents: true
+                showOnlyAlarmsOrEvents: true,
+                axisColor: this.axisColor
             });
         }
         if (!this.widgetTimeContextDateRangeService.initialTimeRange()) {
-            this.widgetTimeContextDateRangeService.updateDisplayMode(this.config.displayMode);
+            this.widgetTimeContextDateRangeService.updateDisplayMode(this.config.displayMode ?? 'dashboard');
             const intervalForExtension = this.config.dateTimeContext?.interval || this.config.interval || 'custom';
             const extendedIntervalMs = this.echartsOptionsService.calculateExtendedIntervalInMs(intervalForExtension, {
                 dateFrom: timeRange.dateFrom,
@@ -2619,8 +2639,8 @@ class ChartsComponent {
                 YAxis: this.config.yAxisSplitLines || false,
                 XAxis: this.config.xAxisSplitLines || false
             }, this.events, this.alarms, {
-                ...this.displayOptions,
-                sliderPositionMode
+                sliderPositionMode,
+                ...this.displayOptions
             }, undefined, aggregatedDatapoints);
         }
         else {
@@ -2651,8 +2671,8 @@ class ChartsComponent {
                 YAxis: this.config.yAxisSplitLines || false,
                 XAxis: this.config.xAxisSplitLines || false
             }, this.events, this.alarms, {
-                ...this.displayOptions,
-                sliderPositionMode
+                sliderPositionMode,
+                ...this.displayOptions
             }, timeRange, aggregatedDatapoints, true);
         }
     }
@@ -2730,7 +2750,7 @@ class ChartsComponent {
                 this.config.showAdvancedChartOptions &&
                 aggregatedDatapoint.renderType !== 'area' && {
                 aggregationFunction: aggregatedDatapoint.renderType,
-                aggregationInterval: this.AGGREGATION_INTERVAL_MAP[customTimeRange ? this.getAggregationTypeForTimeRange() : this.config.aggregation]
+                aggregationInterval: this.AGGREGATION_INTERVAL_MAP[(customTimeRange ? this.getAggregationTypeForTimeRange() : this.config.aggregation)]
             })
         })).pipe(map(res => {
             const values = res.data.values;
@@ -2759,6 +2779,7 @@ class ChartsComponent {
             case 'months':
                 return aggregationType.DAILY;
             case 'custom':
+            default:
                 return aggregationType.HOURLY;
         }
     }