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