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

Prevented the stats page from crashing when there are no stats

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-09-28 00:16:43 +01:00
parent 41040f92c3
commit 7af607d476
1 changed files with 112 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/pages/stats.tsx
View File

@@ -168,118 +168,127 @@ export default function Stats() {
</div> </div>
</div> </div>
</section> </section>
<section className="flex flex-col gap-3"> {stats.length > 0 && (
<div className="flex gap-4 flex-wrap"> <section className="flex flex-col gap-3">
{/* Exams per module */} <div className="flex gap-4 flex-wrap">
<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"> {/* Exams per module */}
<span className="text-sm font-bold">Exams per Module</span> <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-4"> <span className="text-sm font-bold">Exams per Module</span>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-4">
<div className="flex justify-between items-end"> <div className="flex flex-col gap-2">
<span className="text-xs"> <div className="flex justify-between items-end">
<span className="font-medium">{totalExamsByModule(stats, "reading")}</span> of{" "} <span className="text-xs">
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span> <span className="font-medium">{totalExamsByModule(stats, "reading")}</span> of{" "}
</span> <span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
<span className="text-xs">Reading</span> </span>
<span className="text-xs">Reading</span>
</div>
<ProgressBar
color="reading"
percentage={(totalExamsByModule(stats, "reading") * 100) / Object.keys(groupBySession(stats)).length}
label=""
className="h-1"
/>
</div> </div>
<ProgressBar <div className="flex flex-col gap-2">
color="reading" <div className="flex justify-between items-end">
percentage={(totalExamsByModule(stats, "reading") * 100) / Object.keys(groupBySession(stats)).length} <span className="text-xs">
label="" <span className="font-medium">{totalExamsByModule(stats, "listening")}</span> of{" "}
className="h-1" <span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
/> </span>
</div> <span className="text-xs">Listening</span>
<div className="flex flex-col gap-2"> </div>
<div className="flex justify-between items-end"> <ProgressBar
<span className="text-xs"> color="listening"
<span className="font-medium">{totalExamsByModule(stats, "listening")}</span> of{" "} percentage={
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span> (totalExamsByModule(stats, "listening") * 100) / Object.keys(groupBySession(stats)).length
</span> }
<span className="text-xs">Listening</span> label=""
className="h-1"
/>
</div> </div>
<ProgressBar <div className="flex flex-col gap-2">
color="listening" <div className="flex justify-between items-end">
percentage={(totalExamsByModule(stats, "listening") * 100) / Object.keys(groupBySession(stats)).length} <span className="text-xs">
label="" <span className="font-medium">{totalExamsByModule(stats, "writing")}</span> of{" "}
className="h-1" <span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
/> </span>
</div> <span className="text-xs">Writing</span>
<div className="flex flex-col gap-2"> </div>
<div className="flex justify-between items-end"> <ProgressBar
<span className="text-xs"> color="writing"
<span className="font-medium">{totalExamsByModule(stats, "writing")}</span> of{" "} percentage={(totalExamsByModule(stats, "writing") * 100) / Object.keys(groupBySession(stats)).length}
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span> label=""
</span> className="h-1"
<span className="text-xs">Writing</span> />
</div> </div>
<ProgressBar <div className="flex flex-col gap-2">
color="writing" <div className="flex justify-between items-end">
percentage={(totalExamsByModule(stats, "writing") * 100) / Object.keys(groupBySession(stats)).length} <span className="text-xs">
label="" <span className="font-medium">{totalExamsByModule(stats, "speaking")}</span> of{" "}
className="h-1" <span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
/> </span>
</div> <span className="text-xs">Speaking</span>
<div className="flex flex-col gap-2"> </div>
<div className="flex justify-between items-end"> <ProgressBar
<span className="text-xs"> color="speaking"
<span className="font-medium">{totalExamsByModule(stats, "speaking")}</span> of{" "} percentage={(totalExamsByModule(stats, "speaking") * 100) / Object.keys(groupBySession(stats)).length}
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span> label=""
</span> className="h-1"
<span className="text-xs">Speaking</span> />
</div> </div>
<ProgressBar
color="speaking"
percentage={(totalExamsByModule(stats, "speaking") * 100) / Object.keys(groupBySession(stats)).length}
label=""
className="h-1"
/>
</div> </div>
</div> </div>
</div>
<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl"> <div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
<span className="text-sm font-bold">Total Score Band per Session</span> <span className="text-sm font-bold">Total Score Band per Session</span>
<Chart <Chart
type="line" type="line"
data={{ data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index), labels: Object.keys(groupBySession(stats)).map((_, index) => index),
datasets: [ datasets: [
{ {
type: "line", type: "line",
label: "Total", label: "Total",
fill: false, fill: false,
borderColor: "#6A5FB1", borderColor: "#6A5FB1",
backgroundColor: "#7872BF", backgroundColor: "#7872BF",
borderWidth: 2, borderWidth: 2,
spanGaps: true, spanGaps: true,
data: calculateTotalScorePerSession(), data: calculateTotalScorePerSession(),
}, },
], ],
}} }}
/> />
</div> </div>
<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl"> <div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
<span className="text-sm font-bold">Module Score Band per Session</span> <span className="text-sm font-bold">Module Score Band per Session</span>
<Chart <Chart
type="line" type="line"
data={{ data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index), labels: Object.keys(groupBySession(stats)).map((_, index) => index),
datasets: [ datasets: [
...MODULE_ARRAY.map((module, index) => ({ ...MODULE_ARRAY.map((module, index) => ({
type: "line" as const, type: "line" as const,
label: capitalize(module), label: capitalize(module),
borderColor: COLORS[index], borderColor: COLORS[index],
backgroundColor: COLORS[index], backgroundColor: COLORS[index],
borderWidth: 2, borderWidth: 2,
data: calculateModularScorePerSession(module), data: calculateModularScorePerSession(module),
})), })),
], ],
}} }}
/> />
</div>
</div> </div>
</div> </section>
</section> )}
{stats.length === 0 && (
<section className="flex flex-col gap-3">
<span className="font-semibold ml-1">No stats to display...</span>
</section>
)}
</Layout> </Layout>
)} )}
</> </>