Updated the look of the stats page
This commit is contained in:
Tiago Ribeiro
@@ -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">
|
||||
<div className="flex justify-between items-end">
|
||||
<span className="text-xs">
|
||||
<span className="font-medium">{totalExamsByModule(stats, "reading")}</span> of{" "}
|
||||
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
|
||||
</span>
|
||||
<span className="text-xs">Reading</span>
|
||||
{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, module)}</span> of{" "}
|
||||
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
|
||||
</span>
|
||||
<span className="text-xs">{capitalize(module)}</span>
|
||||
</div>
|
||||
<ProgressBar
|
||||
color={module}
|
||||
percentage={(totalExamsByModule(stats, module) * 100) / Object.keys(groupBySession(stats)).length}
|
||||
label=""
|
||||
className="h-3"
|
||||
/>
|
||||
</div>
|
||||
<ProgressBar
|
||||
color="reading"
|
||||
percentage={(totalExamsByModule(stats, "reading") * 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"
|
||||
/>
|
||||
</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">
|
||||
<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>
|
||||
{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[module]}</span> of{" "}
|
||||
<span className="font-medium">{user.desiredLevels[module]}</span>
|
||||
</span>
|
||||
<span className="text-xs">{capitalize(module)}</span>
|
||||
</div>
|
||||
<ProgressBar
|
||||
color={module}
|
||||
percentage={(user.levels[module] * 100) / user.desiredLevels[module]}
|
||||
label=""
|
||||
className="h-3"
|
||||
/>
|
||||
</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">
|
||||
<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"
|
||||
|
||||
Reference in New Issue
Block a user