amelioration graphique + responsive

package-lock.json

@@ -8,7 +8,9 @@
       "name": "sae-front",
       "version": "0.0.0",
       "dependencies": {
+        "chart.js": "^4.5.1",
         "react": "^19.1.1",
+        "react-chartjs-2": "^5.3.1",
         "react-dom": "^19.1.1",
         "react-router": "^7.9.4"
       },
@@ -1107,6 +1109,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@mdx-js/react": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
@@ -2682,6 +2690,18 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -4419,6 +4439,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.1.tgz",
+      "integrity": "sha512-h5IPXKg9EXpjoBzUfyWJvllMjG2mQ4EiuHQFhms/AjUm0XSZHhyRy2xVmLXHKrtcdrPO4mnGqRtYoD0vp95A0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-docgen": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-8.0.2.tgz",

package.json

@@ -12,7 +12,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "chart.js": "^4.5.1",
     "react": "^19.1.1",
+    "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.1.1",
     "react-router": "^7.9.4"
   },
@@ -26,17 +28,17 @@
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser-playwright": "^4.0.8",
+    "@vitest/coverage-v8": "^4.0.8",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "eslint-plugin-storybook": "^10.0.6",
     "globals": "^16.4.0",
+    "playwright": "^1.56.1",
     "prop-types": "^15.8.1",
     "storybook": "^10.0.6",
     "vite": "^7.1.7",
-    "vitest": "^4.0.8",
+    "vitest": "^4.0.8"
-    "playwright": "^1.56.1",
-    "@vitest/browser-playwright": "^4.0.8",
-    "@vitest/coverage-v8": "^4.0.8"
   }
 }

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: "Antoine Ordonneau" },
-    { name: "Bob Martin" },
+    { name: "Giovanni Josserand" },
-    { name: "Charlie Durand" },
+    { 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}>
+          <div style={{ position: "relative", width: "100%", height: "100%" }}>
-            <circle
+            <Doughnut data={chartData} options={chartOptions} />
-              cx="50"
+            <div style={{
-              cy="50"
+                position: "absolute",
-              r="40"
+                top: "50%",
-              fill="none"
+                left: "50%",
-              stroke="#e0e0e0"
+                textAlign:"center",
-              strokeWidth="20"
+                transform: "translate(-50%, -50%)",
-            />
+                fontSize: "60px",
-            <circle
+                fontWeight: "bold",
-              cx="50"
+                color: "#333",
-              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">
               {participationRate}%
-            </text>
+            </div>
-          </svg>
+          </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
+                  <Button
-                    className={styles.validateButton}
                     onClick={() => handleValidate(member.name)}
+                    variant="primary"
                   >
                     Valider
-                  </button>
+                  </Button>
-                  <button
+                  <Button
-                    className={styles.rejectButton}
                     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;
+  width:25%;
-  padding: 5px;
   border-radius: 5px;
-  border: 1px solid #ccc;
+  opacity: 1;
+  background-color: transparent;
+  border:none;
 }
 
+
 .chartContainer {
-  width: 100%;
+  
-  display: flex;
+  max-width: 80%;
-  justify-content: center;
+  margin: 0 auto;
+  position: relative;
 }
 
-.donutChart {
+
-  width: 150px;
+.circularProgress {
-  height: 150px;
+  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 {

vite.config.js

@@ -34,5 +34,8 @@ export default defineConfig({
         setupFiles: ['.storybook/vitest.setup.js']
       }
     }]
+  },
+  server: {
+    host: true,
   }
 });