52 lines
1.6 KiB
JavaScript
52 lines
1.6 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: 'pie',
|
|
data: {
|
|
labels: data["members"],
|
|
datasets: [{
|
|
data: data["counts"]
|
|
}]
|
|
},
|
|
|
|
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}%`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
});
|
|
})
|