37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import {Module} from "@/interfaces";
|
|
import {UserResults} from "@/interfaces/results";
|
|
import {moduleLabels} from "@/utils/moduleUtils";
|
|
import {Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend} from "chart.js";
|
|
import clsx from "clsx";
|
|
import {PolarArea} from "react-chartjs-2";
|
|
|
|
interface Props {
|
|
results: UserResults;
|
|
resultKey: "score" | "total";
|
|
label: string;
|
|
className?: string;
|
|
}
|
|
|
|
ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
|
|
|
|
export default function UserResultChart({results, resultKey, label, className = ""}: Props) {
|
|
const labels = Object.keys(results).map((key) => moduleLabels[key as Module]);
|
|
const data = {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
label,
|
|
data: Object.keys(results).map((module) => results[module as Module][resultKey]),
|
|
backgroundColor: ["rgba(255, 99, 132, 0.5)", "rgba(54, 162, 235, 0.5)", "rgba(255, 206, 86, 0.5)", "rgba(75, 192, 192, 0.5)"],
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<div className={clsx("flex flex-col gap-4 items-center", className)}>
|
|
<PolarArea data={data} options={{plugins: {title: {text: label, display: true}}}} />
|
|
<h2 className="text-neutral-600 font-semibold text-lg">{label}</h2>
|
|
</div>
|
|
);
|
|
}
|