<?php include 'layouts/session.php'; ?>
<?php include 'layouts/main.php'; ?>

<head>

    <?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'Apex Bar Charts')); ?>

    <?php 
        include 'layouts/head-css.php'; 

        // pourcentage par tranche d'age...
        $h_50p=1;
        $h_40_50=2;
        $h_30_40=5;
        $h_20_30=8;
        $h_16_20=6;
        $age_hommes = [$h_50p,$h_40_50,$h_30_40,$h_20_30,$h_16_20];

        $f_50p=-0;
        $f_40_50=-6;
        $f_30_40=-2;
        $f_20_30=-9;
        $f_16_20=-2;
        $age_femmes = [$f_50p,$f_40_50,$f_30_40,$f_20_30,$f_16_20];
    ?>

</head>

<body>

    <!-- Begin page -->
    <div id="layout-wrapper">

        <?php include 'layouts/menu.php'; ?>

        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">

            <div class="page-content">
                <div class="container-fluid">

                    <?php includeFileWithVariables('layouts/page-title.php', array('pagetitle' => 'Apexcharts', 'title' => 'Bar Charts')); ?>

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Basic Bar Chart</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="bar_chart" data-colors='["--vz-success"]' class="apex-charts" dir="ltr"></div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Custom DataLabels Bar</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="custom_datalabels_bar" data-colors='["--vz-primary", "--vz-secondary", "--vz-success", "--vz-info", "--vz-warning", "--vz-danger", "--vz-dark", "--vz-primary", "--vz-success", "--vz-secondary"]' class="apex-charts" dir="ltr"></div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Stacked Bar Charts</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="stacked_bar" data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]' class="apex-charts" dir="ltr"></div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Stacked Bars 100</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="stacked_bar_100" data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]' class="apex-charts" dir="ltr"></div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Bar with Negative Values</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="negative_barsX" data-colors='["--vz-primary", "--vz-success"]' class="apex-charts" dir="ltr"></div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Bar with Markers</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="bar_markers" data-colors='["--vz-success", "--vz-primary"]' class="apex-charts" dir="ltr"></div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Reversed Bar Chart</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="reversed_bars" data-colors='["--vz-info"]' class="apex-charts" dir="ltr"></div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Patterned Chart</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="patterned_bars" data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger"]' class="apex-charts" dir="ltr"></div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Grouped Bar Chart</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="grouped_bar" data-colors='["--vz-primary", "--vz-success"]' class="apex-charts" dir="ltr"></div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Bar with Images</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div class="live-preview">
                                        <div id="bar_images" class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->

                </div>
                <!-- container-fluid -->
            </div>
            <!-- End Page-content -->

            <?php include 'layouts/footer.php'; ?>
        </div>
        <!-- end main content-->

    </div>
    <!-- END layout-wrapper -->



    <?php include 'layouts/customizer.php'; ?>

    <?php include 'layouts/vendor-scripts.php'; ?>

    <!-- apexcharts -->
    <script src="assets/libs/apexcharts/apexcharts.min.js"></script>

    <!-- barcharts init -->
    <script src="assets/js/pages/apexcharts-bar.init.js"></script>

    <!-- App js -->
    <script src="assets/js/app.js"></script>

    <!-- SCRIPTS APEX -->
    <script>
        // Bar with Negative Values
        // dynamic data
        const ages_hommes = <?php echo json_encode($age_hommes); ?>;
        const ages_femmes = <?php echo json_encode($age_femmes); ?>;

        var chartNegativeBarColors = getChartColorsArray("negative_barsX");
        if(chartNegativeBarColors){
        var options = {
            series: [{
                    name: 'Hommes',
                    data: ages_hommes
                },
                {
                    name: 'Femmes',
                    data: ages_femmes
                }
            ],
            chart: {
                type: 'bar',
                height: 360,
                stacked: true,
                toolbar: {
                    show: false,
                }
            },
            colors: chartNegativeBarColors,
            plotOptions: {
                bar: {
                    horizontal: true,
                    barHeight: '80%',
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: 1,
                colors: ["#fff"]
            },

            grid: {
                xaxis: {
                    lines: {
                        show: false
                    }
                }
            },
            yaxis: {
                min: -10,
                max: 10,
                title: {
                    text: 'Age',
                    style: {
                        fontWeight: 500,
                    },
                },
            },
            tooltip: {
                shared: false,
                x: {
                    formatter: function (val) {
                        return val
                    }
                },
                y: {
                    formatter: function (val) {
                        return Math.abs(val) + "%"
                    }
                }
            },
            title: {
                text: 'Pyramide des ages Schuller Metal',
                style: {
                    fontWeight: 500,
                },
            },
            xaxis: {
                categories: ['50+', '40-50', '30-40', '20-30', '16-20'],
                title: {
                    text: 'Pourcentage'
                },
                labels: {
                    formatter: function (val) {
                        return Math.abs(Math.round(val)) + "%"
                    }
                }
            },
        };

        var chart = new ApexCharts(document.querySelector("#negative_barsX"), options);
        chart.render();
        }
    </script>
</body>

</html>