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

5
src/components/UserResultChart.tsx
View File

@@ -9,11 +9,12 @@ interface Props {
label?: string;
title: string;
type: string;
colors?: string[];
}
ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
export default function UserResultChart({data, type, label, title}: Props) {
export default function SingleDatasetChart({data, type, label, title, colors = Object.values(SEMI_TRANSPARENT)}: Props) {
const labels = data.map((x) => x.label);
const chartData = {
labels,
@@ -21,7 +22,7 @@ export default function UserResultChart({data, type, label, title}: Props) {
{
label,
data: data.map((x) => x.value),
backgroundColor: Object.values(SEMI_TRANSPARENT),
backgroundColor: colors,
},
],
};

68
src/constants/chartColors.json Normal file
View File

@@ -0,0 +1,68 @@
[
"#3f3f46",
"#6b7280",
"#d6d3d1",
"#15803d",
"#fdba74",
"#7dd3fc",
"#0f766e",
"#fda4af",
"#ef4444",
"#d4d4d4",
"#ec4899",
"#0ea5e9",
"#14b8a6",
"#4d7c0f",
"#93c5fd",
"#404040",
"#f97316",
"#bef264",
"#cbd5e1",
"#6366f1",
"#8b5cf6",
"#6ee7b7",
"#fcd34d",
"#0369a1",
"#64748b",
"#71717a",
"#374151",
"#d4d4d8",
"#d946ef",
"#44403c",
"#10b981",
"#3b82f6",
"#f59e0b",
"#d8b4fe",
"#f0abfc",
"#c4b5fd",
"#86efac",
"#fca5a5",
"#5eead4",
"#f43f5e",
"#eab308",
"#b91c1c",
"#a855f7",
"#0e7490",
"#06b6d4",
"#b45309",
"#6d28d9",
"#a21caf",
"#84cc16",
"#67e8f9",
"#047857",
"#22c55e",
"#be185d",
"#334155",
"#be123c",
"#a5b4fc",
"#1d4ed8",
"#f9a8d4",
"#a16207",
"#7e22ce",
"#78716c",
"#fde047",
"#737373",
"#c2410c",
"#4338ca",
"#d1d5db"
]

4
src/pages/index.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import UserResultChart from "@/components/UserResultChart";
import SingleDatasetChart from "@/components/UserResultChart";
import Navbar from "@/components/Navbar";
import ProfileCard from "@/components/ProfileCard";
import {withIronSessionSsr} from "iron-session/next";
@@ -72,7 +72,7 @@ export default function Home({user}: {user: User}) {
</section>
{!isLoading && stats && (
<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
<UserResultChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
</section>
)}
</div>

26
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
<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>