57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
|
const options = {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {'Content-Type': 'application/json'}
|
||
|
|
}
|
||
|
|
|
||
|
|
fetch("/top3_users", options)
|
||
|
|
.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}%`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
})
|