<div>
    <div class="row">
        <div class="col-md-6">
            <canvas id="ChartSalaryType"></canvas>
        </div>
        <div class="col-md-6">
            <canvas id="ChartAgeUsers"></canvas>
        </div>
    </div>
</div>

@push('chart')
<script src="{{asset('assets/js/chart/chartjs/chart.js')}}"></script>
<script>
const labelsSalaryType = [
    'Fijo',
    'Integral',
    'Parcial',
];

const dataSalaryType = {
    labels: labelsSalaryType,
    datasets: [{
        label: 'Tipos de Salarios',
        backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)'
        ],
    data: <?php echo $salary_type; ?>
    }]
};

const configSalaryType = {
    type: 'pie',
    data: dataSalaryType,
    options: {
        responsive: true,
        plugins:{
            legend:{
                position: 'top',
            },
            title:{
                display:true,
                text: 'Tipos de Salarios'
            }
        }
    }
};
const ChartSalaryType = new Chart(
    document.getElementById('ChartSalaryType'),
    configSalaryType
);

/*******/
const dataAgeUsers = {
  labels: ['0-17','18-25', '26-35', '36-45', '46-55', '56-65', '66+'],
  datasets: [{
    label: 'Edad de los Empleados',
    data: <?php echo $age_users; ?>,
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
};

const configAgeUsers = {
  type: 'bar',
  data: dataAgeUsers,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

const ChartAgeUsers = new Chart(
    document.getElementById('ChartAgeUsers'),
    configAgeUsers
);
</script>
@endpush
