TP valarcher web ajout

2025-10-23 14:33:07 +02:00
parent aad59ad10d
commit 801baf7950
12 changed files with 839 additions and 0 deletions
--- a/TP_valarcher/projet/index.html
+++ b/TP_valarcher/projet/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Mon Dashboard</title>
+<link rel="stylesheet" href="style.css" />
+<!-- Chart.js pour créer les graphiques -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+
+<!--  En-tête  -->
+<header class="tete">
+    <h1>Mon Dashboard</h1>
+
+    <!-- Barre de recherche -->
+    <form class="search" action="#" role="search">
+        <input type="search" placeholder="Rechercher…" />
+    </form>
+
+</header>
+
+<!--  Mise en page principale  -->
+<main class="layout">
+    <!-- Menu latéral gauche -->
+    <aside class="sidebar">
+        <nav class="menu">
+            <a href="#" class="btn active">Accueil</a>
+            <a href="#" class="btn">Statistiques</a>
+            <a href="#" class="btn">Utilisateurs</a>
+            <a href="#" class="btn">Paramètres</a>
+        </nav>
+    </aside>
+
+    <!-- Zone principale du contenu -->
+    <section class="content">
+        <div class="dashboard">
+
+            <!--  Carte Courbe (graphique en ligne)  -->
+            <div class="card card-line">
+                <canvas id="lineChart"></canvas>
+            </div>
+
+            <!--  Carte Histogramme  -->
+            <div class="card card-histo">
+                <canvas id="histogramme"></canvas>
+            </div>
+
+            <!--  Carte Barres (graphique en barres principal)  -->
+            <div class="card card-bars">
+                <canvas id="barChart"></canvas>
+            </div>
+
+            <!--  Carte Camembert  -->
+            <div class="card card-pie">
+                <canvas id="camembert"></canvas>
+            </div>
+
+        </div>
+    </section>
+</main>
+
+<!--  Scripts pour les graphiques  -->
+<script>
+    //  Graphique en ligne (courbe) 
+    const ctxLine = document.getElementById('lineChart');
+    new Chart(ctxLine, {
+        type: 'line',
+        data: {
+            labels: ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'], // jours de la semaine
+            datasets: [{
+                label: 'Visites',
+                data: [12, 19, 15, 22, 30, 25, 18], // données fictives
+                fill: false,
+                borderColor: '#3b82f6',
+                tension: 0.2
+            }]
+        },
+        options: {
+            scales: { y: { beginAtZero: true } }
+        }
+    });
+
+    //  Histogramme 
+    const ctxBar = document.getElementById('histogramme');
+    new Chart(ctxBar, {
+        type: 'bar',
+        data: {
+            labels: ['Jan','Fév','Mar','Avr'], // mois
+            datasets: [{
+                label: 'Ventes',
+                data: [12,19,8,15], // données fictives
+                backgroundColor: '#3b82f6'
+            }]
+        },
+        options: {
+            scales: { y: { beginAtZero: true } }
+        }
+    });
+
+    //  Graphique en barres principal 
+    const ctxBarMain = document.getElementById('barChart');
+    new Chart(ctxBarMain, {
+        type: 'bar',
+        data: {
+            labels: ['Q1','Q2','Q3','Q4'], // trimestres
+            datasets: [{
+                label: 'Revenus',
+                data: [5000, 7000, 4000, 9000], // données fictives
+                backgroundColor: '#f97316'
+            }]
+        },
+        options: {
+            scales: { y: { beginAtZero: true } }
+        }
+    });
+
+    //  Camembert 
+    const ctxPie = document.getElementById('camembert');
+    new Chart(ctxPie, {
+        type: 'pie',
+        data: {
+            labels: ['Cat A','Cat B','Cat C'], // catégories
+            datasets: [{
+                data: [40, 35, 25], // données fictives
+                backgroundColor: ['#3b82f6','#f97316','#10b981']
+            }]
+        }
+    });
+</script>
+
+</body>
+</html>