Added more colors to the Charts

src/components/UserResultChart.tsx

@@ -9,11 +9,12 @@ interface Props {
 	label?: string;
 	title: string;
 	type: string;
+	colors?: string[];
 }
 
 ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
 
-export default function UserResultChart({data, type, label, title}: Props) {
+export default function SingleDatasetChart({data, type, label, title, colors = Object.values(SEMI_TRANSPARENT)}: Props) {
 	const labels = data.map((x) => x.label);
 	const chartData = {
 		labels,
@@ -21,7 +22,7 @@ export default function UserResultChart({data, type, label, title}: Props) {
 			{
 				label,
 				data: data.map((x) => x.value),
-				backgroundColor: Object.values(SEMI_TRANSPARENT),
+				backgroundColor: colors,
 			},
 		],
 	};

src/constants/chartColors.json

@@ -0,0 +1,68 @@
+[
+  "#3f3f46",
+  "#6b7280",
+  "#d6d3d1",
+  "#15803d",
+  "#fdba74",
+  "#7dd3fc",
+  "#0f766e",
+  "#fda4af",
+  "#ef4444",
+  "#d4d4d4",
+  "#ec4899",
+  "#0ea5e9",
+  "#14b8a6",
+  "#4d7c0f",
+  "#93c5fd",
+  "#404040",
+  "#f97316",
+  "#bef264",
+  "#cbd5e1",
+  "#6366f1",
+  "#8b5cf6",
+  "#6ee7b7",
+  "#fcd34d",
+  "#0369a1",
+  "#64748b",
+  "#71717a",
+  "#374151",
+  "#d4d4d8",
+  "#d946ef",
+  "#44403c",
+  "#10b981",
+  "#3b82f6",
+  "#f59e0b",
+  "#d8b4fe",
+  "#f0abfc",
+  "#c4b5fd",
+  "#86efac",
+  "#fca5a5",
+  "#5eead4",
+  "#f43f5e",
+  "#eab308",
+  "#b91c1c",
+  "#a855f7",
+  "#0e7490",
+  "#06b6d4",
+  "#b45309",
+  "#6d28d9",
+  "#a21caf",
+  "#84cc16",
+  "#67e8f9",
+  "#047857",
+  "#22c55e",
+  "#be185d",
+  "#334155",
+  "#be123c",
+  "#a5b4fc",
+  "#1d4ed8",
+  "#f9a8d4",
+  "#a16207",
+  "#7e22ce",
+  "#78716c",
+  "#fde047",
+  "#737373",
+  "#c2410c",
+  "#4338ca",
+  "#d1d5db"
+]

src/pages/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import UserResultChart from "@/components/UserResultChart";
+import SingleDatasetChart from "@/components/UserResultChart";
 import Navbar from "@/components/Navbar";
 import ProfileCard from "@/components/ProfileCard";
 import {withIronSessionSsr} from "iron-session/next";
@@ -72,7 +72,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 type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
+							<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
 						</section>
 					)}
 				</div>

src/pages/stats.tsx

@@ -1,15 +1,17 @@
 import Navbar from "@/components/Navbar";
-import UserResultChart from "@/components/UserResultChart";
+import SingleDatasetChart from "@/components/UserResultChart";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
 import {User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
-import {formatExerciseAverageScoreStats, formatModuleAverageScoreStats, formatModuleTotalStats} from "@/utils/stats";
+import {formatExerciseAverageScoreStats, formatExerciseTotalStats, formatModuleAverageScoreStats, formatModuleTotalStats} from "@/utils/stats";
 import {withIronSessionSsr} from "iron-session/next";
 import Head from "next/head";
 import {AutoComplete} from "primereact/autocomplete";
 import {Divider} from "primereact/divider";
 import {useEffect, useState} from "react";
+import chartColors from "@/constants/chartColors.json";
+import {shuffle} from "lodash";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -77,7 +79,7 @@ export default function Stats({user}: {user: User}) {
 							{!isStatsLoading && stats && (
 								<>
 									<div className="max-w-lg">
-										<UserResultChart
+										<SingleDatasetChart
 											type="polarArea"
 											data={formatModuleTotalStats(stats)}
 											title="Exams per Module"
@@ -85,7 +87,7 @@ export default function Stats({user}: {user: User}) {
 										/>
 									</div>
 									<div className="max-w-lg">
-										<UserResultChart
+										<SingleDatasetChart
 											type="polarArea"
 											data={formatModuleAverageScoreStats(stats)}
 											title="Average Score per Module"
@@ -93,7 +95,7 @@ export default function Stats({user}: {user: User}) {
 										/>
 									</div>
 									<div className="max-w-lg">
-										<UserResultChart type="polarArea" data={formatModuleTotalStats(stats)} title="Total exams" />
+										<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Total exams" />
 									</div>
 								</>
 							)}
@@ -108,14 +110,26 @@ export default function Stats({user}: {user: User}) {
 
 						<div className="flex flex-col md:grid md:grid-cols-3 w-full gap-4">
 							{!isStatsLoading && stats && (
+								<>
 									<div className="max-w-lg">
-									<UserResultChart
+										<SingleDatasetChart
+											type="polarArea"
+											data={formatExerciseTotalStats(stats)}
+											title="Exercises per Type"
+											label="Total"
+											colors={chartColors}
+										/>
+									</div>
+									<div className="max-w-lg">
+										<SingleDatasetChart
 											type="polarArea"
 											data={formatExerciseAverageScoreStats(stats)}
 											title="Average Score by Exercise"
 											label="Average"
+											colors={chartColors}
 										/>
 									</div>
+								</>
 							)}
 						</div>
 					</section>