<?php

add_shortcode('camp-boxplot', 'camp_boxplot');

function camp_boxplot($id) {
    global $wpdb;
        
    $table = $wpdb->base_prefix . 'bsx_stx';

    $id = get_queried_object_id();
    
    $kp = $wpdb->get_results($wpdb->prepare(
         "SELECT per, ord, min, q1, median, q3, max, dd
          from {$table} where camp_id = %d group by camp_id,per,ord order by ord",
         [$id]));

    $apx = [];
    foreach($kp as $cat) {
        $apx[] = array(
            'x'=>$cat->per,
            'y'=>array(
                round(100*(float)$cat->min,2),
                round(100*(float)$cat->q1,2),
                round(100*(float)$cat->median,2),
                round(100*(float)$cat->q3,2),
                round(100*(float)$cat->max,2)
            )
        );
    }


    wp_enqueue_script(
        'apexcharts',
        'https://cdn.jsdelivr.net/npm/apexcharts@3.45.1/dist/apexcharts.min.js',
        [],
        '3.45.1',
        true
    );
    
    $chart_id = 'chart-bp-camp' . uniqid();

    ob_start();
    ?>
    <div id=<?php echo esc_attr($chart_id); ?> style="width: 100%;"></div>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var options = {
            annotations:{
                yaxis: [{
                    y:0
                }]
            },
            chart: {
                id: '<?php echo esc_js($chart_id); ?>',
                type: "boxPlot",
                height: 350,
            },
            yaxis: {
                min: (min) => Math.min(-5, Math.floor(min / 5) * 5),
                max: (max) => Math.max(10, Math.ceil(max / 5) * 5),
                tickAmount: 6,
                labels: {
                    formatter: (val) => `${Math.round(val)}%`
                }
            },
            tooltip:{
                theme: 'dark'
            },
            series: [{
                    data: <?php echo wp_json_encode($apx); ?>
            }]
        };
        var chart = new ApexCharts(
            document.querySelector("#<?php echo esc_js($chart_id); ?>"), 
            options
        );
        chart.render();
    });
    </script>
    <?php
    return ob_get_clean();

}