@c8y/ngx-components 1023.80.2 → 1023.81.3

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

@@ -1560,8 +1560,9 @@ class ChartRealtimeService {
         this.currentAlarms = [];
         this.currentEvents = [];
         this.activeDatapoints = [];
+        this.outOfSyncDatapoints = new Set();
     }
-    startRealtime(echartsInstance, datapoints, timeRange, datapointOutOfSyncCallback, timeRangeChangedCallback, alarmOrEventConfig = [], displayOptions, alarms, events, alarmOrEventReceivedCallback) {
+    startRealtime(echartsInstance, datapoints, timeRange, datapointOutOfSyncCallback, datapointBackInSyncCallback, timeRangeChangedCallback, alarmOrEventConfig = [], displayOptions, alarms, events, alarmOrEventReceivedCallback) {
         this.echartsInstance = echartsInstance;
         this.activeDatapoints = datapoints;
         this.currentTimeRange = {
@@ -1626,9 +1627,11 @@ class ChartRealtimeService {
         const updateThrottleTime = this.getRealtimeUpdateThrottleTime(timeRange);
         const measurement$ = merge(...measurementsForDatapoints);
         const bufferReset$ = merge(measurement$.pipe(throttleTime(updateThrottleTime)), interval(this.INTERVAL).pipe(tap(() => {
+            const windowSize = this.currentTimeRange.dateTo.valueOf() - this.currentTimeRange.dateFrom.valueOf();
+            const now = Date.now();
             this.currentTimeRange = {
-                dateFrom: new Date((this.currentTimeRange?.dateFrom?.valueOf() || 0) + this.INTERVAL),
-                dateTo: new Date((this.currentTimeRange?.dateTo?.valueOf() || 0) + this.INTERVAL)
+                dateFrom: new Date(now - windowSize),
+                dateTo: new Date(now)
             };
             timeRangeChangedCallback(this.currentTimeRange);
         }), throttleTime(updateThrottleTime))).pipe(throttleTime(this.MIN_REALTIME_TIMEOUT));
@@ -1639,11 +1642,11 @@ class ChartRealtimeService {
             this.pendingAlarmsOrEvents.clear();
             if (alarmsOrEvents.length) {
                 alarmsOrEvents.forEach(alarmOrEvent => {
-                    this.updateChartInstance(measurements, alarmOrEvent, displayOptions, datapointOutOfSyncCallback);
+                    this.updateChartInstance(measurements, alarmOrEvent, displayOptions, datapointOutOfSyncCallback, datapointBackInSyncCallback);
                 });
             }
             else {
-                this.updateChartInstance(measurements, null, displayOptions, datapointOutOfSyncCallback);
+                this.updateChartInstance(measurements, null, displayOptions, datapointOutOfSyncCallback, datapointBackInSyncCallback);
             }
             // Store the last measurements
             measurements.forEach(measurement => {
@@ -1712,7 +1715,7 @@ class ChartRealtimeService {
         }
         return calculatedThrottleTime;
     }
-    updateChartInstance(receivedMeasurements, alarmOrEvent, displayOptions, datapointOutOfSyncCallback) {
+    updateChartInstance(receivedMeasurements, alarmOrEvent, displayOptions, datapointOutOfSyncCallback, datapointBackInSyncCallback) {
         const isEvent = (item) => !('severity' in item);
         const isAlarm = (item) => 'severity' in item;
         const seriesDataToUpdate = new Map();
@@ -1747,7 +1750,7 @@ class ChartRealtimeService {
                 }
             }
             seriesMatchingDatapoint['data'] = this.removeValuesBeforeTimeRange(seriesMatchingDatapoint);
-            this.checkForValuesAfterTimeRange(seriesMatchingDatapoint['data'], datapoint, datapointOutOfSyncCallback);
+            this.checkForValuesAfterTimeRange(seriesMatchingDatapoint['data'], datapoint, datapointOutOfSyncCallback, datapointBackInSyncCallback);
         });
         // Process alarm/event OUTSIDE the measurement loop.
         // Previously this was inside seriesDataToUpdate.forEach(), which meant alarms/events
@@ -1839,26 +1842,32 @@ class ChartRealtimeService {
     /**
      * Detects if a datapoint has measurements with future timestamps (out-of-sync).
      *
-     * Why 300ms tolerance?
+     * Why 2000ms tolerance?
      * Device clocks may be slightly ahead of browser time, network latency, or processing delays.
      * Without tolerance, these minor drifts would cause false positive warnings.
      *
      * Example:
      *   Browser time: 12:00:00.000
-     *   Measurement:  12:00:00.200 (device 200ms ahead)
+     *   Measurement:  12:00:01.000 (device 1000ms ahead)
      *   Without tolerance: flagged as out-of-sync (false positive)
-     *   With 300ms tolerance: allowed (200ms < 300ms threshold)
+     *   With 2000ms tolerance: allowed (1000ms < 2000ms threshold)
      *
      * When triggered, a warning icon appears next to the datapoint in the legend.
      */
-    checkForValuesAfterTimeRange(data, datapoint, datapointOutOfSyncCallback) {
-        const nowWithTolerance = Date.now() + 300;
+    checkForValuesAfterTimeRange(data, datapoint, datapointOutOfSyncCallback, datapointBackInSyncCallback) {
+        const nowWithTolerance = Date.now() + 2000;
         const valueAfterNowExists = data.some(([dateString]) => {
             return new Date(dateString).valueOf() > nowWithTolerance;
         });
+        const datapointId = datapoint.__target?.id + datapoint.fragment + datapoint.series;
         if (valueAfterNowExists) {
+            this.outOfSyncDatapoints.add(datapointId);
             datapointOutOfSyncCallback(datapoint);
         }
+        else if (this.outOfSyncDatapoints.has(datapointId)) {
+            this.outOfSyncDatapoints.delete(datapointId);
+            datapointBackInSyncCallback(datapoint);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ChartRealtimeService, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlarmRealtimeService }, { token: i1.EventRealtimeService }, { token: EchartsOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ChartRealtimeService }); }
@@ -2096,6 +2105,7 @@ class ChartsComponent {
         this.configChangeOnZoomOut = new EventEmitter();
         this.timeRangeChangeOnRealtime = new EventEmitter();
         this.datapointOutOfSync = new EventEmitter();
+        this.datapointBackInSync = new EventEmitter();
         this.updateAlarmsAndEvents = new EventEmitter();
         this.isMarkedAreaEnabled = new EventEmitter();
         this.finishLoading = new EventEmitter(false);
@@ -2549,7 +2559,7 @@ class ChartsComponent {
             this.config.realtime &&
             this.echartsInstance) {
             const showOnlyAlarmsOrEvents = this.config.alarmsEventsConfigs?.length > 0 && this.activeDatapoints?.length === 0;
-            this.chartRealtimeService.startRealtime(this.echartsInstance, this.activeDatapoints, this.getTimeRange(), dp => this.datapointOutOfSync.emit(dp), timeRange => this.timeRangeChangeOnRealtime.emit(timeRange), this.config.alarmsEventsConfigs, {
+            this.chartRealtimeService.startRealtime(this.echartsInstance, this.activeDatapoints, this.getTimeRange(), dp => this.datapointOutOfSync.emit(dp), dp => this.datapointBackInSync.emit(dp), timeRange => this.timeRangeChangeOnRealtime.emit(timeRange), this.config.alarmsEventsConfigs, {
                 ...this.displayOptions,
                 showOnlyAlarmsOrEvents
             }, this.alarms, this.events, 
@@ -2830,7 +2840,7 @@ class ChartsComponent {
         return { dateFrom: timeRange.dateFrom.toISOString(), dateTo: timeRange.dateTo.toISOString() };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ChartsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ChartsComponent, isStandalone: true, selector: "c8y-charts", inputs: { config: "config", alerts: "alerts", chartViewContext: "chartViewContext" }, outputs: { configChangeOnZoomOut: "configChangeOnZoomOut", timeRangeChangeOnRealtime: "timeRangeChangeOnRealtime", datapointOutOfSync: "datapointOutOfSync", updateAlarmsAndEvents: "updateAlarmsAndEvents", isMarkedAreaEnabled: "isMarkedAreaEnabled", finishLoading: "finishLoading", updateActiveDatapoints: "updateActiveDatapoints", updateAggregatedSliderDatapoint: "updateAggregatedSliderDatapoint" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ChartsComponent, isStandalone: true, selector: "c8y-charts", inputs: { config: "config", alerts: "alerts", chartViewContext: "chartViewContext" }, outputs: { configChangeOnZoomOut: "configChangeOnZoomOut", timeRangeChangeOnRealtime: "timeRangeChangeOnRealtime", datapointOutOfSync: "datapointOutOfSync", datapointBackInSync: "datapointBackInSync", updateAlarmsAndEvents: "updateAlarmsAndEvents", isMarkedAreaEnabled: "isMarkedAreaEnabled", finishLoading: "finishLoading", updateActiveDatapoints: "updateActiveDatapoints", updateAggregatedSliderDatapoint: "updateAggregatedSliderDatapoint" }, providers: [
             { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) },
             ChartRealtimeService,
             MeasurementRealtimeService,
@@ -2878,6 +2888,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Output
             }], datapointOutOfSync: [{
                 type: Output
+            }], datapointBackInSync: [{
+                type: Output
             }], updateAlarmsAndEvents: [{
                 type: Output
             }], isMarkedAreaEnabled: [{