cut into components

src/components/chart/ParticipationChart.jsx

@@ -0,0 +1,90 @@
+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(89);
+
+  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,
+    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={styles.months}>Taux de participation depuis :</label>
+          <div className={styles.formControl}>
+            <FormControl className={styles.formDesign}>
+              <Select
+                value={selected}
+                onChange={(e) => setSelected(e.target.value)}
+                sx={{
+                  width: "100px",
+                  height: "35px",
+                  fontSize: "19px",
+                  paddingBottom: "-2px",
+                  "& .MuiOutlinedInput-notchedOutline": { border: "none" },
+                  "& .MuiSelect-select": { padding: "8px", paddingRight: "24px !important" },
+                  "& .MuiSvgIcon-root": { fontSize: "20px" },
+                }}
+                MenuProps={{
+                  PaperProps: {
+                    sx: {
+                      className: "glassCard",
+                      borderRadius: "7px",
+                      width: "100px",
+                      maxWidth: "100px",
+                    },
+                  },
+                }}
+                displayEmpty
+              >
+                <MenuItem value="1" sx={{ fontSize: "18px" }}>1 mois</MenuItem>
+                <MenuItem value="3" sx={{ fontSize: "18px" }}>3 mois</MenuItem>
+                <MenuItem value="6" sx={{ fontSize: "18px" }}>6 mois</MenuItem>
+                <MenuItem value="12" sx={{ fontSize: "18px" }}>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

@@ -0,0 +1,86 @@
+.leftBlock {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: fit-content;
+}
+
+.participationHeader {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.partiText {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2%;
+  margin-top: 2%;
+  animation: slideInEvent 2s;
+}
+
+.partiText label {
+  font-size: 20px;
+  text-align: right;
+  transition: all 0.3s ease;
+}
+
+.chartContainer {
+  max-width: 80%;
+  margin: 0 auto;
+  position: relative;
+  animation: slideEvent2 2s;
+}
+
+.chartWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.chartPercentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  font-size: 60px;
+  font-weight: bold;
+  color: #333;
+}
+
+@keyframes slideEvent2 {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInEvent {
+  from { 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;
+  }
+
+  .partiText label {
+    text-align: center;
+  }
+}