fix(datapoints-graph): [MTM-59265] Context should now be automaticall…

…y transformed for dp2 widget (#36) Signed-off-by: Enio Sultan <[email protected]> Co-authored-by: Enio Sultan <[email protected]> Co-authored-by: Dawid Janusz <[email protected]>
Cumulocity-IoT · Oct 23, 2024 · d822f53 · d822f53
1 parent fca35be
commit d822f53
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 18 deletions.
diff --git a/...datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.spec.ts b/...datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.spec.ts
@@ -12,7 +12,11 @@ import {
   FormsModule,
 } from '@c8y/ngx-components';
 import { TimeControlsModule } from '../time-controls';
-import { ChartsComponent } from '../charts';
+import {
+  ChartAlarmsService,
+  ChartEventsService,
+  ChartsComponent,
+} from '../charts';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { NgForm, ReactiveFormsModule } from '@angular/forms';
 import {
@@ -25,7 +29,7 @@ import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector'
 import { aggregationType } from '@c8y/client';
 import { AnimationBuilder } from '@angular/animations';
 import { take } from 'rxjs/operators';
-import { ActivatedRoute } from '@angular/router';
+import { WidgetConfigComponent } from '@c8y/ngx-components/context-dashboard';
 import {
   AlarmEventSelectionListComponent,
   AlarmDetails,
@@ -47,7 +51,7 @@ describe('DatapointsGraphWidgetConfigComponent', () => {
     __active: true,
   };
   const config: DatapointsGraphWidgetConfig = {
-    datapoints: [],
+    datapoints: [dp],
     dateFrom,
     dateTo,
   };
@@ -88,15 +92,11 @@ describe('DatapointsGraphWidgetConfigComponent', () => {
         NgForm,
         { provide: AnimationBuilder, useValue: { build: () => null } },
         {
-          provide: ActivatedRoute,
-          useValue: {
-            root: {
-              firstChild: {
-                snapshot: { data: { contextData: mockContextData } },
-              },
-            },
-          },
+          provide: WidgetConfigComponent,
+          useValue: { context: mockContextData },
         },
+        { provide: ChartEventsService, useValue: {} },
+        { provide: ChartAlarmsService, useValue: {} },
       ],
     });
     await TestBed.compileComponents();

diff --git a/src/app/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.ts b/src/app/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.ts
@@ -3,6 +3,7 @@ import {
   Input,
   OnDestroy,
   OnInit,
+  Optional,
   ViewEncapsulation,
 } from '@angular/core';
 import {
@@ -30,10 +31,11 @@ import { Subject } from 'rxjs';
 import {
   DatapointAttributesFormConfig,
   DatapointSelectorModalOptions,
+  KPIDetails,
 } from '@c8y/ngx-components/datapoint-selector';
-import { ActivatedRoute } from '@angular/router';
 import { omit } from 'lodash-es';
 import { aggregationType } from '@c8y/client';
+import { WidgetConfigComponent } from '@c8y/ngx-components/context-dashboard';
 import {
   AlarmDetails,
   EventDetails,
@@ -84,16 +86,15 @@ export class DatapointsGraphWidgetConfigComponent
     private formBuilder: FormBuilder,
     private form: NgForm,
     private translate: TranslateService,
-    private route: ActivatedRoute
+    @Optional() private widgetConfig: WidgetConfigComponent
   ) {
     this.formGroup = this.initForm();
   }
 
   ngOnInit() {
-    const context = this.route.root.firstChild?.snapshot.data?.['contextData'];
-    if (context?.id) {
-      this.datapointSelectionConfig.contextAsset = context;
-    }
+    this.config?.datapoints?.forEach((dp) =>
+      this.assignContextFromContextDashboard(dp)
+    );
     this.form.form.addControl('config', this.formGroup);
     this.formGroup.patchValue(this.config || {});
     this.formGroup.controls.alarms.setValue(
@@ -176,6 +177,15 @@ export class DatapointsGraphWidgetConfigComponent
     }
   }
 
+  private assignContextFromContextDashboard(datapoint: KPIDetails) {
+    const context = this.widgetConfig?.context;
+    if (context?.id) {
+      const { name, id } = context;
+      datapoint.__target = { name, id };
+      this.datapointSelectionConfig.contextAsset = { id };
+    }
+  }
+
   private checkForMatchingDatapoints(): void {
     const allMatch = this.config?.alarmsEventsConfigs?.every((ae) =>
       this.formGroup.value.datapoints?.some(

diff --git a/src/app/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.ts b/src/app/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.ts
@@ -3,6 +3,7 @@ import {
   Input,
   OnChanges,
   OnDestroy,
+  Optional,
   SimpleChanges,
   ViewChild,
   ViewEncapsulation,
@@ -33,6 +34,7 @@ import {
 import type { KPIDetails } from '@c8y/ngx-components/datapoint-selector';
 import { ChartsComponent } from '../charts';
 import { TranslateService } from '@ngx-translate/core';
+import { ContextDashboardComponent } from '@c8y/ngx-components/context-dashboard';
 
 @Component({
   selector: 'c8y-datapoints-graph-widget-view',
@@ -93,7 +95,8 @@ export class DatapointsGraphWidgetViewComponent
 
   constructor(
     private formBuilder: FormBuilder,
-    private translate: TranslateService
+    private translate: TranslateService,
+    @Optional() private dashboardContextComponent: ContextDashboardComponent
   ) {
     this.timeControlsFormGroup = this.initForm();
     this.timeControlsFormGroup.valueChanges
@@ -103,6 +106,12 @@ export class DatapointsGraphWidgetViewComponent
       });
   }
 
+  ngOnInit() {
+    this.displayConfig?.datapoints?.forEach((dp) =>
+      this.assignContextFromContextDashboard(dp)
+    );
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
@@ -226,6 +235,17 @@ export class DatapointsGraphWidgetViewComponent
     this.displayConfig = { ...this.displayConfig };
   }
 
+  private assignContextFromContextDashboard(datapoint: KPIDetails) {
+    if (!this.dashboardContextComponent?.isDeviceTypeDashboard) {
+      return;
+    }
+    const context = this.dashboardContextComponent?.context;
+    if (context?.id) {
+      const { name, id } = context;
+      datapoint.__target = { name, id };
+    }
+  }
+
   private initForm() {
     const form = this.formBuilder.group({
       dateFrom: [undefined as unknown as Date, [Validators.required]],

diff --git a/versioningMatrix.json b/versioningMatrix.json
@@ -34,5 +34,9 @@
     "3.4.0": {
       "sdk": ">=1020.26.2",
       "api": ">=1020.26.2"
+    },
+    "3.4.1": {
+      "sdk": ">=1020.26.2",
+      "api": ">=1020.26.2"
     }
 }