MTM-58884 Legend re-work initial commit.

src/datapoints-graph/charts/chart-realtime.service.ts

@@ -13,9 +13,7 @@ import {
 } from '../model';
 import { MeasurementRealtimeService } from '@c8y/ngx-components';
 import type { ECharts, SeriesOption } from 'echarts';
-import { ChartEventsService } from './chart-events.service';
 import { EchartsOptionsService } from './echarts-options.service';
-import { ChartAlarmsService } from './chart-alarms.service';
 
 type Milliseconds = number;
 
@@ -30,9 +28,7 @@ export class ChartRealtimeService {
 
   constructor(
     private measurementRealtime: MeasurementRealtimeService,
-    private eventsService: ChartEventsService,
-    private echartsOptionsService: EchartsOptionsService,
-    private alarmsService: ChartAlarmsService
+    private echartsOptionsService: EchartsOptionsService
   ) {}
 
   startRealtime(
@@ -83,23 +79,13 @@ export class ChartRealtimeService {
       )
     ).pipe(throttleTime(this.MIN_REALTIME_TIMEOUT));
 
-    const events$ = interval(this.INTERVAL).pipe(
-      switchMap(() => this.loadEvents().pipe(throttleTime(updateThrottleTime)))
-    );
-
-    const alarms$ = interval(this.INTERVAL).pipe(
-      switchMap(() => this.loadAlarms().pipe(throttleTime(updateThrottleTime)))
-    );
-
     this.realtimeSubscription = combineLatest([
       measurement$.pipe(buffer(bufferReset$)),
-      events$,
-      alarms$,
-    ]).subscribe(([measurements, events, alarms]) => {
+    ]).subscribe(([measurements]) => {
       this.updateChartInstance(
         measurements,
-        events,
-        alarms,
+        [],
+        [],
         datapointOutOfSyncCallback
       );
     });
@@ -109,54 +95,6 @@ export class ChartRealtimeService {
     this.realtimeSubscription?.unsubscribe();
   }
 
-  private loadEvents(): Observable<any> {
-    const timeRange = {
-      dateFrom: this.currentTimeRange.dateFrom.toISOString(),
-      dateTo: this.currentTimeRange.dateTo.toISOString(),
-    };
-    return this.eventsService.listEvents$(timeRange, [
-      {
-        __target: { id: '7713695199' },
-        filters: { type: 'TestEvent' },
-        color: '#08293F',
-      },
-      {
-        __target: { id: '7713695199' },
-        filters: { type: 'AnotherEventType' },
-        color: '#349EDF',
-      },
-      {
-        __target: { id: '352734984' },
-        filters: { type: 'AnotherEventType' },
-        color: '#349EDF',
-      },
-    ]);
-  }
-
-  private loadAlarms(): Observable<any> {
-    const timeRange = {
-      dateFrom: this.currentTimeRange.dateFrom.toISOString(),
-      dateTo: this.currentTimeRange.dateTo.toISOString(),
-    };
-    return this.alarmsService.listAlarms$(timeRange, [
-      {
-        __target: { id: '7713695199' },
-        filters: { type: 'TestAlarm' },
-        color: '#08293F',
-      },
-      {
-        __target: { id: '7713695199' },
-        filters: { type: 'AnotherAlarmType' },
-        color: '#349EDF',
-      },
-      {
-        __target: { id: '352734984' },
-        filters: { type: 'AnotherAlarmType' },
-        color: '#349EDF',
-      },
-    ]);
-  }
-
   private removeValuesBeforeTimeRange(series: SeriesOption): SeriesValue[] {
     const firstValidValueByDateIndex = (series.data as SeriesValue[]).findIndex(
       ([dateString, _]) => {

src/datapoints-graph/charts/charts.component.ts

@@ -40,9 +40,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { YAxisService } from './y-axis.service';
 import { ChartAlertsComponent } from './chart-alerts/chart-alerts.component';
-import { ChartEventsService } from './chart-events.service';
 import { AlarmStatus, IAlarm, IEvent } from '@c8y/client';
-import { ChartAlarmsService } from './chart-alarms.service';
 
 type ZoomState = Record<'startValue' | 'endValue', number | string | Date>;
 
@@ -59,8 +57,6 @@ type ZoomState = Record<'startValue' | 'endValue', number | string | Date>;
     ChartTypesService,
     EchartsOptionsService,
     CustomMeasurementService,
-    ChartEventsService,
-    ChartAlarmsService,
     YAxisService,
   ],
   standalone: true,
@@ -76,12 +72,12 @@ type ZoomState = Record<'startValue' | 'endValue', number | string | Date>;
 export class ChartsComponent implements OnChanges, OnInit, OnDestroy {
   chartOption$: Observable<EChartsOption>;
   echartsInstance: ECharts;
-  events: IEvent[] = [];
-  alarms: IAlarm[] = [];
   zoomHistory: ZoomState[] = [];
   zoomInActive = false;
   @Input() config: DatapointsGraphWidgetConfig;
   @Input() alerts: DynamicComponentAlertAggregator;
+  @Input() events: IEvent[] = [];
+  @Input() alarms: IAlarm[] = [];
   @Output() configChangeOnZoomOut =
     new EventEmitter<DatapointsGraphWidgetTimeProps>();
   @Output() timeRangeChangeOnRealtime = new EventEmitter<
@@ -98,8 +94,6 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy {
 
   constructor(
     private measurementService: CustomMeasurementService,
-    private eventsService: ChartEventsService,
-    private alarmsService: ChartAlarmsService,
     private translateService: TranslateService,
     private echartsOptionsService: EchartsOptionsService,
     private chartRealtimeService: ChartRealtimeService
@@ -114,13 +108,7 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy {
         if (this.echartsInstance) {
           this.echartsInstance.on('click', this.onChartClick.bind(this));
         }
-        return forkJoin([this.loadEvents(), this.loadAlarms()]).pipe(
-          map(([events, alarms]) => {
-            this.events = events;
-            this.alarms = alarms;
-            return this.getChartOptions(datapointsWithValues);
-          })
-        );
+        return of(this.getChartOptions(datapointsWithValues));
       }),
       tap(() => {
         if (this.zoomInActive) {
@@ -290,46 +278,6 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy {
     });
   }
 
-  private loadEvents(): Observable<any> {
-    return this.eventsService.listEvents$(this.getTimeRange(), [
-      {
-        __target: { id: '7713695199' },
-        filters: { type: 'TestEvent' },
-        color: '#08293F',
-      },
-      {
-        __target: { id: '7713695199' },
-        filters: { type: 'AnotherEventType' },
-        color: '#349EDF',
-      },
-      {
-        __target: { id: '352734984' },
-        filters: { type: 'AnotherEventType' },
-        color: '#349EDF',
-      },
-    ]);
-  }
-
-  private loadAlarms(): Observable<any> {
-    return this.alarmsService.listAlarms$(this.getTimeRange(), [
-      {
-        __target: { id: '7713695199' },
-        filters: { type: 'TestAlarm' },
-        color: '#08293F',
-      },
-      {
-        __target: { id: '7713695199' },
-        filters: { type: 'AnotherAlarmType' },
-        color: '#349EDF',
-      },
-      {
-        __target: { id: '352734984' },
-        filters: { type: 'AnotherAlarmType' },
-        color: '#349EDF',
-      },
-    ]);
-  }
-
   async zoomOut() {
     if (this.zoomInActive) {
       this.toggleZoomIn();

src/datapoints-graph/charts/index.ts

@@ -1 +1,3 @@
 export * from './charts.component';
+export * from '../datapoints-graph-view/chart-events.service';
+export * from '../datapoints-graph-view/chart-alarms.service';

src/datapoints-graph/charts/chart-alarms.service.ts → src/datapoints-graph/datapoints-graph-view/chart-alarms.service.ts

@@ -20,30 +20,28 @@ export class ChartAlarmsService extends AlarmService {
     this.apiService = apiService;
   }
 
-  listAlarms$(params?, alarms?: Alarm[]): Observable<IAlarm[]> {
-    return from(
-      new Promise<IAlarm[]>(async (resolve) => {
-        const url = `/${this.baseUrl}/alarms`;
-        const allAlarms: IAlarm[] = [];
-        for (const alarm of alarms) {
-          const fetchOptions: IFetchOptions = {
-            params: {
-              source: alarm.__target.id,
-              type: alarm.filters.type,
-              withTotalPages: true,
-              pageSize: 1000,
-              ...params,
-            },
-          };
-          const result = await this.getAlarms(url, fetchOptions);
-          result.data.forEach((iAlarm) => {
-            iAlarm.color = alarm.color;
-          });
-          allAlarms.push(...result.data);
-        }
-        resolve(allAlarms);
-      })
-    );
+  listAlarms$(params?, alarms?: Alarm[]): Promise<IAlarm[]> {
+    return new Promise<IAlarm[]>(async (resolve) => {
+      const url = `/${this.baseUrl}/alarms`;
+      const allAlarms: IAlarm[] = [];
+      for (const alarm of alarms) {
+        const fetchOptions: IFetchOptions = {
+          params: {
+            source: alarm.__target.id,
+            type: alarm.filters.type,
+            withTotalPages: true,
+            pageSize: 1000,
+            ...params,
+          },
+        };
+        const result = await this.getAlarms(url, fetchOptions);
+        result.data.forEach((iAlarm) => {
+          iAlarm.color = alarm.color;
+        });
+        allAlarms.push(...result.data);
+      }
+      resolve(allAlarms);
+    });
   }
 
   private async getAlarms(

src/datapoints-graph/charts/chart-events.service.ts → src/datapoints-graph/datapoints-graph-view/chart-events.service.ts

@@ -20,30 +20,28 @@ export class ChartEventsService extends EventService {
     this.apiService = apiService;
   }
 
-  listEvents$(params?, events?: Event[]): Observable<IEvent[]> {
-    return from(
-      new Promise<IEvent[]>(async (resolve) => {
-        const url = `/${this.baseUrl}/events`;
-        const allEvents: IEvent[] = [];
-        for (const event of events) {
-          const fetchOptions: IFetchOptions = {
-            params: {
-              source: event.__target.id,
-              type: event.filters.type,
-              withTotalPages: true,
-              pageSize: 1000,
-              ...params,
-            },
-          };
-          const result = await this.getEvents(url, fetchOptions);
-          result.data.forEach((iEvent) => {
-            iEvent.color = event.color;
-          });
-          allEvents.push(...result.data);
-        }
-        resolve(allEvents);
-      })
-    );
+  listEvents$(params?, events?: Event[]): Promise<IEvent[]> {
+    return new Promise<IEvent[]>(async (resolve) => {
+      const url = `/${this.baseUrl}/events`;
+      const allEvents: IEvent[] = [];
+      for (const event of events) {
+        const fetchOptions: IFetchOptions = {
+          params: {
+            source: event.__target.id,
+            type: event.filters.type,
+            withTotalPages: true,
+            pageSize: 1000,
+            ...params,
+          },
+        };
+        const result = await this.getEvents(url, fetchOptions);
+        result.data.forEach((iEvent) => {
+          iEvent.color = event.color;
+        });
+        allEvents.push(...result.data);
+      }
+      resolve(allEvents);
+    });
   }
 
   private async getEvents(

src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.html

@@ -147,6 +147,8 @@
   #chart
   [config]="displayConfig"
   [alerts]="alerts"
+  [alarms]="alarms"
+  [events]="events"
   (configChangeOnZoomOut)="timePropsChanged($event)"
   (datapointOutOfSync)="handleDatapointOutOfSync($event)"
   (timeRangeChangeOnRealtime)="updateTimeRangeOnRealtime($event)"