amelioration graphique + responsive

src/pages/Stat/StatPage.jsx

@@ -1,21 +1,27 @@
 import React, { useState } from "react";
+import { Doughnut } from "react-chartjs-2";
+import { Chart, ArcElement } from "chart.js";
 import styles from "./StatPage.module.css";
+import Button from "./../../components/ui/button/button";
+
+// Enregistrer les éléments nécessaires
+Chart.register(ArcElement);
 
 function StatPage() {
   const [months, setMonths] = useState(3);
-  const participationRate = 77;
+   
+  const [participationRate, setParticipationRate] = useState(89);
 
-  // les event incomplets
   const incompleteEvents = [
     { title: "Événement A", tasks: "Préparation des flyers" },
     { title: "Événement B", tasks: "Réservation de la salle" },
     { title: "Événement C", tasks: "Communication sur les réseaux" },
   ];
-/* c la liste des membres en attente*/
+
   const pendingMembers = [
-    { name: "Alice Dupont" },
-    { name: "Bob Martin" },
-    { name: "Charlie Durand" },
+    { name: "Antoine Ordonneau" },
+    { name: "Giovanni Josserand" },
+    { name: "Quentin T'Jampens" },
   ];
 
   const handleValidate = (name) => {
@@ -26,11 +32,45 @@ function StatPage() {
     console.log(`Refuser ${name}`);
   };
 
+  const chartData = {
+    labels: ["Progress", "Background"],
+    datasets: [
+      {
+        data: [participationRate, 100 - participationRate],
+        backgroundColor: ["#1e60f9ff", "#ffffffff"],
+        borderWidth: 0,
+        weight:10,
+        cutout: "90%",
+        circumference: 360,
+        rotation: -90,
+      },
+    ],
+  };
+
+  const chartOptions = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        enabled: false,
+      },
+    },
+    animation: {
+      animateScale: true,
+      animateRotate: true,
+    },
+  };
+
   return (
     <div className={styles.container}>
       <div className={`${styles.leftBlock} glassCard`}>
         <div className={styles.participationHeader}>
-          <label htmlFor="months">Taux de participation depuis </label>
+          <div className={styles.partiText}>
+          <label htmlFor="months">Taux de participation </label>
+          <label htmlFor="months2">depuis : </label>
+
           <select
             id="months"
             value={months}
@@ -42,35 +82,29 @@ function StatPage() {
             <option value="6">6 mois</option>
             <option value="12">12 mois</option>
           </select>
+          </div>
+          
         </div>
         <div className={styles.chartContainer}>
-          <svg viewBox="0 0 100 100" className={styles.donutChart}>
-            <circle
-              cx="50"
-              cy="50"
-              r="40"
-              fill="none"
-              stroke="#e0e0e0"
-              strokeWidth="20"
-            />
-            <circle
-              cx="50"
-              cy="50"
-              r="40"
-              fill="none"
-              stroke="#07f60fff"
-              strokeWidth="20"
-              strokeDasharray={`${participationRate} 100`}
-              transform="rotate(-90 50 50)"
-            />
-            <text x="50" y="50" textAnchor="middle" dy="5" fontSize="16">
+          <div style={{ position: "relative", width: "100%", height: "100%" }}>
+            <Doughnut data={chartData} options={chartOptions} />
+            <div style={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                textAlign:"center",
+                transform: "translate(-50%, -50%)",
+                fontSize: "60px",
+                fontWeight: "bold",
+                color: "#333",
+              }}
+            >
               {participationRate}%
-            </text>
-          </svg>
+            </div>
+          </div>
         </div>
       </div>
       <div className={styles.rightSection}>
-       
         <div className={`${styles.rightBlock} glassCard`}>
           <h2>Événements incomplets</h2>
           <div className={styles.eventsContainer}>
@@ -82,7 +116,6 @@ function StatPage() {
             ))}
           </div>
         </div>
-
         <div className={`${styles.rightBlock} glassCard`}>
           <h2>Membres en attente de validation</h2>
           <div className={styles.membersContainer}>
@@ -90,18 +123,18 @@ function StatPage() {
               <div key={index} className={`glassCard ${styles.memberCard}`}>
                 <p>{member.name}</p>
                 <div className={styles.buttonGroup}>
-                  <button
-                    className={styles.validateButton}
+                  <Button
                     onClick={() => handleValidate(member.name)}
+                    variant="primary"
                   >
                     Valider
-                  </button>
-                  <button
-                    className={styles.rejectButton}
+                  </Button>
+                  <Button
                     onClick={() => handleReject(member.name)}
+                    variant="danger"
                   >
                     Refuser
-                  </button>
+                  </Button>
                 </div>
               </div>
             ))}

src/pages/Stat/StatPage.module.css

@@ -27,6 +27,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  height:fit-content;
 }
 
 .participationHeader {
@@ -35,25 +36,53 @@
   margin-bottom: 20px;
   width: 100%;
 }
+.partiText{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.participationHeader label{
+  font-size:20px;
+  text-align: center;
+}
 
 .monthsDropdown {
-  margin-left: 10px;
-  padding: 5px;
+  width:25%;
   border-radius: 5px;
-  border: 1px solid #ccc;
+  opacity: 1;
+  background-color: transparent;
+  border:none;
 }
 
+
 .chartContainer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
+  
+  max-width: 80%;
+  margin: 0 auto;
+  position: relative;
 }
 
-.donutChart {
-  width: 150px;
-  height: 150px;
+
+.circularProgress {
+  width: 100%;
+  height: 100%;
 }
 
+.progressBackground {
+  opacity: 0.3;
+}
+
+.progressBar {
+  transition: stroke-dasharray 0.5s ease; 
+  stroke-linecap: round;
+}
+
+.progressText {
+  font-weight: bold;
+  font-family: Arial, sans-serif;
+}
+
+
 .rightSection {
   width: 60%;
   display: flex;
@@ -107,27 +136,11 @@
 .buttonGroup {
   display: flex;
   gap: 10px;
+  justify-content: right;
 }
 
-.validateButton {
-  background-color: #15ef1c;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 15px;
-  cursor: pointer;
-  width:200px;
-}
 
-.rejectButton {
-  background-color: #ff1100;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 15px;
-  cursor: pointer;
-  width:200px;
-}
+
 
 @media screen and (max-width: 760px) {
   .container {
@@ -138,6 +151,7 @@
   .leftBlock {
     width: 100%;
     margin-bottom: 20px;
+    height:fit-content;
   }
 
   .rightSection {