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>
</section>
<section className="flex flex-col gap-3">
<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">
<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>
{stats.length > 0 && (
<section className="flex flex-col gap-3">
<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">
<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>
</div>
<ProgressBar
color="reading"
percentage={(totalExamsByModule(stats, "reading") * 100) / Object.keys(groupBySession(stats)).length}
label=""
className="h-1"
/>
</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 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>
<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 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>
<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 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>
<ProgressBar
color="speaking"
percentage={(totalExamsByModule(stats, "speaking") * 100) / Object.keys(groupBySession(stats)).length}
label=""
className="h-1"
/>
</div>
</div>
</div>
<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>
<Chart
type="line"
data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index),
datasets: [
{
type: "line",
label: "Total",
fill: false,
borderColor: "#6A5FB1",
backgroundColor: "#7872BF",
borderWidth: 2,
spanGaps: true,
data: calculateTotalScorePerSession(),
},
],
}}
/>
</div>
<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>
<Chart
type="line"
data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index),
datasets: [
{
type: "line",
label: "Total",
fill: false,
borderColor: "#6A5FB1",
backgroundColor: "#7872BF",
borderWidth: 2,
spanGaps: true,
data: calculateTotalScorePerSession(),
},
],
}}
/>
</div>
<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>
<Chart
type="line"
data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index),
datasets: [
...MODULE_ARRAY.map((module, index) => ({
type: "line" as const,
label: capitalize(module),
borderColor: COLORS[index],
backgroundColor: COLORS[index],
borderWidth: 2,
data: calculateModularScorePerSession(module),
})),
],
}}
/>
<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>
<Chart
type="line"
data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index),
datasets: [
...MODULE_ARRAY.map((module, index) => ({
type: "line" as const,
label: capitalize(module),
borderColor: COLORS[index],
backgroundColor: COLORS[index],
borderWidth: 2,
data: calculateModularScorePerSession(module),
})),
],
}}
/>
</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>
)}
</>