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

- Did a bit of refactor related to the exam/exercises page;

Browse Source 
- Improved the responsiveness of the page for mobile;
This commit is contained in:
Tiago Ribeiro
2023-10-17 08:52:41 +01:00
parent 550cdba5a7
commit 9b852bd6be
15 changed files with 491 additions and 819 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/stats.tsx
View File

@@ -21,6 +21,7 @@ import Select from "react-select";
import useGroups from "@/hooks/useGroups";
import DatePicker from "react-datepicker";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import ProfileSummary from "@/components/ProfileSummary";
ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
@@ -144,58 +145,27 @@ export default function Stats() {
<ToastContainer />
{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">
<div className="flex justify-between w-full gap-8">
<div className="flex flex-col gap-2 py-2">
<h1 className="font-bold text-4xl">{user.name}</h1>
<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
</div>
<ProgressBar
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
percentage={100}
color="purple"
className="max-w-xs w-32 self-end h-10"
/>
</div>
<ProgressBar
label=""
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
color="red"
className="w-full h-3 drop-shadow-lg"
/>
<div className="flex justify-between w-full mt-8">
<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">
<BsFileEarmarkText className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{Object.keys(groupBySession(userStats)).length}</span>
<span className="font-normal text-base text-mti-gray-dim">Exams</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">
<BsPencil className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{userStats.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-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{averageScore(userStats)}%</span>
<span className="font-normal text-base text-mti-gray-dim">Average Score</span>
</div>
</div>
</div>
</div>
</section>
<ProfileSummary
user={user}
items={[
{
icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: Object.keys(groupBySession(userStats)).length,
label: "Exams",
},
{
icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: userStats.length,
label: "Exercises",
},
{
icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: `${stats.length > 0 ? averageScore(userStats) : 0}%`,
label: "Average Score",
},
]}
/>
<section className="flex flex-col gap-3">
<div className="w-full flex justify-between gap-8 items-center">
<>
@@ -246,9 +216,9 @@ export default function Stats() {
</div>
{stats.length > 0 && (
<div className="flex gap-4 flex-wrap">
<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
{/* Exams per module */}
<div className="flex flex-col gap-10 border w-full h-96 max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
<div className="flex flex-col gap-10 border w-full h-fit md:h-96 md:max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
<span className="text-sm font-bold">Exams per Module</span>
<div className="flex flex-col gap-4">
{MODULE_ARRAY.map((module) => (
@@ -272,7 +242,7 @@ export default function Stats() {
</div>
{/* Module Score */}
<div className="flex flex-col gap-10 border w-full h-96 max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
<div className="flex flex-col gap-10 border w-full h-fit md:h-96 md:max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
<span className="text-sm font-bold">Module Score Bands</span>
<div className="flex flex-col gap-4">
{MODULE_ARRAY.map((module) => (
@@ -296,7 +266,7 @@ export default function Stats() {
</div>
{/* Total Score Band per Session */}
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-96">
<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
<span className="text-sm font-bold">Total Score Band per Session</span>
<Chart
type="line"
@@ -319,7 +289,7 @@ export default function Stats() {
</div>
{/* Module Score Band per Session */}
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-96">
<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
<span className="text-sm font-bold">Module Score Band per Session</span>
<Chart
type="line"
@@ -340,7 +310,7 @@ export default function Stats() {
</div>
{/* Average Time per Module */}
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-96">
<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
<span className="text-sm font-bold">Average Time per Module (in Minutes)</span>
<Chart
type="line"