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

Added more colors to the Charts

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-21 11:58:42 +01:00
parent ed11d6f9d6
commit 713771d949
4 changed files with 100 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/stats.tsx
View File

@@ -1,15 +1,17 @@
import Navbar from "@/components/Navbar";
import UserResultChart from "@/components/UserResultChart";
import SingleDatasetChart from "@/components/UserResultChart";
import useStats from "@/hooks/useStats";
import useUsers from "@/hooks/useUsers";
import {User} from "@/interfaces/user";
import {sessionOptions} from "@/lib/session";
import {formatExerciseAverageScoreStats, formatModuleAverageScoreStats, formatModuleTotalStats} from "@/utils/stats";
import {formatExerciseAverageScoreStats, formatExerciseTotalStats, formatModuleAverageScoreStats, formatModuleTotalStats} from "@/utils/stats";
import {withIronSessionSsr} from "iron-session/next";
import Head from "next/head";
import {AutoComplete} from "primereact/autocomplete";
import {Divider} from "primereact/divider";
import {useEffect, useState} from "react";
import chartColors from "@/constants/chartColors.json";
import {shuffle} from "lodash";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -77,7 +79,7 @@ export default function Stats({user}: {user: User}) {
{!isStatsLoading && stats && (
<>
<div className="max-w-lg">
<UserResultChart
<SingleDatasetChart
type="polarArea"
data={formatModuleTotalStats(stats)}
title="Exams per Module"
@@ -85,7 +87,7 @@ export default function Stats({user}: {user: User}) {
/>
</div>
<div className="max-w-lg">
<UserResultChart
<SingleDatasetChart
type="polarArea"
data={formatModuleAverageScoreStats(stats)}
title="Average Score per Module"
@@ -93,7 +95,7 @@ export default function Stats({user}: {user: User}) {
/>
</div>
<div className="max-w-lg">
<UserResultChart type="polarArea" data={formatModuleTotalStats(stats)} title="Total exams" />
<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Total exams" />
</div>
</>
)}
@@ -108,14 +110,26 @@ export default function Stats({user}: {user: User}) {
<div className="flex flex-col md:grid md:grid-cols-3 w-full gap-4">
{!isStatsLoading && stats && (
<div className="max-w-lg">
<UserResultChart
type="polarArea"
data={formatExerciseAverageScoreStats(stats)}
title="Average Score by Exercise"
label="Average"
/>
</div>
<>
<div className="max-w-lg">
<SingleDatasetChart
type="polarArea"
data={formatExerciseTotalStats(stats)}
title="Exercises per Type"
label="Total"
colors={chartColors}
/>
</div>
<div className="max-w-lg">
<SingleDatasetChart
type="polarArea"
data={formatExerciseAverageScoreStats(stats)}
title="Average Score by Exercise"
label="Average"
colors={chartColors}
/>
</div>
</>
)}
</div>
</section>