From 1f8424455f24f8bdc2394563e771a1df80e30330 Mon Sep 17 00:00:00 2001
From: Tristan Bastian <tristan.bastian@softwareag.com>
Date: Wed, 21 Aug 2024 21:32:16 +0200
Subject: [PATCH] fix: pie charts in firnware statistics

---
 angular.json                                  |  8 +++----
 .../device-creation-history.component.ts      |  7 +++---
 .../tenant-creation-history.component.ts      |  8 +++----
 .../shared/bar-chart/bar-chart.component.ts   |  8 +++----
 .../firmware-statistics.component.html        |  2 +-
 .../firmware-statistics.component.ts          | 21 ++++++++++------
 .../pie-chart/pie-chart.component.html        |  1 +
 .../pie-chart/pie-chart.component.ts          | 24 +++++++++++--------
 8 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/angular.json b/angular.json
index 4cf0cd3..e297c4b 100644
--- a/angular.json
+++ b/angular.json
@@ -77,10 +77,10 @@
           "builder": "@c8y/devkit:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "cumulocity-subtenant-management:build:production"
+              "buildTarget": "sag-pkg-subtenant-management:build:production"
             },
             "development": {
-              "buildTarget": "cumulocity-subtenant-management:build:development"
+              "buildTarget": "sag-pkg-subtenant-management:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -111,10 +111,10 @@
           "builder": "@c8y/devkit:deploy",
           "configurations": {
             "production": {
-              "buildTarget": "cumulocity-subtenant-management:build:production"
+              "buildTarget": "sag-pkg-subtenant-management:build:production"
             },
             "development": {
-              "buildTarget": "cumulocity-subtenant-management:build:development"
+              "buildTarget": "sag-pkg-subtenant-management:build:development"
             }
           },
           "defaultConfiguration": "production"
diff --git a/src/modules/home/device-creation-history/device-creation-history.component.ts b/src/modules/home/device-creation-history/device-creation-history.component.ts
index fecd36d..37fb26f 100644
--- a/src/modules/home/device-creation-history/device-creation-history.component.ts
+++ b/src/modules/home/device-creation-history/device-creation-history.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ChartDataset, ChartOptions, Point, ChartType } from 'chart.js';
+import { ChartDataset, ChartOptions, Point, ChartType, Plugin } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
-import * as pluginChartZoom from 'chartjs-plugin-zoom';
+import { default as pluginChartZoom } from 'chartjs-plugin-zoom';
 import { DeviceDetailsService } from '@services/device-details.service';
 import { FakeMicroserviceService } from '@services/fake-microservice.service';
 
@@ -16,7 +16,6 @@ export class DeviceCreationHistoryComponent implements OnInit {
     responsive: true,
     maintainAspectRatio: false,
     scales: {
-
       x:
         {
           type: 'time',
@@ -47,7 +46,7 @@ export class DeviceCreationHistoryComponent implements OnInit {
   };
   public readonly lineChartType = 'line' satisfies ChartType;
   public lineChartLegend = true;
-  public lineChartPlugins = [
+  public lineChartPlugins: Plugin<'line'>[] = [
     pluginChartZoom,
     // {
     //   afterEvent: (chartInstance: BaseChartDirective<'line'>['chart'], chartEvent: any) => {
diff --git a/src/modules/home/tenant-creation-history/tenant-creation-history.component.ts b/src/modules/home/tenant-creation-history/tenant-creation-history.component.ts
index d45b69f..9fb7b99 100644
--- a/src/modules/home/tenant-creation-history/tenant-creation-history.component.ts
+++ b/src/modules/home/tenant-creation-history/tenant-creation-history.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ITenant, TenantStatus } from '@c8y/client';
 import { SubtenantDetailsService } from '@services/subtenant-details.service';
-import { ChartDataset, ChartOptions, Point, ChartType } from 'chart.js';
+import { ChartDataset, ChartOptions, Point, ChartType, Plugin } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
-import * as pluginChartZoom from 'chartjs-plugin-zoom';
+import { default as pluginChartZoom } from 'chartjs-plugin-zoom';
 
 @Component({
   selector: 'ps-tenant-creation-history',
@@ -47,9 +47,9 @@ export class TenantCreationHistoryComponent implements OnInit {
       }
     }
   };
-  public lineChartType: ChartType = 'line';
+  public readonly lineChartType = 'line' satisfies ChartType;
   public lineChartLegend = true;
-  public lineChartPlugins = [
+  public lineChartPlugins: Plugin<'line'>[] = [
     pluginChartZoom,
     // {
     //   afterEvent: (chartInstance: BaseChartDirective<'line'>['chart'], chartEvent: any) => {
diff --git a/src/modules/shared/bar-chart/bar-chart.component.ts b/src/modules/shared/bar-chart/bar-chart.component.ts
index 26055a0..0d2a625 100644
--- a/src/modules/shared/bar-chart/bar-chart.component.ts
+++ b/src/modules/shared/bar-chart/bar-chart.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
-import { ChartDataset, ChartOptions, ChartType, TimeUnit } from 'chart.js';
+import { ChartDataset, ChartOptions, ChartType, Plugin, TimeUnit } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
-import * as pluginDataLabels from 'chartjs-plugin-datalabels';
+import 'chartjs-plugin-datalabels';
 
 @Component({
   selector: 'ps-bar-chart',
@@ -36,9 +36,9 @@ export class BarChartComponent implements OnChanges {
       }
     }
   };
-  public barChartType: ChartType = 'bar';
+  public readonly barChartType = 'bar' satisfies ChartType;
   public barChartLegend = false;
-  public barChartPlugins = [pluginDataLabels];
+  public barChartPlugins: Plugin<'bar'>[] = [];
 
   ngOnChanges(changes: SimpleChanges): void {
     const xAxes: any = this.barChartOptions.scales?.['xAxes'] || {};
diff --git a/src/modules/statistics/firmware-statistics/firmware-statistics.component.html b/src/modules/statistics/firmware-statistics/firmware-statistics.component.html
index 6082563..9ef9be9 100644
--- a/src/modules/statistics/firmware-statistics/firmware-statistics.component.html
+++ b/src/modules/statistics/firmware-statistics/firmware-statistics.component.html
@@ -28,7 +28,7 @@ <h3>{{ "No device/firmware combination selected." | translate }}</h3>
         <h4 class="card-title">{{ currentChart.label }}</h4>
       </div>
         <div class="card-block flex-grow">
-          <ps-pie-chart [pieChartLabels]="currentChart.labels" [pieChartData]="currentChart.values" (indexClicked)="pieChartClicked($event)"></ps-pie-chart>
+          <ps-pie-chart [pieChartLabels]="currentChart.labels" [pieChartData]="currentChart.data" (indexClicked)="pieChartClicked($event)"></ps-pie-chart>
 
         </div>
       <!-- <div class="card-footer separator text-center">
diff --git a/src/modules/statistics/firmware-statistics/firmware-statistics.component.ts b/src/modules/statistics/firmware-statistics/firmware-statistics.component.ts
index bbc120c..dcbca11 100644
--- a/src/modules/statistics/firmware-statistics/firmware-statistics.component.ts
+++ b/src/modules/statistics/firmware-statistics/firmware-statistics.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { DeviceDetailsService } from '@services/device-details.service';
 import { FakeMicroserviceService } from '@services/fake-microservice.service';
+import { ChartData } from 'chart.js';
 import { flatten } from 'lodash-es';
 
 @Component({
@@ -15,15 +16,15 @@ export class FirmwareStatisticsComponent {
     type: string;
     firmwareName: string;
     labels: string[];
-    values: number[];
+    data: ChartData<"pie", number[], any>;
   }[] = [];
   currentChart: {
     label: string;
     type: string;
     firmwareName: string;
     labels: string[];
-    values: number[];
-  };
+    data: ChartData<"pie", number[], any>;
+  } | null = null;
 
   constructor(
     private credService: FakeMicroserviceService,
@@ -38,12 +39,14 @@ export class FirmwareStatisticsComponent {
     this.fetchForPage().then(
       (result) => {
         this.charts = result.map((tmp) => {
+          const values = tmp.entries.map((entry) => entry.count);
+          const labels = tmp.entries.map((entry) => entry.version);
           return {
             label: tmp.label,
             type: tmp.type,
             firmwareName: tmp.firmwareName,
-            labels: tmp.entries.map((entry) => entry.version),
-            values: tmp.entries.map((entry) => entry.count)
+            labels: labels,
+            data: {datasets: [{data: values}], labels}
           };
         });
         if (this.charts.length) {
@@ -64,7 +67,7 @@ export class FirmwareStatisticsComponent {
     type: string;
     firmwareName: string;
     labels: string[];
-    values: number[];
+    data: ChartData<"pie", number[], any>;
   }): void {
     this.currentChart = chart;
   }
@@ -105,12 +108,16 @@ export class FirmwareStatisticsComponent {
   }
 
   pieChartClicked(index: number): void {
+    if (!this.currentChart) {
+      return;
+    }
     const lookupPath = 'lookup';
     const devicePath = 'device';
     const config = this.router.config;
     const lookupConfig = config.find((tmp) => tmp.path === lookupPath);
     if (lookupConfig && lookupConfig.children && lookupConfig.children.find((tmp) => tmp.path === devicePath)) {
-      const firmwareVersion = this.currentChart.labels[index];
+      const labels = this.currentChart.data.labels || [];
+      const firmwareVersion = labels[index];
       const type = this.currentChart.type;
       const firmwareName = this.currentChart.firmwareName;
 
diff --git a/src/modules/statistics/pie-chart/pie-chart.component.html b/src/modules/statistics/pie-chart/pie-chart.component.html
index b90dd4d..aa51a2d 100644
--- a/src/modules/statistics/pie-chart/pie-chart.component.html
+++ b/src/modules/statistics/pie-chart/pie-chart.component.html
@@ -4,6 +4,7 @@
     [options]="pieChartOptions"
     [legend]="pieChartLegend"
     [plugins]="pieChartPlugins"
+    [labels]="pieChartLabels"
     (chartClick)="onChartClick($event)"
 >
 </canvas>
diff --git a/src/modules/statistics/pie-chart/pie-chart.component.ts b/src/modules/statistics/pie-chart/pie-chart.component.ts
index f97b54f..8903b48 100644
--- a/src/modules/statistics/pie-chart/pie-chart.component.ts
+++ b/src/modules/statistics/pie-chart/pie-chart.component.ts
@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ChartOptions, ChartType } from 'chart.js';
-import * as pluginDataLabels from 'chartjs-plugin-datalabels';
+import { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js';
+import { ChartEvent } from 'chart.js/dist/core/core.plugins';
+import 'chartjs-plugin-datalabels';
 
 @Component({
   selector: 'ps-pie-chart',
@@ -8,9 +9,9 @@ import * as pluginDataLabels from 'chartjs-plugin-datalabels';
   styleUrls: ['./pie-chart.component.less']
 })
 export class PieChartComponent {
-  @Input() pieChartData: number[] = [];
+  @Input() pieChartData: ChartData<"pie", number[], any> = {datasets: []};
   @Output() indexClicked = new EventEmitter<number>();
-  public pieChartOptions: ChartOptions = {
+  public pieChartOptions: ChartOptions<'pie'> = {
     responsive: true,
     layout: {
       padding: 15
@@ -73,19 +74,22 @@ export class PieChartComponent {
       if (activeElement && activeElement.length) {
         cursor = 'pointer';
       }
-      const target = (<any>event).target as HTMLElement;
+      const target = event.native?.target as HTMLElement;
       target.style.cursor = cursor;
     }
   };
-  // public pieChartData: Array<number | null | undefined | number[]> | ChartPoint[] = [];
-  public pieChartType: ChartType = 'pie';
+  @Input() pieChartLabels: any[] = [];
+  public readonly pieChartType = 'pie' satisfies ChartType;
   public pieChartLegend = true;
-  public pieChartPlugins = [pluginDataLabels];
+  public pieChartPlugins: Plugin<'pie'>[] = [];
   public chartUnit = '%';
 
-  onChartClick(event: any): void {
+  onChartClick(event: {
+    event?: ChartEvent;
+    active?: object[];
+  }): void {
     if (event && event.active && event.active.length) {
-      this.indexClicked.emit(event.active[0]._index);
+      this.indexClicked.emit((<any>event.active[0]).index);
     }
   }
 }