From e16caff82f3739c738f0b173474c151c9da1295a Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Fri, 22 Jan 2021 21:28:17 +0100 Subject: [PATCH] stats --- src/components/Statistics.tsx | 115 ++++++++++++++++++---------------- 1 file changed, 62 insertions(+), 53 deletions(-) diff --git a/src/components/Statistics.tsx b/src/components/Statistics.tsx index 5cac9da..26a8c87 100644 --- a/src/components/Statistics.tsx +++ b/src/components/Statistics.tsx @@ -9,6 +9,7 @@ import DeleteIcon from '@material-ui/icons/Delete'; import { useMemo } from 'react'; import { dayMapping } from '../constants'; import { axiosInstance } from '../utils/axiosInstance'; +import { SyncLoader } from 'react-spinners'; const StatisticsWrapper = styled.div` display: flex; @@ -26,19 +27,21 @@ const Row = styled.div` `; const StatisticBox = styled.div` - background-color: white; - width: 200px; - height: 200px; - margin: 10px; - border: 1px solid #000000; - border-radius: 38px; display: flex; flex-direction: column; - justify-content: space-around; + justify-content: center; align-items: center; - font-size: 22px; - padding: 2px; - box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75); + z-index: 20000; + font-size: 0.65vw; + line-height: normal; + border-radius: 2px; + width: 200px; + height: 200px; + margin: 5px; + padding: 5px 5px 0 5px; + text-align: center; + background-color: #ffe485; + box-shadow: 3px 3px 5px 0px rgba(189, 189, 189, 1); `; const StatisticNumber = styled.p` @@ -61,6 +64,7 @@ export const Statistics = () => { const [notRegisteredStudentsNumber, setNotRegisteredStudentsNumber] = useState(''); const [acceptedStudentsNumber, setAcceptedStudentsNumber] = useState(''); const [partlyAcceptedStudentsNumber, setPartlyAcceptedStudentsNumber] = useState(''); + const [loaded, setLoaded] = useState(false); const getCreatedGroupsNumber = async () => { try { @@ -117,49 +121,54 @@ export const Statistics = () => { }; useEffect(() => { - getCreatedGroupsNumber() - getFullGroupsNumber() - getRegisteredStudentsNumber() - getNotRegisteredStudentsNumber() - getAcceptedStudentsNumber() - getPartlyAcceptedStudentsNumber() + Promise.all([ + getCreatedGroupsNumber(), + getFullGroupsNumber(), + getRegisteredStudentsNumber(), + getNotRegisteredStudentsNumber(), + getAcceptedStudentsNumber(), + getPartlyAcceptedStudentsNumber(), + ]).then(()=>{setLoaded(true);}); + + }, []); - return ( - - - - {createdGroupsNumber} - Utworzonych grup - - - {' '} - {registeredStudentsNumber} - Zapisanych studentów do grup - - - {' '} - {notRegisteredStudentsNumber} - Studentów niezapisanych do żadnej grupy - - - - - {' '} - {acceptedStudentsNumber} - Studentów z zaakceptowanym planem - - - {' '} - {partlyAcceptedStudentsNumber} - Studentów bez zaakceptowanego pełengo planu - - - {' '} - {fullGroupsNumber} - Grup z zajętymi wszystkimi miejscami - - - - ); + useEffect(() => { + console.log(loaded); + }, [loaded]); + + return {loaded === false ? :<> + + {createdGroupsNumber} + Utworzonych grup + + + {' '} + {registeredStudentsNumber} + Zapisanych studentów do grup + + + {' '} + {notRegisteredStudentsNumber} + Studentów niezapisanych do żadnej grupy + + + + + {' '} + {acceptedStudentsNumber} + Studentów z zaakceptowanym planem + + + {' '} + {partlyAcceptedStudentsNumber} + Studentów bez zaakceptowanego pełengo planu + + + {' '} + {fullGroupsNumber} + Grup z zajętymi wszystkimi miejscami + + } + ; };