From c16c928c6111136c2cc98579dd548e6b428ed97a Mon Sep 17 00:00:00 2001 From: salimM21 Date: Sun, 7 Sep 2025 11:20:08 +0100 Subject: [PATCH] dashbord+admin --- frontend/admin.html | 556 ++++++++++------------------------------ frontend/dashboard.html | 535 ++++++++++++++++++++++++++++++-------- frontend/test.html | 435 ------------------------------- 3 files changed, 563 insertions(+), 963 deletions(-) diff --git a/frontend/admin.html b/frontend/admin.html index 99e387f83..227822796 100644 --- a/frontend/admin.html +++ b/frontend/admin.html @@ -3,433 +3,159 @@ - Tableau de bord - Détection Diabète + + Admin - Gestion Utilisateurs - -
-

Mon Tableau de Bord

- -
- -
-

Historique de mes prédictions

- - -
- - - - - - - - - - - -
- - - - - - - - - - - - - -
Date ⬍Âge ⬍FCVCRésultatProbabilité
- - - -
- - - - - - - - - - - - - - - - + // Initialiser la table + renderTable(); + + + \ No newline at end of file diff --git a/frontend/dashboard.html b/frontend/dashboard.html index 1da64b622..99e387f83 100644 --- a/frontend/dashboard.html +++ b/frontend/dashboard.html @@ -2,125 +2,434 @@ - - Tableau de bord - Détection Diabète - + + Tableau de bord - Détection Diabète + - -
-

Mon Tableau de Bord

- -
- -
-

Historique de mes prédictions

- - - - - - - - - - - - - -
DateÂgeFCVCRésultatProbabilité
- - -
-

📊 Statistiques

- - -
-
- - - - - + + - + tableBody.appendChild(tr); + }); + } + + // Initialisation du tableau + renderHistory(); + + // ============================ + // 3️⃣ Graphiques + // ============================ + + // 3.1 Répartition des résultats + function renderResultsChart() { + const counts = predictions.reduce((acc, p) => { + acc[p.result] = (acc[p.result] || 0) + 1; + return acc; + }, {}); + + new Chart(document.getElementById("chartResults"), { + type: "pie", + data: { + labels: Object.keys(counts), + datasets: [{ + data: Object.values(counts), + backgroundColor: ["#4CAF50", "#FF9800", "#F44336"] + }] + }, + options: { + plugins: { + title: { display: true, text: "Répartition des Résultats" } + } + } + }); + } + + // 3.2 Probabilités dans le temps + function renderProbabilitiesChart() { + new Chart(document.getElementById("chartProbabilities"), { + type: "line", + data: { + labels: predictions.map(p => p.date), + datasets: [{ + label: "Probabilité prédite", + data: predictions.map(p => (p.probability * 100).toFixed(1)), + borderColor: "#2196F3", + fill: false, + tension: 0.2 + }] + }, + options: { + plugins: { + title: { display: true, text: "Évolution des Probabilités (%)" } + }, + scales: { y: { min: 0, max: 100 } } + } + }); + } + + // Rendu initial des graphiques + renderResultsChart(); + renderProbabilitiesChart(); + + // ============================ + // 4️⃣ Bouton statistiques + // ============================ + const btnShowStats = document.getElementById("btnShowStats"); + const chartsSection = document.getElementById("charts"); + const tableSection = document.getElementById("tableSection"); + + btnShowStats.addEventListener("click", () => { + // Vérifie si les statistiques sont cachées + const isChartsHidden = chartsSection.style.display === "none" || chartsSection.style.display === ""; + + // Toggle affichage + chartsSection.style.display = isChartsHidden ? "block" : "none"; + tableSection.style.display = isChartsHidden ? "none" : "block"; + + // Changer le texte du bouton + btnShowStats.textContent = isChartsHidden ? "⬅ Retour au tableau" : "📊 Statistiques"; + + // Scroll vers la section visible + const targetSection = isChartsHidden ? chartsSection : tableSection; + targetSection.scrollIntoView({ behavior: "smooth" }); + }); + + + // ============================ + // 5️⃣ Mode sombre + // ============================ + const toggleBtn = document.getElementById("darkModeToggle"); + toggleBtn.addEventListener("click", () => { + document.body.classList.toggle("dark"); + toggleBtn.textContent = document.body.classList.contains("dark") ? "☀️ Mode clair" : "🌙 Mode sombre"; + }); + + + + + + + + + + - + \ No newline at end of file diff --git a/frontend/test.html b/frontend/test.html index 99e387f83..e69de29bb 100644 --- a/frontend/test.html +++ b/frontend/test.html @@ -1,435 +0,0 @@ - - - - - - Tableau de bord - Détection Diabète - - - - - - -
-

Mon Tableau de Bord

- -
- -
-

Historique de mes prédictions

- - -
- - - - - - - - - - - -
- - - - - - - - - - - - - -
Date ⬍Âge ⬍FCVCRésultatProbabilité
- - - -
- - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file