fix: pie charts in firnware statistics

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"

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) => {

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) => {

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'] || {};

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

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;
 

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>

src/modules/statistics/pie-chart/pie-chart.component.ts

@@ -1,16 +1,17 @@
 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',
  templateUrl: './pie-chart.component.html',
  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);
  }
  }
 }