@c8y/ngx-components 1024.1.6 → 1024.2.4

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

@@ -3,22 +3,23 @@ import { Injectable, inject, SecurityContext, ViewChild, Input, Component, Event
 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 * as i1$1 from '@c8y/ngx-components';
 import { CommonModule, FormsModule, IconDirective, C8yTranslatePipe, WidgetTimeContextMediatorService, WidgetTimeContextDateRangeService, ThemeSwitcherService, DismissAlertStrategy, DynamicComponentAlert, CoreModule, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService } from '@c8y/ngx-components';
+import chroma from 'chroma-js';
 import * as echarts from 'echarts';
-import * as i1$2 from '@c8y/client';
+import * as i1 from '@ngx-translate/core';
+import * as i1$3 from '@c8y/client';
 import { AlarmStatus, aggregationType, MeasurementService } from '@c8y/client';
 import * as i6 from '@angular/router';
 import * as i4 from '@c8y/ngx-components/alarms';
 import { AlarmsModule, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe } from '@c8y/ngx-components/alarms';
 import { INTERVALS } from '@c8y/ngx-components/interval-picker';
-import * as i5 from '@ngx-translate/core';
-import * as i1$1 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { NgIf, NgForOf, CommonModule as CommonModule$1 } from '@angular/common';
 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';
+import * as i1$4 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i2 from 'ngx-bootstrap/dropdown';
@@ -102,17 +103,18 @@ const ICONS_MAP = {
 };
 
 class YAxisService {
-    constructor(appStateService) {
-        this.appStateService = appStateService;
+    constructor(translate) {
+        this.translate = translate;
         this.Y_AXIS_OFFSET = 48;
         this.Y_AXIS_OFFSET_WITH_DP_VALUES = 22;
         this.Y_AXIS_OFFSET_WITHOUT_DP_VALUES = 15;
-        this.intlNumberFormatCompliantLocale = this.appStateService.state.lang.replace('_', '-');
     }
     getYAxis(datapointsWithValues, YAxisOptions) {
         const YAxisPlacement = this.getYAxisPlacement(datapointsWithValues, YAxisOptions);
         const hasValues = dp => dp.values && Object.keys(dp.values).length > 0;
         const anyDpHasValues = datapointsWithValues.some(dp => hasValues(dp));
+        const selectedLanguage = this.translate.currentLang;
+        const locale = selectedLanguage?.replace('_', '-');
         if (YAxisOptions.forceMergeDatapoints) {
             return {
                 name: Array.from(datapointsWithValues)
@@ -134,7 +136,12 @@ class YAxisService {
                 axisLabel: {
                     fontSize: 10,
                     show: true,
-                    color: YAxisOptions.axisColor
+                    color: YAxisOptions.axisColor,
+                    formatter: (val) => new Intl.NumberFormat(locale, {
+                        notation: 'compact',
+                        compactDisplay: 'short',
+                        maximumFractionDigits: 3
+                    }).format(val)
                 },
                 axisLine: {
                     show: true,
@@ -214,9 +221,14 @@ class YAxisService {
                         if (this.isDefined(dp.min) && this.isDefined(dp.max)) {
                             const range = dp.max - dp.min;
                             const decimalPlaces = this.getDecimalPlaces(range);
-                            return val.toFixed(decimalPlaces);
+                            return new Intl.NumberFormat(locale, {
+                                notation: 'compact',
+                                compactDisplay: 'short',
+                                minimumFractionDigits: decimalPlaces,
+                                maximumFractionDigits: decimalPlaces
+                            }).format(val);
                         }
-                        return new Intl.NumberFormat(this.intlNumberFormatCompliantLocale, {
+                        return new Intl.NumberFormat(locale, {
                             notation: 'compact',
                             compactDisplay: 'short',
                             maximumFractionDigits: 3
@@ -335,12 +347,12 @@ class YAxisService {
         }
         return !dps.some((dp2, index2) => this.isMatchingDp(dp, dp2) && index2 < index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YAxisService, deps: [{ token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YAxisService, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YAxisService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YAxisService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.AppStateService }] });
+        }], ctorParameters: () => [{ type: i1.TranslateService }] });
 
 function assertUnreachable(_) {
     throw new Error('Case unreachable.');
@@ -367,6 +379,10 @@ class ChartTypesService {
                 return this.stepBeforeSeriesOption(color, isMinMaxChart, renderType);
             case 'step-after':
                 return this.stepAfterSeriesOption(color, isMinMaxChart, renderType);
+            case 'dashed':
+                return this.dashedLineSeriesOption(color, isMinMaxChart, renderType);
+            case 'dotted':
+                return this.dottedLineSeriesOption(color, isMinMaxChart, renderType);
             case 'line':
             case undefined:
                 return this.lineSeriesOption(color, isMinMaxChart, renderType);
@@ -438,6 +454,20 @@ class ChartTypesService {
         const baseOption = this.lineSeriesOption(color, isMinMaxChart, renderType);
         return { ...baseOption, step: 'end' };
     }
+    dashedLineSeriesOption(color, isMinMaxChart, renderType) {
+        const baseOption = this.lineSeriesOption(color, isMinMaxChart, renderType);
+        return {
+            ...baseOption,
+            lineStyle: { ...baseOption.lineStyle, type: 'dashed' }
+        };
+    }
+    dottedLineSeriesOption(color, isMinMaxChart, renderType) {
+        const baseOption = this.lineSeriesOption(color, isMinMaxChart, renderType);
+        return {
+            ...baseOption,
+            lineStyle: { ...baseOption.lineStyle, type: 'dotted' }
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartTypesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartTypesService }); }
 }
@@ -445,8 +475,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type: Injectable
         }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const INDEX_HTML = '/index.html';
+const DEFAULT_DATAPOINT_COLOR = '#1776bf';
 class EchartsOptionsService {
     constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router) {
         this.datePipe = datePipe;
@@ -467,7 +497,11 @@ class EchartsOptionsService {
             numberOfDecimalPlaces: CHART_DISPLAY_OPTION_DEFAULTS.numberOfDecimalPlaces,
             ...displayOptions
         };
-        const yAxis = this.yAxisService.getYAxis(datapointsWithValues, {
+        // Expand datapoints so each enabled render type config becomes its own virtual dp,
+        // but only when aggregation is active — without aggregation the API returns raw
+        // min/max data and we must render a single series in the datapoint's primary color.
+        const expandedDatapoints = this.expandDatapointsForRenderTypeConfigs(datapointsWithValues, displayOptions.aggregationActive);
+        const yAxis = this.yAxisService.getYAxis(expandedDatapoints, {
             showSplitLines: showSplitLines.YAxis,
             mergeMatchingDatapoints: displayOptions.mergeMatchingDatapoints,
             forceMergeDatapoints: displayOptions.forceMergeDatapoints,
@@ -515,7 +549,7 @@ class EchartsOptionsService {
                 {
                     type: 'inside',
                     // TODO: use 'none' only when this bug is fixed https://github.com/apache/echarts/issues/17858
-                    filterMode: datapointsWithValues.some(dp => dp.lineType === 'bars') ? 'filter' : 'none',
+                    filterMode: expandedDatapoints.some(dp => dp.lineType === 'bars') ? 'filter' : 'none',
                     zoomOnMouseWheel: true,
                     startValue: selectedTimeRange
                         ? new Date(selectedTimeRange.dateFrom).valueOf()
@@ -580,6 +614,7 @@ class EchartsOptionsService {
                 },
                 backgroundColor: 'var(--c8y-root-component-background-default)',
                 borderColor: 'var(--c8y-root-component-border-color)',
+                padding: 0,
                 formatter: this.getTooltipFormatter(displayOptions),
                 appendToBody: true,
                 position: this.tooltipPosition(),
@@ -606,7 +641,7 @@ class EchartsOptionsService {
                     lineStyle: {
                         color: displayOptions.axisColor
                     },
-                    onZeroAxisIndex: datapointsWithValues.findIndex(dp => dp.lineType === 'bars') // align X axis to 0 of Y axis of datapoint with lineType 'bars'
+                    onZeroAxisIndex: expandedDatapoints.findIndex(dp => dp.lineType === 'bars') // align X axis to 0 of Y axis of datapoint with lineType 'bars'
                 },
                 axisLabel: {
                     hideOverlap: true,
@@ -651,7 +686,7 @@ class EchartsOptionsService {
             yAxis,
             series: [
                 this.getAggregatedSeries(aggregatedDatapoint || null, displayOptions),
-                ...this.getChartSeries(datapointsWithValues, events, alarms, displayOptions)
+                ...this.getChartSeries(expandedDatapoints, events, alarms, displayOptions)
             ]
         };
     }
@@ -680,7 +715,9 @@ class EchartsOptionsService {
                         12;
                 break;
             default:
-                intervalInMs = INTERVALS.find(i => i.id === interval).timespanInMs;
+                intervalInMs = INTERVALS.find(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                i => i.id === interval).timespanInMs;
                 break;
         }
         return intervalInMs;
@@ -690,7 +727,7 @@ class EchartsOptionsService {
             return { type: 'line', data: [], id: 'aggregated-empty' };
         }
         const series = [];
-        const renderType = aggregatedDatapoint?.renderType || 'min';
+        const renderType = aggregatedDatapoint?.renderType || 'avg';
         const idx = 0;
         if (renderType === 'area') {
             series.push(this.getSingleSeries(aggregatedDatapoint, 'min', idx, true, displayOptions, this.AGGREGATED_SERIES_TYPE));
@@ -838,6 +875,7 @@ class EchartsOptionsService {
         const XAxisValue = tooltipParams[0].data[0];
         const YAxisReadings = [];
         const allSeries = this.echartsInstance?.getOption()['series'];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const legendSelected = this.echartsInstance?.getOption()['legend']?.[0]?.selected;
         // filter out alarm, event, and hidden series
         const allDataPointSeries = allSeries.filter(series => series['typeOfSeries'] !== 'alarm' &&
@@ -1059,8 +1097,8 @@ class EchartsOptionsService {
                     YAxisReadings.push(this.buildCompactTooltipRow(color, label, value));
                 }
                 else {
-                    YAxisReadings.push(`<div class="d-flex a-i-center p-b-8 text-default"><span class='dlt-c8y-icon-circle m-r-4' style='color: ${color};'></span>` + // color circle
-                        `<strong class="text-truncate">${label}</strong></div>` + // name
+                    YAxisReadings.push(`<div class="d-flex a-i-center p-8 p-b-0 text-default"><span class='dlt-c8y-icon-circle m-r-4' style='color: ${color};'></span>` + // color circle
+                        `<span class="text-truncate text-medium">${label}</span></div>` + // name
                         `${value}` // single value or min-max range
                     );
                 }
@@ -1089,7 +1127,7 @@ class EchartsOptionsService {
         if (displayOptions.showCompactTooltip) {
             return `${minStr} — ${maxStr}${unitStr}`;
         }
-        return (`<div class="d-flex a-i-center separator-top p-t-8 p-b-8 text-default"><label class="text-12 m-r-8 m-b-0">${echarts.format.encodeHTML(this.datePipe.transform(minValue[0]))}</label>` +
+        return (`<div class="d-flex a-i-center separator-bottom p-8 p-b-0 text-default"><label class="text-12 m-r-8 m-b-0">${echarts.format.encodeHTML(this.datePipe.transform(minValue[0]))}</label>` +
             `<span class="m-l-auto text-12">${minStr} — ${maxStr}${unitStr}</span>` +
             `</div>`);
     }
@@ -1111,7 +1149,7 @@ class EchartsOptionsService {
         if (isCompact) {
             return `${valStr}${unitStr}`;
         }
-        return (`<div class="d-flex a-i-center p-t-8 p-b-8 separator-top text-default">` +
+        return (`<div class="d-flex a-i-center separator-bottom p-8 p-b-0 text-default">` +
             `<label class="m-b-0 m-r-8 text-12">${echarts.format.encodeHTML(this.datePipe.transform(seriesValue[0]))}</label>` +
             `<span class="m-l-auto text-12">${valStr}${unitStr}</span>` +
             `</div>`);
@@ -1122,7 +1160,7 @@ class EchartsOptionsService {
      * @returns The processed value.
      */
     processEvent(event) {
-        let value = `<ul class="list-unstyled small separator-top text-default">`;
+        let value = `<ul class="list-unstyled small separator-top text-default p-l-8 p-r-8">`;
         value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event type')))}</label><span class="small m-l-auto"><code title="${echarts.format.encodeHTML(event.type)}">${echarts.format.encodeHTML(event.type)}</code></span></li>`;
         value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event text')))}</label><span class="small m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px; -webkit-line-clamp: 5;" title="${echarts.format.encodeHTML(event.text)}">${echarts.format.encodeHTML(event.text)}</span></li>`;
         value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event time')))}</label><span class="small m-l-auto">${echarts.format.encodeHTML(this.datePipe.transform(event.time))}<span></li>`;
@@ -1135,7 +1173,7 @@ class EchartsOptionsService {
      * @returns The processed value.
      */
     async processAlarm(alarm) {
-        let value = `<ul class="list-unstyled small separator-top text-default m-0">`;
+        let value = `<ul class="list-unstyled small separator-top text-default m-0 p-l-8 p-r-8">`;
         value += `<li class="p-t-4 p-b-4 d-flex a-i-center separator-bottom text-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm severity')))}</label>`;
         value += `<span class="small d-inline-flex a-i-center gap-4 m-l-auto"><i class="stroked-icon icon-14 status dlt-c8y-icon-${echarts.format.encodeHTML(this.severityIconPipe.transform(alarm.severity))} ${alarm.severity.toLowerCase()}" > </i> ${this.severityLabelPipe.transform(alarm.severity)} </span></li>`;
         value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm type')))}</label><span class="small m-l-auto"><code title="${echarts.format.encodeHTML(alarm.type)}">${echarts.format.encodeHTML(alarm.type)}</code></span></li>`;
@@ -1162,17 +1200,53 @@ class EchartsOptionsService {
         const series = [];
         let eventSeries = [];
         let alarmSeries = [];
+        // When expandDatapointsForRenderTypeConfigs produces multiple virtual DPs from
+        // the same source (e.g. separate min + max), they each get their own Y-axis entry
+        // but the duplicate is hidden by YAxisService.  To keep all series on the *same*
+        // visible axis, map each expanded DP to the first expanded index that shares its
+        // source identity and range.
+        const sourceYAxisMap = new Map();
+        const resolveYAxisIdx = (dp, idx) => {
+            if (displayOptions.forceMergeDatapoints)
+                return idx;
+            const key = `${dp.__target?.id}|${dp.fragment}|${dp.series}|${dp.min ?? ''}|${dp.max ?? ''}`;
+            if (!sourceYAxisMap.has(key)) {
+                sourceYAxisMap.set(key, idx);
+            }
+            return sourceYAxisMap.get(key);
+        };
         datapointsWithValues.forEach((dp, idx) => {
-            const renderType = dp.renderType || 'min';
-            if (renderType === 'area') {
-                series.push(this.getSingleSeries(dp, 'min', idx, true, displayOptions));
-                series.push(this.getSingleSeries(dp, 'max', idx, true, displayOptions));
+            const yIdx = resolveYAxisIdx(dp, idx);
+            const renderType = dp.renderType || 'avg';
+            const renderTypes = !dp.renderTypeConfigs && dp.renderTypes?.length > 1 && displayOptions.aggregationActive
+                ? dp.renderTypes
+                : null;
+            if (renderTypes) {
+                // Legacy multi-render-type (no renderTypeConfigs): create one series per type
+                for (const rt of renderTypes) {
+                    if (rt === 'area') {
+                        series.push(this.getSingleSeries(dp, 'min', yIdx, true, displayOptions));
+                        series.push(this.getSingleSeries(dp, 'max', yIdx, true, displayOptions));
+                    }
+                    else {
+                        series.push(this.getSingleSeries(dp, rt, yIdx, false, displayOptions, '', rt));
+                    }
+                }
+            }
+            else if (renderType === 'area') {
+                if (dp.renderAsBand) {
+                    series.push(...this.getBandSeries(dp, yIdx, displayOptions));
+                }
+                else {
+                    series.push(this.getSingleSeries(dp, 'min', yIdx, true, displayOptions));
+                    series.push(this.getSingleSeries(dp, 'max', yIdx, true, displayOptions));
+                }
             }
             else {
-                series.push(this.getSingleSeries(dp, renderType, idx, false, displayOptions));
+                series.push(this.getSingleSeries(dp, renderType, yIdx, false, displayOptions));
             }
-            const newEventSeries = this.getAlarmOrEventSeries(dp, renderType, false, events, 'event', displayOptions, null, idx);
-            const newAlarmSeries = this.getAlarmOrEventSeries(dp, renderType, false, alarms, 'alarm', displayOptions, null, idx);
+            const newEventSeries = this.getAlarmOrEventSeries(dp, renderType, false, events, 'event', displayOptions, null, yIdx);
+            const newAlarmSeries = this.getAlarmOrEventSeries(dp, renderType, false, alarms, 'alarm', displayOptions, null, yIdx);
             eventSeries = [...eventSeries, ...newEventSeries];
             alarmSeries = [...alarmSeries, ...newAlarmSeries];
         });
@@ -1222,6 +1296,7 @@ class EchartsOptionsService {
         return items.reduce((grouped, item) => {
             (grouped[item[typeField]] = grouped[item[typeField]] || []).push(item);
             return grouped;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }, {});
     }
     calculateGridLeft(leftAxisCount, forceMergeDatapoints) {
@@ -1242,6 +1317,65 @@ class EchartsOptionsService {
         }
         return (rightAxisCount - 1) * this.yAxisService.Y_AXIS_OFFSET + RIGHT_AXIS_BASE_SPACE;
     }
+    /**
+     * Expands datapoints so that each enabled render type config becomes its own
+     * virtual DpWithValues entry with overridden lineType, color, min, max, yAxisType.
+     * Datapoints without renderTypeConfigs are passed through unchanged.
+     * When `aggregationActive` is false the expansion is skipped so non-aggregated
+     * raw data renders as a single series using the primary renderType and datapoint color.
+     */
+    expandDatapointsForRenderTypeConfigs(dps, aggregationActive = false) {
+        const result = [];
+        for (const dp of dps) {
+            const configs = dp.renderTypeConfigs;
+            if (!configs || !aggregationActive) {
+                result.push(dp);
+                continue;
+            }
+            const enabledKeys = Object.keys(configs).filter(k => configs[k]?.enabled);
+            if (enabledKeys.length === 0) {
+                result.push(dp);
+                continue;
+            }
+            // When renderAsBand is true, replace separate min+max with a single 'area' render type
+            const hasMinAndMax = enabledKeys.includes('min') && enabledKeys.includes('max');
+            const renderAsBand = dp.renderAsBand && hasMinAndMax;
+            for (const rt of enabledKeys) {
+                if (renderAsBand && (rt === 'min' || rt === 'max')) {
+                    continue; // skip individual min/max; we'll add area below
+                }
+                const cfg = configs[rt];
+                const expanded = {
+                    ...dp,
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    renderType: rt,
+                    renderTypes: null,
+                    lineType: cfg.lineType || dp.lineType,
+                    color: cfg.color || this.getRenderTypeColorFromBase(dp.color, rt) || dp.color,
+                    min: cfg.rangeMin ?? dp.min,
+                    max: cfg.rangeMax ?? dp.max,
+                    yAxisType: cfg.yAxisType || dp.yAxisType
+                };
+                result.push(expanded);
+            }
+            if (renderAsBand) {
+                // Add a single 'area' entry using min config's properties as fallback
+                const minCfg = configs['min'];
+                result.push({
+                    ...dp,
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    renderType: 'area',
+                    renderTypes: null,
+                    lineType: minCfg?.lineType || dp.lineType,
+                    color: minCfg?.color || dp.color,
+                    min: minCfg?.rangeMin ?? dp.min,
+                    max: minCfg?.rangeMax ?? dp.max,
+                    yAxisType: minCfg?.yAxisType || dp.yAxisType
+                });
+            }
+        }
+        return result;
+    }
     /**
      * 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
@@ -1491,9 +1625,12 @@ class EchartsOptionsService {
             }
         }, []);
     }
-    getSingleSeries(dp, renderType, idx, isMinMaxChart = false, displayOptions, seriesType = '') {
+    getSingleSeries(dp, renderType, idx, isMinMaxChart = false, displayOptions, seriesType = '', multiRenderTypeLabel) {
         const datapointId = dp.__target?.id + dp.fragment + dp.series;
-        const isLine = dp.lineType === 'line' || dp.lineType === 'linePoints';
+        const isLine = dp.lineType === 'line' ||
+            dp.lineType === 'linePoints' ||
+            dp.lineType === 'dashed' ||
+            dp.lineType === 'dotted';
         const isAggr = seriesType === this.AGGREGATED_SERIES_TYPE;
         const data = isAggr && Object.keys(dp.values).length <= 1
             ? []
@@ -1501,21 +1638,133 @@ class EchartsOptionsService {
                 dateString,
                 values[0][renderType] ?? values[0]['min']
             ]);
+        const effectiveLabel = multiRenderTypeLabel ||
+            (dp.renderTypeConfigs && displayOptions.aggregationActive ? renderType : undefined);
+        const renderTypeSuffix = effectiveLabel ? `~${effectiveLabel}` : '';
+        const colorOverride = multiRenderTypeLabel && dp.renderTypeColors?.[multiRenderTypeLabel]
+            ? dp.renderTypeColors[multiRenderTypeLabel]
+            : multiRenderTypeLabel && dp.color
+                ? this.getRenderTypeColorFromBase(dp.color, multiRenderTypeLabel)
+                : undefined;
+        const dpForSeries = colorOverride ? { ...dp, color: colorOverride } : dp;
+        const displayType = isMinMaxChart && renderType === 'min' ? 'min — max' : effectiveLabel;
         return {
             datapointId,
             datapointUnit: renderType !== 'count' ? dp.unit : '',
             // 'id' property is needed as 'seriesId' in tooltip formatter
             id: isMinMaxChart
                 ? `${datapointId}/${renderType}${seriesType}`
-                : `${datapointId}${seriesType}`,
-            name: `${dp.label} (${dp.__target?.['name']})`,
-            datapointLabel: dp.label || '',
+                : `${datapointId}${seriesType}${renderTypeSuffix}`,
+            name: displayType
+                ? `[${displayType}] ${dp.label} (${dp.__target?.['name']})`
+                : `${dp.label} (${dp.__target?.['name']})`,
+            datapointLabel: displayType ? `[${displayType}] ${dp.label || ''}` : dp.label || '',
             data,
             ...(displayOptions.forceMergeDatapoints ? {} : { yAxisIndex: idx }),
-            ...this.chartTypesService.getSeriesOptions(dp, isMinMaxChart, renderType),
+            ...this.chartTypesService.getSeriesOptions(dpForSeries, isMinMaxChart, renderType),
             ...(isLine && { smooth: displayOptions.smoothLines ?? false, triggerLineEvent: true })
         };
     }
+    /**
+     * Creates a band (shaded area) between min and max values using the
+     * stack + stackStrategy:'positive' technique.
+     *
+     * Three series are produced:
+     *  1. max – visible line, stacked
+     *  2. diff (min − max, negative) – invisible line stacked on max with
+     *     stackStrategy:'positive' so the area fills downward to min
+     *  3. min – visible line, NOT stacked
+     */
+    getBandSeries(dp, idx, displayOptions) {
+        const datapointId = dp.__target?.id + dp.fragment + dp.series;
+        const configs = dp.renderTypeConfigs;
+        const minColor = configs?.['min']?.color || dp.color || DEFAULT_DATAPOINT_COLOR;
+        const maxColor = configs?.['max']?.color || dp.color || DEFAULT_DATAPOINT_COLOR;
+        const bandColor = dp.bandColor || dp.color || DEFAULT_DATAPOINT_COLOR;
+        const stackId = `band-${datapointId}`;
+        const maxData = Object.entries(dp.values).map(([dateString, values]) => [
+            dateString,
+            values[0]['max'] ?? null
+        ]);
+        const minData = Object.entries(dp.values).map(([dateString, values]) => [
+            dateString,
+            values[0]['min'] ?? null
+        ]);
+        const yAxisIndex = displayOptions.forceMergeDatapoints ? {} : { yAxisIndex: idx };
+        // ECharts cumulative line-stack technique for confidence bands.
+        // diff = minVal − maxVal is always negative (min < max).
+        // Stacked cumulative: maxVal + (minVal − maxVal) = minVal.
+        // areaStyle on the diff series fills from minVal (current cumulative) back to
+        // maxVal (previous cumulative) — the correct band — for both positive and negative ranges.
+        // A separate invisible bandMaxSeries is used so getSeriesOptions never touches the stack.
+        const diffData = Object.entries(dp.values).map(([dateString, values]) => {
+            const minVal = values[0]['min'];
+            const maxVal = values[0]['max'];
+            if (minVal == null || maxVal == null)
+                return [dateString, null];
+            return [dateString, minVal - maxVal];
+        });
+        // Invisible stacked upper boundary at maxVal.
+        const bandMaxSeries = {
+            datapointId,
+            datapointUnit: '',
+            id: `${datapointId}/band-max`,
+            name: `[band-max] ${dp.label} (${dp.__target?.['name']})`,
+            datapointLabel: '',
+            typeOfSeries: 'fake',
+            type: 'line',
+            stack: stackId,
+            symbol: 'none',
+            lineStyle: { opacity: 0 },
+            tooltip: { show: false },
+            data: maxData,
+            ...yAxisIndex
+        };
+        // Invisible stacked diff series — cumulative lands at minVal, fills the band.
+        // stackStrategy:'all' is required: the default 'samesign' would refuse to stack
+        // a negative diff on a positive sum (or vice versa), leaving it at its raw value.
+        const bandMinSeries = {
+            datapointId,
+            datapointUnit: dp.unit || '',
+            id: `${datapointId}/band-area`,
+            name: `[band] ${dp.label} (${dp.__target?.['name']})`,
+            datapointLabel: `[band] ${dp.label || ''}`,
+            typeOfSeries: 'fake',
+            type: 'line',
+            stack: stackId,
+            stackStrategy: 'all',
+            symbol: 'none',
+            lineStyle: { opacity: 0 },
+            areaStyle: { opacity: 0.2, color: bandColor },
+            tooltip: { show: false },
+            data: diffData,
+            ...yAxisIndex
+        };
+        // Visible max line — not stacked, drawn at actual maxVal.
+        const maxSeries = {
+            datapointId,
+            datapointUnit: dp.unit || '',
+            id: `${datapointId}/max`,
+            name: `[max] ${dp.label} (${dp.__target?.['name']})`,
+            datapointLabel: `[max] ${dp.label || ''}`,
+            data: maxData,
+            ...this.chartTypesService.getSeriesOptions({ ...dp, color: maxColor }, true, 'max'),
+            ...yAxisIndex
+        };
+        // Visible min line — not stacked, drawn at actual minVal. Tooltip shows combined [min — max].
+        const minSeries = {
+            datapointId,
+            datapointUnit: dp.unit || '',
+            id: `${datapointId}/min`,
+            name: `[min — max] ${dp.label} (${dp.__target?.['name']})`,
+            datapointLabel: `[min — max] ${dp.label || ''}`,
+            tooltipColor: bandColor,
+            data: minData,
+            ...this.chartTypesService.getSeriesOptions({ ...dp, color: minColor }, true, 'min'),
+            ...yAxisIndex
+        };
+        return [bandMaxSeries, bandMinSeries, maxSeries, minSeries];
+    }
     /**
      * This method creates a general tooltip formatter for the chart.
      * @returns TooltipComponentFormatterCallback<TooltipComponentFormatterCallbackParams>
@@ -1529,11 +1778,36 @@ class EchartsOptionsService {
             const XAxisValue = data[0];
             const YAxisReadings = [];
             const allSeries = this.echartsInstance?.getOption()['series'];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const legendSelected = this.echartsInstance?.getOption()['legend']?.[0]?.selected;
             const allDataPointSeries = allSeries.filter(series => series['typeOfSeries'] !== 'alarm' &&
                 series['typeOfSeries'] !== 'event' &&
                 series['typeOfSeries'] !== 'fake' &&
                 legendSelected?.[series['name']] !== false);
+            // Pre-compute which per-function series groups have identical values at this x-coordinate.
+            // Per-function series are identified by having '~' in their id (e.g. datapointId~avg).
+            const perFnGroupSeries = new Map();
+            for (const s of allDataPointSeries) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const sId = s['id'];
+                if (!sId?.includes('~'))
+                    continue;
+                const sDpId = sId.split('~')[0];
+                if (!perFnGroupSeries.has(sDpId))
+                    perFnGroupSeries.set(sDpId, []);
+                perFnGroupSeries.get(sDpId).push(s);
+            }
+            const duplicateDpIds = new Set();
+            perFnGroupSeries.forEach((group, sDpId) => {
+                if (group.length < 2)
+                    return;
+                const vals = group.map(s => this.findValueForExactOrEarlierTimestamp(s['data'], XAxisValue)?.[1] ??
+                    null);
+                const first = vals[0];
+                if (first !== null && vals.every(v => v === first)) {
+                    duplicateDpIds.add(sDpId);
+                }
+            });
             // Count only series that will actually produce a row at this timestamp
             const tooltipRowCount = allDataPointSeries.filter(series => {
                 const id = series['id'];
@@ -1546,42 +1820,68 @@ class EchartsOptionsService {
             allDataPointSeries.forEach((series) => {
                 const id = series['id'];
                 const itemStyle = series['itemStyle'];
-                const color = echarts.format.encodeHTML(itemStyle?.color);
+                const seriesColor = series['tooltipColor'] ?? itemStyle?.color;
+                const color = echarts.format.encodeHTML(seriesColor);
                 const label = echarts.format.encodeHTML(series['datapointLabel']);
                 const unit = series['datapointUnit']
                     ? ` ${echarts.format.encodeHTML(series['datapointUnit'])}`
                     : '';
+                const dpId = id?.includes('~') ? id.split('~')[0] : id?.split('/')[0];
+                const isCollapsed = !!(dpId && displayOptions.collapsedDpIds?.has(dpId));
+                const isDuplicate = !!(dpId && duplicateDpIds.has(dpId)) || isCollapsed;
+                const isDimmed = this.highlightedSeriesName !== null && series['name'] !== this.highlightedSeriesName;
                 if (id.endsWith('/min')) {
                     const minValue = this.findValueForExactOrEarlierTimestamp(series['data'], XAxisValue);
                     if (!minValue)
                         return;
                     const maxSeries = allDataPointSeries.find(s => s['id'] === id.replace('/min', '/max'));
-                    if (!maxSeries)
-                        return;
-                    const maxValue = this.findValueForExactOrEarlierTimestamp(maxSeries['data'], XAxisValue);
-                    if (maxValue === null)
-                        return;
-                    const minStr = echarts.format.encodeHTML(minValue[1].toFixed(displayOptions.numberOfDecimalPlaces) ?? '--');
-                    const maxStr = echarts.format.encodeHTML(maxValue[1].toFixed(displayOptions.numberOfDecimalPlaces) ?? '--');
-                    const valueStr = `${minStr} — ${maxStr}${unit}`;
+                    const maxValue = maxSeries
+                        ? this.findValueForExactOrEarlierTimestamp(maxSeries['data'], XAxisValue)
+                        : null;
+                    let valueStr;
+                    if (maxSeries && maxValue !== null) {
+                        // Both min and max visible: show combined range.
+                        const minStr = echarts.format.encodeHTML(minValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--');
+                        const maxStr = echarts.format.encodeHTML(maxValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--');
+                        valueStr = `${minStr} — ${maxStr}`;
+                    }
+                    else {
+                        // Max is hidden: show min value only.
+                        const minStr = echarts.format.encodeHTML(minValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--');
+                        valueStr = minStr;
+                    }
                     if (isCompact) {
-                        YAxisReadings.push(this.buildCompactTooltipRow(color, label, valueStr));
+                        YAxisReadings.push(this.buildCompactTooltipRow(color, label, `${valueStr}${unit}`, isDimmed));
                     }
                     else {
                         const date = echarts.format.encodeHTML(this.datePipe.transform(minValue[0]));
-                        YAxisReadings.push(this.buildTooltipRow(color, label, date, valueStr));
+                        YAxisReadings.push(this.buildTooltipRow(color, label, date, valueStr, isDimmed, unit));
                     }
                 }
                 else if (id.endsWith('/max')) {
-                    // handled in '/min' case
-                    return;
+                    const minSeries = allDataPointSeries.find(s => s['id'] === id.replace('/max', '/min'));
+                    if (minSeries) {
+                        // Min is visible and handles the tooltip for this pair: skip.
+                        return;
+                    }
+                    // Min is hidden: show max value only.
+                    const maxValue = this.findValueForExactOrEarlierTimestamp(series['data'], XAxisValue);
+                    if (!maxValue)
+                        return;
+                    const maxStr = echarts.format.encodeHTML(maxValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--');
+                    if (isCompact) {
+                        YAxisReadings.push(this.buildCompactTooltipRow(color, label, `${maxStr}${unit}`, isDimmed));
+                    }
+                    else {
+                        const date = echarts.format.encodeHTML(this.datePipe.transform(maxValue[0]));
+                        YAxisReadings.push(this.buildTooltipRow(color, label, date, maxStr, isDimmed, unit));
+                    }
                 }
                 else {
-                    const isDimmed = this.highlightedSeriesName !== null && series['name'] !== this.highlightedSeriesName;
                     const seriesValue = this.findValueForExactOrEarlierTimestamp(series['data'], XAxisValue);
                     if (!seriesValue)
                         return;
-                    const valStr = echarts.format.encodeHTML(seriesValue[1]?.toFixed(displayOptions.numberOfDecimalPlaces) ?? '--');
+                    const valStr = echarts.format.encodeHTML(seriesValue[1]?.toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--');
                     const valueStr = `${valStr}${unit}`;
                     if (isCompact) {
                         YAxisReadings.push(this.buildCompactTooltipRow(color, label, valueStr, isDimmed));
@@ -1591,23 +1891,52 @@ class EchartsOptionsService {
                         YAxisReadings.push(this.buildTooltipRow(color, label, date, valueStr, isDimmed));
                     }
                 }
+                if (isDuplicate) {
+                    const group = perFnGroupSeries.get(dpId);
+                    // For per-fn groups: show warning after last series in group.
+                    // For collapsed single-series: always show warning (no group exists).
+                    const isLastInGroup = group ? group[group.length - 1]?.['id'] === id : true;
+                    if (isLastInGroup) {
+                        const dpLabel = group
+                            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                group[0]['datapointLabel']
+                            : series['datapointLabel'];
+                        const baseName = dpLabel?.replace(/\s*\[.*?\]\s*$/g, '').trim() || dpLabel;
+                        const msg = this.translate.instant(gettext('The selected aggregation functions for {{dp}} return the same value because each interval contains a single measurement. Choose a coarser aggregation interval.'), { dp: baseName });
+                        YAxisReadings.push(`<div class="separator-bottom p-b-8 text-muted small bg-component text-12 text-break-word" style="white-space: wrap; margin-top:-2px">` +
+                            `<div class="icon-flex"><i class="dlt-c8y-icon-warning m-r-4" style="color: var(--c8y-palette-status-warning)"></i>` +
+                            `<span>${echarts.format.encodeHTML(msg)}</span>` +
+                            `</div></div>`);
+                    }
+                }
             });
             const tooltipWidth = isCompact ? this.COMPACT_TOOLTIP_WIDTH : this.TOOLTIP_WIDTH;
             return `<div inner-e-cbg-component style="width: ${tooltipWidth}px">${YAxisReadings.join('')}</div>`;
         };
     }
-    buildTooltipRow(color, label, date, value, isDimmed) {
+    buildTooltipRow(color, label, date, value, isDimmed, unit) {
+        const header = `<div class="d-flex a-i-center p-8 p-b-0 text-default"><span class='dlt-c8y-icon-circle m-r-4' style='color: ${color}'></span>` +
+            `<strong class="text-truncate">${label}</strong></div>`;
+        if (unit !== undefined) {
+            // min/max area row: unit sits after the text-truncate div, row uses p-8 p-b-0
+            // The extra </div> preserves the output shape from the original code pattern.
+            return (`<div style="opacity: ${isDimmed ? 0.4 : 1}">` +
+                header +
+                `<div class="d-flex a-i-center separator-bottom text-default p-8 p-b-0">` +
+                `<label class="text-12 text-muted m-r-8 m-b-0">${date}</label>` +
+                `<div class="m-l-auto text-12 text-truncate">${value}</div>${unit}` +
+                `</div></div></div>`);
+        }
         return (`<div style="opacity: ${isDimmed ? 0.4 : 1}">` +
-            `<div class="d-flex a-i-center p-b-8 text-default"><span class='dlt-c8y-icon-circle m-r-4' style='color: ${color}'></span>` +
-            `<strong class="text-truncate">${label}</strong></div>` +
-            `<div class="d-flex a-i-center separator-top text-default p-t-8 p-b-8">` +
-            `<label class="text-12 m-r-8 m-b-0">${date}</label>` +
+            header +
+            `<div class="d-flex a-i-center separator-bottom text-default p-b-8 p-l-24 p-r-8">` +
+            `<label class="text-12 text-muted m-r-8 m-b-0">${date}</label>` +
             `<div class="m-l-auto text-12 text-truncate">${value}</div>` +
             `</div></div>`);
     }
     buildCompactTooltipRow(color, label, value, isDimmed) {
         return (`<div style="opacity: ${isDimmed ? 0.4 : 1}">` +
-            `<div class="d-flex a-i-center p-t-4 p-b-4 separator-bottom text-default">` +
+            `<div class="d-flex a-i-center p-t-4 p-b-4 p-l-8 p-r-8 separator-bottom text-default">` +
             `<span class="dlt-c8y-icon-circle m-r-4 flex-no-shrink" style="color:${color}"></span>` +
             `<strong class="text-truncate m-r-4" style="max-width:120px">${label}</strong>` +
             `<span class="m-l-auto">${value}</span>` +
@@ -1626,12 +1955,53 @@ class EchartsOptionsService {
             return acc;
         }, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1.DatePipe }, { token: YAxisService }, { token: ChartTypesService }, { token: i4.AlarmSeverityToIconPipe }, { token: i4.AlarmSeverityToLabelPipe }, { token: i5.TranslateService }, { token: i6.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /**
+     * Generates a per-function color from the datapoint's base color using luminance-matched shades.
+     * `avg` maps to the base color itself; `min`/`count` shift one/two steps darker;
+     * `max`/`sum` shift one/two steps lighter.
+     */
+    getRenderTypeColorFromBase(baseColor, renderType) {
+        const SHADE_OFFSETS = {
+            count: -2,
+            min: -1,
+            avg: 0,
+            max: 1,
+            sum: 2
+        };
+        const offset = SHADE_OFFSETS[renderType];
+        if (offset === undefined) {
+            return undefined;
+        }
+        if (offset === 0) {
+            return baseColor;
+        }
+        try {
+            const referenceLuminances = [
+                chroma('#134158').luminance(),
+                chroma('#1C5569').luminance(),
+                chroma('#058192').luminance(), // primary / avg
+                chroma('#22A6AA').luminance(),
+                chroma('#3CC1B7').luminance()
+            ];
+            const baseLuminance = chroma(baseColor).luminance();
+            const targetIndex = 2 + offset;
+            if (targetIndex < 0 || targetIndex >= referenceLuminances.length) {
+                return baseColor;
+            }
+            const luminanceDelta = referenceLuminances[targetIndex] - referenceLuminances[2];
+            const targetLuminance = Math.max(0, Math.min(1, baseLuminance + luminanceDelta));
+            return chroma(baseColor).luminance(targetLuminance).hex();
+        }
+        catch {
+            return baseColor;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1$1.DatePipe }, { token: YAxisService }, { token: ChartTypesService }, { token: i4.AlarmSeverityToIconPipe }, { token: i4.AlarmSeverityToLabelPipe }, { token: i1.TranslateService }, { token: i6.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EchartsOptionsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EchartsOptionsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.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: i1.TranslateService }, { type: i6.Router }] });
 
 class ChartRealtimeService {
     constructor(measurementRealtime, alarmRealtimeService, eventRealtimeService, echartsOptionsService) {
@@ -1757,9 +2127,23 @@ class ChartRealtimeService {
             .subscribe();
     }
     stopRealtime() {
-        this.realtimeSubscriptionMeasurements?.unsubscribe();
-        this.realtimeSubscriptionAlarmsEvents?.unsubscribe();
-        this.realtimeIntervalSubscription?.unsubscribe();
+        // Tearing down a realtime subscription forwards to cometd's unsubscribe, which throws
+        // 'Illegal state: disconnected' if the cometd client has already disconnected (e.g. when
+        // switching config/history mode or saving the widget). Guard each teardown so a disconnected
+        // channel cannot bubble up as an UnsubscriptionError.
+        this.safeUnsubscribe(this.realtimeSubscriptionMeasurements);
+        this.safeUnsubscribe(this.realtimeSubscriptionAlarmsEvents);
+        this.safeUnsubscribe(this.realtimeIntervalSubscription);
+    }
+    safeUnsubscribe(subscription) {
+        try {
+            subscription?.unsubscribe();
+        }
+        catch (error) {
+            // Expected when cometd has already disconnected; warn rather than error so this benign
+            // race does not surface as a failure in error monitoring.
+            console.warn('Failed to unsubscribe from realtime channel', error);
+        }
     }
     /**
      * Updates the chart with the current alarms and events data. Only used when no active datapoints are selected.
@@ -1964,12 +2348,12 @@ class ChartRealtimeService {
             datapointBackInSyncCallback(datapoint);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartRealtimeService, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlarmRealtimeService }, { token: i1.EventRealtimeService }, { token: EchartsOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartRealtimeService, deps: [{ token: i1$1.MeasurementRealtimeService }, { token: i1$1.AlarmRealtimeService }, { token: i1$1.EventRealtimeService }, { token: EchartsOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartRealtimeService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartRealtimeService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.MeasurementRealtimeService }, { type: i1.AlarmRealtimeService }, { type: i1.EventRealtimeService }, { type: EchartsOptionsService }] });
+        }], ctorParameters: () => [{ type: i1$1.MeasurementRealtimeService }, { type: i1$1.AlarmRealtimeService }, { type: i1$1.EventRealtimeService }, { type: EchartsOptionsService }] });
 
 class ChartAlertsComponent {
     constructor() {
@@ -1982,7 +2366,7 @@ class ChartAlertsComponent {
         return text;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChartAlertsComponent, isStandalone: true, selector: "c8y-chart-alerts", inputs: { alerts: "alerts" }, viewQueries: [{ propertyName: "dismissPermanently", first: true, predicate: ["dismissPermanently"], descendants: true }], ngImport: i0, template: "@if (alerts?.anyAlertExists$ | async) {\n  <div class=\"overlay-center-vertically d-col p-16 p-r-24 p-l-24\">\n    @for (alertGroup of alerts?.alertGroups; track alertGroup) {\n      @if (alertGroup.value.alerts.length) {\n        <div\n          class=\"alert\"\n          role=\"alert\"\n          [ngClass]=\"'alert-' + alertGroup.type\"\n        >\n          @if (alertGroup.value.alertDismissal.dismissStrategy !== 'none') {\n            <button\n              class=\"close\"\n              type=\"button\"\n              (click)=\"\n                alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.nativeElement.checked)\n              \"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n            </button>\n          }\n\n          @for (alertItem of alertGroup.value.alerts; track alertItem) {\n            <p [innerHTML]=\"sanitizeAlertText(alertItem.text)\"></p>\n          }\n\n          @if (alertGroup.value.alertDismissal.dismissStrategy !== 'none') {\n            <label\n              class=\"c8y-checkbox m-t-16\"\n              title=\"{{ 'Don\\'t show again' | translate }}\"\n            >\n              <input\n                type=\"checkbox\"\n                #dismissPermanently\n              />\n              <span></span>\n              <span>{{ \"Don't show again\" | translate }}</span>\n            </label>\n          }\n        </div>\n      }\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChartAlertsComponent, isStandalone: true, selector: "c8y-chart-alerts", inputs: { alerts: "alerts" }, viewQueries: [{ propertyName: "dismissPermanently", first: true, predicate: ["dismissPermanently"], descendants: true }], ngImport: i0, template: "@if (alerts?.anyAlertExists$ | async) {\n  <div class=\"overlay-center-vertically d-col p-16 p-r-24 p-l-24\">\n    @for (alertGroup of alerts?.alertGroups; track alertGroup) {\n      @if (alertGroup.value.alerts.length) {\n        <div\n          class=\"alert\"\n          role=\"alert\"\n          [ngClass]=\"'alert-' + alertGroup.type\"\n        >\n          @if (alertGroup.value.alertDismissal.dismissStrategy !== 'none') {\n            <button\n              class=\"close\"\n              type=\"button\"\n              (click)=\"\n                alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.nativeElement.checked)\n              \"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n            </button>\n          }\n\n          @for (alertItem of alertGroup.value.alerts; track alertItem) {\n            <p [innerHTML]=\"sanitizeAlertText(alertItem.text)\"></p>\n          }\n\n          @if (alertGroup.value.alertDismissal.dismissStrategy !== 'none') {\n            <label\n              class=\"c8y-checkbox m-t-16\"\n              title=\"{{ 'Don\\'t show again' | translate }}\"\n            >\n              <input\n                type=\"checkbox\"\n                #dismissPermanently\n              />\n              <span></span>\n              <span>{{ \"Don't show again\" | translate }}</span>\n            </label>\n          }\n        </div>\n      }\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartAlertsComponent, decorators: [{
             type: Component,
@@ -2027,12 +2411,12 @@ class ChartEventsService {
         const result = await Promise.all(promises);
         return result.flat();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartEventsService, deps: [{ token: i1$2.EventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartEventsService, deps: [{ token: i1$3.EventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartEventsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartEventsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.EventService }] });
+        }], ctorParameters: () => [{ type: i1$3.EventService }] });
 
 class ChartAlarmsService {
     constructor(alarmService) {
@@ -2081,12 +2465,12 @@ class ChartAlarmsService {
         const result = await Promise.all(promises);
         return result.flat();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartAlarmsService, deps: [{ token: i1$2.AlarmService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartAlarmsService, deps: [{ token: i1$3.AlarmService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartAlarmsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartAlarmsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.AlarmService }] });
+        }], ctorParameters: () => [{ type: i1$3.AlarmService }] });
 
 class ChartHelpersService {
     /**
@@ -2113,6 +2497,107 @@ class ChartHelpersService {
             dp.fragment === selected.fragment &&
             dp.series === selected.series);
     }
+    /**
+     * Maps a computed auto-aggregation interval string (e.g. `'5m'`, `'3h'`, `'7d'`) to
+     * the nearest standard `aggregationType` for non-time-series tenants.
+     * - seconds / minutes → MINUTELY (finest supported granularity)
+     * - hours             → HOURLY
+     * - days              → DAILY
+     */
+    mapIntervalToAggregationType(interval) {
+        if (interval.endsWith('d'))
+            return aggregationType.DAILY;
+        if (interval.endsWith('h'))
+            return aggregationType.HOURLY;
+        if (interval.endsWith('m') || interval.endsWith('s'))
+            return aggregationType.MINUTELY;
+        return null;
+    }
+    /**
+     * Computes the aggregation interval string (e.g. `30s`, `5m`, `24h`, `7d`) that
+     * targets approximately `desiredDatapoints` buckets within the given time range.
+     * The integer part is capped at 999 to satisfy the API constraint.
+     */
+    calculateAutoAggregationInterval(dateFrom, dateTo, desiredDatapoints) {
+        const rangeMs = new Date(dateTo).valueOf() - new Date(dateFrom).valueOf();
+        const intervalMs = rangeMs / Math.max(1, desiredDatapoints);
+        // If each bucket would be sub-second, the zoom is fine enough to show raw data
+        if (intervalMs <= 1_000)
+            return null;
+        // Use the most natural human-readable unit.
+        // e.g. 24h / 300 dp → 288 s → 5 m  (not 288s)
+        const totalSeconds = Math.max(1, Math.round(intervalMs / 1_000));
+        if (totalSeconds < 60)
+            return `${Math.min(999, totalSeconds)}s`;
+        const totalMinutes = Math.round(totalSeconds / 60);
+        if (totalMinutes < 60)
+            return `${Math.min(999, totalMinutes)}m`;
+        const totalHours = Math.round(totalSeconds / 3_600);
+        if (totalHours < 24)
+            return `${Math.min(999, totalHours)}h`;
+        const totalDays = Math.max(1, Math.round(totalSeconds / 86_400));
+        return `${Math.min(999, totalDays)}d`;
+    }
+    /**
+     * Scans raw DpWithValues to determine which datapoints should be collapsed to a single
+     * series — either because all per-function values are identical at every timestamp (the
+     * aggregation interval is too fine — each interval holds a single measurement — to
+     * differentiate functions).
+     */
+    detectCollapsedDatapoints(dps) {
+        const collapsed = new Set();
+        for (const dp of dps) {
+            const dpId = `${dp.__target?.id}${dp.fragment}${dp.series}`;
+            const valueEntries = Object.values(dp.values ?? {});
+            if (!valueEntries.length)
+                continue;
+            const renderTypeConfigs = dp.renderTypeConfigs;
+            const renderAsBand = !!dp.renderAsBand;
+            let fnsToCompare = [];
+            let isBand = false;
+            if (renderTypeConfigs) {
+                const enabled = Object.keys(renderTypeConfigs).filter(k => renderTypeConfigs[k]?.enabled);
+                const hasMinMax = enabled.includes('min') && enabled.includes('max');
+                if (renderAsBand && hasMinMax) {
+                    isBand = true;
+                }
+                else if (enabled.length >= 2) {
+                    fnsToCompare = enabled;
+                }
+                else {
+                    continue;
+                }
+            }
+            else if (dp.renderTypes && dp.renderTypes.length > 1) {
+                const fns = dp.renderTypes.filter(rt => rt !== 'area');
+                if (fns.length >= 2) {
+                    fnsToCompare = fns;
+                }
+                else {
+                    continue;
+                }
+            }
+            else {
+                continue;
+            }
+            if (isBand) {
+                const allSame = valueEntries.every(vals => vals[0]?.min === vals[0]?.max);
+                if (allSame)
+                    collapsed.add(dpId);
+            }
+            else {
+                const allSame = valueEntries.every(vals => {
+                    const first = vals[0]?.[fnsToCompare[0]];
+                    if (first === undefined || first === null)
+                        return false;
+                    return fnsToCompare.slice(1).every(fn => vals[0]?.[fn] === first);
+                });
+                if (allSame)
+                    collapsed.add(dpId);
+            }
+        }
+        return collapsed;
+    }
     getTargetId(obj) {
         return obj?.__target?.id ?? obj?.target;
     }
@@ -2159,7 +2644,7 @@ class SelectAggregatedDatapointComponent {
         this.selectedDatapointColor = found?.color || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectAggregatedDatapointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SelectAggregatedDatapointComponent, isStandalone: true, selector: "c8y-select-aggregated-datapoint", inputs: { activeDatapoints: "activeDatapoints", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "d-contents" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"dropdown dropup\"\n  dropdown\n  #datapointDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"datapointDropdown.isOpen\"\n  *ngIf=\"activeDatapoints?.length > 0\"\n>\n  <ng-template #selectedDatapoint>\n    <div class=\"text-left\">\n      <strong>{{ selectedDatapointLabel }}</strong>\n      <br />\n      {{ 'Click to change' | translate }}\n    </div>\n  </ng-template>\n  <button\n    class=\"btn btn-default d-flex a-i-center dropdown-toggle c8y-dropdown\"\n    title=\"{{'Select a data point to view its aggregated values in the time slider.' | translate }}\"\n    type=\"button\"\n    dropdownToggle\n    >\n    <span\n      [style.background-color]=\"selectedDatapointColor\"\n      style=\"display: inline-block; width: 16px; height: 16px; border-radius: 50%\"\n    ></span>\n    <span class=\"caret\"></span>\n  </button>\n  <ul\n    class=\"dropdown-menu dropdown-menu-right\"\n    *dropdownMenu\n  >\n    <li *ngFor=\"let datapoint of activeDatapoints\">\n      <button\n        class=\"p-r-8\"\n        type=\"button\"\n        (click)=\"changeDatapointSelection(datapoint)\"\n      >\n        <span\n          class=\"d-inline-block m-r-4\"\n          [style.background-color]=\"datapoint?.color\"\n          style=\"width: 16px; height: 16px; border-radius: 50%\"\n        ></span>\n        <span class=\"text-truncate\" style=\"max-width:220px!important\" title=\"{{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\">\n          {{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\n        </span>\n        <span\n          class=\"m-l-auto flex-no-shrink\"\n          *ngIf=\"\n            datapoint.__target.id === value?.__target.id &&\n            datapoint.fragment === value?.fragment &&\n            datapoint.series === value?.series\n          \"\n        >\n          <i\n            class=\"text-success h4\"\n            [c8yIcon]=\"'check'\"\n          ></i>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n<button\n  class=\"btn-help\"\n  [attr.aria-label]=\"'Help' | translate\"\n  popover=\"{{\n    'Select a data point to view its aggregated values in the time slider.' | translate\n  }}\"\n  placement=\"left\"\n  triggers=\"focus\"\n  container=\"body\"\n></button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$3.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SelectAggregatedDatapointComponent, isStandalone: true, selector: "c8y-select-aggregated-datapoint", inputs: { activeDatapoints: "activeDatapoints", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "d-contents" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"dropdown dropup\"\n  dropdown\n  #datapointDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"datapointDropdown.isOpen\"\n  *ngIf=\"activeDatapoints?.length > 0\"\n>\n  <ng-template #selectedDatapoint>\n    <div class=\"text-left\">\n      <strong>{{ selectedDatapointLabel }}</strong>\n      <br />\n      {{ 'Click to change' | translate }}\n    </div>\n  </ng-template>\n  <button\n    class=\"btn btn-default d-flex a-i-center dropdown-toggle c8y-dropdown\"\n    title=\"{{'Select a data point to view its aggregated values in the time slider.' | translate }}\"\n    type=\"button\"\n    dropdownToggle\n    >\n    <span\n      [style.background-color]=\"selectedDatapointColor\"\n      style=\"display: inline-block; width: 16px; height: 16px; border-radius: 50%\"\n    ></span>\n    <span class=\"caret\"></span>\n  </button>\n  <ul\n    class=\"dropdown-menu dropdown-menu-right\"\n    *dropdownMenu\n  >\n    <li *ngFor=\"let datapoint of activeDatapoints\">\n      <button\n        class=\"p-r-8\"\n        type=\"button\"\n        (click)=\"changeDatapointSelection(datapoint)\"\n      >\n        <span\n          class=\"d-inline-block m-r-4\"\n          [style.background-color]=\"datapoint?.color\"\n          style=\"width: 16px; height: 16px; border-radius: 50%\"\n        ></span>\n        <span class=\"text-truncate\" style=\"max-width:220px!important\" title=\"{{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\">\n          {{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\n        </span>\n        <span\n          class=\"m-l-auto flex-no-shrink\"\n          *ngIf=\"\n            datapoint.__target.id === value?.__target.id &&\n            datapoint.fragment === value?.fragment &&\n            datapoint.series === value?.series\n          \"\n        >\n          <i\n            class=\"text-success h4\"\n            [c8yIcon]=\"'check'\"\n          ></i>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n<button\n  class=\"btn-help\"\n  [attr.aria-label]=\"'Help' | translate\"\n  popover=\"{{\n    'Select a data point to view its aggregated values in the time slider.' | translate\n  }}\"\n  placement=\"left\"\n  triggers=\"focus\"\n  container=\"body\"\n></button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectAggregatedDatapointComponent, decorators: [{
             type: Component,
@@ -2184,7 +2669,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class ChartsComponent {
     get axisColor() {
         return (getComputedStyle(this.chart.nativeElement).getPropertyValue('--text-muted')?.trim() ||
@@ -2206,6 +2690,13 @@ class ChartsComponent {
         this.finishLoading = new EventEmitter(false);
         this.updateActiveDatapoints = new EventEmitter();
         this.updateAggregatedSliderDatapoint = new EventEmitter();
+        /**
+         * Emitted after each data load with the set of datapointIds (target+fragment+series)
+         * whose per-function aggregation series all return identical values — indicating that
+         * the current zoom/aggregation interval is too fine (each interval holds a single
+         * measurement) to differentiate functions.
+         */
+        this.duplicateAggregationsDetected = new EventEmitter();
         this.CHART_VIEW_CONTEXT = CHART_VIEW_CONTEXT;
         this.AGGREGATION_INTERVAL_MAP = {
             [aggregationType.MINUTELY]: '1m',
@@ -2213,18 +2704,26 @@ class ChartsComponent {
             [aggregationType.DAILY]: '1d'
         };
         this.configChangedSubject = new BehaviorSubject(null);
+        /** Series names hidden by the user via per-function legend toggles; re-applied after each setOption. */
+        this.userHiddenSeriesNames = new Set();
+        /** DpIds whose per-fn series were stripped to a single series on the last render. */
+        this.lastCollapsedDpIds = new Set();
         this.destroyRef = inject(DestroyRef);
         this.measurementService = inject(MeasurementService);
         this.echartsOptionsService = inject(EchartsOptionsService);
         this.chartRealtimeService = inject(ChartRealtimeService);
         this.chartEventsService = inject(ChartEventsService);
         this.chartAlarmsService = inject(ChartAlarmsService);
+        this.chartHelpersService = inject(ChartHelpersService);
         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;
+        /** Tracks the aggregation interval used in the last fetch so we can detect
+         *  whether a zoom-in would produce a finer interval (and thus warrants a refetch). */
+        this.lastAutoAggregationInterval = null;
         /** Tracks if current change originated from zoom interaction */
         this.isChangeFromZoom = false;
         /** Tracks if the slider is being dragged — suppresses config updates mid-drag */
@@ -2239,7 +2738,27 @@ class ChartsComponent {
             }
             // Use padded range since data is fetched with 60s padding
             this.loadedTimeRange = { ...this.getTimeRange(60_000) };
-            return this.getChartOptions(datapointsWithValues);
+            // Pre-render collapse detection from raw API values.
+            // Emit early so the view legend/dropdown rebuilds BEFORE the chart renders.
+            const collapsed = this.chartHelpersService.detectCollapsedDatapoints(datapointsWithValues);
+            this.duplicateAggregationsDetected.emit(collapsed);
+            this.lastCollapsedDpIds = collapsed;
+            // Strip multi-fn rendering config from collapsed DPs so getChartOptions
+            // produces a single series in dp.color instead of multiple per-fn series.
+            const processedDps = datapointsWithValues.map(dp => {
+                const dpId = `${dp.__target?.id}${dp.fragment}${dp.series}`;
+                if (!collapsed.has(dpId))
+                    return dp;
+                const stripped = {
+                    ...dp,
+                    renderTypes: null,
+                    renderTypeColors: null,
+                    renderTypeConfigs: null,
+                    renderAsBand: false
+                };
+                return stripped;
+            });
+            return this.getChartOptions(processedDps);
         }), tap(options => {
             this.isFetching = false;
             this.finishLoading.emit(false);
@@ -2249,6 +2768,14 @@ class ChartsComponent {
             this.chartRealtimeService.stopRealtime();
             this.startRealtimeIfPossible();
             if (this.echartsInstance) {
+                // Apply user-hidden series into legend.selected so setOption initializes with the
+                // correct state. Dispatching legendUnSelect after setOption races with lazyUpdate=true,
+                // because ECharts defers the actual render and overwrites the legend state afterward.
+                if (this.userHiddenSeriesNames.size > 0) {
+                    const selectedMap = {};
+                    this.userHiddenSeriesNames.forEach(name => (selectedMap[name] = false));
+                    options.legend = { ...(options.legend ?? {}), selected: selectedMap };
+                }
                 // If a series is highlighted, set the opacity into the chart options before
                 // rendering so the lazy setOption already carries the correct visual state.
                 // This avoids any async race — the render itself is the source of truth.
@@ -2290,7 +2817,7 @@ class ChartsComponent {
             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
+            // Sync zoom level across multiple Data graph widgets on the same dashboard
             if (this.echartsInstance) {
                 this.echartsInstance.dispatchAction({
                     type: 'dataZoom',
@@ -2298,7 +2825,23 @@ class ChartsComponent {
                     endValue: new Date(currentRange.dateTo).getTime()
                 }, { silent: true });
             }
-            if (!isWithinLoadedRange || this.dataWasTruncated) {
+            // Auto mode with "Keep loading data when zooming in" disabled: a zoom that stays
+            // within the already loaded range must not trigger any request the chart just
+            // zooms into the data it has. When enabled (the default), zooming in refetches at
+            // a finer interval to maintain the desired number of aggregation points. Zooming
+            // out beyond the loaded range or zooming into truncated data always refetches.
+            if (isWithinLoadedRange &&
+                !this.dataWasTruncated &&
+                this.config.autoAggregation &&
+                !(this.config.autoAggregation.keepDataOnZoomIn ?? true)) {
+                return;
+            }
+            let needsAutoAggregationRefetch = false;
+            if (this.config.autoAggregation) {
+                const zoomedInterval = this.chartHelpersService.calculateAutoAggregationInterval(currentRange.dateFrom, currentRange.dateTo, this.config.autoAggregation.datapoints);
+                needsAutoAggregationRefetch = zoomedInterval !== this.lastAutoAggregationInterval;
+            }
+            if (!isWithinLoadedRange || this.dataWasTruncated || needsAutoAggregationRefetch) {
                 this.configChangedSubject.next();
             }
         }
@@ -2474,7 +3017,9 @@ class ChartsComponent {
     }
     loadMoreData() {
         const currentRange = this.widgetTimeContextDateRangeService.initialTimeRange();
-        const currentTimeRangeInMs = this.echartsOptionsService.calculateExtendedIntervalInMs(this.config.dateTimeContext?.interval || this.config.interval || 'custom', {
+        const currentTimeRangeInMs = this.echartsOptionsService.calculateExtendedIntervalInMs(this.config.dateTimeContext?.interval ||
+            this.config.interval || // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            'custom', {
             dateTo: currentRange.dateTo,
             dateFrom: currentRange.dateFrom
         });
@@ -2508,13 +3053,15 @@ class ChartsComponent {
      */
     toggleDatapointSeriesVisibility(datapoint) {
         const allSeries = this.echartsInstance.getOption().series;
-        const seriesToUpdate = allSeries.find(s => s.datapointId === `${datapoint.__target?.id}${datapoint.fragment}${datapoint.series}`);
-        if (seriesToUpdate) {
+        const dpId = `${datapoint.__target?.id}${datapoint.fragment}${datapoint.series}`;
+        // Use filter (not find) so all matching series (e.g. multiple per-fn series) are toggled.
+        const seriesToUpdate = allSeries.filter(s => s.datapointId === dpId);
+        seriesToUpdate.forEach(s => {
             this.echartsInstance.dispatchAction({
                 type: datapoint.__active ? 'legendSelect' : 'legendUnSelect',
-                name: seriesToUpdate.name
+                name: s.name
             });
-        }
+        });
         const deviceId = datapoint.__target?.id;
         const isHiding = !datapoint.__active;
         const visibleTypes = new Set(this.config.alarmsEventsConfigs
@@ -2536,6 +3083,22 @@ class ChartsComponent {
             }
         });
     }
+    /** Toggles a single chart series by its exact name (used for per-function legend entries). */
+    toggleSeriesByName(seriesName, visible) {
+        if (!this.echartsInstance) {
+            return;
+        }
+        if (visible) {
+            this.userHiddenSeriesNames.delete(seriesName);
+        }
+        else {
+            this.userHiddenSeriesNames.add(seriesName);
+        }
+        this.echartsInstance.dispatchAction({
+            type: visible ? 'legendSelect' : 'legendUnSelect',
+            name: seriesName
+        });
+    }
     /**
      * Toggles alarm/event series visibility via legendSelect/legendUnSelect.
      * Matches all mark-line and mark-point series for the alarm type across every axis,
@@ -2650,7 +3213,8 @@ class ChartsComponent {
             showSlider: this.config.showSlider ?? chartDefaults.showSlider,
             smoothLines: this.config.smoothLines ?? chartDefaults.smoothLines,
             numberOfDecimalPlaces: this.config.numberOfDecimalPlaces ?? chartDefaults.numberOfDecimalPlaces,
-            axisColor: this.axisColor
+            axisColor: this.axisColor,
+            aggregationActive: !!(this.config.aggregation || this.config.autoAggregation)
         };
     }
     getDefaultChartOptions() {
@@ -2818,6 +3382,8 @@ class ChartsComponent {
                 smoothLines: false,
                 showSlider: false,
                 showOnlyAlarmsOrEvents: true,
+                aggregationActive: !!(this.config.aggregation || this.config.autoAggregation),
+                collapsedDpIds: this.lastCollapsedDpIds,
                 axisColor: this.axisColor
             });
         }
@@ -2836,11 +3402,14 @@ class ChartsComponent {
                     dateTo: timeRange.dateTo
                 }, this.config.aggregatedDatapoint))
                 : undefined;
-            return this.echartsOptionsService.getChartOptions(datapointsWithValues, timeRange, {
+            return this.echartsOptionsService.getChartOptions(datapointsWithValues, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            timeRange, {
                 YAxis: this.config.yAxisSplitLines || false,
                 XAxis: this.config.xAxisSplitLines || false
             }, this.events, this.alarms, {
                 sliderPositionMode,
+                collapsedDpIds: this.lastCollapsedDpIds,
                 ...this.displayOptions
             }, undefined, aggregatedDatapoint);
         }
@@ -2875,8 +3444,11 @@ class ChartsComponent {
                 XAxis: this.config.xAxisSplitLines || false
             }, this.events, this.alarms, {
                 sliderPositionMode,
+                collapsedDpIds: this.lastCollapsedDpIds,
                 ...this.displayOptions
-            }, timeRange, aggregatedDatapoint, true);
+            }, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            timeRange, aggregatedDatapoint, true);
         }
     }
     fetchSeriesForDatapoints$() {
@@ -2898,47 +3470,122 @@ class ChartsComponent {
         const datapointsWithValuesRequests = [];
         const timeRange = this.getTimeRange();
         for (const dp of this.activeDatapoints) {
-            const request = defer(() => this.measurementService.listSeries({
-                revert: true,
-                ...timeRange,
-                source: dp.__target?.id || '',
-                series: [`${dp.fragment}.${dp.series}`],
-                ...(this.config.aggregation &&
-                    (!this.config.showAdvancedChartOptions || dp.renderType === 'area') && {
-                    aggregationType: this.config.aggregation
-                }),
-                ...(this.config.aggregation &&
-                    this.config.showAdvancedChartOptions &&
-                    dp.renderType !== 'area' && {
-                    aggregationFunction: dp.renderType,
-                    aggregationInterval: this.AGGREGATION_INTERVAL_MAP[this.config.aggregation]
-                })
-            })).pipe(map(res => {
-                const values = res.data.values;
-                if (res.data.truncated && this.config.dateFrom) {
-                    values[new Date(this.config.dateFrom).toISOString()] = [{ min: null, max: null }];
-                }
-                else {
-                    if (this.alerts) {
+            const renderTypes = dp.renderTypes?.length > 1 ? dp.renderTypes : null;
+            if (renderTypes &&
+                (this.config.autoAggregation ||
+                    (this.config.showAdvancedChartOptions && this.config.aggregation))) {
+                const nonAreaRenderTypes = renderTypes.filter(rt => rt !== 'area');
+                const singleRequest = defer(() => this.measurementService.listSeries({
+                    revert: true,
+                    ...timeRange,
+                    source: dp.__target?.id || '',
+                    series: [`${dp.fragment}.${dp.series}`],
+                    ...(this.config.autoAggregation &&
+                        (() => {
+                            const interval = this.chartHelpersService.calculateAutoAggregationInterval(timeRange.dateFrom, timeRange.dateTo, this.config.autoAggregation.datapoints);
+                            if (!interval)
+                                return {};
+                            if (this.config.showAdvancedChartOptions) {
+                                return { aggregationFunction: nonAreaRenderTypes, aggregationInterval: interval };
+                            }
+                            const aggType = this.chartHelpersService.mapIntervalToAggregationType(interval);
+                            return aggType ? { aggregationType: aggType } : {};
+                        })()),
+                    ...(!this.config.autoAggregation &&
+                        this.config.aggregation && {
+                        aggregationFunction: nonAreaRenderTypes,
+                        aggregationInterval: this.AGGREGATION_INTERVAL_MAP[this.config.aggregation]
+                    })
+                })).pipe(map(res => {
+                    const values = res.data.values;
+                    if (res.data.truncated && this.config.dateFrom) {
+                        values[new Date(this.config.dateFrom).toISOString()] = [{ min: null, max: null }];
+                    }
+                    else if (this.alerts) {
                         this.alerts.clear();
                     }
-                }
-                // If the datapoint already has a unit (e.g. from config), keep it. Otherwise, try to get it from the series response.
-                if (!dp.unit) {
-                    const unitFromSeries = res.data.series[0]?.unit;
-                    if (unitFromSeries) {
-                        dp.unit = unitFromSeries;
+                    return {
+                        ...dp,
+                        renderType: dp.renderType,
+                        values,
+                        truncated: res.data.truncated
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    };
+                }));
+                datapointsWithValuesRequests.push(singleRequest);
+            }
+            else {
+                const request = defer(() => this.measurementService.listSeries({
+                    revert: true,
+                    ...timeRange,
+                    source: dp.__target?.id || '',
+                    series: [`${dp.fragment}.${dp.series}`],
+                    // Auto aggregation: compute interval from time range + desired datapoints.
+                    // Falls back to raw data when zoomed in fine enough (returns null).
+                    ...(this.config.autoAggregation &&
+                        (() => {
+                            const interval = this.chartHelpersService.calculateAutoAggregationInterval(timeRange.dateFrom, timeRange.dateTo, this.config.autoAggregation.datapoints);
+                            if (!interval)
+                                return {};
+                            if (this.config.showAdvancedChartOptions) {
+                                return {
+                                    aggregationFunction: dp.renderType ?? 'avg',
+                                    aggregationInterval: interval
+                                };
+                            }
+                            const aggType = this.chartHelpersService.mapIntervalToAggregationType(interval);
+                            return aggType ? { aggregationType: aggType } : {};
+                        })()),
+                    // Standard aggregation (only when auto aggregation is not active)
+                    ...(!this.config.autoAggregation &&
+                        this.config.aggregation &&
+                        (!this.config.showAdvancedChartOptions || dp.renderType === 'area') && {
+                        aggregationType: this.config.aggregation
+                    }),
+                    ...(!this.config.autoAggregation &&
+                        this.config.aggregation &&
+                        this.config.showAdvancedChartOptions &&
+                        dp.renderType !== 'area' && {
+                        aggregationFunction: dp.renderType,
+                        aggregationInterval: this.AGGREGATION_INTERVAL_MAP[this.config.aggregation]
+                    })
+                })).pipe(map(res => {
+                    const values = res.data.values;
+                    if (res.data.truncated && this.config.dateFrom) {
+                        values[new Date(this.config.dateFrom).toISOString()] = [{ min: null, max: null }];
                     }
-                }
-                return { ...dp, values, truncated: res.data.truncated };
-            }));
-            datapointsWithValuesRequests.push(request);
+                    else {
+                        if (this.alerts) {
+                            this.alerts.clear();
+                        }
+                    }
+                    // If the datapoint already has a unit (e.g. from config), keep it. Otherwise, try to get it from the series response.
+                    if (!dp.unit) {
+                        const unitFromSeries = res.data.series[0]?.unit;
+                        if (unitFromSeries) {
+                            dp.unit = unitFromSeries;
+                        }
+                    }
+                    return {
+                        ...dp,
+                        renderType: dp.renderType,
+                        values,
+                        truncated: res.data.truncated
+                    };
+                }));
+                datapointsWithValuesRequests.push(request);
+            }
         }
         return forkJoin(datapointsWithValuesRequests).pipe(tap((dpsWithValues) => {
             this.dataWasTruncated = dpsWithValues.some(dp => dp['truncated']);
             if (this.dataWasTruncated) {
                 this.addTruncatedDataAlert();
             }
+            if (this.config.autoAggregation) {
+                const timeRange = this.getTimeRange(60_000);
+                this.lastAutoAggregationInterval =
+                    this.chartHelpersService.calculateAutoAggregationInterval(timeRange.dateFrom, timeRange.dateTo, this.config.autoAggregation.datapoints);
+            }
         }));
     }
     fetchAggregatedSeriesForSelectedDatapoint$(customTimeRange, aggregatedDatapoint) {
@@ -2952,13 +3599,35 @@ class ChartsComponent {
             ...(customTimeRange ? customTimeRange : timeRange),
             source: aggregatedDatapoint.__target?.id || '',
             series: [`${aggregatedDatapoint.fragment}.${aggregatedDatapoint.series}`],
-            ...((this.config.aggregation || customTimeRange) &&
+            // Auto aggregation: compute interval from time range + desired datapoints.
+            // Falls back to raw data when the zoom level is fine enough that aggregation
+            // would add no value (calculateAutoAggregationInterval returns null).
+            // Non-migrated tenants don't support aggregationFunction/aggregationInterval,
+            // so we map the computed interval to the nearest standard aggregationType.
+            ...(this.config.autoAggregation &&
+                (() => {
+                    const interval = this.chartHelpersService.calculateAutoAggregationInterval((customTimeRange ?? timeRange).dateFrom, (customTimeRange ?? timeRange).dateTo, this.config.autoAggregation.datapoints);
+                    if (!interval)
+                        return {};
+                    if (this.config.showAdvancedChartOptions) {
+                        return {
+                            aggregationFunction: aggregatedDatapoint.renderType ?? 'avg',
+                            aggregationInterval: interval
+                        };
+                    }
+                    const aggType = this.chartHelpersService.mapIntervalToAggregationType(interval);
+                    return aggType ? { aggregationType: aggType } : {};
+                })()),
+            // Standard aggregation (only when auto aggregation is not active)
+            ...(!this.config.autoAggregation &&
+                (this.config.aggregation || customTimeRange) &&
                 (!this.config.showAdvancedChartOptions || aggregatedDatapoint.renderType === 'area') && {
                 aggregationType: customTimeRange
                     ? this.getAggregationTypeForTimeRange()
                     : this.config.aggregation
             }),
-            ...((this.config.aggregation || customTimeRange) &&
+            ...(!this.config.autoAggregation &&
+                (this.config.aggregation || customTimeRange) &&
                 this.config.showAdvancedChartOptions &&
                 aggregatedDatapoint.renderType !== 'area' && {
                 aggregationFunction: aggregatedDatapoint.renderType,
@@ -3042,7 +3711,7 @@ class ChartsComponent {
         return { dateFrom: timeRange.dateFrom.toISOString(), dateTo: timeRange.dateTo.toISOString() };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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", duplicateAggregationsDetected: "duplicateAggregationsDetected" }, providers: [
             { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) },
             ChartRealtimeService,
             MeasurementRealtimeService,
@@ -3052,8 +3721,9 @@ class ChartsComponent {
             EchartsOptionsService,
             YAxisService,
             AlarmSeverityToIconPipe,
-            AlarmSeverityToLabelPipe
-        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-relative fit-h chart-container\"\n  [attr.data-cy]=\"\n    config?.realtime ? 'c8y-charts--realtime-active' : 'c8y-charts--realtime-inactive'\n  \"\n>\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" }] }); }
+            AlarmSeverityToLabelPipe,
+            ChartHelpersService
+        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-relative fit-h chart-container\"\n  [attr.data-cy]=\"\n    config?.realtime ? 'c8y-charts--realtime-active' : 'c8y-charts--realtime-inactive'\n  \"\n>\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$1.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$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChartsComponent, decorators: [{
             type: Component,
@@ -3067,7 +3737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         EchartsOptionsService,
                         YAxisService,
                         AlarmSeverityToIconPipe,
-                        AlarmSeverityToLabelPipe
+                        AlarmSeverityToLabelPipe,
+                        ChartHelpersService
                     ], standalone: true, imports: [
                         CommonModule$1,
                         CoreModule,
@@ -3102,6 +3773,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Output
             }], updateAggregatedSliderDatapoint: [{
                 type: Output
+            }], duplicateAggregationsDetected: [{
+                type: Output
             }], chart: [{
                 type: ViewChild,
                 args: ['chart']