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

71
src/pages/stats.tsx
View File

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