@c8y/ngx-components 1023.28.5 → 1023.37.0

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';
@@ -97,6 +97,8 @@ 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;
         if (YAxisOptions.forceMergeDatapoints) {
             return {
                 name: Array.from(datapointsWithValues)
@@ -106,7 +108,7 @@ class YAxisService {
                 nameTruncate: {
                     maxWidth: 350
                 },
-                nameGap: 25,
+                nameGap,
                 nameTextStyle: {
                     // add rich text to support multiple colors for different dp units
                     rich: this.buildRichTextStyle(datapointsWithValues)
@@ -172,7 +174,7 @@ class YAxisService {
                 nameTruncate: {
                     maxWidth: 350
                 },
-                nameGap: 25,
+                nameGap,
                 nameTextStyle: {
                     rich: this.buildRichTextStyle(uniqueUnitDps)
                 },
@@ -440,15 +442,11 @@ class EchartsOptionsService {
             setYaxisStartToZero: displayOptions.setYaxisStartToZero,
             showLabelAndUnit: displayOptions.showLabelAndUnit
         });
-        const AXIS_PADDING = 20;
+        const hasValues = datapointsWithValues.some(dp => dp.values && Object.keys(dp.values).length > 0);
         const leftAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'left') : [];
-        const gridLeft = leftAxis.length
-            ? leftAxis.length * (this.yAxisService.Y_AXIS_OFFSET - AXIS_PADDING)
-            : 32;
         const rightAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'right') : [];
-        const gridRight = rightAxis.length
-            ? rightAxis.length * (this.yAxisService.Y_AXIS_OFFSET - AXIS_PADDING)
-            : 16;
+        const gridLeft = this.calculateGridLeft(leftAxis.length, displayOptions.forceMergeDatapoints);
+        const gridRight = this.calculateGridRight(rightAxis.length, hasValues);
         const selectedLanguage = this.translate.currentLang;
         let intervalInMs = this.calculateExtendedIntervalInMs(selectedTimeRange?.interval || timeRange.interval || 'hours', selectedTimeRange || timeRange);
         if (sliderZoomUsed) {
@@ -487,17 +485,23 @@ class EchartsOptionsService {
                     filterMode: datapointsWithValues.some(dp => dp.lineType === 'bars') ? 'filter' : 'none',
                     zoomOnMouseWheel: true,
                     startValue: selectedTimeRange
-                        ? selectedTimeRange.dateFrom.valueOf()
-                        : timeRange.dateFrom.valueOf(),
+                        ? new Date(selectedTimeRange.dateFrom).valueOf()
+                        : new Date(timeRange.dateFrom).valueOf(),
                     endValue: selectedTimeRange
-                        ? selectedTimeRange.dateTo.valueOf()
-                        : timeRange.dateTo.valueOf()
+                        ? new Date(selectedTimeRange.dateTo).valueOf()
+                        : new Date(timeRange.dateTo).valueOf()
                 },
                 {
                     type: 'slider',
                     show: displayOptions.showSlider,
                     bottom: 8,
                     realtime: false,
+                    startValue: selectedTimeRange
+                        ? new Date(selectedTimeRange.dateFrom).valueOf()
+                        : new Date(timeRange.dateFrom).valueOf(),
+                    endValue: selectedTimeRange
+                        ? new Date(selectedTimeRange.dateTo).valueOf()
+                        : new Date(timeRange.dateTo).valueOf(),
                     left: displayOptions.sliderPositionMode === 'compact' ? '64px' : '64px',
                     right: displayOptions.sliderPositionMode === 'compact' ? '172px' : '64px',
                     labelFormatter(_value, valueStr) {
@@ -557,7 +561,7 @@ class EchartsOptionsService {
                         .map(date => new Date(date).valueOf())
                         .sort((a, b) => a - b)[0]
                     : new Date(timeRange.dateFrom).valueOf() - intervalInMs,
-                max: timeRange.dateTo,
+                max: new Date(timeRange.dateTo).valueOf(),
                 type: 'time',
                 animation: false,
                 axisPointer: {
@@ -1123,6 +1127,24 @@ class EchartsOptionsService {
             return grouped;
         }, {});
     }
+    calculateGridLeft(leftAxisCount, forceMergeDatapoints) {
+        const AXIS_PADDING = 20;
+        if (!leftAxisCount) {
+            return forceMergeDatapoints ? this.yAxisService.Y_AXIS_OFFSET : 32;
+        }
+        return leftAxisCount * (this.yAxisService.Y_AXIS_OFFSET - AXIS_PADDING);
+    }
+    calculateGridRight(rightAxisCount, hasValues) {
+        const RIGHT_AXIS_BASE_SPACE = 48;
+        const RIGHT_AXIS_INCREMENT_WITH_DATA = 32;
+        if (!rightAxisCount) {
+            return 32;
+        }
+        if (hasValues) {
+            return rightAxisCount * RIGHT_AXIS_INCREMENT_WITH_DATA;
+        }
+        return (rightAxisCount - 1) * this.yAxisService.Y_AXIS_OFFSET + RIGHT_AXIS_BASE_SPACE;
+    }
     /**
      * This method interpolates between two data points. The goal is to place the markPoint on the chart in the right place.
      * @param dpValuesArray array of data points
@@ -1716,10 +1738,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);
@@ -1952,6 +1989,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();
@@ -1970,15 +2009,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;
@@ -1999,26 +2044,35 @@ 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 {
+            // Only reset initialTimeRange if the change is NOT from a slider zoom on another widget
+            if (!this.mediator.isSliderZoomUpdate()) {
+                this.widgetTimeContextDateRangeService.updateInitialTimeRange(null);
+            }
+            // Clear the slider zoom flag after processing
+            this.mediator.isSliderZoomUpdate.set(false);
+            this.configChangedSubject.next();
         }
-        this.configChangedSubject.next();
     }
     ngOnInit() {
         if (this.alerts) {
@@ -2040,17 +2094,21 @@ class ChartsComponent {
             }
             const options = this.echartsInstance.getOption();
             const dataZoom = options['dataZoom'][0];
-            this.configChangeOnZoomOut.emit({
+            this.isChangeFromZoom = true;
+            // Set global flag so other widgets know this change is from slider zoom
+            this.mediator.isSliderZoomUpdate.set(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;
@@ -2477,7 +2535,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();
             }
         }));
@@ -2573,7 +2632,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,
@@ -2584,7 +2643,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,
@@ -2608,7 +2667,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: [{
@@ -2640,5 +2699,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CHART_VIEW_CONTEXT, ChartAlarmsService, ChartEventsService, ChartHelpersService, ChartsComponent, DATE_SELECTION_EXTENDED, ICONS_MAP, LEGEND_DISPLAY_OPTIONS, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, REALTIME_TEXTS, SEVERITY_LABELS, SelectAggregatedDatapointComponent };
+export { CHART_VIEW_CONTEXT, ChartAlarmsService, ChartAlertsComponent, ChartEventsService, ChartHelpersService, ChartsComponent, DATE_SELECTION_EXTENDED, ICONS_MAP, LEGEND_DISPLAY_OPTIONS, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, REALTIME_TEXTS, SEVERITY_LABELS, SelectAggregatedDatapointComponent };
 //# sourceMappingURL=c8y-ngx-components-echart.mjs.map