@c8y/ngx-components 1023.14.41 → 1023.14.47

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

@@ -15,7 +15,7 @@ import { INTERVALS } from '@c8y/ngx-components/interval-picker';
 import * as i5 from '@ngx-translate/core';
 import * as i1$1 from '@angular/common';
 import { NgIf, NgForOf, CommonModule as CommonModule$1 } from '@angular/common';
-import * as i3$1 from 'ngx-echarts';
+import * as i2$1 from 'ngx-echarts';
 import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i1$3 from 'ngx-bootstrap/popover';
@@ -96,7 +96,7 @@ class YAxisService {
         this.intlNumberFormatCompliantLocale = this.appStateService.state.lang.replace('_', '-');
     }
     getYAxis(datapointsWithValues, YAxisOptions) {
-        const YAxisPlacement = this.getYAxisPlacement(datapointsWithValues);
+        const YAxisPlacement = this.getYAxisPlacement(datapointsWithValues, YAxisOptions);
         if (YAxisOptions.forceMergeDatapoints) {
             return {
                 name: Array.from(datapointsWithValues)
@@ -109,14 +109,7 @@ class YAxisService {
                 nameGap: 25,
                 nameTextStyle: {
                     // add rich text to support multiple colors for different dp units
-                    rich: {
-                        ...Array.from(datapointsWithValues).reduce((acc, dp, index) => {
-                            acc[index] = {
-                                color: dp.color || '#6f7079'
-                            };
-                            return acc;
-                        }, {})
-                    }
+                    rich: this.buildRichTextStyle(datapointsWithValues)
                 },
                 type: 'value',
                 animation: true,
@@ -146,7 +139,6 @@ class YAxisService {
                 ...(YAxisOptions.setYaxisStartToZero === false && { min: 'dataMin' }) // we only set min when the option is false
             };
         }
-        const matchingDpSet = new Set();
         const firstOccurrence = new Set();
         return datapointsWithValues.map((dp, index) => {
             const barValues = dp.lineType === 'bars'
@@ -162,59 +154,32 @@ class YAxisService {
             const barMinOffset = dp.lineType === 'bars' && allBarsPositive && isDefined(barDataMin) && isDefined(barDataMax)
                 ? (barDataMax - barDataMin) * 0.1 || barDataMin * 0.1
                 : 0;
-            const isMatchingDp = (dp1, dp2) => dp1.min === dp2.min &&
-                dp1.max === dp2.max &&
-                isDefined(dp1.min) &&
-                isDefined(dp1.max) &&
-                isDefined(dp2.min) &&
-                isDefined(dp2.max);
-            const matchingDpRange = datapointsWithValues.some((dp2, index2) => isMatchingDp(dp, dp2) && index2 < index);
-            const anyMatchingDp = datapointsWithValues.some((dp2, index2) => isMatchingDp(dp, dp2) && index2 !== index);
+            const matchingDpRange = datapointsWithValues.some((dp2, index2) => this.isMatchingDp(dp, dp2) && index2 < index);
+            const anyMatchingDp = datapointsWithValues.some((dp2, index2) => this.isMatchingDp(dp, dp2) && index2 !== index);
             if (anyMatchingDp &&
                 !matchingDpRange &&
                 YAxisOptions.mergeMatchingDatapoints &&
                 !firstOccurrence.has(dp)) {
                 firstOccurrence.add(dp);
             }
-            if (firstOccurrence.has(dp)) {
-                datapointsWithValues.forEach(dp2 => {
-                    if (isMatchingDp(dp, dp2)) {
-                        matchingDpSet.add(dp2);
-                    }
-                });
-            }
+            const matchingDpSet = firstOccurrence.has(dp)
+                ? new Set(datapointsWithValues.filter(dp2 => this.isMatchingDp(dp, dp2)))
+                : new Set();
+            const uniqueUnitDps = firstOccurrence.has(dp) ? this.getUniqueUnits(matchingDpSet) : [];
             return {
-                name: YAxisOptions.showLabelAndUnit
-                    ? YAxisOptions.mergeMatchingDatapoints
-                        ? firstOccurrence.has(dp)
-                            ? Array.from(matchingDpSet)
-                                .map((dp, index) => `{${index}|${dp.unit}}`)
-                                .join(' /')
-                            : matchingDpRange
-                                ? ''
-                                : `${dp.label} [${dp.unit}]`
-                        : `${dp.label} [${dp.unit}]`
-                    : '',
+                name: this.buildYAxisNameFromUnits(dp, uniqueUnitDps, matchingDpRange, firstOccurrence.has(dp), YAxisOptions),
                 nameLocation: 'middle',
                 nameTruncate: {
                     maxWidth: 350
                 },
                 nameGap: 25,
                 nameTextStyle: {
-                    // add rich text to support multiple colors for different dp units
-                    rich: {
-                        ...Array.from(matchingDpSet).reduce((acc, dp, index) => {
-                            acc[index] = {
-                                color: dp.color
-                            };
-                            return acc;
-                        }, {})
-                    }
+                    rich: this.buildRichTextStyle(uniqueUnitDps)
                 },
                 type: 'value',
                 animation: true,
                 axisLine: {
-                    show: matchingDpRange && YAxisOptions.mergeMatchingDatapoints ? false : true,
+                    show: !(matchingDpRange && YAxisOptions.mergeMatchingDatapoints),
                     lineStyle: {
                         color: firstOccurrence.has(dp) ? '#6f7079' : dp.color
                     },
@@ -224,7 +189,7 @@ class YAxisService {
                     fontSize: 10,
                     show: !matchingDpRange || !YAxisOptions.mergeMatchingDatapoints,
                     formatter: val => {
-                        if (dp.min != undefined && dp.max != undefined) {
+                        if (this.isDefined(dp.min) && this.isDefined(dp.max)) {
                             const range = dp.max - dp.min;
                             const decimalPlaces = this.getDecimalPlaces(range);
                             return val.toFixed(decimalPlaces);
@@ -246,9 +211,7 @@ class YAxisService {
                 },
                 axisPointer: {
                     show: false,
-                    label: {
-                        show: false
-                    }
+                    label: { show: false }
                 },
                 ...(isDefined(dp.min)
                     ? { min: dp.min }
@@ -261,6 +224,42 @@ class YAxisService {
             };
         });
     }
+    getUniqueUnits(dps) {
+        const seenUnits = new Set();
+        return Array.from(dps).filter(dp => {
+            if (seenUnits.has(dp.unit) || !dp.unit) {
+                return false;
+            }
+            seenUnits.add(dp.unit);
+            return true;
+        });
+    }
+    isMatchingDp(dp1, dp2) {
+        return (dp1.min === dp2.min &&
+            dp1.max === dp2.max &&
+            this.isDefined(dp1.min) &&
+            this.isDefined(dp1.max) &&
+            this.isDefined(dp2.min) &&
+            this.isDefined(dp2.max));
+    }
+    isDefined(value) {
+        return value !== null && value !== undefined;
+    }
+    buildRichTextStyle(dps, fallbackColor = '#6f7079') {
+        return Array.from(dps).reduce((acc, dp, index) => {
+            acc[index] = { color: dp.color || fallbackColor };
+            return acc;
+        }, {});
+    }
+    buildYAxisNameFromUnits(dp, uniqueUnitDps, matchingDpRange, isFirstOccurrence, options) {
+        if (!options.showLabelAndUnit || (options.mergeMatchingDatapoints && matchingDpRange)) {
+            return '';
+        }
+        if (!options.mergeMatchingDatapoints || !isFirstOccurrence) {
+            return `${dp.label} [${dp.unit}]`;
+        }
+        return uniqueUnitDps.map((dp, index) => `{${index}|${dp.unit}}`).join(' / ');
+    }
     getDecimalPlaces(num) {
         const numStr = num.toString();
         const decimalIndex = numStr.indexOf('.');
@@ -269,18 +268,28 @@ class YAxisService {
         }
         return numStr.length - decimalIndex - 1;
     }
-    getYAxisPlacement(datapointsWithValues) {
+    getYAxisPlacement(datapointsWithValues, YAxisOptions) {
         const YAxisPositions = new Map();
         datapointsWithValues.forEach(dp => {
             const position = this.getYAxisPosition(dp, datapointsWithValues);
             YAxisPositions.set(dp, { position });
         });
-        const dpLeft = datapointsWithValues.filter(dp => YAxisPositions.get(dp).position === 'left');
-        const dpRight = datapointsWithValues.filter(dp => YAxisPositions.get(dp).position === 'right');
+        const dpLeft = datapointsWithValues.filter((dp, index) => YAxisPositions.get(dp).position === 'left' &&
+            this.isAxisVisible(dp, index, datapointsWithValues, YAxisOptions));
+        const dpRight = datapointsWithValues.filter((dp, index) => YAxisPositions.get(dp).position === 'right' &&
+            this.isAxisVisible(dp, index, datapointsWithValues, YAxisOptions));
         const YAxisPlacement = new Map();
-        YAxisPositions.forEach(({ position }, key) => {
-            const offset = (position === 'left' ? dpLeft : dpRight).indexOf(key) * this.Y_AXIS_OFFSET;
-            YAxisPlacement.set(key, { position: position, offset });
+        dpLeft.forEach((dp, index) => {
+            YAxisPlacement.set(dp, {
+                position: 'left',
+                offset: index * this.Y_AXIS_OFFSET
+            });
+        });
+        dpRight.forEach((dp, index) => {
+            YAxisPlacement.set(dp, {
+                position: 'right',
+                offset: index * this.Y_AXIS_OFFSET
+            });
         });
         return YAxisPlacement;
     }
@@ -297,6 +306,12 @@ class YAxisService {
             return 'left';
         }
     }
+    isAxisVisible(dp, index, dps, options) {
+        if (!options.mergeMatchingDatapoints) {
+            return true;
+        }
+        return !dps.some((dp2, index2) => this.isMatchingDp(dp, dp2) && index2 < index);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: YAxisService, deps: [{ token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: YAxisService }); }
 }
@@ -1699,10 +1714,25 @@ class ChartRealtimeService {
             series: allDataSeries
         });
     }
+    /**
+     * Detects if a datapoint has measurements with future timestamps (out-of-sync).
+     *
+     * Why 300ms 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)
+     *   Without tolerance: flagged as out-of-sync (false positive)
+     *   With 300ms tolerance: allowed (200ms < 300ms threshold)
+     *
+     * When triggered, a warning icon appears next to the datapoint in the legend.
+     */
     checkForValuesAfterTimeRange(data, datapoint, datapointOutOfSyncCallback) {
-        const now = new Date();
-        const valueAfterNowExists = data.some(([dateString, _]) => {
-            return new Date(dateString).valueOf() > now.valueOf();
+        const nowWithTolerance = Date.now() + 300;
+        const valueAfterNowExists = data.some(([dateString]) => {
+            return new Date(dateString).valueOf() > nowWithTolerance;
         });
         if (valueAfterNowExists) {
             datapointOutOfSyncCallback(datapoint);
@@ -1932,6 +1962,8 @@ class ChartsComponent {
         this.alarms = [];
         this.events = [];
         this.activeDatapoints = [];
+        /** Internal flag to track when chart data is being fetched */
+        this.isFetching = false;
         this.configChangeOnZoomOut = new EventEmitter();
         this.timeRangeChangeOnRealtime = new EventEmitter();
         this.datapointOutOfSync = new EventEmitter();
@@ -1950,15 +1982,21 @@ class ChartsComponent {
         this.mediator = inject(WidgetTimeContextMediatorService);
         this.widgetTimeContextDateRangeService = inject(WidgetTimeContextDateRangeService);
         this.loadedTimeRange = null;
-        this.chartOption$ = this.configChangedSubject.pipe(switchMap(() => this.loadAlarmsAndEvents()), switchMap(() => this.fetchSeriesForDatapoints$()), switchMap((datapointsWithValues) => {
+        /** Tracks if the last data fetch returned truncated data */
+        this.dataWasTruncated = false;
+        /** Tracks if current change originated from zoom interaction */
+        this.isChangeFromZoom = false;
+        this.chartOption$ = this.configChangedSubject.pipe(tap(() => (this.isFetching = true)), switchMap(() => this.loadAlarmsAndEvents()), switchMap(() => this.fetchSeriesForDatapoints$()), switchMap((datapointsWithValues) => {
             if (datapointsWithValues.length === 0 && this.config.alarmsEventsConfigs?.length === 0) {
                 this.echartsInstance?.clear();
                 this.showLoadMore = false;
                 return of(this.getDefaultChartOptions());
             }
-            this.loadedTimeRange = { ...this.getTimeRange() };
+            // Use padded range since data is fetched with 60s padding
+            this.loadedTimeRange = { ...this.getTimeRange(60_000) };
             return this.getChartOptions(datapointsWithValues);
         }), tap(v => {
+            this.isFetching = false;
             this.finishLoading.emit(false);
             if (v['empty']) {
                 return;
@@ -1979,26 +2017,29 @@ class ChartsComponent {
             this.configChangedSubject.next();
         });
     }
-    ngOnChanges(changes) {
-        const currentTimeRange = this.getTimeRange();
-        if (this.loadedTimeRange &&
-            new Date(currentTimeRange.dateFrom) >= new Date(this.loadedTimeRange.dateFrom) &&
-            new Date(currentTimeRange.dateTo) <= new Date(this.loadedTimeRange.dateTo) &&
-            changes.config.previousValue?.dateFrom !== changes.config.currentValue.dateFrom &&
-            changes.config.previousValue?.dateTo !== changes.config.currentValue.dateTo &&
-            changes.config.previousValue?.aggregation === changes.config.currentValue?.aggregation) {
-            // This is needed for cases when 2 data point graph widgets exist on the same dashboard
-            // and one of them changes the time range which is loaded, the other one should update the zoom level accordingly
+    ngOnChanges() {
+        const wasFromZoom = this.isChangeFromZoom;
+        this.isChangeFromZoom = false;
+        if (wasFromZoom) {
+            const currentRange = this.getTimeRange();
+            const isWithinLoadedRange = this.loadedTimeRange &&
+                new Date(currentRange.dateFrom) >= new Date(this.loadedTimeRange.dateFrom) &&
+                new Date(currentRange.dateTo) <= new Date(this.loadedTimeRange.dateTo);
+            // Sync zoom level across multiple data point graph widgets on the same dashboard
             if (this.echartsInstance) {
                 this.echartsInstance.dispatchAction({
                     type: 'dataZoom',
-                    startValue: new Date(currentTimeRange.dateFrom).getTime(),
-                    endValue: new Date(currentTimeRange.dateTo).getTime()
+                    startValue: new Date(currentRange.dateFrom).getTime(),
+                    endValue: new Date(currentRange.dateTo).getTime()
                 }, { silent: true });
             }
-            return;
+            if (!isWithinLoadedRange || this.dataWasTruncated) {
+                this.configChangedSubject.next();
+            }
+        }
+        else {
+            this.configChangedSubject.next();
         }
-        this.configChangedSubject.next();
     }
     ngOnInit() {
         if (this.alerts) {
@@ -2020,17 +2061,19 @@ class ChartsComponent {
             }
             const options = this.echartsInstance.getOption();
             const dataZoom = options['dataZoom'][0];
-            this.configChangeOnZoomOut.emit({
+            this.isChangeFromZoom = true;
+            const zoomDates = {
                 dateFrom: new Date(dataZoom['startValue']),
                 dateTo: new Date(dataZoom['endValue']),
                 interval: 'custom'
-            });
+            };
+            this.configChangeOnZoomOut.emit(zoomDates);
             this.echartsInstance.setOption(options);
             this.chartRealtimeService.stopRealtime();
         };
         const debouncedDataZoomHandler = this.config.realtime
             ? dataZoomHandler
-            : this.debounce(dataZoomHandler, 1000);
+            : this.debounce(dataZoomHandler, 100);
         this.echartsInstance.on('dataZoom', debouncedDataZoomHandler);
         this.echartsInstance.on('click', this.onChartClick.bind(this));
         let originalFormatter = null;
@@ -2454,7 +2497,8 @@ class ChartsComponent {
             datapointsWithValuesRequests.push(request);
         }
         return forkJoin(datapointsWithValuesRequests).pipe(tap((dpsWithValues) => {
-            if (dpsWithValues.some(dp => dp['truncated'])) {
+            this.dataWasTruncated = dpsWithValues.some(dp => dp['truncated']);
+            if (this.dataWasTruncated) {
                 this.addTruncatedDataAlert();
             }
         }));
@@ -2550,7 +2594,7 @@ class ChartsComponent {
         return { dateFrom: timeRange.dateFrom.toISOString(), dateTo: timeRange.dateTo.toISOString() };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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.16", 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: [
             { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) },
             ChartRealtimeService,
             MeasurementRealtimeService,
@@ -2561,7 +2605,7 @@ class ChartsComponent {
             YAxisService,
             AlarmSeverityToIconPipe,
             AlarmSeverityToLabelPipe
-        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-relative fit-h chart-container\">\n  <div\n    class=\"fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOption$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n\n  <div\n    class=\"chart-load-more\"\n    *ngIf=\"showLoadMore\"\n  >\n    <button\n      class=\"btn btn-primary btn-block\"\n      (click)=\"loadMoreData()\"\n    >\n      <i c8yIcon=\"restore\"></i>\n      {{ 'Load more' | translate }}\n    </button>\n  </div>\n\n  <div\n    class=\"e-charts--aggregated-datapoint\"\n    *ngIf=\"\n      activeDatapoints.length > 1 &&\n      config?.showSlider &&\n      chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW\n    \"\n  >\n    <c8y-select-aggregated-datapoint\n      [value]=\"config?.aggregatedDatapoint || activeDatapoints[0]\"\n      (valueChange)=\"updateAggregatedSliderDatapoint.emit($event)\"\n      [activeDatapoints]=\"activeDatapoints\"\n    ></c8y-select-aggregated-datapoint>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: NgxEchartsModule }, { kind: "directive", type: i3$1.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: ChartAlertsComponent, selector: "c8y-chart-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: SelectAggregatedDatapointComponent, selector: "c8y-select-aggregated-datapoint", inputs: ["activeDatapoints", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-relative fit-h chart-container\">\n  <div\n    class=\"fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOption$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n\n  @if (showLoadMore) {\n    <div class=\"chart-load-more\">\n      <button\n        class=\"btn btn-primary btn-block\"\n        [disabled]=\"isFetching\"\n        (click)=\"loadMoreData()\"\n      >\n        <i c8yIcon=\"restore\"></i>\n        {{ 'Load more' | translate }}\n      </button>\n    </div>\n  }\n\n  @if (\n    activeDatapoints.length > 1 &&\n    config?.showSlider &&\n    chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW\n  ) {\n    <div class=\"e-charts--aggregated-datapoint\">\n      <c8y-select-aggregated-datapoint\n        [value]=\"config?.aggregatedDatapoint || activeDatapoints[0]\"\n        (valueChange)=\"updateAggregatedSliderDatapoint.emit($event)\"\n        [activeDatapoints]=\"activeDatapoints\"\n      ></c8y-select-aggregated-datapoint>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: NgxEchartsModule }, { kind: "directive", type: i2$1.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: ChartAlertsComponent, selector: "c8y-chart-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: SelectAggregatedDatapointComponent, selector: "c8y-select-aggregated-datapoint", inputs: ["activeDatapoints", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartsComponent, decorators: [{
             type: Component,
@@ -2585,7 +2629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ChartAlertsComponent,
                         AlarmsModule,
                         SelectAggregatedDatapointComponent
-                    ], template: "<div class=\"p-relative fit-h chart-container\">\n  <div\n    class=\"fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOption$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n\n  <div\n    class=\"chart-load-more\"\n    *ngIf=\"showLoadMore\"\n  >\n    <button\n      class=\"btn btn-primary btn-block\"\n      (click)=\"loadMoreData()\"\n    >\n      <i c8yIcon=\"restore\"></i>\n      {{ 'Load more' | translate }}\n    </button>\n  </div>\n\n  <div\n    class=\"e-charts--aggregated-datapoint\"\n    *ngIf=\"\n      activeDatapoints.length > 1 &&\n      config?.showSlider &&\n      chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW\n    \"\n  >\n    <c8y-select-aggregated-datapoint\n      [value]=\"config?.aggregatedDatapoint || activeDatapoints[0]\"\n      (valueChange)=\"updateAggregatedSliderDatapoint.emit($event)\"\n      [activeDatapoints]=\"activeDatapoints\"\n    ></c8y-select-aggregated-datapoint>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"p-relative fit-h chart-container\">\n  <div\n    class=\"fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOption$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n\n  @if (showLoadMore) {\n    <div class=\"chart-load-more\">\n      <button\n        class=\"btn btn-primary btn-block\"\n        [disabled]=\"isFetching\"\n        (click)=\"loadMoreData()\"\n      >\n        <i c8yIcon=\"restore\"></i>\n        {{ 'Load more' | translate }}\n      </button>\n    </div>\n  }\n\n  @if (\n    activeDatapoints.length > 1 &&\n    config?.showSlider &&\n    chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW\n  ) {\n    <div class=\"e-charts--aggregated-datapoint\">\n      <c8y-select-aggregated-datapoint\n        [value]=\"config?.aggregatedDatapoint || activeDatapoints[0]\"\n        (valueChange)=\"updateAggregatedSliderDatapoint.emit($event)\"\n        [activeDatapoints]=\"activeDatapoints\"\n      ></c8y-select-aggregated-datapoint>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], alerts: [{