Bootstrap
Card
Chart
Graphique
Html
Widget Bootstrap de carte avec graphique circulaire (donut chart) pour visualiser des statistiques.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carte Graphique Circulaire Commandes | AngularForAll</title>
<!-- Bootstrap 4 & Font Awesome -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
body {
background-color: #f8f9fc;
padding: 30px;
font-family: 'Inter', sans-serif;
color: #333;
}
/* Style général de la carte */
.progress-circle-card {
border: none;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
background: #fff;
overflow: hidden;
text-align: center; /* Centre le contenu de la carte */
}
.progress-circle-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.card-header-circle {
background-color: #fcfcfd;
border-bottom: 1px solid #e9ecef;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: center; /* Centre le titre */
}
.card-header-circle h3 {
font-size: 1rem;
font-weight: 700;
color: #343a40;
margin: 0;
}
.card-body-circle {
padding: 1.25rem;
display: flex;
flex-direction: column;
align-items: center; /* Centre les éléments dans le body */
}
/* Conteneur du graphique circulaire */
.circular-chart-container {
position: relative;
width: 150px; /* Taille du cercle */
height: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05); /* Une légère bordure interne pour le style */
}
/* Le graphique en camembert (utilisant conic-gradient) */
.circular-chart {
width: 100%;
height: 100%;
border-radius: 50%;
/* Calcul des pourcentages: 1 créée, 1 en attente, 1 validée sur un total de 3 */
/* Chaque section fait 33.33% du cercle, soit 120 degrés */
background: conic-gradient(
#4e73df 0% 33.33%,
/* Créées (Bleu) */ #f6c23e 33.33% 66.66%,
/* En attente (Jaune/Orange) */ #1cc88a 66.66% 100% /* Validées (Vert) */
);
}
/* Cercle central pour afficher le total */
.center-circle {
position: absolute;
width: 110px; /* Taille du cercle central */
height: 110px;
border-radius: 50%;
background-color: #fff; /* Fond blanc */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
color: #343a40;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombre pour le cercle central */
}
.center-circle small {
font-size: 0.8rem;
font-weight: 500;
color: #6c757d;
margin-top: -5px;
}
/* Liste des détails sous le graphique */
.command-details-list {
list-style: none;
padding: 0;
margin: 0;
width: 100%; /* S'étend sur toute la largeur disponible */
max-width: 200px; /* Limite la largeur pour l'esthétique */
}
.command-details-list li {
display: flex;
align-items: center;
justify-content: space-between; /* Aligne le texte et la valeur */
font-size: 0.9rem;
color: #555;
margin-bottom: 8px;
}
.command-details-list li:last-child {
margin-bottom: 0;
}
.color-dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 10px;
flex-shrink: 0;
}
.detail-label {
display: flex;
align-items: center;
}
.detail-value {
font-weight: 600;
color: #343a40;
}
/* Couleurs des points */
.dot-created {
background-color: #4e73df;
}
.dot-pending {
background-color: #f6c23e;
}
.dot-validated {
background-color: #1cc88a;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<!-- CARD: Commandes (Graphique Circulaire) -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="progress-circle-card">
<div class="card-header-circle">
<i class="fas fa-shopping-cart mr-2 text-muted"></i>
<h3>Commandes</h3>
</div>
<div class="card-body-circle">
<!-- Conteneur du graphique circulaire -->
<div class="circular-chart-container">
<div class="circular-chart"></div>
<div class="center-circle">
3
<small>Total</small>
</div>
</div>
<!-- Détails de la liste -->
<ul class="command-details-list">
<li>
<span class="detail-label">
<span class="color-dot dot-created"></span>
Créées
</span>
<span class="detail-value">1</span>
</li>
<li>
<span class="detail-label">
<span class="color-dot dot-pending"></span>
En attente
</span>
<span class="detail-value">1</span>
</li>
<li>
<span class="detail-label">
<span class="color-dot dot-validated"></span>
Validées
</span>
<span class="detail-value">1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts Bootstrap (JQuery et Popper.js ne sont pas strictement nécessaires pour ce CSS, mais inclus pour la compatibilité générale de Bootstrap) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>