Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove unused ParticiaptionChart component

Browse Source
This commit is contained in:
Giovanni
2026-03-12 12:23:04 +01:00
parent 36efd057bf
commit b2a89623d5
2 changed files with 0 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Admin/components/chart/ParticipationChart.jsx
-85
View File
@@ -1,85 +0,0 @@
import React, { useState, useEffect } 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";
import getAllEvents from "../../../../utils/events/getAllEvents.js";
Chart.register(ArcElement);
function ParticipationChart() {
const [selected, setSelected] = useState("3");
const [eventsCount, setEventsCount] = useState(0);
const [participationRate, setParticipationRate] = useState(0);
useEffect(() => {
const fetchEvents = async () => {
const res = await getAllEvents();
const eventsArray = res?.data ?? [];
setEventsCount(eventsArray.length);
const rate = Math.min(eventsArray.length, 100);
setParticipationRate(rate);
};
fetchEvents();
}, []);
const chartData = {
labels: ["Progress", "Background"],
datasets: [
{
data: [participationRate, 100 - participationRate],
backgroundColor: ["#1e60f9ff", "#ffffffff"],
borderWidth: 0,
cutout: "93%",
rotation: -90,
},
],
};
const chartOptions = {
responsive: true,
plugins: {
legend: { display: false },
tooltip: { enabled: false },
},
};
return (
<div className={`${styles.leftBlock} glassCard`}>
<div className={styles.participationHeader}>
<div className={`${styles.partiText} glassCard`}>
<label>Taux de participation depuis :</label>
<FormControl className={styles.formDesign}>
<Select
value={selected}
onChange={(e) => setSelected(e.target.value)}
className={styles.selectRoot}
>
<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 className={styles.chartContainer}>
<div className={styles.chartWrapper}>
<Doughnut data={chartData} options={chartOptions} />
<div className={styles.chartPercentage}>
{eventsCount} events
</div>
</div>
</div>
</div>
);
}
export default ParticipationChart;
src/pages/Admin/components/chart/ParticipationChart.module.css
-187
View File
@@ -1,187 +0,0 @@
.leftBlock {
width: 40%;
display: flex;
flex-direction: column;
align-items: center;
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 {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 2%;
margin-top: 2%;
animation: slideInEvent 2s;
}
.partiText label {
font-size: 20px;
text-align: center;
transition: all 0.3s ease;
width: 100%;
}
.chartContainer {
width: 80%;
max-width: 400px;
height: auto;
aspect-ratio: 1/1;
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;
}
.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);
}
}
@keyframes slideInEvent {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media screen and (max-width: 760px) {
.leftBlock {
width: 100%;
height: auto;
min-height: auto;
}
.chartContainer {
width: 90%;
max-width: 300px;
height: auto;
aspect-ratio: 1/1;
}
.partiText label {
font-size: 18px;
}
.chartPercentage {
font-size: 48px;
}
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(100, 100, 100, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(100, 100, 100, 0.5);
}