Merge branch 'main' into feature/dpg-fixes-and-improvements

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.4.1](https://github.com/SoftwareAG/cumulocity-community-plugins/compare/v3.4.0...v3.4.1) (2024-10-23)
+
+
+### Bug Fixes
+
+* **datapoints-graph:** [MTM-59265] Context should now be automatically transformed for dp2 widget ([#36](https://github.com/SoftwareAG/cumulocity-community-plugins/issues/36)) ([d822f53](https://github.com/SoftwareAG/cumulocity-community-plugins/commit/d822f5359b3830ae5929283844e203e37e862519))
+
 # [3.4.0](https://github.com/SoftwareAG/cumulocity-community-plugins/compare/v3.3.0...v3.4.0) (2024-10-21)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cumulocity-community-plugins",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "This is a set of plugins developed and maintained by the community.",
   "scripts": {
     "ng": "ng",

src/app/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();

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(

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();
@@ -229,6 +238,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]],

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"
     }
 }