@push('script')
<script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
<script src="https://unpkg.com/chartjs-gauge@0.3.0/dist/chartjs-gauge.js"></script>
 <script src="https://unpkg.com/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.js"></script>
@endpush

<div id="canvas-holder" style="width:75%">
    <canvas id="chart"></canvas>
    <canvas id="overall_perfomance_chart"></canvas>
    <canvas id="section_chart" ></canvas>
    <canvas id="reliability_chart"></canvas>
    <canvas id="donut" ></canvas>
</div>

@push('script')
    <script>
        var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};

var randomData = function () {
  return [
    randomScalingFactor(),
    randomScalingFactor(),
    randomScalingFactor(),
    randomScalingFactor()
  ];
};

var randomValue = function (data) {
  return Math.max.apply(null, data) * Math.random();
};

// Attendance meter chart

var data = [25,50,75,100]; 
var value = 30;
console.log("data", data);

var config = {
  type: 'gauge',
  data: {
    labels: ['Poor', 'Avg', 'Above Avg', 'Good'],
    datasets: [{
      data: data,
      value: value,
      backgroundColor: ['red', '#bfbfbf', '#85C1E9', 'blue'],
      borderWidth: 2
    }]
  },
  options: {
    responsive: true,
    legend: {
         position: 'bottom' // place legend on the bottom of chart
      },
    title: {
      display: true,
      text: 'ME - Attendance Meter'
    },
    layout: {
      padding: {
        bottom: 30
      }
    },
    needle: {
      // Needle circle radius as the percentage of the chart area width
      radiusPercentage: 1,
      // Needle width as the percentage of the chart area width
      widthPercentage: 2,
      // Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
      lengthPercentage: 100,
      // The color of the needle
      color: 'rgba(0, 0, 0, 1)'
    },
    valueLabel: {
      formatter: Math.round
    },
    plugins: {
      datalabels: {
        display: true,
        formatter:  function (value, context) {
          return context.chart.data.labels[context.dataIndex];
        },
        //color: function (context) {
        //  return context.dataset.backgroundColor;
        //},
        //color: 'rgba(0, 0, 0, 1.0)',
        //color: 'rgba(255, 255, 255, 1.0)',
        backgroundColor: null,
       /* font: {
          size: 10,
          weight: 'bold'
        }*/
      }
    }
  }
};

// End of Attendance meter chart

//Overall performance chart
  const op_data = {
    labels: [
    'Need Training',
    'Need Practice',
    'Performers'
  ],
  datasets: [{
    label: 'Overall Performance',
    data: [300, 50, 100],
    backgroundColor: [
      'red',
      '#bfbfbf',
      'blue'
    ],
    hoverOffset: 4
  }]
  }; 
  const op_config = {
  type: 'pie',
  data: op_data,
  options:{
    responsive: true,
    legend: {
         position: 'bottom' // place legend on the bottom of chart
      },
    title: {
        display: true,
        text: 'Overall Performance'
    },
    plugins: {
      datalabels: {
        display: true,
        formatter:  function (value, context) {
          return value + "%";
        },
      }
    }
  }
};

//End of Overall performance chart
// Section wise performance chart

const labels = ["RA perf", "VA perf", "QA perf", "Eng perf", "Coding perf"];
const section_data = {
  labels: labels,
  datasets: [
    {
      label: 'Need Training',
      //data: Utils.numbers(NUMBER_CFG),
      data: [95, 38, 64, 38, 95],
      backgroundColor: 'red',
    },
    {
      label: 'Need Practice',
      //data: Utils.numbers(NUMBER_CFG),
      data: [5, 51, 36, 56, 0],
      backgroundColor: '#bfbfbf',
    },
    {
      label: 'Performers',
      //data: Utils.numbers(NUMBER_CFG),
      data: [0, 10, 0, 5, 5],
      backgroundColor: 'blue',
    },
  ]
};

const section_config = {
  type: 'bar',
  data: section_data,
  options: {
      title: {
        display: true,
        text: 'Section-wise Performance'
    },
    responsive: true,
    legend: {
         position: 'bottom' // place legend on the bottom of chart
      },
    scales: {
      xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
    },
    plugins: {
      datalabels: {
        display: true,
        formatter:  function (value, context) {
          return value + "%";
        },
      }
    }
  }
};

//End of Section wise performance chart

// Reliability Analysis of Performers chart
  
  //const labels = ["RA perf", "VA perf", "QA perf", "Eng perf", "Coding perf"];
  const reliability_data = {
   // labels: labels,
    datasets: [
      {
        label: 'Upskill',
        //data: Utils.numbers(NUMBER_CFG),
        data: [75],
        backgroundColor: 'red',
      },
      {
        label: 'Good to go',
        //data: Utils.numbers(NUMBER_CFG),
        data: [25],
        backgroundColor: '#bfbfbf',
      }
    ]
  };

  const reliability_config = {
    type: 'bar',
    data: reliability_data,
    options: {
        title: {
          display: true,
          text: 'Reliability Analysis of Performers'
      },
      responsive: true,
      legend: {
         position: 'bottom' // place legend on the bottom of chart
      },
      scales: {
        xAxes: [{
              stacked: true, // this should be set to make the bars stacked
              barPercentage: 0.3
           }],
           yAxes: [{
              stacked: true, // this also..
               gridLines: {
                  display: false
                }
           }]
      },
      plugins: {
        datalabels: {
          display: true,
          formatter:  function (value, context) {
            return value + "%";
          },
        }
      }
    }
  };

//End of Reliability Analysis of Performers chart

window.onload = function() {
  var ctx = document.getElementById('chart').getContext('2d');
  var op_element = document.getElementById('overall_perfomance_chart').getContext('2d');
  var section_element = document.getElementById('section_chart').getContext('2d');
  var reliability_element = document.getElementById('reliability_chart').getContext('2d');

  window.myGauge = new Chart(ctx, config);
  window.myOp = new Chart(op_element, op_config);
  window.mySecion = new Chart(section_element, section_config);
  window.myReliability = new Chart(reliability_element, reliability_config);

  //Doughnut chart
    var doughnut_element = document.getElementById("donut").getContext('2d');
    var myChart = new Chart(doughnut_element, {
      type: 'doughnut',
      data: {
        //labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
        datasets: [{
          backgroundColor: [
            "#2ecc71",
           "#2ecc71",
             "#2ecc71",
           "#2ecc71",
           "#2ecc71",
           "#2ecc71",
             "#2ecc71",
           "#2ecc71",
           "#2ecc71",
           "#2ecc71",
             "#2ecc71",
           "#2ecc71"
          ],
          data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5]
        }]
      }
    });
  //End of Doughnit chart
};

/*document.getElementById('randomizeData').addEventListener('click', function() {
  config.data.datasets.forEach(function(dataset) {
    dataset.data = randomData();
    dataset.value = randomValue(dataset.data);
  });

  window.myGauge.update();
});*/
    </script>
@endpush