devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the ability to view the stats in a specific time interval

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-12-18 17:57:27 +00:00
parent 6c49409de8
commit c37bb2691b
2 changed files with 42 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/dashboards/Admin.tsx
View File

@@ -206,7 +206,7 @@ export default function AdminDashboard({user}: Props) {
const DefaultDashboard = () => ( const DefaultDashboard = () => (
<> <>
<section className="w-full grid grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between"> <section className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between">
<IconCard <IconCard
Icon={BsPersonFill} Icon={BsPersonFill}
label="Students" label="Students"

71
src/pages/stats.tsx
View File

@@ -22,6 +22,8 @@ import useGroups from "@/hooks/useGroups";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
import {shouldRedirectHome} from "@/utils/navigation.disabled"; import {shouldRedirectHome} from "@/utils/navigation.disabled";
import ProfileSummary from "@/components/ProfileSummary"; import ProfileSummary from "@/components/ProfileSummary";
import moment from "moment";
import {Stat} from "@/interfaces/user";
ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip); ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
@@ -59,8 +61,9 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
export default function Stats() { export default function Stats() {
const [statsUserId, setStatsUserId] = useState<string>(); const [statsUserId, setStatsUserId] = useState<string>();
const [startDate, setStartDate] = useState<Date | null>(null); const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
const [endDate, setEndDate] = useState<Date | null>(new Date()); const [endDate, setEndDate] = useState<Date | null>(new Date());
const [displayStats, setDisplayStats] = useState<Stat[]>([]);
const {user} = useUser({redirectTo: "/login"}); const {user} = useUser({redirectTo: "/login"});
const {users} = useUsers(); const {users} = useUsers();
@@ -72,16 +75,19 @@ export default function Stats() {
if (user) setStatsUserId(user.id); if (user) setStatsUserId(user.id);
}, [user]); }, [user]);
// useEffect(() => { useEffect(() => {
// if (stats && stats.length > 0) { const startDateFilter = (s: Stat) => moment.unix(s.date / 1000).isAfter(moment(startDate));
// const sortedStats = stats.sort((a, b) => a.date - b.date); const endDateFilter = (s: Stat) => {
// const firstStat = sortedStats.shift()!; console.log(moment.unix(s.date / 1000), moment(endDate).isAfter(moment.unix(s.date)));
return moment(endDate).isAfter(moment.unix(s.date / 1000));
};
// setStartDate(moment.unix(firstStat.date).toDate()); const filters = [];
// console.log(stats.filter((x) => moment.unix(x.date).isAfter(startDate))); if (startDate) filters.push(startDateFilter);
// console.log(stats.filter((x) => moment.unix(x.date).isBefore(endDate))); if (endDate) filters.push(endDateFilter);
// }
// }, [stats]); setDisplayStats(filters.reduce((d, f) => d.filter(f), stats));
}, [endDate, startDate, stats]);
const calculateTotalScorePerSession = () => { const calculateTotalScorePerSession = () => {
const groupedBySession = groupBySession(stats); const groupedBySession = groupBySession(stats);
@@ -167,7 +173,7 @@ export default function Stats() {
/> />
<section className="flex flex-col gap-3"> <section className="flex flex-col gap-3">
<div className="w-full flex justify-between gap-8 items-center"> <div className="w-full flex justify-between gap-4 items-center">
<> <>
{(user.type === "developer" || user.type === "admin") && ( {(user.type === "developer" || user.type === "admin") && (
<Select <Select
@@ -202,20 +208,22 @@ export default function Stats() {
/> />
)} )}
</> </>
{/* <DatePicker <DatePicker
dateFormat="dd/MM/yyyy" dateFormat="dd/MM/yyyy"
startDate={startDate} className="border border-mti-gray-dim/40 px-4 py-1.5 rounded-lg text-center w-[256px]"
endDate={endDate} startDate={startDate}
selectsRange endDate={endDate}
filterDate={(date) => !moment(date).isSameOrBefore(moment(startDate))} selectsRange
onChange={([initialDate, finalDate]) => { showMonthDropdown
setStartDate(initialDate); filterDate={(date) => moment(date).isSameOrBefore(moment(new Date()))}
setEndDate(finalDate); onChange={([initialDate, finalDate]) => {
}} setStartDate(initialDate ?? moment("01/01/2023").toDate());
/> */} setEndDate(finalDate);
}}
/>
</div> </div>
{stats.length > 0 && ( {displayStats.length > 0 && (
<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap"> <div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
{/* Exams per module */} {/* 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"> <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">
@@ -225,14 +233,17 @@ export default function Stats() {
<div className="flex flex-col gap-2" key={module}> <div className="flex flex-col gap-2" key={module}>
<div className="flex justify-between items-end"> <div className="flex justify-between items-end">
<span className="text-xs"> <span className="text-xs">
<span className="font-medium">{totalExamsByModule(stats, module)}</span> of{" "} <span className="font-medium">{totalExamsByModule(displayStats, module)}</span> of{" "}
<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span> <span className="font-medium">{Object.keys(groupBySession(displayStats)).length}</span>
</span> </span>
<span className="text-xs">{capitalize(module)}</span> <span className="text-xs">{capitalize(module)}</span>
</div> </div>
<ProgressBar <ProgressBar
color={module} color={module}
percentage={(totalExamsByModule(stats, module) * 100) / Object.keys(groupBySession(stats)).length} percentage={
(totalExamsByModule(displayStats, module) * 100) /
Object.keys(groupBySession(displayStats)).length
}
label="" label=""
className="h-3" className="h-3"
/> />
@@ -271,7 +282,7 @@ export default function Stats() {
<Chart <Chart
type="line" type="line"
data={{ data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index), labels: Object.keys(groupBySession(displayStats)).map((_, index) => index),
datasets: [ datasets: [
{ {
type: "line", type: "line",
@@ -294,7 +305,7 @@ export default function Stats() {
<Chart <Chart
type="line" type="line"
data={{ data={{
labels: Object.keys(groupBySession(stats)).map((_, index) => index), labels: Object.keys(groupBySession(displayStats)).map((_, index) => index),
datasets: [ datasets: [
...MODULE_ARRAY.map((module, index) => ({ ...MODULE_ARRAY.map((module, index) => ({
type: "line" as const, type: "line" as const,
@@ -315,7 +326,7 @@ export default function Stats() {
<Chart <Chart
type="line" type="line"
data={{ data={{
labels: Object.keys(groupBySession(stats.filter((s) => !!s.timeSpent))).map((_, index) => index), labels: Object.keys(groupBySession(displayStats.filter((s) => !!s.timeSpent))).map((_, index) => index),
datasets: [ datasets: [
{ {
type: "line", type: "line",
@@ -334,7 +345,7 @@ export default function Stats() {
</div> </div>
)} )}
</section> </section>
{stats.length === 0 && ( {displayStats.length === 0 && (
<section className="flex flex-col gap-3"> <section className="flex flex-col gap-3">
<span className="font-semibold ml-1">No stats to display...</span> <span className="font-semibold ml-1">No stats to display...</span>
</section> </section>