Merged in improvement/stats-page-updaes (pull request #13)

Updates to the Stats page according to the client's requests

src/components/Low/Badge.tsx

@@ -0,0 +1,30 @@
+import {Module} from "@/interfaces";
+import clsx from "clsx";
+import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+
+interface Props {
+	module: Module;
+	children: string;
+}
+
+export default function Badge({module, children}: Props) {
+	return (
+		<div
+			key={module}
+			className={clsx(
+				"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
+				module === "reading" && "bg-ielts-reading",
+				module === "listening" && "bg-ielts-listening",
+				module === "writing" && "bg-ielts-writing",
+				module === "speaking" && "bg-ielts-speaking",
+				module === "level" && "bg-ielts-level",
+			)}>
+			{module === "reading" && <BsBook className="w-4 h-4" />}
+			{module === "listening" && <BsHeadphones className="w-4 h-4" />}
+			{module === "writing" && <BsPen className="w-4 h-4" />}
+			{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+			{module === "level" && <BsClipboard className="w-4 h-4" />}
+			<span className="text-sm">{children}</span>
+		</div>
+	);
+}

src/pages/stats.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
+import {BsArrowClockwise, BsChevronLeft, BsChevronRight, BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
 import {LinearScale, Chart as ChartJS, CategoryScale, PointElement, LineElement, Legend, Tooltip, LineController} from "chart.js";
 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,10 +24,12 @@ 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";
+import Badge from "@/components/Low/Badge";
 
 ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
 
-const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8"];
+const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8", "#414288"];
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -61,9 +63,15 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 export default function Stats() {
 	const [statsUserId, setStatsUserId] = useState<string>();
-	const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
+	const [startDate, setStartDate] = useState<Date | null>(moment(new Date()).subtract(1, "weeks").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 [dailyScoreDate, setDailyScoreDate] = useState<Date | null>(new Date());
+	const [intervalDates, setIntervalDates] = useState<Date[]>([]);
 
 	const {user} = useUser({redirectTo: "/login"});
 	const {users} = useUsers();
@@ -76,53 +84,30 @@ export default function Stats() {
 	}, [user]);
 
 	useEffect(() => {
-		const startDateFilter = (s: Stat) => moment.unix(s.date / 1000).isAfter(moment(startDate));
+		setInitialStatDate(
-		const endDateFilter = (s: Stat) => {
+			stats
-			console.log(moment.unix(s.date / 1000), moment(endDate).isAfter(moment.unix(s.date)));
+				.filter((s) => s.date)
-			return moment(endDate).isAfter(moment.unix(s.date / 1000));
+				.sort((a, b) => timestampToMoment(a).diff(timestampToMoment(b)))
-		};
+				.map(timestampToMoment)
+				.shift()
+				?.toDate(),
+		);
+	}, [stats]);
 
-		const filters = [];
+	const calculateModuleScore = (stats: Stat[]) => {
-		if (startDate) filters.push(startDateFilter);
+		const moduleStats = groupByModule(stats);
-		if (endDate) filters.push(endDateFilter);
+		return Object.keys(moduleStats).map((y) => {
-
-		setDisplayStats(filters.reduce((d, f) => d.filter(f), stats));
-	}, [endDate, startDate, stats]);
-
-	const calculateTotalScorePerSession = () => {
-		const groupedBySession = groupBySession(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,
+				module: y as Module,
 				score: calculateBandScore(correct, total, y as Module, user?.focus || "academic"),
 			};
 		});
-
-			return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / 4;
-		});
-
-		return sessionAverage;
 	};
 
-	const calculateAverageTimePerModule = () => {
+	const calculateModularScorePerSession = (stats: Stat[], module: Module) => {
-		const groupedBySession = groupBySession(stats.filter((x) => !!x.timeSpent));
-		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
-			const session = groupedBySession[x];
-			const timeSpent = session[0].timeSpent!;
-
-			return Math.floor(timeSpent / session.length / 60);
-		});
-
-		return sessionAverage;
-	};
-
-	const calculateModularScorePerSession = (module: Module) => {
 		const groupedBySession = groupBySession(stats);
 		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
 			const session = groupedBySession[x];
@@ -137,6 +122,33 @@ export default function Stats() {
 		return sessionAverage;
 	};
 
+	const getListOfDateInInterval = (start: Date, end: Date) => {
+		let currentDate = moment(start);
+		const dates = [currentDate.toDate()];
+		while (moment(end).diff(currentDate, "days") > 0) {
+			currentDate = currentDate.add(1, "days");
+			dates.push(currentDate.toDate());
+		}
+
+		return dates;
+	};
+
+	useEffect(() => {
+		if (startDate && endDate) {
+			setIntervalDates(getListOfDateInInterval(startDate, endDate));
+		}
+	}, [startDate, endDate]);
+
+	const calculateTotalScore = (stats: Stat[]) => {
+		const moduleScores = calculateModuleScore(stats);
+		return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / 4;
+	};
+
+	const calculateScorePerModule = (stats: Stat[], module: Module) => {
+		const moduleScores = calculateModuleScore(stats);
+		return moduleScores.find((x) => x.module === module)?.score || -1;
+	};
+
 	return (
 		<>
 			<Head>
@@ -208,81 +220,129 @@ 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 */}
+									{/* Overall Level per Month */}
-								<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">
+									<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">
-									<span className="text-sm font-bold">Exams per Module</span>
+										<div className="flex flex-col gap-2 w-full">
-									<div className="flex flex-col gap-4">
+											<span className="text-sm font-bold">Overall Level per Month</span>
-										{MODULE_ARRAY.map((module) => (
+											<div className="flex gap-2 items-center">
-											<div className="flex flex-col gap-2" key={module}>
+												{monthlyOverallScoreDate && (
-												<div className="flex justify-between items-end">
+													<button
-													<span className="text-xs">
+														onClick={() =>
-														<span className="font-medium">{totalExamsByModule(displayStats, module)}</span> of{" "}
+															setMonthlyOverallScoreDate((prev) => moment(prev).subtract(1, "months").toDate())
-														<span className="font-medium">{Object.keys(groupBySession(displayStats)).length}</span>
+														}>
-													</span>
+														<BsChevronLeft />
-													<span className="text-xs">{capitalize(module)}</span>
+													</button>
-												</div>
+												)}
-												<ProgressBar
+												<DatePicker
-													color={module}
+													dateFormat="MMMM yyyy"
-													percentage={
+													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
-														(totalExamsByModule(displayStats, module) * 100) /
+													minDate={initialStatDate}
-														Object.keys(groupBySession(displayStats)).length
+													maxDate={new Date()}
-													}
+													selected={monthlyOverallScoreDate}
-													label=""
+													showMonthYearPicker
-													className="h-3"
+													onChange={setMonthlyOverallScoreDate}
 												/>
+												{monthlyOverallScoreDate && (
+													<button
+														disabled={moment(monthlyOverallScoreDate).add(1, "months").isAfter(moment())}
+														onClick={() => setMonthlyOverallScoreDate((prev) => moment(prev).add(1, "months").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setMonthlyOverallScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
 											</div>
-										))}
+										</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() && date.isSameOrBefore(moment()) ? (
+													<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>
+													</div>
+												) : null;
+											})}
 										</div>
 									</div>
 
-								{/* Module Score */}
+									{/* Overall Level per Month Graph */}
-								<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">
+									<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-[420px]">
-									<span className="text-sm font-bold">Module Score Bands</span>
+										<div className="flex flex-col gap-2 w-full">
-									<div className="flex flex-col gap-4">
+											<span className="text-sm font-bold">Overall Level per Month</span>
-										{MODULE_ARRAY.map((module) => (
+											<div className="flex gap-2 items-center">
-											<div className="flex flex-col gap-2" key={module}>
+												{monthlyOverallScoreDate && (
-												<div className="flex justify-between items-end">
+													<button
-													<span className="text-xs">
+														onClick={() =>
-														<span className="font-medium">{user.levels[module]}</span> of{" "}
+															setMonthlyOverallScoreDate((prev) => moment(prev).subtract(1, "months").toDate())
-														<span className="font-medium">{user.desiredLevels[module]}</span>
+														}>
-													</span>
+														<BsChevronLeft />
-													<span className="text-xs">{capitalize(module)}</span>
+													</button>
-												</div>
+												)}
-												<ProgressBar
+												<DatePicker
-													color={module}
+													dateFormat="MMMM yyyy"
-													percentage={(user.levels[module] * 100) / user.desiredLevels[module]}
+													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
-													label=""
+													minDate={initialStatDate}
-													className="h-3"
+													maxDate={new Date()}
+													selected={monthlyOverallScoreDate}
+													showMonthYearPicker
+													onChange={setMonthlyOverallScoreDate}
 												/>
-											</div>
+												{monthlyOverallScoreDate && (
-										))}
+													<button
+														disabled={moment(monthlyOverallScoreDate).add(1, "months").isAfter(moment())}
+														onClick={() => setMonthlyOverallScoreDate((prev) => moment(prev).add(1, "months").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setMonthlyOverallScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
 											</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"
+											options={{
+												scales: {
+													y: {
+														min: 0,
+														max: 9,
+													},
+												},
+											}}
 											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,20 +352,214 @@ 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 */}
+									{/* Module Level per Day */}
-								<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
+									<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">
-									<span className="text-sm font-bold">Module Score Band per Session</span>
+										<div className="flex flex-col gap-2 w-full">
+											<span className="text-sm font-bold">Module Level per Day</span>
+											<div className="flex gap-2 items-center">
+												{monthlyModuleScoreDate && (
+													<button
+														onClick={() =>
+															setMonthlyModuleScoreDate((prev) => moment(prev).subtract(1, "days").toDate())
+														}>
+														<BsChevronLeft />
+													</button>
+												)}
+												<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}
+												/>
+												{monthlyModuleScoreDate && (
+													<button
+														disabled={moment(monthlyModuleScoreDate).add(1, "days").isAfter(moment())}
+														onClick={() => setMonthlyModuleScoreDate((prev) => moment(prev).add(1, "days").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setMonthlyModuleScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
+											</div>
+										</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>
+
+								<Divider />
+
+								<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
+									{/* Module Level per Exam */}
+									<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">Module Level per Exam</span>
+											<div className="flex gap-2 items-center">
+												{dailyScoreDate && (
+													<button onClick={() => setDailyScoreDate((prev) => moment(prev).subtract(1, "days").toDate())}>
+														<BsChevronLeft />
+													</button>
+												)}
+												<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={dailyScoreDate}
+													onChange={setDailyScoreDate}
+												/>
+												{dailyScoreDate && (
+													<button
+														disabled={moment(dailyScoreDate).add(1, "days").isAfter(moment())}
+														onClick={() => setDailyScoreDate((prev) => moment(prev).add(1, "days").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setDailyScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
+											</div>
+										</div>
+
+										<div className="w-full grid grid-cols-1 gap-6 items-center">
+											{Object.keys(
+												groupBySession(
+													stats.filter(
+														(s) =>
+															Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
+															timestampToMoment(s).day() === moment(dailyScoreDate).day(),
+													),
+												),
+											).length === 0 && <span className="font-semibold ml-1">No exams performed this day...</span>}
+
+											{Object.keys(
+												groupBySession(
+													stats.filter(
+														(s) =>
+															Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
+															timestampToMoment(s).day() === moment(dailyScoreDate).day(),
+													),
+												),
+											).map((session, index) => (
+												<div key={index} className="flex flex-col gap-2 items-start rounded-lg overflow-hidden">
+													<span className="bg-mti-purple-ultralight w-full px-2 py-1 font-semibold">
+														Exam {(index + 1).toString().padStart(2, "0")}
+													</span>
+													<div className="flex justify-between w-full">
+														{MODULE_ARRAY.map((module) => {
+															const score = calculateScorePerModule(
+																groupBySession(
+																	stats.filter(
+																		(s) =>
+																			Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0,
+																	),
+																)[session],
+																module,
+															);
+
+															return score === -1 ? null : <Badge module={module}>{score.toFixed(1)}</Badge>;
+														}).filter((m) => !!m)}
+													</div>
+												</div>
+											))}
+										</div>
+									</div>
+
+									<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-[420px]">
+										<div className="flex flex-col gap-2 w-full mb-2">
+											<span className="text-sm font-bold">Module Level per Exam</span>
+											<div className="flex gap-2 items-center">
+												{dailyScoreDate && (
+													<button onClick={() => setDailyScoreDate((prev) => moment(prev).subtract(1, "days").toDate())}>
+														<BsChevronLeft />
+													</button>
+												)}
+												<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={dailyScoreDate}
+													onChange={setDailyScoreDate}
+												/>
+												{dailyScoreDate && (
+													<button
+														disabled={moment(dailyScoreDate).add(1, "days").isAfter(moment())}
+														onClick={() => setDailyScoreDate((prev) => moment(prev).add(1, "days").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setDailyScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
+											</div>
+										</div>
 										<Chart
 											type="line"
+											options={{
+												scales: {
+													y: {
+														min: 0,
+														max: 9,
+													},
+												},
+											}}
 											data={{
-											labels: Object.keys(groupBySession(displayStats)).map((_, index) => index),
+												labels: Object.keys(
+													groupBySession(
+														stats.filter(
+															(s) =>
+																Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
+																timestampToMoment(s).day() === moment(dailyScoreDate).day(),
+														),
+													),
+												).map((_, index) => `Exam ${(index + 1).toString().padStart(2, "0")}`),
 												datasets: [
 													...MODULE_ARRAY.map((module, index) => ({
 														type: "line" as const,
@@ -313,39 +567,226 @@ export default function Stats() {
 														borderColor: COLORS[index],
 														backgroundColor: COLORS[index],
 														borderWidth: 2,
-													data: calculateModularScorePerSession(module),
+														data: calculateModularScorePerSession(
+															stats.filter(
+																(s) =>
+																	Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
+																	timestampToMoment(s).day() === moment(dailyScoreDate).day(),
+															),
+															module,
+														),
 													})),
 												],
 											}}
 										/>
 									</div>
+								</div>
 
-								{/* Average Time per Module */}
+								<Divider />
+
+								<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);
+											setEndDate(finalDate);
+										}}
+									/>
+									<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
+										{/* Reading Score Band in Interval */}
 										<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>
+											<span className="text-sm font-bold">Reading Score Band in Interval</span>
 											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
 												type="line"
 												data={{
-											labels: Object.keys(groupBySession(displayStats.filter((s) => !!s.timeSpent))).map((_, index) => index),
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
 													datasets: [
 														{
 															type: "line",
-													label: "Average (in minutes)",
+															label: "Reading",
 															fill: false,
-													borderColor: "#6A5FB1",
+															borderColor: COLORS[0],
-													backgroundColor: "#7872BF",
+															backgroundColor: COLORS[0],
 															borderWidth: 2,
 															spanGaps: true,
-													data: calculateAverageTimePerModule(),
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter(
+																		(s) => timestampToMoment(s).isBefore(date) && s.module === "reading",
+																	),
+																).toFixed(1);
+															}),
+														},
+													],
+												}}
+											/>
+										</div>
+
+										{/* Listening Score Band in Interval */}
+										<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">Listening Score Band in Interval</span>
+											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
+												type="line"
+												data={{
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
+													datasets: [
+														{
+															type: "line",
+															label: "Listening",
+															fill: false,
+															borderColor: COLORS[1],
+															backgroundColor: COLORS[1],
+															borderWidth: 2,
+															spanGaps: true,
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter(
+																		(s) => timestampToMoment(s).isBefore(date) && s.module === "listening",
+																	),
+																).toFixed(1);
+															}),
+														},
+													],
+												}}
+											/>
+										</div>
+
+										{/* Writing Score Band in Interval */}
+										<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">Writing Score Band in Interval</span>
+											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
+												type="line"
+												data={{
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
+													datasets: [
+														{
+															type: "line",
+															label: "Writing",
+															fill: false,
+															borderColor: COLORS[2],
+															backgroundColor: COLORS[2],
+															borderWidth: 2,
+															spanGaps: true,
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter(
+																		(s) => timestampToMoment(s).isBefore(date) && s.module === "writing",
+																	),
+																).toFixed(1);
+															}),
+														},
+													],
+												}}
+											/>
+										</div>
+
+										{/* Speaking Score Band in Interval */}
+										<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">Speaking Score Band in Interval</span>
+											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
+												type="line"
+												data={{
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
+													datasets: [
+														{
+															type: "line",
+															label: "Speaking",
+															fill: false,
+															borderColor: COLORS[3],
+															backgroundColor: COLORS[3],
+															borderWidth: 2,
+															spanGaps: true,
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter(
+																		(s) => timestampToMoment(s).isBefore(date) && s.module === "speaking",
+																	),
+																).toFixed(1);
+															}),
+														},
+													],
+												}}
+											/>
+										</div>
+
+										{/* Level Score Band in Interval */}
+										<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">Level Score Band in Interval</span>
+											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
+												type="line"
+												data={{
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
+													datasets: [
+														{
+															type: "line",
+															label: "Level",
+															fill: false,
+															borderColor: COLORS[4],
+															backgroundColor: COLORS[4],
+															borderWidth: 2,
+															spanGaps: true,
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter((s) => timestampToMoment(s).isBefore(date) && s.module === "level"),
+																).toFixed(1);
+															}),
 														},
 													],
 												}}
 											/>
 										</div>
 									</div>
+								</div>
+							</>
 						)}
 					</section>
-					{displayStats.length === 0 && (
+					{stats.length === 0 && (
 						<section className="flex flex-col gap-3">
 							<span className="font-semibold ml-1">No stats to display...</span>
 						</section>

src/utils/moduleUtils.ts

@@ -1,7 +1,7 @@
 import {Module} from "@/interfaces";
 import {Exercise} from "@/interfaces/exam";
 
-export const MODULE_ARRAY: Module[] = ["reading", "listening", "writing", "speaking"];
+export const MODULE_ARRAY: Module[] = ["reading", "listening", "writing", "speaking", "level"];
 
 export const moduleLabels: {[key in Module]: string} = {
 	listening: "Listening",
@@ -11,7 +11,7 @@ export const moduleLabels: {[key in Module]: string} = {
 	level: "Level",
 };
 
-export const sortByModule = (a: {module: Module}, b: {module: Module}) => {
+export const sortByModule = (a: {module: Module; [key: string]: any}, b: {module: Module; [key: string]: any}) => {
 	return MODULE_ARRAY.findIndex((x) => a.module === x) - MODULE_ARRAY.findIndex((x) => b.module === x);
 };
 

src/utils/stats.ts

@@ -4,6 +4,11 @@ import {convertCamelCaseToReadable} from "@/utils/string";
 import {UserSolution} from "@/interfaces/exam";
 import {Module} from "@/interfaces";
 import {MODULES} from "@/constants/ielts";
+import moment from "moment";
+
+export const timestampToMoment = (stat: Stat): moment.Moment => {
+	return moment.unix(stat.date > Math.pow(10, 11) ? stat.date / 1000 : stat.date);
+};
 
 export const totalExams = (stats: Stat[]): number => {
 	const moduleStats = formatModuleTotalStats(stats);