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

Added the timeSpent to the stats

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-16 00:18:45 +01:00
parent e8b44ee10e
commit 635c92791c
5 changed files with 119 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/pages/stats.tsx
View File

@@ -20,7 +20,6 @@ import useUsers from "@/hooks/useUsers";
import Select from "react-select";
import useGroups from "@/hooks/useGroups";
import DatePicker from "react-datepicker";
import moment from "moment";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
@@ -104,6 +103,18 @@ export default function Stats() {
return sessionAverage;
};
const calculateAverageTimePerModule = () => {
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) => {
@@ -185,44 +196,43 @@ export default function Stats() {
</div>
</div>
</section>
{stats.length > 0 && (
<section className="flex flex-col gap-3">
<div className="w-full flex justify-between gap-8 items-center">
<>
{(user.type === "developer" || user.type === "owner") && (
<Select
className="w-full"
options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
styles={{
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
)}
{(user.type === "admin" || user.type === "teacher") && groups.length > 0 && (
<Select
className="w-full"
options={users
.filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
styles={{
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
)}
</>
{/* <DatePicker
<section className="flex flex-col gap-3">
<div className="w-full flex justify-between gap-8 items-center">
<>
{(user.type === "developer" || user.type === "owner") && (
<Select
className="w-full"
options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
styles={{
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
)}
{(user.type === "admin" || user.type === "teacher") && groups.length > 0 && (
<Select
className="w-full"
options={users
.filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
styles={{
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
)}
</>
{/* <DatePicker
dateFormat="dd/MM/yyyy"
startDate={startDate}
endDate={endDate}
@@ -233,7 +243,9 @@ export default function Stats() {
setEndDate(finalDate);
}}
/> */}
</div>
</div>
{stats.length > 0 && (
<div className="flex gap-4 flex-wrap">
{/* Exams per module */}
<div className="flex flex-col gap-10 border w-full h-96 max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
@@ -326,9 +338,32 @@ export default function Stats() {
}}
/>
</div>
{/* Average Time per Module */}
<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-96">
<span className="text-sm font-bold">Average Time per Module (in Minutes)</span>
<Chart
type="line"
data={{
labels: Object.keys(groupBySession(stats.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(),
},
],
}}
/>
</div>
</div>
</section>
)}
)}
</section>
{stats.length === 0 && (
<section className="flex flex-col gap-3">
<span className="font-semibold ml-1">No stats to display...</span>