/* eslint-disable @next/next/no-img-element */ import Head from "next/head"; import Navbar from "@/components/Navbar"; import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone} from "react-icons/bs"; import {ArcElement, LinearScale, Chart as ChartJS, CategoryScale, PointElement, LineElement, Legend, Tooltip} from "chart.js"; import {withIronSessionSsr} from "iron-session/next"; import {sessionOptions} from "@/lib/session"; import {useEffect, useState} from "react"; import useStats from "@/hooks/useStats"; import { averageScore, totalExams, totalExamsByModule, groupBySession, groupByModule, formatModuleAverageScoreStats, calculateModuleAverageScoreStats, } 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, calculateBandScore} from "@/utils/score"; import {MODULE_ARRAY} from "@/utils/moduleUtils"; import {Chart} from "react-chartjs-2"; ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, Legend, Tooltip); const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8"]; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; if (!user || !user.isVerified) { res.setHeader("location", "/login"); res.statusCode = 302; res.end(); return { props: { user: null, }, }; } return { props: {user: req.session.user}, }; }, sessionOptions); export default function Stats() { const {user} = useUser({redirectTo: "/login"}); const {stats} = useStats(user?.id); 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"], }, ], }; const calculateTotalScorePerSession = () => { const groupedBySession = groupBySession(stats); const sessionAverage = Object.keys(groupedBySession).map((x: string) => { const session = groupedBySession[x]; const moduleStats = groupByModule(session); const moduleScores = Object.keys(moduleStats).map((y) => { const correct = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.correct, 0); const total = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.total, 0); return { module: y, score: calculateBandScore(correct, total, y as Module, user?.focus || "academic"), }; }); return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / 4; }); return sessionAverage; }; const calculateModularScorePerSession = (module: Module) => { const groupedBySession = groupBySession(stats); const sessionAverage = Object.keys(groupedBySession).map((x: string) => { const session = groupedBySession[x]; const moduleStats = groupByModule(session); if (!Object.keys(moduleStats).includes(module)) return null; const correct = moduleStats[module].reduce((acc, curr) => acc + curr.score.correct, 0); const total = moduleStats[module].reduce((acc, curr) => acc + curr.score.total, 0); return calculateBandScore(correct, total, module, user?.focus || "academic"); }); return sessionAverage; }; return ( <> Stats | EnCoach {user && (
{user.name}

{user.name}

{capitalize(user.type)}
{Object.keys(groupBySession(stats)).length} Exams
{stats.length} Exercises
{averageScore(stats)}% Average Score
{stats.length > 0 && (
{/* Exams per module */}
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
Total Score Band per Session index), datasets: [ { type: "line", label: "Total", fill: false, borderColor: "#6A5FB1", backgroundColor: "#7872BF", borderWidth: 2, spanGaps: true, data: calculateTotalScorePerSession(), }, ], }} />
Module Score Band per Session index), datasets: [ ...MODULE_ARRAY.map((module, index) => ({ type: "line" as const, label: capitalize(module), borderColor: COLORS[index], backgroundColor: COLORS[index], borderWidth: 2, data: calculateModularScorePerSession(module), })), ], }} />
)} {stats.length === 0 && (
No stats to display...
)} )} ); }