kvilches1410
85 lines
2.0 KiB
JavaScript
85 lines
2.0 KiB
JavaScript
/**
|
|
* js/charts.js
|
|
* Encargado de instanciar, dibujar y destruir gráficos de Chart.js
|
|
*/
|
|
|
|
const COLORS = [
|
|
'#0052cc','#36b37e','#ff5630','#6554c0','#ff8b00',
|
|
'#00b8d9','#57d9a3','#f99cdb','#8777d9','#344563',
|
|
'#403294','#00875a','#de350b','#505f79','#42526e',
|
|
];
|
|
|
|
export const chartsManager = {
|
|
instances: {},
|
|
_peopleOrder: [],
|
|
|
|
personColor(name) {
|
|
let idx = this._peopleOrder.indexOf(name);
|
|
if (idx < 0) {
|
|
this._peopleOrder.push(name);
|
|
idx = this._peopleOrder.length - 1;
|
|
}
|
|
return COLORS[idx % COLORS.length];
|
|
},
|
|
|
|
destroyChart(id) {
|
|
if (this.instances[id]) {
|
|
this.instances[id].destroy();
|
|
delete this.instances[id];
|
|
}
|
|
},
|
|
|
|
drawBarChart(id, canvasId, labels, datasets, options = {}) {
|
|
this.destroyChart(id);
|
|
const ctx = document.getElementById(canvasId);
|
|
if (!ctx) return;
|
|
|
|
this.instances[id] = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: { labels, datasets },
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
...options,
|
|
}
|
|
});
|
|
},
|
|
|
|
drawDoughnutChart(id, canvasId, labels, data, backgroundColors, options = {}) {
|
|
this.destroyChart(id);
|
|
const ctx = document.getElementById(canvasId);
|
|
if (!ctx) return;
|
|
|
|
this.instances[id] = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels,
|
|
datasets: [{ data, backgroundColor: backgroundColors, borderWidth: 2, borderColor: '#fff' }],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } },
|
|
...options,
|
|
}
|
|
});
|
|
},
|
|
|
|
drawLineChart(id, canvasId, labels, datasets, options = {}) {
|
|
this.destroyChart(id);
|
|
const ctx = document.getElementById(canvasId);
|
|
if (!ctx) return;
|
|
|
|
this.instances[id] = new Chart(ctx, {
|
|
type: 'line',
|
|
data: { labels, datasets },
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
tension: 0.4,
|
|
...options,
|
|
}
|
|
});
|
|
},
|
|
};
|