julien
be5f5775ef
- ng update @angular/core@20 @angular/cli@20 @angular/material@20 @angular-eslint@20 @angular/google-maps@20 - Remove ng-chartist (abandoned, incompatible with Angular 20): replace <x-chartist> with <app-bars-chart> in dropzones-bar and jumps-by-month - Migrate all constructor injection to inject() function (ng generate @angular/core:inject, 67 files) - TypeScript 5.5 → 5.9.3 - DOCUMENT import moved from @angular/common to @angular/core (automatic migration) - tsconfig moduleResolution updated to "bundler"
59 lines
2.2 KiB
TypeScript
Executable File
59 lines
2.2 KiB
TypeScript
Executable File
import { Component, Input, OnChanges, inject } from '@angular/core';
|
|
//import { ChartDataset } from 'chart.js';
|
|
import { BaseChartDirective } from 'ng2-charts';
|
|
|
|
import { UtilitiesService } from '@services';
|
|
import { DoughnutConfig } from '@models';
|
|
|
|
@Component({
|
|
selector: 'app-pie-chart',
|
|
imports: [BaseChartDirective],
|
|
templateUrl: './pie-chart.component.html',
|
|
})
|
|
export class PieChartComponent implements OnChanges {
|
|
private _utilitiesService = inject(UtilitiesService);
|
|
|
|
public displayCharts = false;
|
|
public chartConfig: DoughnutConfig = this._utilitiesService.getDoughnutChartConfig();
|
|
|
|
@Input() names: string[] = [];
|
|
@Input() values: number[] = [];
|
|
@Input() headers: string[] = [];
|
|
@Input() colors: {
|
|
backgroundColor: string[];
|
|
borderColor: string[];
|
|
} = {
|
|
backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'all'),
|
|
borderColor: this._utilitiesService.getSeriesColors(1, 'all'),
|
|
};
|
|
@Input() legend: boolean = false;
|
|
|
|
ngOnChanges() {
|
|
this._loadDoughnutChart();
|
|
}
|
|
|
|
private _loadDoughnutChart(): void {
|
|
this.chartConfig.doughnutChartLabels = [...this.names];
|
|
this.chartConfig.doughnutChartDatasets[0].data = [...this.values];
|
|
this.chartConfig.doughnutChartDatasets[0].label = 'Nombre total de sauts';
|
|
this.chartConfig.doughnutChartDatasets[0].backgroundColor = this.colors.backgroundColor;
|
|
this.chartConfig.doughnutChartDatasets[0].borderColor = this.colors.borderColor;
|
|
this.chartConfig.doughnutChartDatasets[0].borderWidth = 2;
|
|
this.chartConfig.doughnutChartLegend = this.legend;
|
|
this.displayCharts = true;
|
|
}
|
|
|
|
/*private _loadDoughnutChart(): void {
|
|
const dataset: ChartDataset<'doughnut'> = {
|
|
data: [...this.values],
|
|
label: 'Nombre total de sauts',
|
|
backgroundColor: this._utilitiesService.getSeriesColors(0.8),
|
|
borderColor: this._utilitiesService.getSeriesColors(1),
|
|
borderWidth: 1
|
|
};
|
|
this.chartConfig.doughnutChartLabels = [...this.names];
|
|
this.chartConfig.doughnutChartDatasets!.push(dataset);
|
|
this.displayCharts = true;
|
|
}*/
|
|
}
|