feat(datapoints-graph): [no-issue] Add possibility to match datapoints to alarms or events

src/app/datapoints-graph/alarm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.html

@@ -38,4 +38,35 @@
       />
     </c8y-form-group>
   </div>
+
+  <c8y-form-group>
+    <label>{{ 'Select datapoint' | translate }}</label>
+    <div class="c8y-select-wrapper">
+      <select
+        class="form-control input-sm"
+        [ngModel]="formGroup.value.selectedDatapoint"
+        (ngModelChange)="changeDatapointSelection($event)"
+      >
+        <option
+          *ngFor="let datapoint of datapoints; trackBy: trackByFn"
+          title="{{ 'Widget configuration' | translate }}"
+          [ngValue]="{
+            target: datapoint.__target.id,
+            fragment: datapoint.fragment,
+            series: datapoint.series,
+          }"
+          [selected]="
+            datapoint.__target.id ===
+              formGroup.value.selectedDatapoint?.target &&
+            datapoint.fragment ===
+              formGroup.value.selectedDatapoint?.fragment &&
+            datapoint.series === formGroup.value.selectedDatapoint?.series
+          "
+        >
+          {{ datapoint?.label }}
+        </option>
+      </select>
+      <span></span>
+    </div>
+  </c8y-form-group>
 </div>

src/app/datapoints-graph/alarm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.ts

@@ -11,7 +11,9 @@ import {
   Validators,
 } from '@angular/forms';
 import { take } from 'rxjs/operators';
-import { TimelineType } from '../alarm-event-selector.model';
+import { SelectedDatapoint, TimelineType } from '../alarm-event-selector.model';
+import { IIdentified } from '@c8y/client';
+import { KPIDetails } from '@c8y/ngx-components/datapoint-selector';
 
 @Component({
   selector: 'c8y-alarm-event-attributes-form',
@@ -33,6 +35,8 @@ export class AlarmEventAttributesFormComponent
   implements ControlValueAccessor, Validator, OnInit
 {
   @Input() timelineType: TimelineType;
+  @Input() target: IIdentified;
+  @Input() datapoints: KPIDetails[] = [];
   formGroup: FormGroup;
 
   constructor(private formBuilder: FormBuilder) {}
@@ -42,7 +46,9 @@ export class AlarmEventAttributesFormComponent
       label: ['', [Validators.required]],
       filters: this.formBuilder.group({ type: ['', [Validators.required]] }),
       timelineType: '',
+      selectedDatapoint: [{}, []],
     });
+    this.listKpis();
   }
 
   validate(_control: AbstractControl): ValidationErrors {
@@ -64,4 +70,20 @@ export class AlarmEventAttributesFormComponent
   setDisabledState(isDisabled: boolean): void {
     isDisabled ? this.formGroup.disable() : this.formGroup.enable();
   }
+
+  changeDatapointSelection(selectedDatapoint: SelectedDatapoint) {
+    this.formGroup.patchValue({ selectedDatapoint });
+  }
+
+  trackByFn(_index: number, item: KPIDetails) {
+    return `${item.fragment}-${item.series}-${item.__target?.id}`;
+  }
+
+  private listKpis() {
+    if (this.target && this.target.id) {
+      this.datapoints = this.datapoints.filter(
+        (dp) => dp.__target?.id === this.target.id
+      );
+    }
+  }
 }

src/app/datapoints-graph/alarm-event-selector/alarm-event-selection-list/alarm-event-selection-list.component.html

@@ -28,6 +28,7 @@
       cdkDrag
       formControlName="details"
       [showAddRemoveButton]="false"
+      [datapoints]="config?.datapoints"
       [optionToRemove]="true"
       [showActiveToggle]="true"
       [timelineType]="timelineType"

src/app/datapoints-graph/alarm-event-selector/alarm-event-selector-list-item/alarm-event-selector-list-item.component.html

@@ -112,6 +112,8 @@
       <c8y-alarm-event-attributes-form
         formControlName="details"
         [timelineType]="timelineType"
+        [datapoints]="datapoints"
+        [target]="formGroup.value.__target"
       ></c8y-alarm-event-attributes-form>
     </div>
   </c8y-li-collapse>

src/app/datapoints-graph/alarm-event-selector/alarm-event-selector-list-item/alarm-event-selector-list-item.component.ts

@@ -20,6 +20,7 @@ import { AlarmOrEvent, TimelineType } from '../alarm-event-selector.model';
 import { map, take, takeUntil } from 'rxjs/operators';
 import { Observable, Subject } from 'rxjs';
 import { gettext } from '@c8y/ngx-components';
+import { KPIDetails } from '@c8y/ngx-components/datapoint-selector';
 
 @Component({
   selector: 'c8y-alarm-event-selector-list-item',
@@ -40,6 +41,7 @@ import { gettext } from '@c8y/ngx-components';
 export class AlarmEventSelectorListItemComponent
   implements ControlValueAccessor, Validator, OnDestroy
 {
+  @Input() datapoints: KPIDetails | undefined;
   @Input() timelineType: TimelineType | undefined;
   @Input() highlightText: string | undefined;
   @Input() showAddRemoveButton = true;

src/app/datapoints-graph/alarm-event-selector/alarm-event-selector.model.ts

@@ -2,6 +2,7 @@
 import { AlarmEventSelectorModalComponent } from './alarm-event-selector-modal/alarm-event-selector-modal.component';
 import { SeverityType } from '@c8y/client/lib/src/core/Severity';
 import { gettext } from '@c8y/ngx-components';
+import { KPIDetails } from '@c8y/ngx-components/datapoint-selector';
 
 export type TimelineType = 'ALARM' | 'EVENT';
 
@@ -32,6 +33,7 @@
   filters: {
     type: string;
   };
+  selectedDatapoint?: SelectedDatapoint;
   __hidden?: boolean;
   __severity?: SeverityType[];
   __status?: AlarmStatusType[];
@@ -42,9 +44,16 @@
   filters: {
     type: string;
   };
+  selectedDatapoint?: SelectedDatapoint;
   __hidden?: boolean;
 };
 
+export type SelectedDatapoint = {
+  target?: string;
+  series?: string;
+  fragment?: string;
+};
+
 export type AlarmOrEvent = AlarmDetails | EventDetails;
 
 export type TimelineTypeTexts = {

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

@@ -26,11 +26,7 @@ import {
 import type { ECharts, SeriesOption } from 'echarts';
 import { EchartsOptionsService } from './echarts-options.service';
 import { AlarmOrEvent } from '../alarm-event-selector';
-import {
-  customSeriesMarkLineData,
-  customSeriesMarkPointData,
-  CustomSeriesOptions,
-} from './chart.model';
+import { CustomSeriesOptions } from './chart.model';
 
 type Milliseconds = number;
 
@@ -224,7 +220,7 @@ export class ChartRealtimeService {
       seriesDataToUpdate.get(datapoint)?.push(measurement);
     });
 
-    const allDataSeries = this.echartsInstance?.getOption()[
+    let allDataSeries = this.echartsInstance?.getOption()[
       'series'
     ] as CustomSeriesOptions[];
 
@@ -301,29 +297,24 @@ export class ChartRealtimeService {
                 );
               }
             );
-            // update the last value of the markline to the new value
-            const markLine = alarmSeries.find((series) => series['markLine']);
-            const alarmSeriesMarkLine = markLine![
-              'markLine'
-            ] as customSeriesMarkLineData;
-            alarmSeriesMarkLine.data[1].xAxis = (alarmOrEvent as IAlarm)[
-              'lastUpdated'
-            ];
-            // update the last value of the markpoint to the new value
-            const markPoint = alarmSeries.find((series) => series['markPoint']);
-            const alarmSeriesMarkPoint = markPoint![
-              'markPoint'
-            ] as customSeriesMarkPointData;
+            // remove all matching alarm series which are in the array
+            alarmSeries.forEach((series) => {
+              allDataSeries = allDataSeries.filter(
+                (s) => s['id'] !== series['id']
+              );
+            });
 
-            // the if block is needed in case an alarm has occured, of that type, but for a different target device.
-            if (alarmSeriesMarkPoint.data?.length > 2) {
-              alarmSeriesMarkPoint.data[2].coord[0] = (alarmOrEvent as IAlarm)[
-                'lastUpdated'
-              ];
-              alarmSeriesMarkPoint.data[3].coord[0] = (alarmOrEvent as IAlarm)[
-                'lastUpdated'
-              ];
-            }
+            const newAlarmSeries =
+              this.echartsOptionsService.getAlarmOrEventSeries(
+                dp,
+                renderType,
+                false,
+                [alarmOrEvent],
+                'alarm',
+                displayOptions,
+                (alarmOrEvent as IAlarm).creationTime
+              );
+            allDataSeries.push(...newAlarmSeries);
           } else {
             const newAlarmSeries =
               this.echartsOptionsService.getAlarmOrEventSeries(

src/app/datapoints-graph/charts/chart.model.ts

@@ -8,6 +8,8 @@ import { TopLevelFormatterParams } from 'echarts/types/src/component/tooltip/Too
 interface ModifiedCustomSeriesOptions extends echarts.EChartsOption {
   // typeOfSeries is used for formatter to distinguish between events/alarms series
   typeOfSeries?: 'alarm' | 'event' | null;
+  // isDpTemplateSelected is used to distinguish if the series have a specific dp template selected. E.g. for case when a device has 2 measurements
+  isDpTemplateSelected?: boolean;
   id: string;
   data: SeriesValue[];
   itemStyle: { color: string };

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

@@ -558,6 +558,7 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy {
       {
         displayMarkedLine: this.config.displayMarkedLine || false,
         displayMarkedPoint: this.config.displayMarkedPoint || false,
+        mergeMatchingDatapoints: this.config.mergeMatchingDatapoints || false,
       }
     );
   }