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

Updated the look of the stats page

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-15 23:23:46 +01:00
parent 11777b1bea
commit 932a2e4081
1 changed files with 36 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/pages/stats.tsx
View File

@@ -236,143 +236,55 @@ export default function Stats() {
</div>
<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">
<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">
<span className="text-sm font-bold">Exams per Module</span>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
{MODULE_ARRAY.map((module) => (
<div className="flex flex-col gap-2" key={module}>
<div className="flex justify-between items-end">
<span className="text-xs">
<span className="font-medium">{totalExamsByModule(stats, "reading")}</span> of{" "}
<span className="font-medium">{totalExamsByModule(stats, module)}</span> of{" "}
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
</span>
<span className="text-xs">Reading</span>
<span className="text-xs">{capitalize(module)}</span>
</div>
<ProgressBar
color="reading"
percentage={(totalExamsByModule(stats, "reading") * 100) / Object.keys(groupBySession(stats)).length}
color={module}
percentage={(totalExamsByModule(stats, module) * 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, "listening")}</span> of{" "}
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
</span>
<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 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"
className="h-3"
/>
</div>
))}
</div>
</div>
{/* Module Score */}
<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">
<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">
<span className="text-sm font-bold">Module Score Bands</span>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
{MODULE_ARRAY.map((module) => (
<div className="flex flex-col gap-2" key={module}>
<div className="flex justify-between items-end">
<span className="text-xs">
<span className="font-medium">{user.levels.reading}</span> of{" "}
<span className="font-medium">{user.desiredLevels.reading}</span>
<span className="font-medium">{user.levels[module]}</span> of{" "}
<span className="font-medium">{user.desiredLevels[module]}</span>
</span>
<span className="text-xs">Reading</span>
<span className="text-xs">{capitalize(module)}</span>
</div>
<ProgressBar
color="reading"
percentage={(user.levels.reading * 100) / user.desiredLevels.reading}
color={module}
percentage={(user.levels[module] * 100) / user.desiredLevels[module]}
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">{user.levels.listening}</span> of{" "}
<span className="font-medium">{user.desiredLevels.listening}</span>
</span>
<span className="text-xs">Listening</span>
</div>
<ProgressBar
color="listening"
percentage={(user.levels.listening * 100) / user.desiredLevels.listening}
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">{user.levels.writing}</span> of{" "}
<span className="font-medium">{user.desiredLevels.writing}</span>
</span>
<span className="text-xs">Writing</span>
</div>
<ProgressBar
color="writing"
percentage={(user.levels.writing * 100) / user.desiredLevels.writing}
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">{user.levels.speaking}</span> of{" "}
<span className="font-medium">{user.desiredLevels.speaking}</span>
</span>
<span className="text-xs">Speaking</span>
</div>
<ProgressBar
color="speaking"
percentage={(user.levels.speaking * 100) / user.desiredLevels.speaking}
label=""
className="h-1"
className="h-3"
/>
</div>
))}
</div>
</div>
{/* Total Score Band per Session */}
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-96">
<span className="text-sm font-bold">Total Score Band per Session</span>
<Chart
type="line"
@@ -395,7 +307,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">
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-96">
<span className="text-sm font-bold">Module Score Band per Session</span>
<Chart
type="line"