134 lines
3.7 KiB
HTML
134 lines
3.7 KiB
HTML
<!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> |