<?php
$bctab2 = '<table style="text-align:right;">
<thead><tr><td colspan="4" style="text-align:center;">'.FDIR_STATS_PROP7.'<br>'.FROM2.' '.$affday1.' '.TO2.' '.$affday2.'</td></tr><tr><th></th><th>'.NUMBER.'</th><th>'.ON2.'</th><th>%</th></tr></thead><tbody>';
$tabNbPerDiv = array();
$tabPropPerDiv = array();
$liste_division = mysqli_query($bdd,"SELECT division FROM ".$prefix."_eleves GROUP BY division ORDER BY division ASC");
foreach($liste_division as $listediv) {
	$nbeleves_div = mysqli_query($bdd,"SELECT DISTINCT freq.eleves_id FROM ".$prefix."_freq freq WHERE date_freq >= '".$day1."' AND date_freq <= '".$day2."' AND division = '".$listediv['division']."' ".$filtre_activs."");
	$nbeleves = mysqli_num_rows($nbeleves_div);
	$elediv = mysqli_num_rows(mysqli_query($bdd,"SELECT eleves_id FROM ".$prefix."_eleves WHERE division = '".$listediv['division']."'"));
	array_push($tabNbPerDiv, $nbeleves);
	if($elediv!='0') {
       $prop = round(($nbeleves * 100 / $elediv),2);
    }
    else {
        $prop = 0;
    }
	if($prop>100) { $prop = 100; }
	array_push($tabPropPerDiv, $prop);
    $bctab2 .= '<tr><td>'.$listediv['division'].'</td><td>'.$nbeleves.'</td><td>'.$elediv.'</td><td>'.number_format((float)$prop,2,'.','').'</td></tr>';
}
$bctab2 .= '</tbody></table>';
?>
<div id="wrapper" class="statcadre">
<canvas id="chart_propperdiv" class="charts" width="600" height="300"></canvas>
</div>
<script type="text/javascript">
(async function() {
    
    Chart.register(ChartDataLabels);
    const labels = <?php echo json_encode($tabDivisions); ?>;
    const data = {
      labels: labels,
      datasets: [{
            data: <?php echo json_encode($tabPropPerDiv); ?>,
            backgroundColor: <?php echo json_encode($tabDivColors); ?>,
            borderColor: <?php echo json_encode($tabDivColors); ?>,
            borderWidth: 1
        }]
    };
new Chart(
    document.getElementById('chart_propperdiv'),
    {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: "<?php echo FDIR_STATS_PROP8; ?> (%)"
            },
            legend: {
                display:false
            },
            tooltip : {
                mode: 'point',
                intersect: false,
              }  ,    
            datalabels: {
              display: true, // Affiche les étiquettes de données
              formatter: function(value, context) {
                    return value + ' %'; // Ajoute le symbole "%" après la valeur
                },
              color: '#878787', // Couleur du texte
              align: 'center', // Alignement horizontal
              anchor: 'center', // Alignement vertical
              rotation: -90,
              font: {
                weight: 'bold', // Style de police
              },
              display: function(context) {
                  return context.dataset.data[context.dataIndex] !== 0; // N'affiche pas si la valeur est égale à 0
                },
            },
        },
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
      }
    }
);
})();
</script>
<?php
echo '<br> <br>'.$bctab2;   
$_SESSION['bctabs'] .= $bctab2;
?>