Created more types of stats to be showcased:

- Total Exams per Module;
- Average Score per Module;
- Total Exercises per Type;
- Average Score per Exercise Type;

src/components/UserResultChart.tsx

@@ -1,28 +1,24 @@
-import {Module} from "@/interfaces";
-import {UserResults} from "@/interfaces/results";
 import {SEMI_TRANSPARENT} from "@/resources/colors";
-import {moduleLabels} from "@/utils/moduleUtils";
 import {Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend} from "chart.js";
 import clsx from "clsx";
 import {PolarArea} from "react-chartjs-2";
 
 interface Props {
-	results: UserResults;
+	data: {label: string; value: number}[];
-	resultKey: "score" | "total";
+	title: string;
-	label: string;
 	className?: string;
 }
 
 ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
 
-export default function UserResultChart({results, resultKey, label, className = ""}: Props) {
+export default function UserResultChart({data, title, className = ""}: Props) {
-	const labels = Object.keys(results).map((key) => moduleLabels[key as Module]);
+	const labels = data.map((x) => x.label);
-	const data = {
+	const chartData = {
 		labels,
 		datasets: [
 			{
-				label,
+				title,
-				data: Object.keys(results).map((module) => results[module as Module][resultKey]),
+				data: data.map((x) => x.value),
 				backgroundColor: Object.values(SEMI_TRANSPARENT),
 			},
 		],
@@ -30,8 +26,8 @@ export default function UserResultChart({results, resultKey, label, className =
 
 	return (
 		<div className={clsx("flex flex-col gap-4 items-center", className)}>
-			<PolarArea data={data} options={{plugins: {title: {text: label, display: true}}}} />
+			<PolarArea data={chartData} options={{plugins: {title: {text: title, display: true}}}} />
-			<h2 className="text-neutral-600 font-semibold text-lg">{label}</h2>
+			<h2 className="text-neutral-600 font-semibold text-lg">{title}</h2>
 		</div>
 	);
 }

src/interfaces/user.ts

@@ -16,6 +16,7 @@ export interface Stat {
 	exercise: string;
 	module: Module;
 	solutions: any[];
+	type: string;
 	score: {
 		correct: number;
 		total: number;

src/pages/index.tsx

@@ -2,23 +2,13 @@
 import Head from "next/head";
 import UserResultChart from "@/components/UserResultChart";
 import Navbar from "@/components/Navbar";
-import Icon from "@mdi/react";
-import {mdiPlus} from "@mdi/js";
-import Link from "next/link";
-import clsx from "clsx";
-import {infoButtonStyle} from "@/constants/buttonStyles";
 import ProfileCard from "@/components/ProfileCard";
-
-// TODO: Remove this import
-import JSON_RESULTS from "@/demo/user_results.json";
-
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
-import {Stat, User} from "@/interfaces/user";
+import {User} from "@/interfaces/user";
 import {useEffect, useState} from "react";
 import useStats from "@/hooks/useStats";
-import {Module} from "@/interfaces";
+import {formatModuleTotalStats} from "@/utils/stats";
-import {UserResults} from "@/interfaces/results";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -46,42 +36,6 @@ export default function Home({user}: {user: User}) {
 	useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
 	useEffect(() => console.log(stats), [stats]);
 
-	const formatStatsToChart = (data: Stat[]): UserResults => {
-		const result: UserResults = {
-			reading: {
-				exams: [],
-				score: 0,
-				total: 0,
-			},
-			listening: {
-				exams: [],
-				score: 0,
-				total: 0,
-			},
-			writing: {
-				exams: [],
-				score: 0,
-				total: 0,
-			},
-			speaking: {
-				exams: [],
-				score: 0,
-				total: 0,
-			},
-		};
-
-		data.forEach((stat) => {
-			if (result[stat.module].exams)
-				result[stat.module] = {
-					exams: [...result[stat.module].exams.filter((x) => x !== stat.exam), stat.exam],
-					total: result[stat.module].score + (result[stat.module].exams.includes(stat.exam) ? 0 : 1),
-					score: result[stat.module].total + 1,
-				};
-		});
-
-		return result;
-	};
-
 	return (
 		<>
 			<Head>
@@ -102,7 +56,7 @@ export default function Home({user}: {user: User}) {
 						</section>
 						{!isLoading && stats && (
 							<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
-								<UserResultChart results={formatStatsToChart(stats)} resultKey="total" label="Total exams" className="w-2/3" />
+								<UserResultChart data={formatModuleTotalStats(stats)} title="Total exams" className="w-2/3" />
 							</section>
 						)}
 					</section>

src/utils/stats.ts

@@ -0,0 +1,92 @@
+import {Module} from "@/interfaces";
+import {Stat} from "@/interfaces/user";
+import {capitalize} from "lodash";
+import {convertCamelCaseToReadable} from "@/utils/string";
+
+export const formatModuleTotalStats = (stats: Stat[]): {label: string; value: number}[] => {
+	const result: {[key in Module]: {exams: string[]; total: number}} = {
+		reading: {
+			exams: [],
+			total: 0,
+		},
+		listening: {
+			exams: [],
+			total: 0,
+		},
+		writing: {
+			exams: [],
+			total: 0,
+		},
+		speaking: {
+			exams: [],
+			total: 0,
+		},
+	};
+
+	stats.forEach((stat) => {
+		if (result[stat.module].exams)
+			result[stat.module] = {
+				exams: [...result[stat.module].exams.filter((x) => x !== stat.exam), stat.exam],
+				total: result[stat.module].total + 1,
+			};
+	});
+
+	return Object.keys(result).map((key) => ({label: capitalize(key), value: result[key as Module].total}));
+};
+
+export const formatModuleAverageScoreStats = (stats: Stat[]): {label: string; value: number}[] => {
+	const moduleScores: {[key: string]: {correct: number; total: number}} = {};
+
+	stats.forEach((stat) => {
+		if (stat.module in moduleScores) {
+			moduleScores[stat.module] = {
+				correct: moduleScores[stat.module].correct + stat.score.correct,
+				total: moduleScores[stat.module].total + stat.score.total,
+			};
+		} else {
+			moduleScores[stat.module] = stat.score;
+		}
+	});
+
+	return Object.keys(moduleScores).map((x) => {
+		const {correct, total} = moduleScores[x as keyof typeof moduleScores];
+
+		return {
+			label: capitalize(x),
+			value: correct / total,
+		};
+	});
+};
+
+export const formatExerciseTotalStats = (stats: Stat[]): {label: string; value: number}[] => {
+	const totalExercises = stats.map((stat) => ({
+		label: convertCamelCaseToReadable(stat.type),
+		value: stats.filter((x) => x.type === stat.type).length,
+	}));
+
+	return totalExercises.filter((ex, index) => totalExercises.findIndex((x) => x.label === ex.label) === index);
+};
+
+export const formatExerciseAverageScoreStats = (stats: Stat[]): {label: string; value: number}[] => {
+	const typeScores: {[key: string]: {correct: number; total: number}} = {};
+
+	stats.forEach((stat) => {
+		if (stat.type in typeScores) {
+			typeScores[stat.type] = {
+				correct: typeScores[stat.type].correct + stat.score.correct,
+				total: typeScores[stat.type].total + stat.score.total,
+			};
+		} else {
+			typeScores[stat.type] = stat.score;
+		}
+	});
+
+	return Object.keys(typeScores).map((x) => {
+		const {correct, total} = typeScores[x as keyof typeof typeScores];
+
+		return {
+			label: convertCamelCaseToReadable(x),
+			value: correct / total,
+		};
+	});
+};