add responsive+ delete inline style

src/components/chart/ParticipationChart.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+/*import React, { useState } from "react";
 import { Doughnut } from "react-chartjs-2";
 import { Chart, ArcElement } from "chart.js";
 import { MenuItem, Select, FormControl } from "@mui/material";
@@ -87,4 +87,83 @@ function participationChart() {
   );
 }
 
-export default participationChart;
+export default participationChart;*/
+import React, { useState } from "react";
+import { Doughnut } from "react-chartjs-2";
+import { Chart, ArcElement } from "chart.js";
+import { MenuItem, Select, FormControl } from "@mui/material";
+import styles from "./ParticipationChart.module.css";
+
+Chart.register(ArcElement);
+
+function ParticipationChart() {
+  const [selected, setSelected] = useState("3");
+  const [participationRate, setParticipationRate] = useState(78);
+
+  const chartData = {
+    labels: ["Progress", "Background"],
+    datasets: [
+      {
+        data: [participationRate, 100 - participationRate],
+        backgroundColor: ["#1e60f9ff", "#ffffffff"],
+        borderWidth: 0,
+        weight: 10,
+        cutout: "93%",
+        circumference: 360,
+        rotation: -90,
+      },
+    ],
+  };
+
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: true,
+    plugins: {
+      legend: { display: false },
+      tooltip: { enabled: false },
+    },
+    animation: {
+      animateScale: true,
+      animateRotate: true,
+    },
+  };
+
+  return (
+    <div className={`${styles.leftBlock} glassCard`}>
+      <div className={styles.participationHeader}>
+        <div className={`${styles.partiText} glassCard`}>
+          <label htmlFor="months">Taux de participation depuis :</label>
+          <div className={styles.formControl}>
+            <FormControl className={styles.formDesign}>
+              <Select
+                value={selected}
+                onChange={(e) => setSelected(e.target.value)}
+                className={styles.selectRoot}
+                MenuProps={{
+               classes: {paper: styles.selectMenuPaper,},
+                  MenuListProps: {
+                  className: styles.selectMenuList,},
+  }}
+                displayEmpty
+              >
+                <MenuItem value="1">1 mois</MenuItem>
+                <MenuItem value="3">3 mois</MenuItem>
+                <MenuItem value="6">6 mois</MenuItem>
+                <MenuItem value="12">12 mois</MenuItem>
+              </Select>
+            </FormControl>
+          </div>
+        </div>
+      </div>
+      <div className={styles.chartContainer}>
+        <div className={styles.chartWrapper}>
+          <Doughnut data={chartData} options={chartOptions} />
+          <div className={styles.chartPercentage}>{participationRate}%</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ParticipationChart;
+

src/components/chart/ParticipationChart.module.css

@@ -3,15 +3,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: calc(100vh - 260px);
-  /* Exemple: calc(100vh - 60px) */
-  margin-bottom: auto;
+  height: 100%;
+  min-height: calc(100vh - 260px);
+  box-sizing: border-box;
+  padding: 20px;
+  margin: 0;
 }
 
 .participationHeader {
   display: flex;
   align-items: center;
   width: 100%;
+  margin-bottom: 10px;
 }
 
 .partiText {
@@ -27,14 +30,15 @@
 
 .partiText label {
   font-size: 20px;
-  text-align: right;
+  text-align: center;
   transition: all 0.3s ease;
+  width: 100%;
 }
-
 .chartContainer {
-  max-width: 80%;
-  width: 400px;
+  width: 80%;
+  max-width: 400px;
   height: auto;
+  aspect-ratio: 1/1;
   margin: 0 auto;
   position: relative;
   animation: slideEvent2 2s;
@@ -59,12 +63,70 @@
   color: #333;
 }
 
+.formControl {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.formDesign {
+  margin: 0 auto;
+  width: fit-content;
+}
+
+.selectRoot {
+  width: 100px;
+  height: 35px;
+  font-size: 19px;
+  border:none;
+}
+
+.selectRoot .MuiOutlinedInput-notchedOutline {
+  border: none;
+}
+
+.selectRoot .MuiSelect-select {
+  padding: 8px;
+  padding-right: 24px;
+}
+
+.selectRoot .MuiSvgIcon-root {
+  font-size: 20px;
+}
+
+.selectRoot .MuiMenu-paper {
+  border-radius: 7px;
+  width: 100px;
+  max-width: 100px;
+}
+
+.selectRoot .MuiMenuItem-root {
+  font-size: 18px;
+}
+
+.selectMenuPaper {
+  border-radius: 7px;
+  width: 100px;
+  max-width: 120px;
+  max-height: 300px;
+  overflow-y: auto;
+  border:none;
+}
+
+.selectMenuItem {
+  font-size: 18px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+
 @keyframes slideEvent2 {
   from {
     opacity: 0;
     transform: translateX(-20px);
   }
-
   to {
     opacity: 1;
     transform: translateX(0);
@@ -76,45 +138,32 @@
     opacity: 0;
     transform: translateX(20px);
   }
-
   to {
     opacity: 1;
     transform: translateX(0);
   }
 }
 
-.formControl {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.formDesign {
-  margin: 0 auto;
-  width: fit-content;
-}
-
 @media screen and (max-width: 760px) {
-  .partiText {
-    flex-direction: column;
-    justify-content: center;
+  .leftBlock {
+    width: 100%;
+    height: auto;
+    min-height: auto;
+    margin-bottom: 20px;
+  }
+
+  .chartContainer {
+    width: 90%;
+    max-width: 300px;
+    height: auto;
+    aspect-ratio: 1/1;
   }
 
   .partiText label {
-    text-align: center;
+    font-size: 18px;
   }
 
-  .leftBlock {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: fit-content;
-    margin-bottom: auto;
-    margin-top: 30px;
+  .chartPercentage {
+    font-size: 48px;
   }
-  .chartContainer{
-    height:fit-content;
-  }
-
-}
+}