91 lines
2.9 KiB
React
91 lines
2.9 KiB
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";
|
|
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;
|