Added more control over the stats appearing in the stats page

src/pages/stats.tsx

@@ -6,15 +6,15 @@ import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {useEffect, useState} from "react";
 import useStats from "@/hooks/useStats";
-import {averageScore, totalExamsByModule, groupBySession, groupByModule} from "@/utils/stats";
+import {averageScore, totalExamsByModule, groupBySession, groupByModule, timestampToMoment, groupByDate} from "@/utils/stats";
 import useUser from "@/hooks/useUser";
 import {ToastContainer} from "react-toastify";
-import {capitalize} from "lodash";
+import {capitalize, Dictionary} from "lodash";
 import {Module} from "@/interfaces";
 import ProgressBar from "@/components/Low/ProgressBar";
 import Layout from "@/components/High/Layout";
 import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
-import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {MODULE_ARRAY, sortByModule} from "@/utils/moduleUtils";
 import {Chart} from "react-chartjs-2";
 import useUsers from "@/hooks/useUsers";
 import Select from "react-select";
@@ -24,6 +24,7 @@ import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ProfileSummary from "@/components/ProfileSummary";
 import moment from "moment";
 import {Stat} from "@/interfaces/user";
+import {Divider} from "primereact/divider";
 
 ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
 
@@ -64,6 +65,11 @@ export default function Stats() {
 	const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
 	const [endDate, setEndDate] = useState<Date | null>(new Date());
 	const [displayStats, setDisplayStats] = useState<Stat[]>([]);
+	const [initialStatDate, setInitialStatDate] = useState<Date>();
+
+	const [monthlyOverallScoreDate, setMonthlyOverallScoreDate] = useState<Date | null>(new Date());
+	const [monthlyModuleScoreDate, setMonthlyModuleScoreDate] = useState<Date | null>(new Date());
+	const [monthlyOverallGraphScoreDate, setMonthlyOverallGraphScoreDate] = useState<Date | null>(new Date());
 
 	const {user} = useUser({redirectTo: "/login"});
 	const {users} = useUsers();
@@ -76,11 +82,8 @@ export default function Stats() {
 	}, [user]);
 
 	useEffect(() => {
-		const startDateFilter = (s: Stat) => moment.unix(s.date / 1000).isAfter(moment(startDate));
-		const endDateFilter = (s: Stat) => {
-			console.log(moment.unix(s.date / 1000), moment(endDate).isAfter(moment.unix(s.date)));
-			return moment(endDate).isAfter(moment.unix(s.date / 1000));
-		};
+		const startDateFilter = (s: Stat) => timestampToMoment(s).isAfter(moment(startDate));
+		const endDateFilter = (s: Stat) => moment(endDate).isAfter(timestampToMoment(s));
 
 		const filters = [];
 		if (startDate) filters.push(startDateFilter);
@@ -89,20 +92,39 @@ export default function Stats() {
 		setDisplayStats(filters.reduce((d, f) => d.filter(f), stats));
 	}, [endDate, startDate, stats]);
 
-	const calculateTotalScorePerSession = () => {
-		const groupedBySession = groupBySession(stats);
+	useEffect(() => {
+		setInitialStatDate(
+			stats
+				.filter((s) => s.date)
+				.sort((a, b) => timestampToMoment(a).diff(timestampToMoment(b)))
+				.map(timestampToMoment)
+				.shift()
+				?.toDate(),
+		);
+	}, [stats]);
+
+	useEffect(() => {
+		setStartDate(initialStatDate || moment("01/01/2023").toDate());
+	}, [initialStatDate]);
+
+	const calculateModuleScore = (stats: Stat[]) => {
+		const moduleStats = groupByModule(stats);
+		return Object.keys(moduleStats).map((y) => {
+			const correct = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.correct, 0);
+			const total = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.total, 0);
+
+			return {
+				module: y as Module,
+				score: calculateBandScore(correct, total, y as Module, user?.focus || "academic"),
+			};
+		});
+	};
+
+	const calculateTotalScorePerKey = (stats: Stat[], keyFunction: (stats: Stat[]) => Dictionary<Stat[]>) => {
+		const groupedBySession = keyFunction(stats);
 		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
 			const session = groupedBySession[x];
-			const moduleStats = groupByModule(session);
-			const moduleScores = Object.keys(moduleStats).map((y) => {
-				const correct = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.correct, 0);
-				const total = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.total, 0);
-
-				return {
-					module: y,
-					score: calculateBandScore(correct, total, y as Module, user?.focus || "academic"),
-				};
-			});
+			const moduleScores = calculateModuleScore(session);
 
 			return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / 4;
 		});
@@ -110,7 +132,12 @@ export default function Stats() {
 		return sessionAverage;
 	};
 
-	const calculateAverageTimePerModule = () => {
+	const calculateTotalScore = (stats: Stat[]) => {
+		const moduleScores = calculateModuleScore(stats);
+		return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / 4;
+	};
+
+	const calculateAverageTimePerModule = (stats: Stat[]) => {
 		const groupedBySession = groupBySession(stats.filter((x) => !!x.timeSpent));
 		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
 			const session = groupedBySession[x];
@@ -122,7 +149,7 @@ export default function Stats() {
 		return sessionAverage;
 	};
 
-	const calculateModularScorePerSession = (module: Module) => {
+	const calculateModularScorePerSession = (stats: Stat[], module: Module) => {
 		const groupedBySession = groupBySession(stats);
 		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
 			const session = groupedBySession[x];
@@ -208,81 +235,78 @@ export default function Stats() {
 									/>
 								)}
 							</>
-							<DatePicker
-								dateFormat="dd/MM/yyyy"
-								className="border border-mti-gray-dim/40 px-4 py-1.5 rounded-lg text-center w-[256px]"
-								startDate={startDate}
-								endDate={endDate}
-								selectsRange
-								showMonthDropdown
-								filterDate={(date) => moment(date).isSameOrBefore(moment(new Date()))}
-								onChange={([initialDate, finalDate]) => {
-									setStartDate(initialDate ?? moment("01/01/2023").toDate());
-									setEndDate(finalDate);
-								}}
-							/>
 						</div>
 
-						{displayStats.length > 0 && (
+						{stats.length > 0 && (
 							<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
-								{/* Exams per module */}
-								<div className="flex flex-col gap-10 border w-full h-fit md:h-96 md: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">
-										{MODULE_ARRAY.map((module) => (
-											<div className="flex flex-col gap-2" key={module}>
-												<div className="flex justify-between items-end">
-													<span className="text-xs">
-														<span className="font-medium">{totalExamsByModule(displayStats, module)}</span> of{" "}
-														<span className="font-medium">{Object.keys(groupBySession(displayStats)).length}</span>
+								{/* Overall Level per Month */}
+								<div className="flex flex-col items-center gap-4 border w-full h-[420px] overflow-y-scroll scrollbar-hide md:max-w-sm border-mti-gray-platinum p-4 pb-12 rounded-xl">
+									<div className="flex flex-col gap-2 w-full">
+										<span className="text-sm font-bold">Overall Level per Month</span>
+										<DatePicker
+											dateFormat="MMMM yyyy"
+											className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+											minDate={initialStatDate}
+											maxDate={new Date()}
+											selected={monthlyOverallScoreDate}
+											showMonthYearPicker
+											onChange={setMonthlyOverallScoreDate}
+										/>
+									</div>
+									<div className="w-full grid grid-cols-3 gap-4 items-center">
+										{[...Array(31).keys()].map((day) => {
+											const date = moment(
+												`${(day + 1).toString().padStart(2, "0")}/${
+													moment(monthlyOverallScoreDate).get("month") + 1
+												}/${moment(monthlyOverallScoreDate).get("year")}`,
+												"DD/MM/yyyy",
+											);
+
+											return date.isValid() ? (
+												<div
+													key={day}
+													className="flex flex-col gap-1 items-start border border-mti-gray-smoke rounded-lg overflow-hidden">
+													<span className="bg-mti-purple-ultralight w-full px-2 py-1 font-semibold">
+														Day {(day + 1).toString().padStart(2, "0")}
+													</span>
+													<span className="px-2">
+														Level{" "}
+														{calculateTotalScore(stats.filter((s) => timestampToMoment(s).isBefore(date))).toFixed(1)}
 													</span>
-													<span className="text-xs">{capitalize(module)}</span>
 												</div>
-												<ProgressBar
-													color={module}
-													percentage={
-														(totalExamsByModule(displayStats, module) * 100) /
-														Object.keys(groupBySession(displayStats)).length
-													}
-													label=""
-													className="h-3"
-												/>
-											</div>
-										))}
+											) : null;
+										})}
 									</div>
 								</div>
 
-								{/* Module Score */}
-								<div className="flex flex-col gap-10 border w-full h-fit md:h-96 md:max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
-									<span className="text-sm font-bold">Module Score Bands</span>
-									<div className="flex flex-col gap-4">
-										{MODULE_ARRAY.map((module) => (
-											<div className="flex flex-col gap-2" key={module}>
-												<div className="flex justify-between items-end">
-													<span className="text-xs">
-														<span className="font-medium">{user.levels[module]}</span> of{" "}
-														<span className="font-medium">{user.desiredLevels[module]}</span>
-													</span>
-													<span className="text-xs">{capitalize(module)}</span>
-												</div>
-												<ProgressBar
-													color={module}
-													percentage={(user.levels[module] * 100) / user.desiredLevels[module]}
-													label=""
-													className="h-3"
-												/>
-											</div>
-										))}
+								{/* Overall Level per Month Graph */}
+								<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-[420px]">
+									<div className="flex flex-col gap-2 w-full">
+										<span className="text-sm font-bold">Overall Level per Month</span>
+										<DatePicker
+											dateFormat="MMMM yyyy"
+											className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+											minDate={initialStatDate}
+											maxDate={new Date()}
+											selected={monthlyOverallScoreDate}
+											showMonthYearPicker
+											onChange={setMonthlyOverallScoreDate}
+										/>
 									</div>
-								</div>
-
-								{/* Total Score Band per Session */}
-								<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-									<span className="text-sm font-bold">Total Score Band per Session</span>
 									<Chart
 										type="line"
 										data={{
-											labels: Object.keys(groupBySession(displayStats)).map((_, index) => index),
+											labels: [...Array(31).keys()]
+												.map((day) => {
+													const date = moment(
+														`${(day + 1).toString().padStart(2, "0")}/${
+															moment(monthlyOverallScoreDate).get("month") + 1
+														}/${moment(monthlyOverallScoreDate).get("year")}`,
+														"DD/MM/yyyy",
+													);
+													return date.isValid() ? (day + 1).toString().padStart(2, "0") : undefined;
+												})
+												.filter((x) => !!x),
 											datasets: [
 												{
 													type: "line",
@@ -292,55 +316,123 @@ export default function Stats() {
 													backgroundColor: "#7872BF",
 													borderWidth: 2,
 													spanGaps: true,
-													data: calculateTotalScorePerSession(),
+													data: [...Array(31).keys()]
+														.map((day) => {
+															const date = moment(
+																`${(day + 1).toString().padStart(2, "0")}/${
+																	moment(monthlyOverallScoreDate).get("month") + 1
+																}/${moment(monthlyOverallScoreDate).get("year")}`,
+																"DD/MM/yyyy",
+															);
+
+															return date.isValid()
+																? calculateTotalScore(
+																		stats.filter((s) => timestampToMoment(s).isBefore(date)),
+																  ).toFixed(1)
+																: undefined;
+														})
+														.filter((x) => !!x),
 												},
 											],
 										}}
 									/>
 								</div>
 
-								{/* Module Score Band per Session */}
-								<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-									<span className="text-sm font-bold">Module Score Band per Session</span>
-									<Chart
-										type="line"
-										data={{
-											labels: Object.keys(groupBySession(displayStats)).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),
-												})),
-											],
-										}}
-									/>
+								{/* Module Level per Day */}
+								<div className="flex flex-col gap-8 border w-full h-fit md:h-[420px] md:max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
+									<div className="flex flex-col gap-2 w-full">
+										<span className="text-sm font-bold">Module Level per Day</span>
+										<DatePicker
+											dateFormat="dd MMMM yyyy"
+											className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+											minDate={initialStatDate}
+											maxDate={new Date()}
+											selected={monthlyModuleScoreDate}
+											onChange={setMonthlyModuleScoreDate}
+										/>
+									</div>
+									<div className="flex flex-col gap-4">
+										{calculateModuleScore(stats.filter((s) => timestampToMoment(s).isBefore(moment(monthlyModuleScoreDate))))
+											.sort(sortByModule)
+											.map(({module, score}) => (
+												<div className="flex flex-col gap-2" key={module}>
+													<div className="flex justify-between items-end">
+														<span className="text-xs">
+															<span className="font-medium">{score}</span> of <span className="font-medium">9</span>
+														</span>
+														<span className="text-xs">{capitalize(module)}</span>
+													</div>
+													<ProgressBar color={module as Module} percentage={(score * 100) / 9} label="" className="h-3" />
+												</div>
+											))}
+									</div>
 								</div>
+							</div>
+						)}
 
-								{/* Average Time per Module */}
-								<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-									<span className="text-sm font-bold">Average Time per Module (in Minutes)</span>
-									<Chart
-										type="line"
-										data={{
-											labels: Object.keys(groupBySession(displayStats.filter((s) => !!s.timeSpent))).map((_, index) => index),
-											datasets: [
-												{
-													type: "line",
-													label: "Average (in minutes)",
-													fill: false,
-													borderColor: "#6A5FB1",
-													backgroundColor: "#7872BF",
-													borderWidth: 2,
-													spanGaps: true,
-													data: calculateAverageTimePerModule(),
-												},
-											],
-										}}
-									/>
+						<Divider />
+
+						{displayStats.length > 0 && (
+							<div className="w-full flex flex-col gap-4">
+								<DatePicker
+									dateFormat="dd/MM/yyyy"
+									className="border border-mti-gray-dim/40 px-4 py-2 rounded-lg text-center w-80"
+									startDate={startDate}
+									endDate={endDate}
+									selectsRange
+									showMonthDropdown
+									filterDate={(date) => moment(date).isSameOrBefore(moment(new Date()))}
+									onChange={([initialDate, finalDate]) => {
+										setStartDate(initialDate ?? moment("01/01/2023").toDate());
+										setEndDate(finalDate);
+									}}
+								/>
+								<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
+									{/* Module Score Band per Session */}
+									<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
+										<span className="text-sm font-bold">Module Score Band per Session</span>
+										<Chart
+											type="line"
+											data={{
+												labels: Object.keys(groupBySession(displayStats)).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(displayStats, module),
+													})),
+												],
+											}}
+										/>
+									</div>
+
+									{/* Average Time per Module */}
+									<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
+										<span className="text-sm font-bold">Average Time per Module (in Minutes)</span>
+										<Chart
+											type="line"
+											data={{
+												labels: Object.keys(groupBySession(displayStats.filter((s) => !!s.timeSpent))).map(
+													(_, index) => index,
+												),
+												datasets: [
+													{
+														type: "line",
+														label: "Average (in minutes)",
+														fill: false,
+														borderColor: "#6A5FB1",
+														backgroundColor: "#7872BF",
+														borderWidth: 2,
+														spanGaps: true,
+														data: calculateAverageTimePerModule(displayStats),
+													},
+												],
+											}}
+										/>
+									</div>
 								</div>
 							</div>
 						)}