Import des sources angular à partir de 'headup_app'
This commit is contained in:
Rampeur
@@ -0,0 +1,11 @@
|
||||
@if (displayCharts) {
|
||||
<div class="barchart position-relative w-100 my-1">
|
||||
<canvas baseChart class="w-100 h-auto"
|
||||
[data]="chartConfig.barChartData"
|
||||
[options]="chartConfig.barChartOptions"
|
||||
[plugins]="chartConfig.barChartPlugins!"
|
||||
[legend]="chartConfig.barChartLegend"
|
||||
[type]="'bar'">
|
||||
</canvas>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BarChartComponent } from './bar-chart.component';
|
||||
|
||||
describe('BarChartComponent', () => {
|
||||
let component: BarChartComponent;
|
||||
let fixture: ComponentFixture<BarChartComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [BarChartComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BarChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from 'src/app/core/services';
|
||||
import { BarConfig } from 'src/app/core/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;
|
||||
}
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
@if (displayCharts) {
|
||||
<div class="barchart position-relative w-100 my-1">
|
||||
<canvas baseChart
|
||||
[data]="chartConfig.barChartData"
|
||||
[options]="chartConfig.barChartOptions"
|
||||
[plugins]="chartConfig.barChartPlugins!"
|
||||
[legend]="chartConfig.barChartLegend"
|
||||
[type]="'bar'">
|
||||
</canvas>
|
||||
</div>
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BarHorizontalChartComponent } from './bar-horizontal-chart.component';
|
||||
|
||||
describe('BarHorizontalChartComponent', () => {
|
||||
let component: BarHorizontalChartComponent;
|
||||
let fixture: ComponentFixture<BarHorizontalChartComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [BarHorizontalChartComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BarHorizontalChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from 'src/app/core/services';
|
||||
import { BarConfig } from 'src/app/core/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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@if (displayCharts) {
|
||||
<div class="barchart position-relative w-100 my-3">
|
||||
<canvas baseChart class="w-100 h-auto"
|
||||
[data]="chartConfig.barChartData"
|
||||
[options]="chartConfig.barChartOptions"
|
||||
[plugins]="chartConfig.barChartPlugins!"
|
||||
[legend]="chartConfig.barChartLegend"
|
||||
[type]="'bar'">
|
||||
</canvas>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BarsChartComponent } from './bars-chart.component';
|
||||
|
||||
describe('BarsChartComponent', () => {
|
||||
let component: BarsChartComponent;
|
||||
let fixture: ComponentFixture<BarsChartComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [BarsChartComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BarsChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
import { Component, Input, OnChanges, AfterContentChecked } from '@angular/core';
|
||||
import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from 'src/app/core/services';
|
||||
import { BarConfig } from 'src/app/core/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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@if (displayCharts) {
|
||||
<div class="circlechart position-relative w-100 my-3">
|
||||
<canvas baseChart class="w-100 h-auto"
|
||||
[labels]="chartConfig.circleChartLabels"
|
||||
[datasets]="chartConfig.circleChartDatasets"
|
||||
[options]="chartConfig.circleChartOptions"
|
||||
[legend]="chartConfig.circleChartLegend"
|
||||
[type]="'doughnut'">
|
||||
</canvas>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CircleChartComponent } from './circle-chart.component';
|
||||
|
||||
describe('CircleChartComponent', () => {
|
||||
let component: CircleChartComponent;
|
||||
let fixture: ComponentFixture<CircleChartComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [CircleChartComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CircleChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
//import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from 'src/app/core/services';
|
||||
import { CircleConfig } from 'src/app/core/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;
|
||||
}*/
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export * from './bar-chart.component';
|
||||
export * from './bar-horizontal-chart.component';
|
||||
export * from './bars-chart.component';
|
||||
export * from './circle-chart.component';
|
||||
export * from './line-chart.component';
|
||||
export * from './linearea-chart.component';
|
||||
export * from './pie-chart.component';
|
||||
@@ -0,0 +1,10 @@
|
||||
@if(displayCharts) {
|
||||
<div class="linechart position-relative w-100 my-3">
|
||||
<canvas baseChart class="w-100 h-auto"
|
||||
[data]="chartConfig.lineChartData"
|
||||
[options]="chartConfig.lineChartOptions"
|
||||
[legend]="chartConfig.lineChartLegend"
|
||||
[type]="'line'">
|
||||
</canvas>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LineChartComponent } from './line-chart.component';
|
||||
|
||||
describe('LineChartComponent', () => {
|
||||
let component: LineChartComponent;
|
||||
let fixture: ComponentFixture<LineChartComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [LineChartComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LineChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { ChartDataset, Point } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from 'src/app/core/services';
|
||||
import { LineConfig } from 'src/app/core/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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@if(displayCharts) {
|
||||
<div class="linechart position-relative w-100 my-3">
|
||||
<canvas baseChart class="w-100 h-auto"
|
||||
[data]="chartConfig.lineChartData"
|
||||
[options]="chartConfig.lineChartOptions"
|
||||
[legend]="chartConfig.lineChartLegend"
|
||||
[type]="'line'">
|
||||
</canvas>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LineAreaChartComponent } from './linearea-chart.component';
|
||||
|
||||
describe('LineAreaChartComponent', () => {
|
||||
let component: LineAreaChartComponent;
|
||||
let fixture: ComponentFixture<LineAreaChartComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [LineAreaChartComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LineAreaChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from 'src/app/core/services';
|
||||
import { LineConfig } from 'src/app/core/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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@if (displayCharts) {
|
||||
<div class="piechart position-relative w-100 my-3">
|
||||
<canvas baseChart class="w-100 h-auto"
|
||||
[labels]="chartConfig.doughnutChartLabels"
|
||||
[datasets]="chartConfig.doughnutChartDatasets"
|
||||
[options]="chartConfig.doughnutChartOptions"
|
||||
[legend]="chartConfig.doughnutChartLegend"
|
||||
[type]="'doughnut'">
|
||||
</canvas>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PieChartComponent } from './pie-chart.component';
|
||||
|
||||
describe('PieChartComponent', () => {
|
||||
let component: PieChartComponent;
|
||||
let fixture: ComponentFixture<PieChartComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [PieChartComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PieChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
//import { ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
|
||||
import { UtilitiesService } from 'src/app/core/services';
|
||||
import { DoughnutConfig } from 'src/app/core/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;
|
||||
}*/
|
||||
}
|
||||
Reference in New Issue
Block a user