52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
fetch("/top-users?number=5")
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error: ${response.status}`);
|
|
}
|
|
|
|
return response.json();
|
|
}).then((data) => {
|
|
const ctx = document.getElementById('top-users');
|
|
|
|
new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: data.map(data => data.user),
|
|
datasets: [{
|
|
data: data.map(data => data.count)
|
|
}]
|
|
},
|
|
|
|
plugins: [ChartDataLabels],
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
plugins :{
|
|
legend: false,
|
|
|
|
datalabels: {
|
|
color: '#f4f6fc',
|
|
formatter: function(value, context) {
|
|
return context.chart.data.labels[context.dataIndex];
|
|
}
|
|
},
|
|
|
|
tooltip: {
|
|
callbacks: {
|
|
label: (context) => {
|
|
let sum = 0;
|
|
let value = context.parsed;
|
|
let dataArray = context.dataset.data;
|
|
dataArray.map(data => {
|
|
sum += data;
|
|
});
|
|
let percentage = Math.round(value*100 / sum);
|
|
|
|
return `${percentage}%`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
});
|
|
})
|