diff --git a/src/pages/Admin/components/chart/ParticipationChart.jsx b/src/pages/Admin/components/chart/ParticipationChart.jsx deleted file mode 100644 index 4927836..0000000 --- a/src/pages/Admin/components/chart/ParticipationChart.jsx +++ /dev/null @@ -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 ( -
-
-
- - - - - -
-
- -
-
- -
- {eventsCount} events -
-
-
-
- ); -} - -export default ParticipationChart; diff --git a/src/pages/Admin/components/chart/ParticipationChart.module.css b/src/pages/Admin/components/chart/ParticipationChart.module.css deleted file mode 100644 index f9a223c..0000000 --- a/src/pages/Admin/components/chart/ParticipationChart.module.css +++ /dev/null @@ -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); -} -