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}%`
                            }
                        }
                    }
                }
            },
        });
})