Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';


loaddatabrowser(validasiToken);
var ctx = document.getElementById("myPieChart").getContext("2d");
window.myPie = getNewChart(ctx, configpiebw);


function loaddatabrowser(tokeni){
  dates = new Date();
  year = dates.getFullYear();

  var label = [];
  var total = [];

  $.ajax({
    type  : "post",
    data  : "JSON",
    url   : baseURL + "/api/loadpiebrowser",
    async : false,
    data : {
      token : tokeni
    },
    success: function(result){
      // console.log(result);
      let data = result.data;
      // console.log(data[0]['total']);
      for (x in data){
        label[x] = data[x]['browser_name'];
        total[x] = data[x]['total'];
      }
    },  
  });

  configpiebw = {
    type: 'pie',
      data: {
        labels: label,
        datasets: [{
          data: total,
          backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', "#c5c5c5"],
          hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf', '#f6c23e', "#c5c5c5"],
          hoverBorderColor: "rgba(234, 236, 244, 1)",
        }],
      },
      options: {
        maintainAspectRatio: false,
        tooltips: {
          backgroundColor: "rgb(255,255,255)",
          bodyFontColor: "#858796",
          borderColor: '#dddfeb',
          borderWidth: 1,
          xPadding: 15,
          yPadding: 15,
          displayColors: false,
          caretPadding: 10,
        },
        legend: {
          display: false
        },
        cutoutPercentage: 80,
      },
    }    
  
    let colour = ['primary','success','info','warning','secondary'];
    for(y in label){
      var cols = "";
      cols += '<span class="mr-2"><i class="fas fa-circle text-'+colour[y]+'"></i> '+label[y]+'</span>';
      $('#infoChartBrowser').append(cols);
  }
}

function setpie(){
  configpiebwnew = {
    labels: ['aa'],
        datasets: [{
          data: [12],
          backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', "#c5c5c5"],
          hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf', '#f6c23e', "#c5c5c5"],
          hoverBorderColor: "rgba(234, 236, 244, 1)",
        }],
    }
  myPie.data = configpiebwnew;
  window.myPie.update();
}

 
function getNewChart(canvas, configpiebw) {
  return new Chart(canvas, configpiebw);
}


loadloc(validasiToken);
function loadloc(tokeni){
  option = '';
  $.ajax({
    type  : "post",
    dataType  : "JSON",
    url   : baseURL + "/api/loadyear",
    data : {
      token : tokeni
    },
    success:function(result){
      let data = result.data;
      for (x in data){  
        option += `<option>`+data[x]['date_part']+`</option>`
        $('#selectloct').append(option);
      }
    }
  });  
}