65 lines
2.3 KiB
TypeScript
Executable File
65 lines
2.3 KiB
TypeScript
Executable File
import { Component, Input, OnChanges } from '@angular/core';
|
|
//import { ChartDataset } from 'chart.js';
|
|
import { BaseChartDirective } from 'ng2-charts';
|
|
|
|
import { UtilitiesService } from '@services';
|
|
import { CircleConfig } from '@models';
|
|
|
|
@Component({
|
|
selector: 'app-circle-chart',
|
|
standalone: true,
|
|
imports: [
|
|
BaseChartDirective
|
|
],
|
|
templateUrl: './circle-chart.component.html'
|
|
})
|
|
export class CircleChartComponent implements OnChanges {
|
|
public displayCharts = false;
|
|
public chartConfig: CircleConfig = this._utilitiesService.getCircleChartConfig();
|
|
|
|
constructor(
|
|
private _utilitiesService: UtilitiesService
|
|
) { }
|
|
|
|
@Input() names: string[] = [];
|
|
@Input() values: number[] = [];
|
|
@Input() headers: string[] = [];
|
|
@Input() color: number = 0;
|
|
@Input() label: string = 'Nombre total de sauts';
|
|
@Input() legend: boolean = false;
|
|
|
|
ngOnChanges() {
|
|
this._loadCircleChart();
|
|
}
|
|
|
|
private _loadCircleChart(): void {
|
|
this.chartConfig.circleChartLabels = [...this.names];
|
|
this.chartConfig.circleChartDatasets[0].data = [...this.values];
|
|
this.chartConfig.circleChartDatasets[0].label = this.label;
|
|
this.chartConfig.circleChartDatasets[0].backgroundColor = [
|
|
this._utilitiesService.getSeriesColors(0.9, 'pastels')[this.color],
|
|
'rgba(255, 255, 255, 0.05)'
|
|
];
|
|
this.chartConfig.circleChartDatasets[0].borderColor = [
|
|
this._utilitiesService.getSeriesColors(1, 'pastels')[this.color],
|
|
'rgba(255, 255, 255, 0.05)'
|
|
];
|
|
this.chartConfig.circleChartDatasets[0].borderWidth = 0;
|
|
this.chartConfig.circleChartLegend = this.legend;
|
|
this.displayCharts = true;
|
|
}
|
|
|
|
/*private _loadCircleChart(): void {
|
|
const dataset: ChartDataset<'circle'> = {
|
|
data: [...this.values],
|
|
label: 'Nombre total de sauts',
|
|
backgroundColor: this._utilitiesService.getSeriesColors(0.8),
|
|
borderColor: this._utilitiesService.getSeriesColors(1),
|
|
borderWidth: 1
|
|
};
|
|
this.chartConfig.circleChartLabels = [...this.names];
|
|
this.chartConfig.circleChartDatasets!.push(dataset);
|
|
this.displayCharts = true;
|
|
}*/
|
|
}
|