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>
             ))}