devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started updating the stats page

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-20 09:32:33 +01:00
parent 47b1784615
commit dd357d991c
2 changed files with 149 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/pages/stats.tsx
View File

@@ -1,15 +1,24 @@
import SingleDatasetChart from "@/components/UserResultChart"; /* eslint-disable @next/next/no-img-element */
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";
import Head from "next/head"; import Head from "next/head";
import {AutoComplete} from "primereact/autocomplete"; import Navbar from "@/components/Navbar";
import {Divider} from "primereact/divider"; 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 {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}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
@@ -30,22 +39,25 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
}; };
}, sessionOptions); }, sessionOptions);
export default function Stats({user}: {user: User}) { export default function Stats() {
const [autocompleteValue, setAutocompleteValue] = useState(user.name); const {user} = useUser({redirectTo: "/login"});
const [selectedUser, setSelectedUser] = useState<User>(); const {stats} = useStats(user?.id);
const [items, setItems] = useState<User[]>([]);
const {users, isLoading} = useUsers(); const totalExamsData = {
const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id); labels: MODULE_ARRAY.map((x) => capitalize(x)),
datasets: [
const search = (event: {query: string}) => { {
setItems(event.query ? users.filter((x) => x.name.startsWith(event.query)) : users); label: "Total exams",
data: MODULE_ARRAY.map((x) => totalExamsByModule(stats, x)),
backgroundColor: ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8"],
},
],
}; };
return ( return (
<> <>
<Head> <Head>
<title>IELTS GPT | Stats</title> <title>Stats | IELTS GPT</title>
<meta <meta
name="description" name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop." content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -53,85 +65,133 @@ export default function Stats({user}: {user: User}) {
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-neutral-600"> <ToastContainer />
<div className="w-full h-full flex flex-col items-center justify-center p-4 relative gap-8"> {user && (
{!isLoading && user.type !== "student" && ( <Layout user={user}>
<AutoComplete <section className="w-full flex gap-8">
value={autocompleteValue} <img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
suggestions={items} <div className="flex flex-col gap-4 py-4 w-full">
field="name" <div className="flex justify-between w-full gap-8">
onChange={(e) => setAutocompleteValue(e.target.value)} <div className="flex flex-col gap-2 py-2">
completeMethod={search} <h1 className="font-bold text-4xl">{user.name}</h1>
onSelect={(e) => setSelectedUser(e.value)} <h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
dropdown </div>
/> <ProgressBar
)} label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
percentage={100}
<section className="flex flex-col gap-2 md:gap-4 w-full"> color="blue"
<div className="flex flex-col"> className="max-w-xs w-32 self-end h-10"
<span className="font-semibold">Module Statistics</span> />
<Divider /> </div>
</div> <ProgressBar
<div className="flex flex-col md:grid md:grid-cols-3 w-full gap-4"> label=""
{!isStatsLoading && stats && ( percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
<> color="blue"
<div className="max-w-lg"> className="w-full h-3 drop-shadow-lg"
<SingleDatasetChart />
type="polarArea" <div className="flex justify-between w-full mt-8">
data={formatModuleTotalStats(stats)} <div className="flex gap-4 items-center">
title="Exams per Module" <div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
label="Total" <BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" />
/>
</div> </div>
<div className="max-w-lg"> <div className="flex flex-col">
<SingleDatasetChart <span className="font-bold text-xl">{Object.keys(groupBySession(stats)).length}</span>
type="polarArea" <span className="font-normal text-base text-mti-gray-dim">Exams</span>
data={formatModuleAverageScoreStats(stats)}
title="Average Score per Module"
label="Score (in %)"
/>
</div> </div>
<div className="max-w-lg"> </div>
<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Total exams" /> <div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsPencil className="w-8 h-8 text-mti-blue-light" />
</div> </div>
</> <div className="flex flex-col">
)} <span className="font-bold text-xl">{stats.length}</span>
<span className="font-normal text-base text-mti-gray-dim">Exercises</span>
</div>
</div>
<div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsStar className="w-8 h-8 text-mti-blue-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{averageScore(stats)}%</span>
<span className="font-normal text-base text-mti-gray-dim">Average Score</span>
</div>
</div>
</div>
</div> </div>
</section> </section>
<section className="flex flex-col gap-3">
<section className="flex flex-col gap-2 md:gap-4 w-full"> <span className="font-semi text-lg">Module Statistics</span>
<div className="flex flex-col"> <div className="flex gap-4 justify-between">
<span className="font-semibold">Exam Statistics</span> <div className="flex flex-col gap-12 border w-full max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
<Divider /> <span className="text-sm font-bold">Exams per Module</span>
</div> <div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<div className="flex flex-col md:grid md:grid-cols-3 w-full gap-4"> <div className="flex justify-between items-end">
{!isStatsLoading && stats && ( <span className="text-xs">
<> <span className="font-medium">{totalExamsByModule(stats, "reading")}</span> of{" "}
<div className="max-w-lg"> <span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
<SingleDatasetChart </span>
type="polarArea" <span className="text-xs">Reading</span>
data={formatExerciseTotalStats(stats)} </div>
title="Exercises per Type" <ProgressBar
label="Total" color="reading"
colors={chartColors} percentage={(totalExamsByModule(stats, "reading") * 100) / Object.keys(groupBySession(stats)).length}
label=""
className="h-1"
/> />
</div> </div>
<div className="max-w-lg"> <div className="flex flex-col gap-2">
<SingleDatasetChart <div className="flex justify-between items-end">
type="polarArea" <span className="text-xs">
data={formatExerciseAverageScoreStats(stats)} <span className="font-medium">{totalExamsByModule(stats, "listening")}</span> of{" "}
title="Average Score by Exercise" <span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
label="Average" </span>
colors={chartColors} <span className="text-xs">Listening</span>
</div>
<ProgressBar
color="listening"
percentage={(totalExamsByModule(stats, "listening") * 100) / Object.keys(groupBySession(stats)).length}
label=""
className="h-1"
/> />
</div> </div>
</> <div className="flex flex-col gap-2">
)} <div className="flex justify-between items-end">
<span className="text-xs">
<span className="font-medium">{totalExamsByModule(stats, "writing")}</span> of{" "}
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
</span>
<span className="text-xs">Writing</span>
</div>
<ProgressBar
color="writing"
percentage={(totalExamsByModule(stats, "writing") * 100) / Object.keys(groupBySession(stats)).length}
label=""
className="h-1"
/>
</div>
<div className="flex flex-col gap-2">
<div className="flex justify-between items-end">
<span className="text-xs">
<span className="font-medium">{totalExamsByModule(stats, "speaking")}</span> of{" "}
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
</span>
<span className="text-xs">Speaking</span>
</div>
<ProgressBar
color="speaking"
percentage={(totalExamsByModule(stats, "speaking") * 100) / Object.keys(groupBySession(stats)).length}
label=""
className="h-1"
/>
</div>
</div>
</div>
</div> </div>
</section> </section>
</div> </Layout>
</main> )}
</> </>
); );
} }

2
src/utils/moduleUtils.ts
View File

@@ -1,6 +1,6 @@
import {Module} from "@/interfaces"; 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} = { export const moduleLabels: {[key in Module]: string} = {
listening: "Listening", listening: "Listening",