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

amelioration graphique + responsive

Browse Source
This commit is contained in:
p2405951
2025-11-28 11:50:05 +01:00
parent 87f9df62ba
commit f9da3e10be
5 changed files with 150 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+30
View File
@@ -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
+6 -4
View File
@@ -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",
"playwright": "^1.56.1",
"@vitest/browser-playwright": "^4.0.8",
"@vitest/coverage-v8": "^4.0.8"
"vitest": "^4.0.8"
}
}
src/pages/Stat/StatPage.jsx
+70 -37
View File
@@ -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: "Bob Martin" },
{ name: "Charlie Durand" },
{ name: "Antoine Ordonneau" },
{ name: "Giovanni Josserand" },
{ 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}>
<circle
cx="50"
cy="50"
r="40"
fill="none"
stroke="#e0e0e0"
strokeWidth="20"
/>
<circle
cx="50"
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">
<div style={{ position: "relative", width: "100%", height: "100%" }}>
<Doughnut data={chartData} options={chartOptions} />
<div style={{
position: "absolute",
top: "50%",
left: "50%",
textAlign:"center",
transform: "translate(-50%, -50%)",
fontSize: "60px",
fontWeight: "bold",
color: "#333",
}}
>
{participationRate}%
</text>
</svg>
</div>
</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
className={styles.validateButton}
<Button
onClick={() => handleValidate(member.name)}
variant="primary"
>
Valider
</button>
<button
className={styles.rejectButton}
</Button>
<Button
onClick={() => handleReject(member.name)}
variant="danger"
>
Refuser
</button>
</Button>
</div>
</div>
))}
src/pages/Stat/StatPage.module.css
+41 -27
View File
@@ -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;
padding: 5px;
width:25%;
border-radius: 5px;
border: 1px solid #ccc;
opacity: 1;
background-color: transparent;
border:none;
}
.chartContainer {
width: 100%;
display: flex;
justify-content: center;
max-width: 80%;
margin: 0 auto;
position: relative;
}
.donutChart {
width: 150px;
height: 150px;
.circularProgress {
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
+3
View File
@@ -34,5 +34,8 @@ export default defineConfig({
setupFiles: ['.storybook/vitest.setup.js']
}
}]
},
server: {
host: true,
}
});