@c8y/ngx-components 1023.14.2 → 1023.14.33

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, EventEmitter, inject, Output, ViewChild } from '@angular/core';
+import { Injectable, inject, SecurityContext, Input, Component, EventEmitter, Output, ViewChild } from '@angular/core';
 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';
@@ -20,6 +20,7 @@ import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i1$3 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
+import { DomSanitizer } from '@angular/platform-browser';
 import * as i2 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as i3 from '@angular/cdk/a11y';
@@ -97,12 +98,26 @@ class YAxisService {
     getYAxis(datapointsWithValues, YAxisOptions) {
         const YAxisPlacement = this.getYAxisPlacement(datapointsWithValues);
         if (YAxisOptions.forceMergeDatapoints) {
-            const firstDp = datapointsWithValues[0];
-            const unit = firstDp?.unit ? `[${firstDp.unit}]` : '';
             return {
-                name: unit,
+                name: Array.from(datapointsWithValues)
+                    .map((dp, index) => `{${index}|${dp.unit}}`)
+                    .join(' /'),
                 nameLocation: 'middle',
+                nameTruncate: {
+                    maxWidth: 350
+                },
                 nameGap: 25,
+                nameTextStyle: {
+                    // add rich text to support multiple colors for different dp units
+                    rich: {
+                        ...Array.from(datapointsWithValues).reduce((acc, dp, index) => {
+                            acc[index] = {
+                                color: dp.color || '#6f7079'
+                            };
+                            return acc;
+                        }, {})
+                    }
+                },
                 type: 'value',
                 animation: true,
                 axisLabel: {
@@ -127,7 +142,8 @@ class YAxisService {
                     label: {
                         show: false
                     }
-                }
+                },
+                ...(datapointsWithValues[0] ? {} : { min: 0, max: 100 })
             };
         }
         const matchingDpSet = new Set();
@@ -160,7 +176,7 @@ class YAxisService {
                     ? YAxisOptions.mergeMatchingDatapoints
                         ? firstOccurrence.has(dp)
                             ? Array.from(matchingDpSet)
-                                .map(dp => `{${dp.__target?.id}|${dp.unit}}`)
+                                .map((dp, index) => `{${index}|${dp.unit}}`)
                                 .join(' /')
                             : matchingDpRange
                                 ? ''
@@ -168,13 +184,15 @@ class YAxisService {
                         : `${dp.label} [${dp.unit}]`
                     : '',
                 nameLocation: 'middle',
+                nameTruncate: {
+                    maxWidth: 350
+                },
                 nameGap: 25,
                 nameTextStyle: {
                     // add rich text to support multiple colors for different dp units
                     rich: {
-                        ...Array.from(matchingDpSet).reduce((acc, dp) => {
-                            const accKey = `${dp.__target?.id}`;
-                            acc[accKey] = {
+                        ...Array.from(matchingDpSet).reduce((acc, dp, index) => {
+                            acc[index] = {
                                 color: dp.color
                             };
                             return acc;
@@ -220,6 +238,7 @@ class YAxisService {
                         show: false
                     }
                 },
+                ...(Object.keys(dp.values || {}).length > 0 ? {} : { min: 0, max: 100 }),
                 ...(dp.min && { min: dp.min }),
                 ...(dp.max && { max: dp.max })
             };
@@ -261,10 +280,10 @@ class YAxisService {
             return 'left';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: YAxisService, deps: [{ token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: YAxisService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: YAxisService, deps: [{ token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: YAxisService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: YAxisService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: YAxisService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.AppStateService }] });
 
@@ -361,10 +380,10 @@ class ChartTypesService {
         const baseOption = this.lineSeriesOption(color, isMinMaxChart, renderType);
         return { ...baseOption, step: 'end' };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartTypesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartTypesService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartTypesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartTypesService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartTypesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartTypesService, decorators: [{
             type: Injectable
         }] });
 
@@ -388,10 +407,15 @@ class EchartsOptionsService {
             forceMergeDatapoints: displayOptions.forceMergeDatapoints,
             showLabelAndUnit: displayOptions.showLabelAndUnit
         });
+        const AXIS_PADDING = 20;
         const leftAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'left') : [];
-        const gridLeft = leftAxis.length ? leftAxis.length * this.yAxisService.Y_AXIS_OFFSET : 32;
+        const gridLeft = leftAxis.length
+            ? leftAxis.length * (this.yAxisService.Y_AXIS_OFFSET - AXIS_PADDING)
+            : 32;
         const rightAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'right') : [];
-        const gridRight = rightAxis.length ? rightAxis.length * this.yAxisService.Y_AXIS_OFFSET : 16;
+        const gridRight = rightAxis.length
+            ? rightAxis.length * (this.yAxisService.Y_AXIS_OFFSET - AXIS_PADDING)
+            : 16;
         const selectedLanguage = this.translate.currentLang;
         let intervalInMs = this.calculateExtendedIntervalInMs(selectedTimeRange?.interval || timeRange.interval || 'hours', selectedTimeRange || timeRange);
         if (sliderZoomUsed) {
@@ -421,7 +445,7 @@ class EchartsOptionsService {
                 left: gridLeft,
                 top: 16,
                 right: gridRight,
-                bottom: 68
+                bottom: displayOptions.showSlider ? 68 : 8
             },
             dataZoom: [
                 {
@@ -495,8 +519,8 @@ class EchartsOptionsService {
                 show: false
             },
             xAxis: {
-                min: aggregatedDatapoint
-                    ? Object.keys(aggregatedDatapoint.values)
+                min: Object.keys(aggregatedDatapoint.values || {}).length > 0
+                    ? Object.keys(aggregatedDatapoint.values || {})
                         .map(date => new Date(date).valueOf())
                         .sort((a, b) => a - b)[0]
                     : new Date(timeRange.dateFrom).valueOf() - intervalInMs,
@@ -988,9 +1012,9 @@ class EchartsOptionsService {
      */
     processEvent(event, XAxisValue) {
         let value = `<ul class="list-unstyled small separator-top text-default">`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event type')))}</label><code class="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: 2;" title="${echarts.format.encodeHTML(event.type)}">${echarts.format.encodeHTML(event.type)}</code></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event text')))}</label><span class="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-no-wrap"><label class="small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event time')))}</label><span class="m-l-auto">${echarts.format.encodeHTML(this.datePipe.transform(XAxisValue))}<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 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(XAxisValue))}<span></li>`;
         value += `</ul>`;
         return value;
     }
@@ -1001,19 +1025,19 @@ class EchartsOptionsService {
      */
     async processAlarm(alarm) {
         let value = `<ul class="list-unstyled small separator-top text-default m-0">`;
-        value += `<li class="p-t-4 p-b-4 d-flex a-i-center separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm severity')))}</label>`;
+        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-no-wrap"><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>${echarts.format.encodeHTML(alarm.type)}</code></span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><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-no-wrap"><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>`;
+        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();
         if (exists) {
             const currentUrl = window.location.href;
             const baseUrlIndex = currentUrl.indexOf(INDEX_HTML);
             const baseUrl = currentUrl.substring(0, baseUrlIndex + INDEX_HTML.length);
-            value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Open details')))}</label><span class="small m-l-auto"><a href="${baseUrl}#/alarms/${alarm.id}/details?showCleared=true">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm details')))}</a></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('Open details')))}</label><span class="small m-l-auto"><a href="${baseUrl}#/alarms/${alarm.id}/details?showCleared=true">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm details')))}</a></span></li>`;
         }
-        value += `<li class="p-t-4 p-b-4 d-flex text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm count')))}</label><span class="small m-l-auto"><span class="badge badge-info">${alarm.count}</span></span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex text-truncate"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm count')))}</label><span class="small m-l-auto"><span class="badge badge-info">${alarm.count}</span></span></li>`;
         value += `</ul>`;
         return value;
     }
@@ -1364,7 +1388,7 @@ class EchartsOptionsService {
                     value =
                         `<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">${echarts.format.encodeHTML(this.datePipe.transform(minValue[0]))}</label>` +
-                            `<div class="m-l-auto text-12" >${echarts.format.encodeHTML(minValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--')} — ${echarts.format.encodeHTML(maxValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--')}</div>` +
+                            `<div class="m-l-auto text-12 text-truncate">${echarts.format.encodeHTML(minValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--')} — ${echarts.format.encodeHTML(maxValue[1].toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--')}</div>` +
                             (series['datapointUnit']
                                 ? ` ${echarts.format.encodeHTML(series['datapointUnit'])}`
                                 : '') +
@@ -1382,7 +1406,7 @@ class EchartsOptionsService {
                     value =
                         `<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">${echarts.format.encodeHTML(this.datePipe.transform(seriesValue[0]))}</label>` +
-                            `<div class="m-l-auto text-12" >${echarts.format.encodeHTML(seriesValue[1]?.toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--')}` +
+                            `<div class="m-l-auto text-12 text-truncate">${echarts.format.encodeHTML(seriesValue[1]?.toFixed(displayOptions.numberOfDecimalPlaces ?? 2) ?? '--')}` +
                             (series['datapointUnit']
                                 ? ` ${echarts.format.encodeHTML(series['datapointUnit'])}`
                                 : '') +
@@ -1410,10 +1434,10 @@ class EchartsOptionsService {
             return acc;
         }, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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 }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EchartsOptionsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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 }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EchartsOptionsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EchartsOptionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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 }] });
 
@@ -1665,20 +1689,29 @@ class ChartRealtimeService {
             datapointOutOfSyncCallback(datapoint);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartRealtimeService, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlarmRealtimeService }, { token: i1.EventRealtimeService }, { token: EchartsOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartRealtimeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartRealtimeService, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlarmRealtimeService }, { token: i1.EventRealtimeService }, { token: EchartsOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartRealtimeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartRealtimeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartRealtimeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.MeasurementRealtimeService }, { type: i1.AlarmRealtimeService }, { type: i1.EventRealtimeService }, { type: EchartsOptionsService }] });
 
 class ChartAlertsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ChartAlertsComponent, isStandalone: true, selector: "c8y-chart-alerts", inputs: { alerts: "alerts" }, ngImport: i0, template: "<div\n  class=\"overlay-center-vertically d-col p-16 p-r-24 p-l-24\"\n  *ngIf=\"alerts?.anyAlertExists$ | async\"\n>\n  <ng-container *ngFor=\"let alertGroup of alerts?.alertGroups\">\n    <div\n      class=\"alert\"\n      role=\"alert\"\n      *ngIf=\"alertGroup.value.alerts.length\"\n      [ngClass]=\"'alert-' + alertGroup.type\"\n    >\n      <button\n        class=\"close\"\n        type=\"button\"\n        (click)=\"alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)\"\n      >\n        <span aria-hidden=\"true\">\u00D7</span>\n        <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n      </button>\n      <p *ngFor=\"let alertItem of alertGroup.value.alerts\">\n        {{ alertItem.text | translate }}\n      </p>\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    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+    }
+    sanitizeAlertText(text) {
+        if (typeof text === 'string') {
+            return this.sanitizer.sanitize(SecurityContext.HTML, text);
+        }
+        return text;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChartAlertsComponent, isStandalone: true, selector: "c8y-chart-alerts", inputs: { alerts: "alerts" }, 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)=\"alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)\"\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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartAlertsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartAlertsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-chart-alerts', standalone: true, imports: [CommonModule], template: "<div\n  class=\"overlay-center-vertically d-col p-16 p-r-24 p-l-24\"\n  *ngIf=\"alerts?.anyAlertExists$ | async\"\n>\n  <ng-container *ngFor=\"let alertGroup of alerts?.alertGroups\">\n    <div\n      class=\"alert\"\n      role=\"alert\"\n      *ngIf=\"alertGroup.value.alerts.length\"\n      [ngClass]=\"'alert-' + alertGroup.type\"\n    >\n      <button\n        class=\"close\"\n        type=\"button\"\n        (click)=\"alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)\"\n      >\n        <span aria-hidden=\"true\">\u00D7</span>\n        <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n      </button>\n      <p *ngFor=\"let alertItem of alertGroup.value.alerts\">\n        {{ alertItem.text | translate }}\n      </p>\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    </div>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'c8y-chart-alerts', standalone: true, imports: [CommonModule], 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)=\"alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)\"\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" }]
         }], propDecorators: { alerts: [{
                 type: Input
             }] } });
@@ -1716,10 +1749,10 @@ class ChartEventsService {
         const result = await Promise.all(promises);
         return result.flat();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartEventsService, deps: [{ token: i1$2.EventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartEventsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartEventsService, deps: [{ token: i1$2.EventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartEventsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartEventsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartEventsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.EventService }] });
 
@@ -1770,10 +1803,10 @@ class ChartAlarmsService {
         const result = await Promise.all(promises);
         return result.flat();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartAlarmsService, deps: [{ token: i1$2.AlarmService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartAlarmsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartAlarmsService, deps: [{ token: i1$2.AlarmService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartAlarmsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartAlarmsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartAlarmsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.AlarmService }] });
 
@@ -1805,10 +1838,10 @@ class ChartHelpersService {
     getTargetId(obj) {
         return obj?.__target?.id ?? obj?.target;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartHelpersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartHelpersService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartHelpersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartHelpersService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartHelpersService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartHelpersService, decorators: [{
             type: Injectable
         }] });
 
@@ -1847,10 +1880,10 @@ class SelectAggregatedDatapointComponent {
         this.selectedDatapointLabel = found?.label || '';
         this.selectedDatapointColor = found?.color || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectAggregatedDatapointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectAggregatedDatapointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectAggregatedDatapointComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectAggregatedDatapointComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-select-aggregated-datapoint', host: {
                         class: 'd-contents'
@@ -1935,6 +1968,15 @@ class ChartsComponent {
             changes.config.previousValue?.dateFrom !== changes.config.currentValue.dateFrom &&
             changes.config.previousValue?.dateTo !== changes.config.currentValue.dateTo &&
             changes.config.previousValue?.aggregation === changes.config.currentValue?.aggregation) {
+            // This is needed for cases when 2 data point graph widgets exist on the same dashboard
+            // and one of them changes the time range which is loaded, the other one should update the zoom level accordingly
+            if (this.echartsInstance) {
+                this.echartsInstance.dispatchAction({
+                    type: 'dataZoom',
+                    startValue: new Date(currentTimeRange.dateFrom).getTime(),
+                    endValue: new Date(currentTimeRange.dateTo).getTime()
+                }, { silent: true });
+            }
             return;
         }
         this.configChangedSubject.next();
@@ -1942,6 +1984,7 @@ class ChartsComponent {
     ngOnInit() {
         if (this.alerts) {
             this.alerts.setAlertGroupDismissStrategy('warning', DismissAlertStrategy.TEMPORARY_OR_PERMANENT);
+            this.alerts.setAlertGroupDismissStrategy('danger', DismissAlertStrategy.NONE);
         }
     }
     ngOnDestroy() {
@@ -2057,7 +2100,13 @@ class ChartsComponent {
         return options?.series?.[0]?.markArea?.data?.length > 0;
     }
     saveAsImage() {
-        this.echartsInstance.setOption({ legend: { show: true } });
+        const dataZoom = this.echartsInstance.getOption().dataZoom;
+        const grid = this.echartsInstance.getOption().grid;
+        this.echartsInstance.setOption({
+            grid: { bottom: 8 },
+            dataZoom: [{}, { show: false }]
+        });
+        this.echartsInstance.resize();
         const url = this.echartsInstance.getDataURL({
             pixelRatio: 2,
             backgroundColor: '#fff',
@@ -2069,7 +2118,8 @@ class ChartsComponent {
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
-        this.echartsInstance.setOption({ legend: { show: false } });
+        this.echartsInstance.setOption({ dataZoom, grid });
+        this.echartsInstance.resize(); // force resize to original state
     }
     loadMoreData() {
         const currentRange = this.widgetTimeContextDateRangeService.initialTimeRange();
@@ -2291,7 +2341,7 @@ class ChartsComponent {
             }, this.events, this.alarms, {
                 displayMarkedLine: this.config.displayMarkedLine || false,
                 displayMarkedPoint: this.config.displayMarkedPoint || false,
-                mergeMatchingDatapoints: this.config.mergeMatchingDatapoints || false,
+                mergeMatchingDatapoints: this.config.mergeMatchingDatapoints ?? true,
                 forceMergeDatapoints: this.config.forceMergeDatapoints || false,
                 showLabelAndUnit: this.config.showLabelAndUnit || false,
                 showSlider: this.config.showSlider || false,
@@ -2329,7 +2379,7 @@ class ChartsComponent {
             }, this.events, this.alarms, {
                 displayMarkedLine: this.config.displayMarkedLine || false,
                 displayMarkedPoint: this.config.displayMarkedPoint || false,
-                mergeMatchingDatapoints: this.config.mergeMatchingDatapoints || false,
+                mergeMatchingDatapoints: this.config.mergeMatchingDatapoints ?? true,
                 forceMergeDatapoints: this.config.forceMergeDatapoints || false,
                 showLabelAndUnit: this.config.showLabelAndUnit || false,
                 showSlider: this.config.showSlider || false,
@@ -2340,6 +2390,15 @@ class ChartsComponent {
     }
     fetchSeriesForDatapoints$() {
         this.activeDatapoints = this.config?.datapoints?.filter(dp => dp.__active);
+        const retrievalError = this.config?.datapoints?.find(dp => dp.retrievalError);
+        if (retrievalError) {
+            this.alerts.clear();
+            this.alerts.addAlerts(new DynamicComponentAlert({
+                type: 'danger',
+                text: retrievalError.text
+            }));
+            return of([]);
+        }
         if (!this.activeDatapoints || this.activeDatapoints.length === 0) {
             this.updateActiveDatapoints.emit([]);
             return of([]);
@@ -2383,7 +2442,7 @@ class ChartsComponent {
             : this.config?.datapoints?.filter(dp => dp.__active)[0];
         const request = defer(() => this.measurementService.listSeries({
             ...(customTimeRange ? customTimeRange : timeRange),
-            source: aggregatedDatapoint?.target || aggregatedDatapoint.__target?.id || '',
+            source: aggregatedDatapoint.__target?.id || '',
             series: [`${aggregatedDatapoint.fragment}.${aggregatedDatapoint.series}`],
             ...(this.config.aggregation || customTimeRange
                 ? {
@@ -2466,8 +2525,8 @@ class ChartsComponent {
         }
         return { dateFrom: timeRange.dateFrom.toISOString(), dateTo: timeRange.dateTo.toISOString() };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ChartsComponent, isStandalone: true, selector: "c8y-charts", inputs: { config: "config", alerts: "alerts", chartViewContext: "chartViewContext" }, outputs: { configChangeOnZoomOut: "configChangeOnZoomOut", timeRangeChangeOnRealtime: "timeRangeChangeOnRealtime", datapointOutOfSync: "datapointOutOfSync", updateAlarmsAndEvents: "updateAlarmsAndEvents", isMarkedAreaEnabled: "isMarkedAreaEnabled", finishLoading: "finishLoading", updateActiveDatapoints: "updateActiveDatapoints", updateAggregatedSliderDatapoint: "updateAggregatedSliderDatapoint" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ChartsComponent, isStandalone: true, selector: "c8y-charts", inputs: { config: "config", alerts: "alerts", chartViewContext: "chartViewContext" }, outputs: { configChangeOnZoomOut: "configChangeOnZoomOut", timeRangeChangeOnRealtime: "timeRangeChangeOnRealtime", datapointOutOfSync: "datapointOutOfSync", updateAlarmsAndEvents: "updateAlarmsAndEvents", isMarkedAreaEnabled: "isMarkedAreaEnabled", finishLoading: "finishLoading", updateActiveDatapoints: "updateActiveDatapoints", updateAggregatedSliderDatapoint: "updateAggregatedSliderDatapoint" }, providers: [
             { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) },
             ChartRealtimeService,
             MeasurementRealtimeService,
@@ -2480,7 +2539,7 @@ class ChartsComponent {
             AlarmSeverityToLabelPipe
         ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-relative fit-h chart-container\">\n  <div\n    class=\"fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOption$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n\n  <div\n    class=\"chart-load-more\"\n    *ngIf=\"showLoadMore\"\n  >\n    <button\n      class=\"btn btn-primary btn-block\"\n      (click)=\"loadMoreData()\"\n    >\n      <i c8yIcon=\"restore\"></i>\n      {{ 'Load more' | translate }}\n    </button>\n  </div>\n\n  <div\n    class=\"e-charts--aggregated-datapoint\"\n    *ngIf=\"\n      activeDatapoints.length > 1 &&\n      config?.showSlider &&\n      chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW\n    \"\n  >\n    <c8y-select-aggregated-datapoint\n      [value]=\"config?.aggregatedDatapoint || activeDatapoints[0]\"\n      (valueChange)=\"updateAggregatedSliderDatapoint.emit($event)\"\n      [activeDatapoints]=\"activeDatapoints\"\n    ></c8y-select-aggregated-datapoint>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: NgxEchartsModule }, { kind: "directive", type: i3$1.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: ChartAlertsComponent, selector: "c8y-chart-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: SelectAggregatedDatapointComponent, selector: "c8y-select-aggregated-datapoint", inputs: ["activeDatapoints", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-charts', providers: [
                         { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) },