@c8y/ngx-components 1021.62.9 → 1021.63.2

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

@@ -8,11 +8,12 @@ import { fromFetch } from 'rxjs/fetch';
 import * as i2 from '@c8y/ngx-components/api';
 import { cloneDeep } from 'lodash-es';
 import * as i1$1 from '@c8y/ngx-components';
-import { CommonModule, WidgetTimeContextDateRangeService, DismissAlertStrategy, gettext, DynamicComponentAlert, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService, CoreModule } from '@c8y/ngx-components';
-import * as i5 from '@angular/router';
+import { gettext, CommonModule, WidgetTimeContextDateRangeService, DismissAlertStrategy, DynamicComponentAlert, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService, CoreModule } from '@c8y/ngx-components';
+import * as i6 from '@angular/router';
 import * as i4 from '@c8y/ngx-components/alarms';
 import { AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe, AlarmsModule } from '@c8y/ngx-components/alarms';
 import { INTERVALS } from '@c8y/ngx-components/interval-picker';
+import * as i5 from '@ngx-translate/core';
 import * as i2$1 from '@angular/common';
 import { CommonModule as CommonModule$1 } from '@angular/common';
 import * as i3 from 'ngx-echarts';
@@ -333,12 +334,13 @@ const ICONS_MAP = {
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const INDEX_HTML = '/index.html';
 class EchartsOptionsService {
-    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, router) {
+    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router) {
         this.datePipe = datePipe;
         this.yAxisService = yAxisService;
         this.chartTypesService = chartTypesService;
         this.severityIconPipe = severityIconPipe;
         this.severityLabelPipe = severityLabelPipe;
+        this.translate = translate;
         this.router = router;
         this.TOOLTIP_WIDTH = 300;
     }
@@ -565,7 +567,7 @@ class EchartsOptionsService {
                 yAxisIndex: idx,
                 ...this.chartTypesService.getSeriesOptions(dp, isMinMaxChart, renderType)
             };
-            const markLineData = this.createMarkLine(itemsOfType);
+            const markLineData = this.createMarkLine(itemsOfType, itemType);
             // Construct series with markLine
             const seriesWithMarkLine = {
                 id: `${type}/${dp.__target?.id}+${id ? id : ''}-markLine`,
@@ -618,7 +620,7 @@ class EchartsOptionsService {
         const alarm = allAlarms.find(a => a.type === params.data.itemType);
         let value = '';
         if (event) {
-            value = this.processEvent(event);
+            value = this.processEvent(event, XAxisValue);
         }
         if (alarm) {
             this.processAlarm(alarm).then(alarmVal => {
@@ -699,6 +701,9 @@ class EchartsOptionsService {
      */
     processSeries(allDataPointSeries, XAxisValue, YAxisReadings) {
         allDataPointSeries.forEach((series) => {
+            if (series.datapointId === 'aggregated') {
+                return;
+            }
             let value = '';
             if (series.id.endsWith('/min')) {
                 value = this.processMinSeries(series, allDataPointSeries, XAxisValue);
@@ -755,11 +760,11 @@ class EchartsOptionsService {
      * @param event - The event object.
      * @returns The processed value.
      */
-    processEvent(event) {
+    processEvent(event, XAxisValue) {
         let value = `<ul class="list-unstyled small separator-top">`;
         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">Event type</label><code class="m-l-auto">${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">Event text</label><span class="m-l-auto">${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">Last update</label><span class="m-l-auto">${this.datePipe.transform(event['lastUpdated'])}<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">Event time</label><span class="m-l-auto">${this.datePipe.transform(XAxisValue)}<span></li>`;
         value += `</ul>`;
         return value;
     }
@@ -780,7 +785,7 @@ class EchartsOptionsService {
             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">Link</label><span class="small m-l-auto"><a href="${baseUrl}#/alarms/${alarm.id}">Alarm Details</a></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">Link</label><span class="small m-l-auto"><a href="${baseUrl}#/alarms/${alarm.id}/details?showCleared=true">${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">Alarm count</label><span class="small m-l-auto"><span class="badge badge-info">${alarm.count}</span></span></li>`;
         value += `</ul>`;
@@ -1036,11 +1041,21 @@ class EchartsOptionsService {
      * @param items Array of alarms or events
      * @returns MarkLineDataItemOptionBase[]
      */
-    createMarkLine(items) {
+    createMarkLine(items, itemType) {
         return items.reduce((acc, item) => {
             if (!item.creationTime) {
                 return acc;
             }
+            if (itemType === 'event') {
+                return acc.concat([
+                    {
+                        xAxis: item.time,
+                        itemType: item.type,
+                        label: { show: false, formatter: () => item.type },
+                        itemStyle: { color: item['color'] }
+                    }
+                ]);
+            }
             if (item.creationTime === item['lastUpdated']) {
                 return acc.concat([
                     {
@@ -1165,12 +1180,12 @@ class EchartsOptionsService {
             return acc;
         }, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1$1.DatePipe }, { token: YAxisService }, { token: ChartTypesService }, { token: i4.AlarmSeverityToIconPipe }, { token: i4.AlarmSeverityToLabelPipe }, { token: i5.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1$1.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: "18.2.13", ngImport: i0, type: EchartsOptionsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EchartsOptionsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: YAxisService }, { type: ChartTypesService }, { type: i4.AlarmSeverityToIconPipe }, { type: i4.AlarmSeverityToLabelPipe }, { type: i5.Router }] });
+        }], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: YAxisService }, { type: ChartTypesService }, { type: i4.AlarmSeverityToIconPipe }, { type: i4.AlarmSeverityToLabelPipe }, { type: i5.TranslateService }, { type: i6.Router }] });
 
 class ChartRealtimeService {
     constructor(measurementRealtime, alarmRealtimeService, eventRealtimeService, echartsOptionsService) {