CMS-CSE/core/class/chart.class.php

<?php

/**
 * Classe `chart`
 *
 * Cette classe fournit des outils pour générer des graphiques interactifs en utilisant la bibliothèque Chart.js.
 * Documentation officielle : https://www.chartjs.org/
 *
 * Fonctionnalités principales :
 * - Génération de différents types de graphiques (barres, lignes, secteurs, etc.).
 * - Gestion des données et des configurations pour les graphiques.
 * - Génération de scripts JavaScript pour intégrer les graphiques dans une page web.
 *
 * @package Core\Class
 */
class chart
{

    /**
     * Affiche un élément canvas HTML pour un graphique et génère le script JavaScript correspondant.
     *
     * @param array $_config Configuration du graphique (id, dimensions, type, données, etc.).
     * @return void
     */
    public static function printCanvas(array $_config)
    {
        $id = $_config["id"];
        $width = (isset($_config["width"])) ? $_config["width"] : 600;
        $height = (isset($_config["height"])) ? $_config["height"] : 400;

        if(!empty($_config["config"])){
            $_config["config"] = core::extractArrayInArray($_config["config"]);
        } else {
            $_config["config"] = NULL;
        }

        echo '<canvas id="' . $id . '" width="' . $width . '" height="' . $height . '" style="display: block; width: ' . $width . 'px; height: ' . $height . 'px;" class="chartjs-render-monitor"></canvas>';

        switch ($_config["charts"]) {
            case "doughnut":
                echo self::javascriptDoughnut($_config);
                break;
            case "bar":
                echo self::javascriptBar($_config);
                break;
            case "line":
                echo self::javascriptLine($_config);
                break;
            case "pie":
                echo self::javascriptPie($_config);
                break;
            default:
                break;
        }
    }

    /**
     * Construit les données nécessaires pour un graphique à partir des données fournies.
     *
     * @param array $_data Données brutes pour le graphique.
     * @param array|null $_config Configuration optionnelle des couleurs et styles.
     * @return array Données formatées pour le graphique.
     */
    private static function constructData(array $_data, ?array $_config = NULL)
    {
        $label = $nb = $backgroundColor = $borderColor = "";
        $nbData = count($_data);

        if(empty($_config["backgroundColor"])){
            $data["backgroundColor"] = array(
                "rgba(242, 84, 84, 0.6)",
                "rgba(242, 132, 84, 0.6)",
                "rgba(242, 179, 84, 0.6)",
                "rgba(242, 226, 84, 0.6)",
                "rgba(210, 242, 84, 0.6)",
                "rgba(163, 242, 84, 0.6)",
                "rgba(116, 242, 84, 0.6)",
                "rgba(84, 242, 100, 0.6)",
                "rgba(84, 242, 147, 0.6)",
                "rgba(84, 242, 195, 0.6)",
                "rgba(84, 242, 242, 0.6)",
                "rgba(84, 195, 242, 0.6)",
                "rgba(84, 147, 242, 0.6)",
                "rgba(84, 100, 242, 0.6)",
                "rgba(116, 84, 242, 0.6)",
                "rgba(163, 84, 242, 0.6)",
                "rgba(210, 84, 242, 0.6)",
                "rgba(242, 84, 226, 0.6)",
                "rgba(242, 84, 179, 0.6)",
                "rgba(242, 84, 132, 0.6)"
            );
        } else {
            $data["backgroundColor"] = $_config["backgroundColor"];
        }

        if(empty($_config["borderColor"])){
            $data["borderColor"] = array(
                "rgba(242, 84, 84, 1.0)",
                "rgba(242, 132, 84, 1.0)",
                "rgba(242, 179, 84, 1.0)",
                "rgba(242, 226, 84, 1.0)",
                "rgba(210, 242, 84, 1.0)",
                "rgba(163, 242, 84, 1.0)",
                "rgba(116, 242, 84, 1.0)",
                "rgba(84, 242, 100, 1.0)",
                "rgba(84, 242, 147, 1.0)",
                "rgba(84, 242, 195, 1.0)",
                "rgba(84, 242, 242, 1.0)",
                "rgba(84, 195, 242, 1.0)",
                "rgba(84, 147, 242, 1.0)",
                "rgba(84, 100, 242, 1.0)",
                "rgba(116, 84, 242, 1.0)",
                "rgba(163, 84, 242, 1.0)",
                "rgba(210, 84, 242, 1.0)",
                "rgba(242, 84, 226, 1.0)",
                "rgba(242, 84, 179, 1.0)",
                "rgba(242, 84, 132, 1.0)"
            );
        } else {
            $data["borderColor"] = $_config["borderColor"];
        }

        for ($i = 0; $i < $nbData; $i++) {
            $backgroundColor .= '"' . $data["backgroundColor"][$i] . '"';
            if ($i != $nbData) {
                $backgroundColor .= ", ";
            }
        }

        for ($i = 0; $i < $nbData; $i++) {
            $borderColor .= '"' . $data["borderColor"][$i] . '"';
            if ($i != $nbData) {
                $borderColor .= ", ";
            }
        }

        for ($i = 0; $i < $nbData; $i++) {
            $label .= ($_data[$i]["nb"] > 0) ? '"' . $_data[$i]["label"] . '"' : '"Aucun(e)s ' . $_data[$i]["label"] . '"';
            if ($i != $nbData) {
                $label .= ", ";
            }
        }

        for ($i = 0; $i < $nbData; $i++) {
            $nb .= '"' . $_data[$i]["nb"] . '"';
            if ($i != $nbData) {
                $nb .= ", ";
            }
        }

        return array("label" => $label, "nb" => $nb, "backgroundColor" => $backgroundColor, "borderColor" => $borderColor);
    }

    /**
     * Génère le script JavaScript pour un graphique de type "pie".
     *
     * @param array $_config Configuration du graphique.
     * @return string Script JavaScript pour le graphique.
     */
    private static function javascriptPie(array $_config)
    {

        $sort = self::constructData($_config["data"], $_config["config"]);

        return '<script>
                var ctx = document.getElementById("' . $_config["id"] . '");
                var myChart = new Chart(ctx, {
                    type: "pie",
                    data: {
                        labels: [' . $sort["label"] . '],
                        datasets: [{
                            label: "' . $_config["label"] . '",
                            data: [' . $sort["nb"] . '],
                            backgroundColor: [' . $sort["backgroundColor"] . '],
                            borderColor: [' . $sort["borderColor"] . '],
                            borderWidth: 1
                        }]
                    }
                });
            </script>';
    }

    /**
     * Génère le script JavaScript pour un graphique de type "doughnut".
     *
     * @param array $_config Configuration du graphique.
     * @return string Script JavaScript pour le graphique.
     */
    private static function javascriptDoughnut(array $_config)
    {

        $sort = self::constructData($_config["data"], $_config["config"]);

        return '<script>
                var ctx = document.getElementById("' . $_config["id"] . '");
                var myChart = new Chart(ctx, {
                    type: "doughnut",
                    data: {
                        labels: [' . $sort["label"] . '],
                        datasets: [{
                            label: "' . $_config["label"] . '",
                            data: [' . $sort["nb"] . '],
                            backgroundColor: [' . $sort["backgroundColor"] . '],
                            borderColor: [' . $sort["borderColor"] . '],
                            borderWidth: 1
                        }]
                    }
                });
            </script>';
    }

    /**
     * Génère le script JavaScript pour un graphique de type "bar".
     *
     * @param array $_config Configuration du graphique.
     * @return string Script JavaScript pour le graphique.
     */
    private static function javascriptBar(array $_config)
    {

        $sort = self::constructData($_config["data"], $_config["config"]);

        return '<script>
                var ctx = document.getElementById("' . $_config["id"] . '");
                var myChart = new Chart(ctx, {
                    type: "bar",
                    data: {
                        labels: [' . $sort["label"] . '],
                        datasets: [{
                            label: "' . $_config["label"] . '",
                            data: [' . $sort["nb"] . '],
                            backgroundColor: [' . $sort["backgroundColor"] . '],
                            borderColor: [' . $sort["borderColor"] . '],
                            borderWidth: 1
                        }]
                    }
                });
            </script>';
    }

    /**
     * Construit les données nécessaires pour un graphique de type "line".
     *
     * @param array $_data Données brutes pour le graphique.
     * @return array Données formatées pour le graphique.
     */
    private static function constructDataLine(array $_data)
    {
        $return["labels"] = $return["data"] = NULL;
        foreach ($_data[0] as $key => $value) {
            $return["labels"] .= '"' . $key . '", ';
            $return["data"] .= $value . ', ';
        }
        return $return;
    }

    /**
     * Génère le script JavaScript pour un graphique de type "line".
     *
     * @param array $_config Configuration du graphique.
     * @return string Script JavaScript pour le graphique.
     */
    private static function javascriptLine(array $_config)
    {

        $sort = self::constructDataLine($_config["data"]);

        return '<script>
                var ctx = document.getElementById("' . $_config["id"] . '");
                var myChart = new Chart(ctx, {
                    type: "line",
                    data: {
                            "labels":[' . $sort["labels"] . '],
                            datasets: [{
                                "label":"' . $_config["label"] . '", 
                                "data":[' . $sort["data"] . '], 
                                "fill":false, 
                                "borderColor":"rgb(75, 192, 192)", 
                                "lineTension":0.1
                            }],
                            "options":{}
                    }
                });
            </script>';
    }

}