📊 TLD - tld_chart - Composant de Graphiques

📖 Introduction

tld_chart est un Web Component permettant d'afficher des graphiques interactifs à l'aide de Chart.js.
Il supporte plusieurs types de graphiques et permet une personnalisation avancée des options, couleurs et plugins.

---

⚡️ Installation / Prérequis

📦 Dépendances

Le composant repose sur Chart.js, assurez-vous de l'installer :

npm install chart.js

Ajoutez également le fichier CSS pour le style du composant :

<link rel="stylesheet" href="4_index.css">

---

🚀 Utilisation

🔹 Intégration dans une page HTML

Ajoutez simplement le composant dans le HTML :

<tld-chart></tld-chart>

Ou en JavaScript :

const chartElement = document.createElement("tld-chart");
document.body.appendChild(chartElement);

🔹 Définition des Données

Les données et options du graphique peuvent être définies dynamiquement :

chartElement.data = {
    labels: ["Janvier", "Février", "Mars"],
    datasets: [{
        label: "Ventes",
        data: [10, 20, 30],
        borderColor: "blue",
        backgroundColor: "rgba(0, 0, 255, 0.5)"
    }]
};

chartElement.options = {
    responsive: true,
    maintainAspectRatio: false
};

// Appliquer les changements
chartElement.postRender();

---

🎨 Style CSS

Ajoutez ce fichier CSS (4_index.css) pour assurer l'affichage correct du composant :

tld-chart {
    display: block;
    height: 100%;
    width: 100%;
}

tld-chart canvas {
    height: 100%;
    width: 100%;
}

---

📌 Détails du Code

🏗️ Définition de la Classe

class tld_chart extends tld_custom_elements {
    private _type: Chart.ChartType;
    private _data: Chart.ChartData;
    private _options: Chart.ChartOptions;
    private _plugins: any[];
    private _colors: {
        borderColor: string[];
        backgroundColor: string[];
        fontColor: string[];
    };
    private _ctx: CanvasRenderingContext2D;
    private _Chart: Chart | null;

    constructor(Attributes: { [name: string]: any } = null) {
        super(Attributes);
        this._type = "line";
        this._plugins = [];
        this._options = { maintainAspectRatio: false };
        this._colors = {
            borderColor: ['rgb(54, 162, 235)', 'rgb(255, 99, 132)'],
            backgroundColor: ['rgba(54, 162, 235,0.5)', 'rgba(255, 99, 132,0.5)'],
            fontColor: ["#000000", "#FFFFFF"]
        };
    }
}

---

🎨 Méthodes Clés

🔄 render()

Crée l'élément <canvas> et initialise le contexte graphique.

render() {
    this.innerHTML = "<canvas></canvas>";
    this.ctx = this.querySelector("canvas")?.getContext("2d");
    this.dispatchEvent(new Event("build"));
}

📊 postRender()

Construit le graphique à partir des options et données.

postRender() {
    this._Chart?.destroy();
    this._Chart = new Chart(this.querySelector("canvas"), {
        type: this._type,
        data: { ...this._data },
        options: { ...this._options },
        plugins: [...this._plugins]
    });
}

🎨 setInteractionMode(mode)

Active l’interaction avec l’axe x et y.

setInteractionMode(mode = "point") {
    this.options["interaction"] = { axis: "xy", mode: "index" };
}

---

📚 Exemples et Cas Pratiques

📌 Création d'un Graphique en Barre

const barChart = document.createElement("tld-chart");
barChart.type = "bar";
barChart.data = {
    labels: ["Produit A", "Produit B", "Produit C"],
    datasets: [{
        label: "Ventes",
        data: [50, 75, 100],
        backgroundColor: ["red", "blue", "green"]
    }]
};
document.body.appendChild(barChart);
barChart.postRender();

📌 Ajout d'une Animation

barChart.options.animation = {
    duration: 1000,
    easing: "easeInOutBounce"
};
barChart.postRender();

📌 Ajout d'un Mode d'Interaction

barChart.setInteractionMode("index");
barChart.postRender();

---

🎯 Conclusion

tld_chart est un composant puissant et facile à utiliser pour afficher des graphiques interactifs dans vos applications Web.
Il s'intègre facilement avec Chart.js et permet une personnalisation avancée.