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

Updated the stats page a bit more

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-02 14:16:34 +01:00
parent 0f0b7748d7
commit 9239068cde
3 changed files with 77 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/pages/stats.tsx
View File

@@ -50,6 +50,7 @@ export default function Stats() {
const {users} = useUsers();
const {groups} = useGroups(user?.id);
const {stats} = useStats(statsUserId);
const {stats: userStats} = useStats(user?.id);
useEffect(() => {
if (user) setStatsUserId(user.id);
@@ -132,7 +133,7 @@ export default function Stats() {
<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(stats)).length}</span>
<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>
@@ -141,7 +142,7 @@ export default function Stats() {
<BsPencil className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{stats.length}</span>
<span className="font-bold text-xl">{userStats.length}</span>
<span className="font-normal text-base text-mti-gray-dim">Exercises</span>
</div>
</div>
@@ -150,7 +151,7 @@ export default function Stats() {
<BsStar className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{averageScore(stats)}%</span>
<span className="font-bold text-xl">{averageScore(userStats)}%</span>
<span className="font-normal text-base text-mti-gray-dim">Average Score</span>
</div>
</div>
@@ -245,7 +246,75 @@ export default function Stats() {
</div>
</div>
<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
{/* 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">
<span className="text-sm font-bold">Module Score Bands</span>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<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>
<span className="text-xs">Reading</span>
</div>
<ProgressBar
color="reading"
percentage={(user.levels.reading * 100) / user.desiredLevels.reading}
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"
/>
</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">
<span className="text-sm font-bold">Total Score Band per Session</span>
<Chart
type="line"
@@ -267,7 +336,8 @@ export default function Stats() {
/>
</div>
<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
{/* Module Score Band per Session */}
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
<span className="text-sm font-bold">Module Score Band per Session</span>
<Chart
type="line"