@c8y/ngx-components 1024.20.0 → 1024.20.8

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

@@ -11,7 +11,7 @@ import * as echarts from 'echarts';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
 import * as i1$3 from '@c8y/client';
-import { AlarmStatus, aggregationType, MeasurementService } from '@c8y/client';
+import { aggregationType, AlarmStatus, 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';
@@ -482,10 +482,252 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }] });
 
+class ChartHelpersService {
+    constructor() {
+        /** Vertical pixel distance between adjacent alarm/event rows in the carrier render path. */
+        this.ALARM_EVENT_ROW_STEP = 28;
+        /** Radius in pixels of an alarm/event mark (a 24 px circle), used to keep rows clear of the grid edges. */
+        this.ALARM_EVENT_MARK_RADIUS = 12;
+        /** Clearance in pixels kept at each grid edge when only the chart height (not the grid) can be measured. */
+        this.ALARM_EVENT_ROW_EDGE_PADDING = 12;
+        /** Row span assumed before the first layout, when neither the grid nor the chart height is measurable yet. */
+        this.ALARM_EVENT_ROW_FALLBACK_SPAN = 200;
+        /** Top data value of the fixed [0, 2] carrier y-axis, used to measure the usable row span in pixels. */
+        this.ALARM_EVENT_CARRIER_AXIS_MAX = 2;
+    }
+    /**
+     * Places each alarm/event type on its own row in the carrier render path by applying a per-type
+     * vertical `symbolOffset` to its markPoints. Without a datapoint line to anchor them the marks all
+     * resolve to the single carrier y-coordinate, so two types raised seconds apart would otherwise be
+     * drawn on top of each other. Rows are centered around the carrier line and the step is capped so
+     * they all fit inside the plot area at the current height.
+     * @param series - The carrier series to mutate in place.
+     * @param echartsInstance - The chart instance, used to measure the available row span.
+     */
+    assignAlarmEventRowOffsets(series, echartsInstance) {
+        const markPointSeries = series.filter(s => s.markPoint);
+        // Distinct types in stable order — one row per type, shared by all devices of that type.
+        const types = [];
+        for (const s of markPointSeries) {
+            const [type] = s.id.split('/');
+            if (!types.includes(type)) {
+                types.push(type);
+            }
+        }
+        const centerIndex = (types.length - 1) / 2;
+        const rowStep = this.getAlarmEventRowStep(types.length, echartsInstance);
+        markPointSeries.forEach(s => {
+            const withMarkPoint = s;
+            const data = withMarkPoint.markPoint?.data;
+            if (!data) {
+                return;
+            }
+            const [type] = s.id.split('/');
+            const offsetY = (types.indexOf(type) - centerIndex) * rowStep;
+            withMarkPoint.markPoint.data = data.map(point => ({
+                ...point,
+                symbolOffset: [0, offsetY]
+            }));
+        });
+    }
+    /**
+     * Reapplies the per-type row offsets to the current carrier series and pushes only the markPoint
+     * data back to the chart. Called on resize so the rows are re-spaced for the new height instead of
+     * keeping the spacing computed at build time.
+     * @param echartsInstance - The chart instance.
+     * @param isAlarmEventOnlyChart - Whether the alarms/events-only (carrier) chart is currently shown;
+     * the datapoint path also has markPoint series and must never be touched.
+     */
+    reapplyAlarmEventRowOffsets(echartsInstance, isAlarmEventOnlyChart) {
+        if (!isAlarmEventOnlyChart || !echartsInstance) {
+            return;
+        }
+        const series = (echartsInstance.getOption()?.['series'] ?? []);
+        const markPointSeries = series.filter(s => s.markPoint);
+        if (!markPointSeries.length) {
+            return;
+        }
+        this.assignAlarmEventRowOffsets(markPointSeries, echartsInstance);
+        echartsInstance.setOption({
+            series: markPointSeries.map(s => ({
+                id: s.id,
+                markPoint: { data: s.markPoint.data }
+            }))
+        });
+    }
+    /**
+     * Cleans the widget configuration which will be sent to Gainsight by removing unnecessary properties.
+     * @param config The widget configuration to clean.
+     * @returns The cleaned widget configuration.
+     */
+    getConfigSummaryForGainsight(config) {
+        return {
+            datapointCount: config.datapoints?.length ?? 0,
+            alarmsEventsCount: config.alarmsEventsConfigs?.length ?? 0,
+            interval: config.interval,
+            forceMergeDatapoints: config.forceMergeDatapoints,
+            mergeMatchingDatapoints: config.mergeMatchingDatapoints,
+            showSlider: config.showSlider,
+            dateFrom: config.dateFrom,
+            dateTo: config.dateTo
+        };
+    }
+    findMatchingDatapoint(datapoints, selected) {
+        if (!selected)
+            return undefined;
+        return datapoints.find(dp => this.getTargetId(dp) === this.getTargetId(selected) &&
+            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;
+    }
+    /**
+     * Vertical distance between adjacent alarm/event rows, capped so all rows fit inside the plot area.
+     * Uses the default step until the rows would overflow, then compresses to the measured span.
+     * @param rowCount - The number of type rows to lay out.
+     * @param echartsInstance - The chart instance, used to measure the available span.
+     * @returns The per-row step in pixels.
+     */
+    getAlarmEventRowStep(rowCount, echartsInstance) {
+        if (rowCount < 2) {
+            return this.ALARM_EVENT_ROW_STEP;
+        }
+        return Math.min(this.ALARM_EVENT_ROW_STEP, Math.max(this.getAlarmEventRowSpan(echartsInstance), 0) / (rowCount - 1));
+    }
+    /**
+     * Pixel height available for the centered rows, measured from the plot grid (the marks live in the
+     * grid, which is shorter than the chart by the axis-label band) minus one mark diameter of
+     * clearance. Falls back to the chart height, then a fixed span, before the first layout exists.
+     * @param echartsInstance - The chart instance.
+     * @returns The usable vertical span in pixels.
+     */
+    getAlarmEventRowSpan(echartsInstance) {
+        if (typeof echartsInstance?.convertToPixel === 'function') {
+            const top = echartsInstance.convertToPixel({ yAxisIndex: 0 }, this.ALARM_EVENT_CARRIER_AXIS_MAX);
+            const bottom = echartsInstance.convertToPixel({ yAxisIndex: 0 }, 0);
+            if (Number.isFinite(top) && Number.isFinite(bottom) && bottom > top) {
+                return bottom - top - this.ALARM_EVENT_MARK_RADIUS * 2;
+            }
+        }
+        // Before the first layout there is no grid to measure, so fall back to the chart's own height.
+        const chartHeight = typeof echartsInstance?.getHeight === 'function' ? echartsInstance.getHeight() : 0;
+        return chartHeight > 0
+            ? chartHeight - this.ALARM_EVENT_ROW_EDGE_PADDING * 2
+            : this.ALARM_EVENT_ROW_FALLBACK_SPAN;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartHelpersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartHelpersService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartHelpersService, decorators: [{
+            type: Injectable
+        }] });
+
 const INDEX_HTML = '/index.html';
 const DEFAULT_DATAPOINT_COLOR = '#1776bf';
 class EchartsOptionsService {
-    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router) {
+    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router, chartHelpersService) {
         this.datePipe = datePipe;
         this.yAxisService = yAxisService;
         this.chartTypesService = chartTypesService;
@@ -493,11 +735,25 @@ class EchartsOptionsService {
         this.severityLabelPipe = severityLabelPipe;
         this.translate = translate;
         this.router = router;
+        this.chartHelpersService = chartHelpersService;
         this.highlightedSeriesName = null;
         this.AGGREGATED_SERIES_TYPE = 'aggr';
         this.TOOLTIP_WIDTH = 300;
         this.COMPACT_TOOLTIP_WIDTH = 360;
         this.COMPACT_TOOLTIP_THRESHOLD = 5;
+        /**
+         * Fixed y-coordinate the alarm/event marks are anchored to when no datapoint line exists to
+         * host them (the "carrier" render path). It sits in the middle of the hidden [0, 2] y-axis.
+         */
+        this.ALARM_EVENT_CARRIER_Y = 1;
+        /**
+         * Vertical pixel offset applied to event marks so that an event and an alarm occurring at the
+         * same time no longer paint on top of each other. Alarms stay on the anchor line, events float
+         * just above it. Applied in both render paths (with and without a datapoint line).
+         */
+        this.EVENT_MARK_VERTICAL_OFFSET = -18;
+        /** True while the chart shows only alarms/events (carrier path); gates the resize-driven row reflow. */
+        this.isAlarmEventOnlyChart = false;
     }
     getChartOptions(datapointsWithValues, timeRange, showSplitLines, events, alarms, displayOptions, selectedTimeRange, aggregatedDatapoint, sliderZoomUsed = false) {
         displayOptions = {
@@ -526,23 +782,9 @@ class EchartsOptionsService {
         if (sliderZoomUsed) {
             intervalInMs = this.calculateExtendedIntervalInMs(timeRange.interval || 'hours', timeRange);
         }
+        this.isAlarmEventOnlyChart = !!displayOptions.showOnlyAlarmsOrEvents;
         if (displayOptions.showOnlyAlarmsOrEvents) {
-            return {
-                xAxis: {
-                    min: timeRange.dateFrom,
-                    max: timeRange.dateTo,
-                    type: 'time'
-                },
-                yAxis: {
-                    show: false
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    // intended empty for now. Later we can add a tooltip for more info on the hovered alarm/event
-                    formatter: () => ''
-                },
-                series: this.createAlarmEventTypeSeries(alarms, events)
-            };
+            return this.getAlarmEventOnlyChartOptions(alarms, events, timeRange, displayOptions);
         }
         return {
             grid: {
@@ -889,141 +1131,138 @@ class EchartsOptionsService {
             series['typeOfSeries'] !== 'event' &&
             legendSelected?.[series['name']] !== false);
         this.processSeries(allDataPointSeries, XAxisValue, YAxisReadings, displayOptions);
-        // find event and alarm of the same type as the hovered markedLine or markedPoint
-        const event = allEvents.find(e => e.type === params.data.itemType && params.data.value === e.time);
-        const alarm = allAlarms.find(a => a.type === params.data.itemType && params.data.value === a.lastUpdated) ??
-            allAlarms.find(a => a.type === params.data.itemType && params.data.value === a.creationTime); // fallback to creationTime for cleared alarms.
+        const { itemType, value: markValue, coord } = params.data;
+        const markTimestamp = markValue ?? coord?.[0];
+        const event = allEvents.find(e => e.type === itemType && markTimestamp === e.time) ??
+            allEvents.find(e => e.type === itemType);
+        const alarm = allAlarms.find(a => a.type === itemType && markTimestamp === a.lastUpdated) ??
+            allAlarms.find(a => a.type === itemType && markTimestamp === a.creationTime) ?? // cleared alarms
+            allAlarms.find(a => a.type === itemType);
         let value = '';
         if (event) {
             value = this.processEvent(event);
         }
-        if (alarm) {
-            this.processAlarm(alarm).then(alarmVal => {
-                value = alarmVal;
-                YAxisReadings.push(value);
-                const options = this.echartsInstance?.getOption();
-                if (!options.tooltip || !Array.isArray(options.tooltip)) {
-                    return;
-                }
-                const updatedOptions = {
-                    tooltip: options['tooltip'][0]
-                };
-                if (!updatedOptions.tooltip) {
-                    return;
-                }
-                updatedOptions.tooltip.formatter = `<div style="width: ${this.TOOLTIP_WIDTH}px">${YAxisReadings.join('')}</div>`;
-                updatedOptions.tooltip.transitionDuration = 0;
-                updatedOptions.tooltip.position = this.tooltipPosition();
-                this.echartsInstance?.setOption(updatedOptions);
-                return;
-            });
+        else if (alarm) {
+            value = this.processAlarm(alarm);
         }
         YAxisReadings.push(value);
-        return `<div style="width: 300px">${YAxisReadings.join('')}</div>`;
+        return `<div style="width: ${this.TOOLTIP_WIDTH}px">${YAxisReadings.join('')}</div>`;
     }
     /**
-     * Creates the series for alarms and events by their type.
-     * @param alarms - The list of alarms.
-     * @param events - The list of events.
-     * @returns The series options for the chart.
+     * Builds alarm/event markLine + markPoint series when there is no datapoint line to anchor them.
+     * @param alarms - The list of alarms to render.
+     * @param events - The list of events to render.
+     * @param timeRange - The visible time range (used to span the flat carrier values).
+     * @param displayOptions - The display options forwarded to `getAlarmOrEventSeries`.
+     * @returns The markLine/markPoint series for the alarms/events-only view.
      */
-    createAlarmEventTypeSeries(alarms, events) {
+    getAlarmEventCarrierSeries(alarms, events, timeRange, displayOptions) {
+        const deviceIds = Array.from(new Set([...alarms, ...events].map(item => item.source?.id).filter(Boolean)));
+        const flatValues = {
+            [new Date(timeRange.dateFrom).toISOString()]: [
+                { min: this.ALARM_EVENT_CARRIER_Y, max: this.ALARM_EVENT_CARRIER_Y }
+            ],
+            [new Date(timeRange.dateTo).toISOString()]: [
+                { min: this.ALARM_EVENT_CARRIER_Y, max: this.ALARM_EVENT_CARRIER_Y }
+            ]
+        };
         const series = [];
-        let yValue = 10;
-        // Group alarms and events by type
-        const alarmTypes = Array.from(new Set(alarms.map(a => a.type)));
-        const eventTypes = Array.from(new Set(events.map(e => e.type)));
-        // Alarms by type
-        for (const type of alarmTypes) {
-            const alarmsOfType = alarms.filter(a => a.type === type);
-            // Background circle series
-            series.push({
-                type: 'scatter',
-                name: `${type}-circle`,
-                data: alarmsOfType.map(a => [a.creationTime, yValue]),
-                symbol: 'circle',
-                symbolSize: 24,
-                itemStyle: {
-                    color: alarmsOfType[0]?.color || '#EE6666'
-                },
-                z: 2
-            });
-            // Foreground icon series
-            series.push({
-                type: 'scatter',
-                name: `${type}-icon`,
-                data: alarmsOfType.map(a => {
-                    const isCleared = a.status === AlarmStatus.CLEARED;
-                    return {
-                        value: [isCleared ? a.lastUpdated : a.creationTime, yValue],
-                        itemStyle: { color: 'white' },
-                        symbol: isCleared ? ICONS_MAP.CLEARED : ICONS_MAP[a.severity],
-                        symbolSize: 16
-                    };
-                }),
-                z: 3
-            });
-            // If alarm is cleared, also show the cleared icon at lastUpdated
-            alarmsOfType.forEach(a => {
-                if (a.status === AlarmStatus.CLEARED && a.lastUpdated !== a.creationTime) {
-                    series.push({
-                        type: 'scatter',
-                        name: `${type}-cleared-circle`,
-                        data: [[a.lastUpdated, yValue]],
-                        symbol: 'circle',
-                        symbolSize: 24,
-                        itemStyle: {
-                            color: a.color || '#EE6666'
-                        },
-                        z: 2
-                    });
-                    series.push({
-                        type: 'scatter',
-                        name: `${type}-cleared-icon`,
-                        data: [
-                            {
-                                value: [a.lastUpdated, yValue],
-                                itemStyle: { color: 'white' },
-                                symbol: ICONS_MAP.CLEARED,
-                                symbolSize: 16
-                            }
-                        ],
-                        z: 3
-                    });
+        for (const deviceId of deviceIds) {
+            const carrierDp = {
+                __target: { id: deviceId },
+                values: flatValues,
+                renderType: 'avg',
+                lineType: 'line',
+                color: 'transparent'
+            };
+            const deviceEvents = events.filter(e => e.source?.id === deviceId);
+            const deviceAlarms = alarms.filter(a => a.source?.id === deviceId);
+            series.push(...this.getAlarmOrEventSeries(carrierDp, 'avg', false, deviceEvents, 'event', displayOptions, null, 0), ...this.getAlarmOrEventSeries(carrierDp, 'avg', false, deviceAlarms, 'alarm', displayOptions, null, 0));
+        }
+        // markLines are full-height vertical lines keyed only by x, so copies for the same type across
+        // devices are redundant; keep one per type (mirrors the dedup in getChartSeries).
+        const seenMarkLineTypes = new Set();
+        const deduped = series.filter(s => {
+            const id = s.id;
+            if (!id?.endsWith('-markLine')) {
+                return true;
+            }
+            const isFirst = !seenMarkLineTypes.has(id);
+            seenMarkLineTypes.add(id);
+            return isFirst;
+        });
+        this.chartHelpersService.assignAlarmEventRowOffsets(deduped, this.echartsInstance);
+        deduped.forEach(s => {
+            const withMarks = s;
+            if (withMarks.markLine) {
+                withMarks.markLine.label = { show: false };
+                withMarks.markLine.emphasis = { label: { show: false } };
+            }
+            if (withMarks.markPoint) {
+                withMarks.markPoint.label = { show: false };
+                withMarks.markPoint.emphasis = { label: { show: false } };
+            }
+        });
+        return deduped;
+    }
+    /**
+     * Exposes the default markLine data (creation time, plus lastUpdated when it differs) for a set of
+     * alarms or events.
+     * @param items - The alarms or events to build lines for.
+     * @param itemType - Whether the items are alarms or events.
+     * @returns The default markLine data.
+     */
+    getDefaultMarkLineData(items, itemType) {
+        return this.createMarkLine(items, itemType);
+    }
+    /**
+     * Builds the full chart options for the "alarms/events only" case (no active datapoint).
+     * @param alarms - The list of alarms to render.
+     * @param events - The list of events to render.
+     * @param timeRange - The visible time range.
+     * @param displayOptions - The display options (marked line/point flags, axis color, …).
+     * @returns The chart options for the alarms/events-only view.
+     */
+    getAlarmEventOnlyChartOptions(alarms, events, timeRange, displayOptions) {
+        return {
+            grid: { containLabel: true, left: 32, top: 16, right: 32, bottom: 8 },
+            dataZoom: [
+                {
+                    type: 'inside',
+                    filterMode: 'none',
+                    zoomOnMouseWheel: true,
+                    startValue: new Date(timeRange.dateFrom).valueOf(),
+                    endValue: new Date(timeRange.dateTo).valueOf()
                 }
-            });
-            yValue += 10;
-        }
-        // Events by type
-        for (const type of eventTypes) {
-            const eventsOfType = events.filter(e => e.type === type);
-            // Background circle series
-            series.push({
-                type: 'scatter',
-                name: `${type}-circle`,
-                data: eventsOfType.map(e => [e.creationTime, yValue]),
-                symbol: 'circle',
-                symbolSize: 24,
-                itemStyle: {
-                    color: eventsOfType[0]?.color || '#6f6cd0'
-                },
-                z: 2
-            });
-            // Foreground icon series
-            series.push({
-                type: 'scatter',
-                name: `${type}-icon`,
-                data: eventsOfType.map(e => ({
-                    value: [e.creationTime, yValue],
-                    itemStyle: { color: 'white' },
-                    symbol: ICONS_MAP.EVENT,
-                    symbolSize: 16
-                })),
-                z: 3
-            });
-            yValue += 10;
-        }
-        return series;
+            ],
+            animation: false,
+            tooltip: {
+                trigger: 'axis',
+                formatter: () => '',
+                backgroundColor: 'var(--c8y-root-component-background-default)',
+                borderColor: 'var(--c8y-root-component-border-color)',
+                padding: 0,
+                appendToBody: true,
+                position: this.tooltipPosition(),
+                transitionDuration: 0
+            },
+            legend: { show: false },
+            xAxis: {
+                min: new Date(timeRange.dateFrom).valueOf(),
+                max: new Date(timeRange.dateTo).valueOf(),
+                type: 'time',
+                axisLine: { lineStyle: { color: displayOptions.axisColor } },
+                axisLabel: { hideOverlap: true, color: displayOptions.axisColor }
+            },
+            // Hidden fixed-range axis so the carrier marks always render at a stable vertical position.
+            yAxis: {
+                show: false,
+                type: 'value',
+                min: 0,
+                max: 2
+            },
+            series: this.getAlarmEventCarrierSeries(alarms, events, timeRange, displayOptions)
+        };
     }
     tooltipPosition() {
         let lastPositionOfTooltip = {};
@@ -1179,14 +1418,14 @@ class EchartsOptionsService {
      * @param alarm - The alarm object.
      * @returns The processed value.
      */
-    async processAlarm(alarm) {
+    processAlarm(alarm) {
         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>`;
         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('Message')))}</label><span class="small m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px;" title="${echarts.format.encodeHTML(this.translate.instant(alarm.text))}">${echarts.format.encodeHTML(this.translate.instant(alarm.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('Last updated')))}</label><span class="small m-l-auto">${echarts.format.encodeHTML(this.datePipe.transform(alarm['lastUpdated']))}</span></li>`;
-        const exists = await this.alarmRouteExists();
+        const exists = this.alarmRouteExists();
         if (exists) {
             const currentUrl = window.location.href;
             const baseUrlIndex = currentUrl.indexOf(INDEX_HTML);
@@ -1197,11 +1436,8 @@ class EchartsOptionsService {
         value += `</ul>`;
         return value;
     }
-    async alarmRouteExists() {
-        const exists = this.router.config.some(route => {
-            return `${route.path}` === 'alarms';
-        });
-        return exists;
+    alarmRouteExists() {
+        return this.router.config.some(route => `${route.path}` === 'alarms');
     }
     getChartSeries(datapointsWithValues, events, alarms, displayOptions) {
         const series = [];
@@ -1485,6 +1721,8 @@ class EchartsOptionsService {
             ];
         }
         if (isEvent) {
+            // Offset events vertically so an event and an alarm at the same time don't obscure each other.
+            const symbolOffset = [0, this.EVENT_MARK_VERTICAL_OFFSET];
             return [
                 {
                     coord: coordCreationTime,
@@ -1494,7 +1732,8 @@ class EchartsOptionsService {
                         color: item['color']
                     },
                     symbol: 'circle',
-                    symbolSize: 24
+                    symbolSize: 24,
+                    symbolOffset
                 },
                 {
                     coord: coordCreationTime,
@@ -1502,87 +1741,51 @@ class EchartsOptionsService {
                     itemType: item.type,
                     itemStyle: { color: 'white' },
                     symbol: ICONS_MAP.EVENT,
-                    symbolSize: 16
+                    symbolSize: 16,
+                    symbolOffset
                 }
             ];
         }
-        return isCleared
-            ? [
-                {
-                    coord: coordCreationTime,
-                    name: item.type,
-                    itemType: item.type,
-                    itemStyle: {
-                        color: item['color']
-                    },
-                    symbol: 'circle',
-                    symbolSize: 24
-                },
-                {
-                    coord: coordCreationTime,
-                    name: item.type,
-                    itemType: item.type,
-                    itemStyle: { color: 'white' },
-                    symbol: ICONS_MAP[item.severity],
-                    symbolSize: 16
-                },
-                {
-                    coord: coordLastUpdatedTime,
-                    name: item.type,
-                    itemType: item.type,
-                    itemStyle: {
-                        color: item['color']
-                    },
-                    symbol: 'circle',
-                    symbolSize: 24
-                },
-                {
-                    coord: coordLastUpdatedTime,
-                    name: item.type,
-                    itemType: item.type,
-                    itemStyle: { color: 'white' },
-                    symbol: ICONS_MAP.CLEARED,
-                    symbolSize: 16
-                }
-            ]
-            : [
-                {
-                    coord: coordCreationTime,
-                    name: item.type,
-                    itemType: item.type,
-                    itemStyle: {
-                        color: item['color']
-                    },
-                    symbol: 'circle',
-                    symbolSize: 24
-                },
-                {
-                    coord: coordCreationTime,
-                    name: item.type,
-                    itemType: item.type,
-                    itemStyle: { color: 'white' },
-                    symbol: ICONS_MAP[item.severity],
-                    symbolSize: 16
-                },
-                {
-                    coord: coordLastUpdatedTime,
-                    name: item.type,
-                    itemType: item.type,
-                    itemStyle: {
-                        color: item['color']
-                    },
-                    symbol: 'circle',
-                    symbolSize: 24
-                },
-                {
-                    coord: coordLastUpdatedTime,
-                    name: item.type,
-                    itemType: item.type,
-                    itemStyle: { color: 'white' },
-                    symbol: ICONS_MAP[item.severity],
-                    symbolSize: 16
-                }
-            ];
+        const creationMarks = [
+            {
+                coord: coordCreationTime,
+                name: item.type,
+                itemType: item.type,
+                itemStyle: { color: item['color'] },
+                symbol: 'circle',
+                symbolSize: 24
+            },
+            {
+                coord: coordCreationTime,
+                name: item.type,
+                itemType: item.type,
+                itemStyle: { color: 'white' },
+                symbol: ICONS_MAP[item.severity],
+                symbolSize: 16
+            }
+        ];
+        if (!item['lastUpdated']) {
+            return creationMarks;
+        }
+        return [
+            ...creationMarks,
+            {
+                coord: coordLastUpdatedTime,
+                name: item.type,
+                itemType: item.type,
+                itemStyle: { color: item['color'] },
+                symbol: 'circle',
+                symbolSize: 24
+            },
+            {
+                coord: coordLastUpdatedTime,
+                name: item.type,
+                itemType: item.type,
+                itemStyle: { color: 'white' },
+                symbol: isCleared ? ICONS_MAP.CLEARED : ICONS_MAP[item.severity],
+                symbolSize: 16
+            }
+        ];
     }
     /**
      * This method creates a markLine on the chart which represents the line between every alarm or event on the chart.
@@ -1604,7 +1807,7 @@ class EchartsOptionsService {
                     }
                 ]);
             }
-            if (item.creationTime === item['lastUpdated']) {
+            if (!item['lastUpdated'] || item.creationTime === item['lastUpdated']) {
                 return acc.concat([
                     {
                         xAxis: item.creationTime,
@@ -2014,12 +2217,12 @@ class EchartsOptionsService {
             return baseColor;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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 }, { token: ChartHelpersService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EchartsOptionsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EchartsOptionsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: YAxisService }, { type: ChartTypesService }, { type: i4.AlarmSeverityToIconPipe }, { type: i4.AlarmSeverityToLabelPipe }, { type: i1.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 }, { type: ChartHelpersService }] });
 
 class ChartRealtimeService {
     constructor(measurementRealtime, alarmRealtimeService, eventRealtimeService, echartsOptionsService) {
@@ -2049,6 +2252,7 @@ class ChartRealtimeService {
         if (displayOptions.showOnlyAlarmsOrEvents) {
             this.currentAlarms = alarms ? [...alarms] : [];
             this.currentEvents = events ? [...events] : [];
+            this.currentDisplayOptions = displayOptions;
             // Subscribe to realtime alarms/events
             const allAlarmsAndEvents$ = from(uniqueAlarmOrEventTargets).pipe(mergeMap(targetId => {
                 const alarmsRealtime$ = this.alarmRealtimeService.onAll$(targetId);
@@ -2058,9 +2262,19 @@ class ChartRealtimeService {
             this.realtimeSubscriptionAlarmsEvents = allAlarmsAndEvents$.subscribe(alarmOrEvent => {
                 if (!alarmOrEvent)
                     return;
+                const matchingConfig = activeAlarmsOrEvents.find(aOrE => aOrE.filters.type === alarmOrEvent.type && aOrE.__target?.id === alarmOrEvent.source?.id);
+                if (!matchingConfig) {
+                    return;
+                }
+                alarmOrEvent['color'] = matchingConfig.color;
+                alarmOrEvent['selectedDatapoint'] = matchingConfig.selectedDatapoint;
                 if ('severity' in alarmOrEvent) {
                     // Alarm
-                    if (!this.currentAlarms.some(a => a.id === alarmOrEvent.id)) {
+                    const existingIdx = this.currentAlarms.findIndex(a => a.id === alarmOrEvent.id);
+                    if (existingIdx !== -1) {
+                        this.currentAlarms[existingIdx] = alarmOrEvent;
+                    }
+                    else {
                         this.currentAlarms.push(alarmOrEvent);
                     }
                 }
@@ -2070,6 +2284,7 @@ class ChartRealtimeService {
                         this.currentEvents.push(alarmOrEvent);
                     }
                 }
+                alarmOrEventReceivedCallback?.(alarmOrEvent);
                 this.updateAlarmsEventsChartRealtime();
             });
             const updateThrottleTime = this.getRealtimeUpdateThrottleTime({
@@ -2167,7 +2382,18 @@ class ChartRealtimeService {
      * Updates the chart with the current alarms and events data. Only used when no active datapoints are selected.
      */
     updateAlarmsEventsChartRealtime() {
-        const series = this.echartsOptionsService.createAlarmEventTypeSeries(this.currentAlarms, this.currentEvents);
+        const series = this.echartsOptionsService.getAlarmEventCarrierSeries(this.currentAlarms, this.currentEvents, {
+            dateFrom: (this.currentTimeRange?.dateFrom ?? new Date()).toISOString(),
+            dateTo: (this.currentTimeRange?.dateTo ?? new Date()).toISOString()
+        }, this.currentDisplayOptions ?? {
+            displayMarkedLine: true,
+            displayMarkedPoint: true,
+            mergeMatchingDatapoints: false,
+            forceMergeDatapoints: false,
+            setYaxisStartToZero: false,
+            showLabelAndUnit: false,
+            showSlider: false
+        });
         this.echartsInstance?.setOption({
             series,
             xAxis: {
@@ -2496,142 +2722,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1$3.AlarmService }] });
 
-class ChartHelpersService {
-    /**
-     * Cleans the widget configuration which will be sent to Gainsight by removing unnecessary properties.
-     * @param config The widget configuration to clean.
-     * @returns The cleaned widget configuration.
-     */
-    getConfigSummaryForGainsight(config) {
-        return {
-            datapointCount: config.datapoints?.length ?? 0,
-            alarmsEventsCount: config.alarmsEventsConfigs?.length ?? 0,
-            interval: config.interval,
-            forceMergeDatapoints: config.forceMergeDatapoints,
-            mergeMatchingDatapoints: config.mergeMatchingDatapoints,
-            showSlider: config.showSlider,
-            dateFrom: config.dateFrom,
-            dateTo: config.dateTo
-        };
-    }
-    findMatchingDatapoint(datapoints, selected) {
-        if (!selected)
-            return undefined;
-        return datapoints.find(dp => this.getTargetId(dp) === this.getTargetId(selected) &&
-            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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartHelpersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartHelpersService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartHelpersService, decorators: [{
-            type: Injectable
-        }] });
-
 class SelectAggregatedDatapointComponent {
     constructor() {
         this.activeDatapoints = [];
@@ -2973,6 +3063,16 @@ class ChartsComponent {
             }
         });
         this.echartsInstance.on('click', this.onChartClick.bind(this));
+        // ZRender fires for every click, including on blank canvas — where echarts' own 'click' event
+        // does not. A click on empty space (no target) therefore never reached onChartClick, so after
+        // clicking an event/alarm (which switches the tooltip to triggerOn: 'click') hovering could no
+        // longer reopen a tooltip. Routing blank clicks through the deselect path restores hover mode
+        // (triggerOn back to 'mousemove') and clears any active alarm area, mirroring a click on the area.
+        this.echartsInstance.getZr().on('click', (event) => {
+            if (!event.target) {
+                this.onChartClick({ data: { itemType: '' } });
+            }
+        });
         let originalFormatter = null;
         this.echartsInstance.on('mouseover', (params) => {
             if (params?.componentType !== 'markLine' && params?.componentType !== 'markPoint') {
@@ -2999,13 +3099,14 @@ class ChartsComponent {
                 this.echartsInstance.setOption(options);
             }
         });
+        this.observeChartResize();
     }
     onChartClick(params) {
-        const options = this.echartsInstance.getOption();
+        const clearActiveArea = this.getActiveAlarmAreaClearPatch();
         if (!this.isAlarmOrEventClick(params)) {
             this.echartsInstance.setOption({
                 tooltip: { triggerOn: 'mousemove' },
-                series: [{ markArea: { data: [] }, markLine: { data: [] } }]
+                ...(clearActiveArea ? { series: [clearActiveArea] } : {})
             });
             if (params.componentType === 'series' && params.seriesName) {
                 this.toggleStickyHighlight(params.seriesName);
@@ -3031,44 +3132,49 @@ class ChartsComponent {
         }
         const clickedAlarms = this.alarms.filter(alarm => alarm.type === params.data.itemType);
         const clickedEvents = this.events.filter(event => event.type === params.data.itemType);
+        const clickedTime = params.data.xAxis;
+        const selectedAlarms = clickedAlarms.filter(alarm => alarm.creationTime === clickedTime || alarm['lastUpdated'] === clickedTime);
+        const alarmsToMark = selectedAlarms.length ? selectedAlarms : clickedAlarms;
         if (clickedEvents.length > 0) {
-            const updatedOptions = {
-                tooltip: {
-                    enterable: true,
-                    triggerOn: 'click'
-                }
-            };
-            this.echartsInstance.setOption(updatedOptions);
+            this.echartsInstance.setOption({ tooltip: { enterable: true, triggerOn: 'click' } });
             return;
         }
-        this.isMarkedAreaEnabled.emit(this.hasMarkArea(options));
-        const updatedOptions = !this.hasMarkArea(options)
-            ? {
-                tooltip: { enterable: true, triggerOn: 'click' },
-                series: [
-                    {
-                        markArea: { label: { show: false }, data: this.getMarkedAreaData(clickedAlarms) },
-                        markLine: {
-                            showSymbol: true,
-                            symbol: ['none', 'none'],
-                            data: this.getMarkedLineData(clickedAlarms)
-                        }
-                    }
-                ]
-            }
-            : // if markArea already exists, remove it and remove lastUpdated from markLine
+        const markLineSeriesId = params.seriesName?.replace('-markPoint', '-markLine');
+        const isReclickOfActiveArea = !!clearActiveArea && clearActiveArea.id === markLineSeriesId;
+        this.isMarkedAreaEnabled.emit(isReclickOfActiveArea);
+        if (isReclickOfActiveArea) {
+            // Clicking the active alarm again just removes its area.
+            this.echartsInstance.setOption({
+                tooltip: { triggerOn: 'mousemove' },
+                series: [clearActiveArea]
+            });
+            return;
+        }
+        // Activate this alarm's area, first removing any other active area (mutual exclusivity).
+        this.echartsInstance.setOption({
+            tooltip: { enterable: true, triggerOn: 'click' },
+            series: [
+                ...(clearActiveArea ? [clearActiveArea] : []),
                 {
-                    tooltip: { triggerOn: 'mousemove' },
-                    series: [{ markArea: { data: [] }, markLine: { data: [] } }]
-                };
-        this.echartsInstance.setOption(updatedOptions);
+                    id: markLineSeriesId,
+                    markArea: { label: { show: false }, data: this.getMarkedAreaData(alarmsToMark) },
+                    markLine: {
+                        showSymbol: true,
+                        symbol: ['none', 'none'],
+                        data: this.getMarkedLineData(clickedAlarms)
+                    }
+                }
+            ]
+        });
     }
     isAlarmOrEventClick(params) {
         return (this.alarms.some(alarm => alarm.type === params.data?.itemType) ||
             this.events.some(event => event.type === params.data?.itemType));
     }
-    hasMarkArea(options) {
-        return options?.series?.[0]?.markArea?.data?.length > 0;
+    hasMarkArea(options, seriesId) {
+        const series = (options?.series ?? []);
+        const target = seriesId ? series.find(s => s.id === seriesId) : series[0];
+        return (target?.markArea?.data?.length ?? 0) > 0;
     }
     saveAsImage() {
         const dataZoom = this.echartsInstance.getOption().dataZoom;
@@ -3160,6 +3266,21 @@ class ChartsComponent {
             }
         });
     }
+    /**
+     * Whether the given datapoint currently has at least one series rendered in the chart.
+     * A datapoint can be `__active` in the config yet absent from the chart if a full rebuild ran
+     * while it was hidden (the fetch pipeline only builds series for active datapoints). In that case
+     * a legend toggle has nothing to act on, so the caller must trigger a reload instead.
+     * @param datapoint - The datapoint to look for.
+     */
+    hasRenderedDatapointSeries(datapoint) {
+        if (!this.echartsInstance) {
+            return false;
+        }
+        const dpId = `${datapoint.__target?.id}${datapoint.fragment}${datapoint.series}`;
+        const allSeries = this.echartsInstance.getOption().series;
+        return allSeries?.some(s => s.datapointId === dpId) ?? false;
+    }
     /** Toggles a single chart series by its exact name (used for per-function legend entries). */
     toggleSeriesByName(seriesName, visible) {
         if (!this.echartsInstance) {
@@ -3321,6 +3442,54 @@ class ChartsComponent {
             series: []
         };
     }
+    /**
+     * Re-spaces the alarm/event rows whenever the chart height changes, so the rows stay inside the
+     * plot area on a short chart and after a resize (the pixel offsets are otherwise fixed at build
+     * time). Starting at -1 makes the observer's initial callback also correct the estimated first
+     * build, once a real grid exists to measure. No-op outside the alarms/events-only chart.
+     */
+    observeChartResize() {
+        const chartDom = typeof this.echartsInstance.getDom === 'function' ? this.echartsInstance.getDom() : null;
+        if (!chartDom || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        let lastHeight = -1;
+        const resizeObserver = new ResizeObserver(() => {
+            const height = chartDom.clientHeight;
+            if (height === lastHeight) {
+                return;
+            }
+            lastHeight = height;
+            this.echartsInstance.resize();
+            this.chartHelpersService.reapplyAlarmEventRowOffsets(this.echartsInstance, this.echartsOptionsService.isAlarmEventOnlyChart);
+        });
+        resizeObserver.observe(chartDom);
+        this.destroyRef.onDestroy(() => resizeObserver.disconnect());
+    }
+    /**
+     * Finds the one alarm series that currently shows a markArea and builds the `setOption` patch that
+     * removes it, restoring that series' default mark-line. Only one area is ever active, so there is
+     * nothing to iterate; the event lines live on their own series and are left untouched.
+     * @returns The clear patch, or null when no alarm area is active.
+     */
+    getActiveAlarmAreaClearPatch() {
+        const series = (this.echartsInstance.getOption().series ?? []);
+        const activeArea = series.find(s => s.typeOfSeries === 'alarm' && (s.markArea?.data?.length ?? 0) > 0);
+        if (!activeArea) {
+            return null;
+        }
+        const type = String(activeArea.id).split('/')[0];
+        const alarmsOfType = this.alarms.filter(alarm => alarm.type === type);
+        return {
+            id: activeArea.id,
+            markArea: { data: [] },
+            markLine: {
+                showSymbol: false,
+                symbol: ['none', 'none'],
+                data: this.echartsOptionsService.getDefaultMarkLineData(alarmsOfType, 'alarm')
+            }
+        };
+    }
     getMarkedAreaData(clickedAlarms) {
         const timeRange = this.getTimeRange();
         const clearedAlarmColor = 'rgba(221,255,221,1.00)';
@@ -3401,7 +3570,8 @@ class ChartsComponent {
         if ((this.activeDatapoints || this.config.alarmsEventsConfigs?.length > 0) &&
             this.config.realtime &&
             this.echartsInstance) {
-            const showOnlyAlarmsOrEvents = this.config.alarmsEventsConfigs?.length > 0 && this.activeDatapoints?.length === 0;
+            const showOnlyAlarmsOrEvents = this.config.alarmsEventsConfigs?.length > 0 &&
+                (!this.activeDatapoints || this.activeDatapoints.length === 0);
             this.chartRealtimeService.startRealtime(this.echartsInstance, this.activeDatapoints, this.getTimeRange(), dp => this.datapointOutOfSync.emit(dp), dp => this.datapointBackInSync.emit(dp), timeRange => this.timeRangeChangeOnRealtime.emit(timeRange), this.config.alarmsEventsConfigs, {
                 ...this.displayOptions,
                 showOnlyAlarmsOrEvents