chore(deps): upgrade Angular 18 → 19
- ng update @angular/core@19 @angular/cli@19 @angular/material@19 @angular-eslint/schematics@19 - Migration: remove standalone:true (now default in v19) from 60 components - Migration: zone.js 0.14 → 0.15 - Fix pre-existing build budget error: raise initial bundle limit to 5mb (app ships large static JSON assets)
This commit is contained in:
@@ -1,58 +1,53 @@
|
||||
import { Component, Input, OnChanges } 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-chart',
|
||||
standalone: true,
|
||||
imports: [
|
||||
BaseChartDirective
|
||||
],
|
||||
templateUrl: './bar-chart.component.html'
|
||||
})
|
||||
export class BarChartComponent implements OnChanges {
|
||||
public displayCharts = false;
|
||||
public chartConfig: BarConfig = this._utilitiesService.getBarChartConfig();
|
||||
|
||||
constructor(
|
||||
private _utilitiesService: UtilitiesService
|
||||
) { }
|
||||
|
||||
@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.barChartOptions!.scales = {
|
||||
x: {display: false},
|
||||
y: {display: true}
|
||||
};*/
|
||||
this.chartConfig.barChartLegend = this.legend;
|
||||
this.displayCharts = true;
|
||||
}
|
||||
}
|
||||
import { Component, Input, OnChanges } 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-chart',
|
||||
imports: [BaseChartDirective],
|
||||
templateUrl: './bar-chart.component.html',
|
||||
})
|
||||
export class BarChartComponent implements OnChanges {
|
||||
public displayCharts = false;
|
||||
public chartConfig: BarConfig = this._utilitiesService.getBarChartConfig();
|
||||
|
||||
constructor(private _utilitiesService: UtilitiesService) {}
|
||||
|
||||
@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.barChartOptions!.scales = {
|
||||
x: {display: false},
|
||||
y: {display: true}
|
||||
};*/
|
||||
this.chartConfig.barChartLegend = this.legend;
|
||||
this.displayCharts = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,54 +1,49 @@
|
||||
import { Component, Input, OnChanges } 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',
|
||||
standalone: true,
|
||||
imports: [
|
||||
BaseChartDirective
|
||||
],
|
||||
templateUrl: './bar-horizontal-chart.component.html'
|
||||
})
|
||||
export class BarHorizontalChartComponent implements OnChanges {
|
||||
public displayCharts = false;
|
||||
public chartConfig: BarConfig = this._utilitiesService.getHorizontalBarChartConfig();
|
||||
|
||||
constructor(
|
||||
private _utilitiesService: UtilitiesService
|
||||
) { }
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
import { Component, Input, OnChanges } 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 {
|
||||
public displayCharts = false;
|
||||
public chartConfig: BarConfig = this._utilitiesService.getHorizontalBarChartConfig();
|
||||
|
||||
constructor(private _utilitiesService: UtilitiesService) {}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,79 +1,84 @@
|
||||
import { Component, Input, OnChanges, AfterContentChecked } from '@angular/core';
|
||||
import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from '@services';
|
||||
import { BarConfig } from '@models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-bars-chart',
|
||||
standalone: true,
|
||||
imports: [
|
||||
BaseChartDirective
|
||||
],
|
||||
templateUrl: './bars-chart.component.html'
|
||||
})
|
||||
export class BarsChartComponent implements OnChanges, AfterContentChecked {
|
||||
public displayCharts = false;
|
||||
public chartConfig: BarConfig = this._utilitiesService.getBarChartConfig();
|
||||
|
||||
constructor(
|
||||
private _utilitiesService: UtilitiesService
|
||||
) { }
|
||||
|
||||
@Input() names: string[] = [];
|
||||
@Input() values: Array<Array<number>> = [];
|
||||
@Input() headers: string[] = [];
|
||||
@Input() colors: {
|
||||
backgroundColor: string[],
|
||||
borderColor: string[]
|
||||
} = {
|
||||
backgroundColor: this._utilitiesService.getSeriesColors(0.8),
|
||||
borderColor: this._utilitiesService.getSeriesColors(1)
|
||||
};
|
||||
@Input() legend: boolean = false;
|
||||
|
||||
ngOnChanges() {
|
||||
this._loadBarChart();
|
||||
}
|
||||
|
||||
ngAfterContentChecked() {
|
||||
this._loadBarChart();
|
||||
}
|
||||
|
||||
private _loadBarChart(): void {
|
||||
this.chartConfig = this._utilitiesService.getBarChartConfig();
|
||||
this.chartConfig.barChartData.labels = [...this.headers];
|
||||
this.chartConfig.barChartOptions!.maintainAspectRatio = false;
|
||||
//this.chartConfig.barChartOptions!.aspectRatio = 2.4;
|
||||
this.chartConfig.barChartOptions!.scales = {
|
||||
x: {
|
||||
display: true,
|
||||
//stacked: true,
|
||||
beginAtZero: true,
|
||||
ticks: { color: 'rgba(255,255,255,0.3)' },
|
||||
grid: { color: 'rgba(255,255,255,0.1)', display: true, tickBorderDash: [1,2], tickBorderDashOffset: 2 }
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
//stacked: true,
|
||||
beginAtZero: true,
|
||||
ticks: { color: 'rgba(255,255,255,0.3)' },
|
||||
grid: { color: 'rgba(255,255,255,0.2)', tickBorderDash: [1,2], tickBorderDashOffset: 2, display: true }
|
||||
}
|
||||
};
|
||||
this.names.forEach((label: string, index: number) => {
|
||||
const dataset: ChartDataset<'bar'> = {
|
||||
data: [...this.values[index]],
|
||||
label: label,
|
||||
backgroundColor: this.colors.backgroundColor[index],
|
||||
borderColor: this.colors.borderColor[index],
|
||||
borderWidth: 1,
|
||||
//stack: 'Stack 0'
|
||||
};
|
||||
this.chartConfig.barChartData.datasets!.push(dataset);
|
||||
});
|
||||
this.chartConfig.barChartLegend = this.legend;
|
||||
this.displayCharts = true;
|
||||
}
|
||||
}
|
||||
import { Component, Input, OnChanges, AfterContentChecked } from '@angular/core';
|
||||
import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from '@services';
|
||||
import { BarConfig } from '@models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-bars-chart',
|
||||
imports: [BaseChartDirective],
|
||||
templateUrl: './bars-chart.component.html',
|
||||
})
|
||||
export class BarsChartComponent implements OnChanges, AfterContentChecked {
|
||||
public displayCharts = false;
|
||||
public chartConfig: BarConfig = this._utilitiesService.getBarChartConfig();
|
||||
|
||||
constructor(private _utilitiesService: UtilitiesService) {}
|
||||
|
||||
@Input() names: string[] = [];
|
||||
@Input() values: Array<Array<number>> = [];
|
||||
@Input() headers: string[] = [];
|
||||
@Input() colors: {
|
||||
backgroundColor: string[];
|
||||
borderColor: string[];
|
||||
} = {
|
||||
backgroundColor: this._utilitiesService.getSeriesColors(0.8),
|
||||
borderColor: this._utilitiesService.getSeriesColors(1),
|
||||
};
|
||||
@Input() legend: boolean = false;
|
||||
|
||||
ngOnChanges() {
|
||||
this._loadBarChart();
|
||||
}
|
||||
|
||||
ngAfterContentChecked() {
|
||||
this._loadBarChart();
|
||||
}
|
||||
|
||||
private _loadBarChart(): void {
|
||||
this.chartConfig = this._utilitiesService.getBarChartConfig();
|
||||
this.chartConfig.barChartData.labels = [...this.headers];
|
||||
this.chartConfig.barChartOptions!.maintainAspectRatio = false;
|
||||
//this.chartConfig.barChartOptions!.aspectRatio = 2.4;
|
||||
this.chartConfig.barChartOptions!.scales = {
|
||||
x: {
|
||||
display: true,
|
||||
//stacked: true,
|
||||
beginAtZero: true,
|
||||
ticks: { color: 'rgba(255,255,255,0.3)' },
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.1)',
|
||||
display: true,
|
||||
tickBorderDash: [1, 2],
|
||||
tickBorderDashOffset: 2,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
//stacked: true,
|
||||
beginAtZero: true,
|
||||
ticks: { color: 'rgba(255,255,255,0.3)' },
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
tickBorderDash: [1, 2],
|
||||
tickBorderDashOffset: 2,
|
||||
display: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
this.names.forEach((label: string, index: number) => {
|
||||
const dataset: ChartDataset<'bar'> = {
|
||||
data: [...this.values[index]],
|
||||
label: label,
|
||||
backgroundColor: this.colors.backgroundColor[index],
|
||||
borderColor: this.colors.borderColor[index],
|
||||
borderWidth: 1,
|
||||
//stack: 'Stack 0'
|
||||
};
|
||||
this.chartConfig.barChartData.datasets!.push(dataset);
|
||||
});
|
||||
this.chartConfig.barChartLegend = this.legend;
|
||||
this.displayCharts = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,64 +1,59 @@
|
||||
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;
|
||||
}*/
|
||||
}
|
||||
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',
|
||||
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;
|
||||
}*/
|
||||
}
|
||||
|
||||
@@ -1,64 +1,59 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { ChartDataset, Point } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from '@services';
|
||||
import { LineConfig } from '@models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-line-chart',
|
||||
standalone: true,
|
||||
imports: [
|
||||
BaseChartDirective
|
||||
],
|
||||
templateUrl: './line-chart.component.html'
|
||||
})
|
||||
export class LineChartComponent implements OnChanges {
|
||||
public displayCharts = false;
|
||||
public chartConfig: LineConfig = this._utilitiesService.getLineChartConfig();
|
||||
|
||||
constructor(
|
||||
private _utilitiesService: UtilitiesService
|
||||
) { }
|
||||
|
||||
@Input() headers: string[] = [];
|
||||
@Input() names: string[] = [];
|
||||
@Input() values: Array<Array<number>> = [];
|
||||
@Input() colors: {
|
||||
backgroundColor: string[],
|
||||
borderColor: string[]
|
||||
} = {
|
||||
backgroundColor: this._utilitiesService.getSeriesColors(0.8),
|
||||
borderColor: this._utilitiesService.getSeriesColors(1)
|
||||
};
|
||||
@Input() legend: boolean = false;
|
||||
@Input() hideZero: boolean = false;
|
||||
|
||||
ngOnChanges() {
|
||||
this._loadLineChart();
|
||||
}
|
||||
|
||||
private _loadLineChart(): void {
|
||||
this.chartConfig.lineChartData.labels = [...this.headers];
|
||||
this.names.forEach((label: string, index: number) => {
|
||||
let data: Array<(number | Point | null)> = [];
|
||||
if (this.hideZero) {
|
||||
data = [...this.values[index].map(value => value === 0 ? null : value)];
|
||||
} else {
|
||||
data = [...this.values[index]];
|
||||
}
|
||||
const dataset: ChartDataset<'line'> = {
|
||||
data: data,
|
||||
label: label,
|
||||
backgroundColor: this.colors.backgroundColor[index],
|
||||
borderColor: this.colors.borderColor[index],
|
||||
borderWidth: 2,
|
||||
cubicInterpolationMode: 'monotone',
|
||||
tension: 0
|
||||
};
|
||||
this.chartConfig.lineChartData.datasets!.push(dataset);
|
||||
});
|
||||
this.chartConfig.lineChartLegend = this.legend;
|
||||
this.displayCharts = true;
|
||||
}
|
||||
}
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { ChartDataset, Point } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from '@services';
|
||||
import { LineConfig } from '@models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-line-chart',
|
||||
imports: [BaseChartDirective],
|
||||
templateUrl: './line-chart.component.html',
|
||||
})
|
||||
export class LineChartComponent implements OnChanges {
|
||||
public displayCharts = false;
|
||||
public chartConfig: LineConfig = this._utilitiesService.getLineChartConfig();
|
||||
|
||||
constructor(private _utilitiesService: UtilitiesService) {}
|
||||
|
||||
@Input() headers: string[] = [];
|
||||
@Input() names: string[] = [];
|
||||
@Input() values: Array<Array<number>> = [];
|
||||
@Input() colors: {
|
||||
backgroundColor: string[];
|
||||
borderColor: string[];
|
||||
} = {
|
||||
backgroundColor: this._utilitiesService.getSeriesColors(0.8),
|
||||
borderColor: this._utilitiesService.getSeriesColors(1),
|
||||
};
|
||||
@Input() legend: boolean = false;
|
||||
@Input() hideZero: boolean = false;
|
||||
|
||||
ngOnChanges() {
|
||||
this._loadLineChart();
|
||||
}
|
||||
|
||||
private _loadLineChart(): void {
|
||||
this.chartConfig.lineChartData.labels = [...this.headers];
|
||||
this.names.forEach((label: string, index: number) => {
|
||||
let data: Array<number | Point | null> = [];
|
||||
if (this.hideZero) {
|
||||
data = [...this.values[index].map((value) => (value === 0 ? null : value))];
|
||||
} else {
|
||||
data = [...this.values[index]];
|
||||
}
|
||||
const dataset: ChartDataset<'line'> = {
|
||||
data: data,
|
||||
label: label,
|
||||
backgroundColor: this.colors.backgroundColor[index],
|
||||
borderColor: this.colors.borderColor[index],
|
||||
borderWidth: 2,
|
||||
cubicInterpolationMode: 'monotone',
|
||||
tension: 0,
|
||||
};
|
||||
this.chartConfig.lineChartData.datasets!.push(dataset);
|
||||
});
|
||||
this.chartConfig.lineChartLegend = this.legend;
|
||||
this.displayCharts = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,63 +1,58 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from '@services';
|
||||
import { LineConfig } from '@models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-linearea-chart',
|
||||
standalone: true,
|
||||
imports: [
|
||||
BaseChartDirective
|
||||
],
|
||||
templateUrl: './linearea-chart.component.html'
|
||||
})
|
||||
export class LineAreaChartComponent implements OnChanges {
|
||||
public displayCharts = false;
|
||||
public chartConfig: LineConfig = this._utilitiesService.getStackedLineAreaChartConfig();
|
||||
|
||||
constructor(
|
||||
private _utilitiesService: UtilitiesService
|
||||
) { }
|
||||
|
||||
@Input() headers: string[] = [];
|
||||
@Input() names: string[] = [];
|
||||
@Input() values: Array<Array<number>> = [];
|
||||
@Input() colors: {
|
||||
backgroundColor: string[],
|
||||
borderColor: string[]
|
||||
} = {
|
||||
backgroundColor: this._utilitiesService.getSeriesColors(0.8),
|
||||
borderColor: this._utilitiesService.getSeriesColors(1)
|
||||
};
|
||||
@Input() legend: boolean = false;
|
||||
|
||||
ngOnChanges() {
|
||||
this._loadLineChart();
|
||||
}
|
||||
|
||||
private _loadLineChart(): void {
|
||||
this.chartConfig.lineChartData.labels = [...this.headers];
|
||||
this.names.forEach((label: string, index: number) => {
|
||||
let fill: string | number | boolean = '-1';
|
||||
if (index === 0) {
|
||||
fill = true;
|
||||
}
|
||||
const dataset: ChartDataset<'line'> = {
|
||||
data: [...this.values[index]],
|
||||
label: label,
|
||||
backgroundColor: this.colors.backgroundColor[index],
|
||||
borderColor: this.colors.borderColor[index],
|
||||
borderWidth: 1,
|
||||
fill: fill,
|
||||
//stepped: true,
|
||||
cubicInterpolationMode: 'monotone',
|
||||
tension: 0
|
||||
};
|
||||
this.chartConfig.lineChartData.datasets!.push(dataset);
|
||||
});
|
||||
this.chartConfig.lineChartLegend = this.legend;
|
||||
this.displayCharts = true;
|
||||
}
|
||||
}
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from '@services';
|
||||
import { LineConfig } from '@models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-linearea-chart',
|
||||
imports: [BaseChartDirective],
|
||||
templateUrl: './linearea-chart.component.html',
|
||||
})
|
||||
export class LineAreaChartComponent implements OnChanges {
|
||||
public displayCharts = false;
|
||||
public chartConfig: LineConfig = this._utilitiesService.getStackedLineAreaChartConfig();
|
||||
|
||||
constructor(private _utilitiesService: UtilitiesService) {}
|
||||
|
||||
@Input() headers: string[] = [];
|
||||
@Input() names: string[] = [];
|
||||
@Input() values: Array<Array<number>> = [];
|
||||
@Input() colors: {
|
||||
backgroundColor: string[];
|
||||
borderColor: string[];
|
||||
} = {
|
||||
backgroundColor: this._utilitiesService.getSeriesColors(0.8),
|
||||
borderColor: this._utilitiesService.getSeriesColors(1),
|
||||
};
|
||||
@Input() legend: boolean = false;
|
||||
|
||||
ngOnChanges() {
|
||||
this._loadLineChart();
|
||||
}
|
||||
|
||||
private _loadLineChart(): void {
|
||||
this.chartConfig.lineChartData.labels = [...this.headers];
|
||||
this.names.forEach((label: string, index: number) => {
|
||||
let fill: string | number | boolean = '-1';
|
||||
if (index === 0) {
|
||||
fill = true;
|
||||
}
|
||||
const dataset: ChartDataset<'line'> = {
|
||||
data: [...this.values[index]],
|
||||
label: label,
|
||||
backgroundColor: this.colors.backgroundColor[index],
|
||||
borderColor: this.colors.borderColor[index],
|
||||
borderWidth: 1,
|
||||
fill: fill,
|
||||
//stepped: true,
|
||||
cubicInterpolationMode: 'monotone',
|
||||
tension: 0,
|
||||
};
|
||||
this.chartConfig.lineChartData.datasets!.push(dataset);
|
||||
});
|
||||
this.chartConfig.lineChartLegend = this.legend;
|
||||
this.displayCharts = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,63 +1,58 @@
|
||||
import { Component, Input, OnChanges } 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',
|
||||
standalone: true,
|
||||
imports: [
|
||||
BaseChartDirective
|
||||
],
|
||||
templateUrl: './pie-chart.component.html'
|
||||
})
|
||||
export class PieChartComponent implements OnChanges {
|
||||
public displayCharts = false;
|
||||
public chartConfig: DoughnutConfig = this._utilitiesService.getDoughnutChartConfig();
|
||||
|
||||
constructor(
|
||||
private _utilitiesService: UtilitiesService
|
||||
) { }
|
||||
|
||||
@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;
|
||||
}*/
|
||||
}
|
||||
import { Component, Input, OnChanges } 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 {
|
||||
public displayCharts = false;
|
||||
public chartConfig: DoughnutConfig = this._utilitiesService.getDoughnutChartConfig();
|
||||
|
||||
constructor(private _utilitiesService: UtilitiesService) {}
|
||||
|
||||
@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;
|
||||
}*/
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user