diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx index 90b7c34d..6db485c0 100644 --- a/src/pages/stats.tsx +++ b/src/pages/stats.tsx @@ -1,15 +1,24 @@ -import SingleDatasetChart from "@/components/UserResultChart"; -import useStats from "@/hooks/useStats"; -import useUsers from "@/hooks/useUsers"; -import {User} from "@/interfaces/user"; -import {sessionOptions} from "@/lib/session"; -import {formatExerciseAverageScoreStats, formatExerciseTotalStats, formatModuleAverageScoreStats, formatModuleTotalStats} from "@/utils/stats"; -import {withIronSessionSsr} from "iron-session/next"; +/* eslint-disable @next/next/no-img-element */ import Head from "next/head"; -import {AutoComplete} from "primereact/autocomplete"; -import {Divider} from "primereact/divider"; +import Navbar from "@/components/Navbar"; +import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone} from "react-icons/bs"; +import {ArcElement} from "chart.js"; +import {withIronSessionSsr} from "iron-session/next"; +import {sessionOptions} from "@/lib/session"; import {useEffect, useState} from "react"; -import chartColors from "@/constants/chartColors.json"; +import useStats from "@/hooks/useStats"; +import {averageScore, totalExams, totalExamsByModule, groupBySession} from "@/utils/stats"; +import useUser from "@/hooks/useUser"; +import Sidebar from "@/components/Sidebar"; +import Diagnostic from "@/components/Diagnostic"; +import {ToastContainer} from "react-toastify"; +import {capitalize} from "lodash"; +import {Module} from "@/interfaces"; +import ProgressBar from "@/components/Low/ProgressBar"; +import Layout from "@/components/High/Layout"; +import {calculateAverageLevel} from "@/utils/score"; +import {MODULE_ARRAY} from "@/utils/moduleUtils"; +import {Chart} from "react-chartjs-2"; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; @@ -30,22 +39,25 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => { }; }, sessionOptions); -export default function Stats({user}: {user: User}) { - const [autocompleteValue, setAutocompleteValue] = useState(user.name); - const [selectedUser, setSelectedUser] = useState(); - const [items, setItems] = useState([]); +export default function Stats() { + const {user} = useUser({redirectTo: "/login"}); + const {stats} = useStats(user?.id); - const {users, isLoading} = useUsers(); - const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id); - - const search = (event: {query: string}) => { - setItems(event.query ? users.filter((x) => x.name.startsWith(event.query)) : users); + const totalExamsData = { + labels: MODULE_ARRAY.map((x) => capitalize(x)), + datasets: [ + { + label: "Total exams", + data: MODULE_ARRAY.map((x) => totalExamsByModule(stats, x)), + backgroundColor: ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8"], + }, + ], }; return ( <> - IELTS GPT | Stats + Stats | IELTS GPT -
-
- {!isLoading && user.type !== "student" && ( - setAutocompleteValue(e.target.value)} - completeMethod={search} - onSelect={(e) => setSelectedUser(e.value)} - dropdown - /> - )} - -
-
- Module Statistics - -
-
- {!isStatsLoading && stats && ( - <> -
- + + {user && ( + +
+ {user.name} +
+
+
+

{user.name}

+
{capitalize(user.type)}
+
+ +
+ +
+
+
+
-
- +
+ {Object.keys(groupBySession(stats)).length} + Exams
-
- +
+
+
+
- - )} +
+ {stats.length} + Exercises +
+
+
+
+ +
+
+ {averageScore(stats)}% + Average Score +
+
+
- -
-
- Exam Statistics - -
- -
- {!isStatsLoading && stats && ( - <> -
- + Module Statistics +
+
+ Exams per Module +
+
+
+ + {totalExamsByModule(stats, "reading")} of{" "} + {Object.keys(groupBySession(stats)).length} + + Reading +
+
-
- +
+ + {totalExamsByModule(stats, "listening")} of{" "} + {Object.keys(groupBySession(stats)).length} + + Listening +
+
- - )} +
+
+ + {totalExamsByModule(stats, "writing")} of{" "} + {Object.keys(groupBySession(stats)).length} + + Writing +
+ +
+
+
+ + {totalExamsByModule(stats, "speaking")} of{" "} + {Object.keys(groupBySession(stats)).length} + + Speaking +
+ +
+
+
-
-
+ + )} ); } diff --git a/src/utils/moduleUtils.ts b/src/utils/moduleUtils.ts index a268bce1..2393e23a 100644 --- a/src/utils/moduleUtils.ts +++ b/src/utils/moduleUtils.ts @@ -1,6 +1,6 @@ import {Module} from "@/interfaces"; -const MODULE_ARRAY: Module[] = ["reading", "listening", "writing", "speaking"]; +export const MODULE_ARRAY: Module[] = ["reading", "listening", "writing", "speaking"]; export const moduleLabels: {[key in Module]: string} = { listening: "Listening",