<?php
	/* Info de librería de gráficos
	* https://www.chartjs.org/docs/latest/getting-started/
	*/
?>
<ul class="list-group">
  <li class="list-group-item">
    <?php
      $data['a'] = 'u';
      $data['ua'] = 'en';
      $this->load->view('ventas/navigation', $data);
    ?>
  </li>
  <li class="list-group-item">
    <canvas id="deliveries"></canvas>
  </li>
</ul>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/Chart.min.css">
<script src="<?php echo base_url(); ?>js/Chart.min.js"></script>

<?php
  foreach ($envios as $k => $meses) {
    foreach ($meses as $km => $v) {
      $labels[$km] = mtt($km);
    }
  }

?>

<script>
var ctxDeliveries = document.getElementById('deliveries').getContext('2d');
var chart = new Chart(ctxDeliveries, {
  // The type of chart we want to create
  type: 'bar',
  // The data for our dataset
  data: {
    grouped: true,
    labels: [<?php echo '"' .implode('", "', $labels).'"'; ?>],//fecha del día
    datasets: [
      <?php foreach($envios as $k => $meses) {
        ?>
        {
          label: '<?php echo $deliveries[$k]; ?>',
          backgroundColor: '<?php echo $transportistas[$k]['color']; ?>',
          borderColor: '<?php echo $transportistas[$k]['color']; ?>',
          data: [<?php echo implode(', ', $meses); ?>]//Total por día
        },
        <?php
      } ?>
    ]
  },

  // Configuration options go here
  options: {
    scales: {
      yAxes: [{
          ticks: {
              // Include a dollar sign in the ticks
              callback: function(value, index, values) {
                  return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
              }
          }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';

          if (label) {
            label += ': ';
          }
          label += tooltipItem.yLabel.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
            return label;
          }
        }
      }
    }
  });
</script>