diff --git a/package-lock.json b/package-lock.json index 0591a36..2e4d992 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index d2aa97d..902a0fc 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/pages/Stat/StatPage.jsx b/src/pages/Stat/StatPage.jsx index c057769..cd75918 100644 --- a/src/pages/Stat/StatPage.jsx +++ b/src/pages/Stat/StatPage.jsx @@ -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 (
- +
+ + + +
+
- - - - +
+ +
{participationRate}% - - +
+
-

Événements incomplets

@@ -82,7 +116,6 @@ function StatPage() { ))}
-

Membres en attente de validation

@@ -90,18 +123,18 @@ function StatPage() {

{member.name}

- - +
))} diff --git a/src/pages/Stat/StatPage.module.css b/src/pages/Stat/StatPage.module.css index 2c9fbd9..666a610 100644 --- a/src/pages/Stat/StatPage.module.css +++ b/src/pages/Stat/StatPage.module.css @@ -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 { diff --git a/vite.config.js b/vite.config.js index fbcb6d3..5a921d3 100644 --- a/vite.config.js +++ b/vite.config.js @@ -34,5 +34,8 @@ export default defineConfig({ setupFiles: ['.storybook/vitest.setup.js'] } }] + }, + server: { + host: true, } }); \ No newline at end of file