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

Updated the stats and record page

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-02 10:23:33 +01:00
parent b58957e38e
commit 0f0b7748d7
2 changed files with 56 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/stats.tsx
View File

@@ -1,24 +1,13 @@
/* 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 {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
import {LinearScale, Chart as ChartJS, CategoryScale, PointElement, LineElement, Legend, Tooltip, LineController} 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 {averageScore, totalExamsByModule, groupBySession, groupByModule} 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";
@@ -27,8 +16,11 @@ import Layout from "@/components/High/Layout";
import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
import {MODULE_ARRAY} from "@/utils/moduleUtils";
import {Chart} from "react-chartjs-2";
import useUsers from "@/hooks/useUsers";
import Select from "react-select";
import useGroups from "@/hooks/useGroups";
ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, Legend, Tooltip);
ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8"];
@@ -52,19 +44,16 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
}, sessionOptions);
export default function Stats() {
const {user} = useUser({redirectTo: "/login"});
const {stats} = useStats(user?.id);
const [statsUserId, setStatsUserId] = useState<string>();
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 {user} = useUser({redirectTo: "/login"});
const {users} = useUsers();
const {groups} = useGroups(user?.id);
const {stats} = useStats(statsUserId);
useEffect(() => {
if (user) setStatsUserId(user.id);
}, [user]);
const calculateTotalScorePerSession = () => {
const groupedBySession = groupBySession(stats);
@@ -115,7 +104,7 @@ export default function Stats() {
</Head>
<ToastContainer />
{user && (
<Layout user={user}>
<Layout user={user} className="gap-8">
<section className="w-full flex gap-8">
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
<div className="flex flex-col gap-4 py-4 w-full">
@@ -170,6 +159,22 @@ export default function Stats() {
</section>
{stats.length > 0 && (
<section className="flex flex-col gap-3">
{(user.type === "developer" || user.type === "owner") && (
<Select
options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
/>
)}
{(user.type === "admin" || user.type === "teacher") && groups.length > 0 && (
<Select
options={users
.filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
/>
)}
<div className="flex gap-4 flex-wrap">
{/* Exams per module */}
<div className="flex flex-col gap-12 border w-full h-fit max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">