Prevented the stats page from crashing when there are no stats
This commit is contained in:
Tiago Ribeiro
@@ -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>
|
||||
)}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user