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;
-	resultKey: "score" | "total";
-	label: string;
+	data: {label: string; value: number}[];
+	title: string;
 	className?: string;
 }
 
 ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
 
-export default function UserResultChart({results, resultKey, label, className = ""}: Props) {
-	const labels = Object.keys(results).map((key) => moduleLabels[key as Module]);
-	const data = {
+export default function UserResultChart({data, title, className = ""}: Props) {
+	const labels = data.map((x) => x.label);
+	const chartData = {
 		labels,
 		datasets: [
 			{
-				label,
-				data: Object.keys(results).map((module) => results[module as Module][resultKey]),
+				title,
+				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}}}} />
-			<h2 className="text-neutral-600 font-semibold text-lg">{label}</h2>
+			<PolarArea data={chartData} options={{plugins: {title: {text: title, display: true}}}} />
+			<h2 className="text-neutral-600 font-semibold text-lg">{title}</h2>
 		</div>
 	);
 }