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

<head>

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

    <?php include 'layouts/head-css.php'; 
        // LINE CHART
        $labels=["Janvier", "Fevrier", "Mars"];
        $ventes=[1230, 7903, 3453];
        $charges=[2356, 5433, 1234];

        // LINE BAR
        $labels_bar=["Janvier", "Fevrier", "Mars"];
        $ventes_bar=[123,453,345];

        // PIE CHART
        $labels_pie=["CDI", "CDD", "STAGE"];
        $nb_contrat=[145,432,98];

        // DONUT CHART
        $labels_donut=["MOBILE", "DESKTOP"];
        $devices=[14,9];

        // POLAR CHART
        $labels_polar=["INDIC 1", "INDIC 2", "INDIC 3", "INDIC 4"];
        $data_polar=[14,9,4,20];

        // RADAR CHART
        $labels_radar=["AXE 1", "AXE 2", "AXE 3", "AXE 4", "AXE 5"];
        $data_radar_ind1=[90,15,12,45,23];
        $data_radar_ind2=[40,65,80,30,19];

        $age_hommes = [29,24,23,18,22,53,35,45,34];
        $age_femmes = [19,54,33,28,20,33,27,25,18];


        // APEX NEGATIVE BAR

    
    ?>

</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">
                    <div class="row">
                            <div class="col-xl-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title mb-0">Line Chart</h4>
                                    </div>
                                    <div class="card-body">
                                        <canvas id="lineChartX" class="chartjs-chart" data-colors='["--vz-primary-rgb, 0.2", "--vz-primary", "--vz-success-rgb, 0.2", "--vz-success"]'></canvas>
                                    </div>
                                </div>
                            </div> <!-- end col -->
                            <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Bar Chart</h4>
                                </div>
                                <div class="card-body">
                                    <canvas id="barX" class="chartjs-chart" data-colors='["--vz-primary-rgb, 0.8", "--vz-primary-rgb, 0.9"]'></canvas>
                                </div>
                            </div>
                        </div> <!-- end col -->
                    </div>
                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Pie Chart</h4>
                                </div>
                                <div class="card-body">
                                    <canvas id="pieChartC" class="chartjs-chart" data-colors='["--vz-success", "--vz-light", "--vz-primary"]'></canvas>
                                </div>
                            </div>
                        </div> <!-- end col -->

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Donut Chart</h4>
                                </div>
                                <div class="card-body">
                                    <canvas id="doughnutC" class="chartjs-chart" data-colors='["--vz-primary", "--vz-light"]'></canvas>
                                </div>
                            </div>
                        </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">Polar Chart</h4>
                                </div>
                                <div class="card-body">
                                    <canvas id="polarAreaX" class="chartjs-chart" data-colors='["--vz-danger", "--vz-success", "--vz-warning", "--vz-primary"]'> </canvas>
                                </div>
                            </div>
                        </div> <!-- end col -->

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Radar Chart</h4>
                                </div>
                                <div class="card-body">
                                    <canvas id="radarX" class="chartjs-chart" data-colors='["--vz-success-rgb, 0.2", "--vz-success", "--vz-primary-rgb, 0.2", "--vz-primary"]'></canvas>
                                </div>
                            </div>
                        </div> <!-- end col -->
                    </div> <!-- end row -->
                </div>
            </div>
        </div>
    </div>
    
    
    <?php include 'layouts/vendor-scripts.php'; ?>

    <!-- Chart JS -->
    <script src="assets/libs/chart.js/chart.umd.js"></script>

    <!-- chartjs init -->
    <script src="assets/js/pages/chartjs.init.js"></script>

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

    <!-- JS LINE CHART -->
    <script>
        // line chart
        // dynamics data
        const lab = <?php echo json_encode($labels);?>;
        const ventes = <?php echo json_encode($ventes);?>;
        const charges = <?php echo json_encode($charges);?>;

        var islinechartX = document.getElementById('lineChartX');
        lineChartColor =  getChartColorsArray('lineChartX');
        if(lineChartColor){
        islinechartX.setAttribute("width", islinechartX.parentElement.offsetWidth);

        var lineChartV = new Chart(islinechartX, {
            type: 'line',
            data: {
                labels: lab,
                datasets: [
                    {
                        label: "Ventes",
                        fill: true,
                        lineTension: 0.5,
                        backgroundColor: lineChartColor[0],
                        borderColor: lineChartColor[1],
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: lineChartColor[1],
                        pointBackgroundColor: "#fff",
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: lineChartColor[1],
                        pointHoverBorderColor: "#fff",
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: ventes
                    },
                    {
                        label: "Charges",
                        fill: true,
                        lineTension: 0.5,
                        backgroundColor: lineChartColor[2],
                        borderColor: lineChartColor[3],
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: lineChartColor[3],
                        pointBackgroundColor: "#fff",
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: lineChartColor[3],
                        pointHoverBorderColor: "#eef0f2",
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: charges
                    }
                ]
            },
            options: {
                x: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                y: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                plugins: {
                    legend: {
                        labels: {
                            // This more specific font property overrides the global property
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                },
            },
            
        });
        }

        // bar chart
        // dynamics data
        const lab_bar = <?php echo json_encode($labels_bar);?>;
        const ventes_bar = <?php echo json_encode($ventes_bar);?>;

        var isbarchart = document.getElementById('barX');
        barChartColor =  getChartColorsArray('barX');
        if(barChartColor){
        isbarchart.setAttribute("width", isbarchart.parentElement.offsetWidth);
        var barChart = new Chart(isbarchart, {
            type: 'bar',
            data: {
                labels: lab_bar,
                datasets: [
                    {
                        label: "Ventes",
                        backgroundColor: barChartColor[0],
                        borderColor: barChartColor[0],
                        borderWidth: 1,
                        hoverBackgroundColor: barChartColor[1],
                        hoverBorderColor: barChartColor[1],
                        data: ventes_bar
                    }
                ]
            },
            options: {
                x: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                y: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                plugins: {
                    legend: {
                        labels: {
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                }
            }
        });
        }

        // Pie chart
        // dynamic data
        const lab_pie = <?php echo json_encode($labels_pie);?>;
        const contrats = <?php echo json_encode($nb_contrat);?>;

        var ispiechartC = document.getElementById('pieChartC');
        pieChartColors =  getChartColorsArray('pieChartC');
        if(pieChartColors){

        var pieChartC = new Chart(ispiechartC, {
            type: 'pie',
            data: {
                labels: lab_pie,
                datasets: [
                    {
                        data: contrats,
                        backgroundColor: pieChartColors,
                        hoverBackgroundColor: pieChartColors,
                        hoverBorderColor: "#fff"
                    }]
            },
            options: {
                plugins: {
                    legend: {
                        labels: {
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                }
            }
        });
        }

        // Doughnut chart
        // dynamic data
        const lab_donut = <?php echo json_encode($labels_donut);?>;
        const nb_devices = <?php echo json_encode($devices);?>;

        var isdoughnutchart = document.getElementById('doughnutC');
        doughnutChartColors =  getChartColorsArray('doughnutC');
        if(doughnutChartColors){
        var lineChart = new Chart(isdoughnutchart, {
            type: 'doughnut',
            data: {
                labels: lab_donut,
                datasets: [
                    {
                        data: nb_devices,
                        backgroundColor: doughnutChartColors,
                        hoverBackgroundColor: doughnutChartColors,
                        hoverBorderColor: "#fff"
                    }]
            },
            options: {
                plugins: {
                    legend: {
                        labels: {
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                }
            }
        });
        }

         // polarArea chart
         // dynamic data
         const lab_polar = <?php echo json_encode($labels_polar);?>;
         const data_polar = <?php echo json_encode($data_polar);?>;

        var ispolarAreachart = document.getElementById('polarAreaX');
        polarAreaChartColors =  getChartColorsArray('polarAreaX');
        if(polarAreaChartColors){
        var lineChart = new Chart(ispolarAreachart, {
            type: 'polarArea',
            data: {
                labels: lab_polar,
                datasets: [{
                    data: data_polar,
                    backgroundColor: polarAreaChartColors,
                    label: 'Ventes', // for legend
                    hoverBorderColor: "#fff"
                }]
            },
            options: {
                plugins: {
                    legend: {
                        labels: {
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                }
            }
        });
        }

        // radar chart
         // dynamic data
         const lab_radar = <?php echo json_encode($labels_radar);?>;
         const data_radar_ind1 = <?php echo json_encode($data_radar_ind1);?>;
         const data_radar_ind2 = <?php echo json_encode($data_radar_ind2);?>;

        var isradarchart = document.getElementById('radarX');
        radarChartColors =  getChartColorsArray('radarX');
        if(radarChartColors){
        var lineChart = new Chart(isradarchart, {
            type: 'radar',
            data: {
                labels: lab_radar,
                datasets: [
                    {
                        label: "INDICATEUR 1",
                        backgroundColor: radarChartColors[0], //"rgba(42, 181, 125, 0.2)",
                        borderColor: radarChartColors[1], //"#2ab57d",
                        pointBackgroundColor: radarChartColors[1], //"#2ab57d",
                        pointBorderColor: "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: radarChartColors[1], //"#2ab57d",
                        data: data_radar_ind1
                    },
                    {
                        label: "INDICATEUR 2",
                        backgroundColor: radarChartColors[2], //"rgba(81, 86, 190, 0.2)",
                        borderColor: radarChartColors[3], //"#5156be",
                        pointBackgroundColor: radarChartColors[3], //"#5156be",
                        pointBorderColor: "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: radarChartColors[3], //"#5156be",
                        data: data_radar_ind2
                    }
                ]
            },
            options: {
                plugins: {
                    legend: {
                        labels: {
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                }
            }
        });
        }

    </script>

</body>
</html>