@c8y/ngx-components 1022.16.2 → 1022.21.3

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

@@ -368,7 +368,7 @@ const ICONS_MAP = {
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const INDEX_HTML = '/index.html';
 class EchartsOptionsService {
-    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router) {
+    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router, appState) {
         this.datePipe = datePipe;
         this.yAxisService = yAxisService;
         this.chartTypesService = chartTypesService;
@@ -376,6 +376,7 @@ class EchartsOptionsService {
         this.severityLabelPipe = severityLabelPipe;
         this.translate = translate;
         this.router = router;
+        this.appState = appState;
         this.TOOLTIP_WIDTH = 300;
     }
     getChartOptions(datapointsWithValues, timeRange, showSplitLines, events, alarms, displayOptions, selectedTimeRange, aggregatedDatapoints, sliderZoomUsed = false) {
@@ -389,6 +390,8 @@ class EchartsOptionsService {
         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;
+        const currentUser = this.appState.currentUser?.getValue();
+        const selectedLanguage = currentUser?.customProperties?.['c8y_UserPreference-language'] || 'en';
         let intervalInMs = this.calculateExtendedIntervalInMs(selectedTimeRange?.interval || timeRange.interval || 'hours', selectedTimeRange || timeRange);
         if (sliderZoomUsed) {
             intervalInMs = this.calculateExtendedIntervalInMs(timeRange.interval || 'hours', timeRange);
@@ -482,7 +485,36 @@ class EchartsOptionsService {
                 axisLabel: {
                     hideOverlap: true,
                     borderWidth: 2, // as there is no margin for labels spacing, transparent border is a workaround
-                    borderColor: 'transparent'
+                    borderColor: 'transparent',
+                    formatter: value => {
+                        const date = new Date(value);
+                        const locale = selectedLanguage.replace('_', '-');
+                        const isStartOfMinute = date.getSeconds() === 0;
+                        const isStartOfDay = date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0;
+                        const isStartOfYear = date.getMonth() === 0 && date.getDate() === 1 && isStartOfDay;
+                        let options;
+                        // Case 1: Tick is start of year
+                        // Shows only the year, e.g. "2025"
+                        if (isStartOfYear) {
+                            options = { year: 'numeric' };
+                        }
+                        // Case 2: Tick is start of day
+                        // Shows abbreviated month and day, e.g. "Jan 13"
+                        else if (isStartOfDay) {
+                            options = { month: 'short', day: 'numeric' };
+                        }
+                        // Case 3: Tick is start of minute
+                        // Shows hour and minute, e.g. "14:30" (format depends on locale)
+                        else if (isStartOfMinute) {
+                            options = { hour: 'numeric', minute: '2-digit' };
+                        }
+                        // Case 4: Interval is 1 minute or less
+                        // Shows seconds, e.g. ":45"
+                        else {
+                            options = { second: '2-digit' };
+                        }
+                        return new Intl.DateTimeFormat(locale, options).format(date);
+                    }
                 },
                 splitLine: {
                     show: showSplitLines.XAxis,
@@ -1345,12 +1377,12 @@ class EchartsOptionsService {
             return acc;
         }, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1$1.DatePipe }, { token: YAxisService }, { token: ChartTypesService }, { token: i4.AlarmSeverityToIconPipe }, { token: i4.AlarmSeverityToLabelPipe }, { token: i5.TranslateService }, { token: i6.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1$1.DatePipe }, { token: YAxisService }, { token: ChartTypesService }, { token: i4.AlarmSeverityToIconPipe }, { token: i4.AlarmSeverityToLabelPipe }, { token: i5.TranslateService }, { token: i6.Router }, { token: i1$1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EchartsOptionsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EchartsOptionsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: YAxisService }, { type: ChartTypesService }, { type: i4.AlarmSeverityToIconPipe }, { type: i4.AlarmSeverityToLabelPipe }, { type: i5.TranslateService }, { type: i6.Router }] });
+        }], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: YAxisService }, { type: ChartTypesService }, { type: i4.AlarmSeverityToIconPipe }, { type: i4.AlarmSeverityToLabelPipe }, { type: i5.TranslateService }, { type: i6.Router }, { type: i1$1.AppStateService }] });
 
 class ChartRealtimeService {
     constructor(measurementRealtime, alarmRealtimeService, eventRealtimeService, echartsOptionsService) {
@@ -1362,6 +1394,7 @@ class ChartRealtimeService {
         this.MIN_REALTIME_TIMEOUT = 250;
         this.MAX_REALTIME_TIMEOUT = 5_000;
         this.lastMeasurements = new Map();
+        this.pendingAlarmsOrEvents = new Map();
         this.currentAlarms = [];
         this.currentEvents = [];
     }
@@ -1403,7 +1436,7 @@ class ChartRealtimeService {
                 dateFrom: this.currentTimeRange.dateFrom.toISOString(),
                 dateTo: this.currentTimeRange.dateTo.toISOString()
             });
-            interval(this.INTERVAL)
+            this.realtimeIntervalSubscription = interval(this.INTERVAL)
                 .pipe(tap(() => {
                 const windowSize = this.currentTimeRange.dateTo.valueOf() - this.currentTimeRange.dateFrom.valueOf();
                 const now = Date.now();
@@ -1438,7 +1471,16 @@ class ChartRealtimeService {
         this.realtimeSubscriptionMeasurements = measurement$
             .pipe(buffer(bufferReset$))
             .subscribe(measurements => {
-            this.updateChartInstance(measurements, null, displayOptions, datapointOutOfSyncCallback);
+            const alarmsOrEvents = Array.from(this.pendingAlarmsOrEvents.values());
+            this.pendingAlarmsOrEvents.clear();
+            if (alarmsOrEvents.length) {
+                alarmsOrEvents.forEach(alarmOrEvent => {
+                    this.updateChartInstance(measurements, alarmOrEvent, displayOptions, datapointOutOfSyncCallback);
+                });
+            }
+            else {
+                this.updateChartInstance(measurements, null, displayOptions, datapointOutOfSyncCallback);
+            }
             // Store the last measurements
             measurements.forEach(measurement => {
                 this.lastMeasurements.set(measurement.datapoint.fragment, measurement);
@@ -1446,27 +1488,21 @@ class ChartRealtimeService {
         });
         this.realtimeSubscriptionAlarmsEvents = allAlarmsAndEvents$
             .pipe(map(alarmOrEvent => {
-            const foundAlarmOrEvent = activeAlarmsOrEvents.find(aOrE => {
-                return aOrE.filters.type === alarmOrEvent.type;
-            });
+            const foundAlarmOrEvent = activeAlarmsOrEvents.find(aOrE => aOrE.filters.type === alarmOrEvent.type);
             if (foundAlarmOrEvent) {
                 alarmOrEvent['color'] = foundAlarmOrEvent.color;
                 alarmOrEvent['selectedDatapoint'] = foundAlarmOrEvent.selectedDatapoint;
+                const key = String(alarmOrEvent.id || alarmOrEvent.creationTime);
+                this.pendingAlarmsOrEvents.set(key, alarmOrEvent);
             }
-            if (foundAlarmOrEvent) {
-                const fragment = alarmOrEvent['selectedDatapoint']?.fragment;
-                if (fragment && this.lastMeasurements.has(fragment)) {
-                    const lastMeasurement = this.lastMeasurements.get(fragment);
-                    this.updateChartInstance([lastMeasurement], alarmOrEvent, displayOptions, datapointOutOfSyncCallback);
-                }
-            }
-            return foundAlarmOrEvent ? alarmOrEvent : null;
+            return null;
         }))
             .subscribe();
     }
     stopRealtime() {
         this.realtimeSubscriptionMeasurements?.unsubscribe();
         this.realtimeSubscriptionAlarmsEvents?.unsubscribe();
+        this.realtimeIntervalSubscription?.unsubscribe();
     }
     /**
      * Updates the chart with the current alarms and events data. Only used when no active datapoints are selected.