85 lines
1.9 KiB
TypeScript
85 lines
1.9 KiB
TypeScript
import { Component, Input } from '@angular/core';
|
|
import { Chart } from 'chart.js'
|
|
import { tooltip } from '../tooltip'
|
|
|
|
@Component({
|
|
selector: 'app-donut-chart',
|
|
templateUrl: './donut-chart.component.html',
|
|
styleUrls: ['./donut-chart.component.scss']
|
|
})
|
|
export class DonutChartComponent {
|
|
@Input() elementID: string;
|
|
count: number;
|
|
|
|
private canvas: any;
|
|
private ctx: any;
|
|
private chart: Chart;
|
|
|
|
constructor() { }
|
|
|
|
data(val: number[]) {
|
|
if (this.chart) {
|
|
val.forEach((v) => {
|
|
this.addData(v)
|
|
});
|
|
}
|
|
}
|
|
|
|
updateData(data: { label: string, count: number }[]): void {
|
|
//Using object destructuring
|
|
for (let i = 0; i < data.length; i++) {
|
|
let s = data[i];
|
|
this.chart.data.labels[i] = s.label;
|
|
this.chart.data.datasets[0].data[i] = s.count;
|
|
}
|
|
this.chart.update();
|
|
}
|
|
|
|
addData(data: number): void {
|
|
// this.chart.data.labels.push(label);
|
|
this.chart.data.datasets.forEach((dataset) => {
|
|
dataset.data.push(data);
|
|
});
|
|
this.chart.update();
|
|
}
|
|
|
|
removeAllData(withAnimation: boolean): void {
|
|
this.chart.data.labels.pop();
|
|
this.chart.data.datasets.forEach((dataset) => {
|
|
dataset.data = [];
|
|
});
|
|
this.chart.update(withAnimation);
|
|
}
|
|
|
|
ngAfterViewInit(): void {
|
|
this.canvas = document.getElementById(this.elementID);
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.chart = new Chart(this.ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [{
|
|
data: [],
|
|
backgroundColor: [
|
|
'#56C568',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
cutoutPercentage: 70,
|
|
responsive: false,
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltips: {
|
|
// Disable the on-canvas tooltip
|
|
enabled: false,
|
|
custom: tooltip(),
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|