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"
50 lines
1.6 KiB
TypeScript
Executable File
50 lines
1.6 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 { BarConfig } from '@models';
|
|
|
|
@Component({
|
|
selector: 'app-bar-horizontal-chart',
|
|
imports: [BaseChartDirective],
|
|
templateUrl: './bar-horizontal-chart.component.html',
|
|
})
|
|
export class BarHorizontalChartComponent implements OnChanges {
|
|
private _utilitiesService = inject(UtilitiesService);
|
|
|
|
public displayCharts = false;
|
|
public chartConfig: BarConfig = this._utilitiesService.getHorizontalBarChartConfig();
|
|
|
|
@Input() names: string[] = [];
|
|
@Input() values: number[] = [];
|
|
@Input() headers: string[] = [];
|
|
@Input() colors: {
|
|
backgroundColor: string[];
|
|
borderColor: string[];
|
|
} = {
|
|
backgroundColor: this._utilitiesService.getSeriesColors(0.8),
|
|
borderColor: this._utilitiesService.getSeriesColors(1),
|
|
};
|
|
@Input() label: string = 'Nombre total de sauts';
|
|
@Input() legend: boolean = false;
|
|
|
|
ngOnChanges() {
|
|
this._loadBarChart();
|
|
}
|
|
|
|
private _loadBarChart(): void {
|
|
const dataset: ChartDataset<'bar'> = {
|
|
data: [...this.values],
|
|
label: this.label,
|
|
backgroundColor: this.colors.backgroundColor,
|
|
borderColor: this.colors.borderColor,
|
|
borderWidth: 1,
|
|
};
|
|
this.chartConfig.barChartData.labels = [...this.names];
|
|
this.chartConfig.barChartData.datasets!.push(dataset);
|
|
this.chartConfig.barChartLegend = this.legend;
|
|
this.displayCharts = true;
|
|
}
|
|
}
|