enhance UniversityChart component with transformed data and label dis…

…play for improved score visualization

components/templates/Leaderboard/university-chart.tsx

@@ -1,7 +1,15 @@
 import { WARM_COLORS } from "@/lib/constants/colors";
 import { stringToNumber } from "@/lib/utils";
 import { FC } from "react";
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+  Label,
+  LabelList,
+} from "recharts";
 
 interface UniversityChartProps {
   data: University;
@@ -15,24 +23,28 @@ interface TransformedData {
 const transformData = (data: Player[]) => {
   let newData: TransformedData = {};
   data.forEach((player) => {
-    player.scoreHistory.forEach((score) => {
+    player.scoreHistory.forEach((score, i) => {
       if (!(score.date in newData)) {
         newData[score.date] = { date: score.date };
       }
       newData[score.date][player.playerName] = score.score;
+
+      if (i === player.scoreHistory.length - 1) {
+        newData[score.date][player.playerName + "_"] = player.playerName;
+      }
     });
   });
   return Object.values(newData);
 };
 
 const getColor = (name: string) => {
-  console.log(WARM_COLORS);
-
   return WARM_COLORS[stringToNumber(name, WARM_COLORS.length)];
 };
 
 const UniversityChart: FC<UniversityChartProps> = ({ data }) => {
   const top5Names = data.players.slice(0, 5).map((player) => player.playerName);
+  const transformedData = transformData(data.players);
+  const lastDate = transformedData[transformedData.length - 1].date;
 
   return (
     <div className="flex flex-col gap-4 items-center">
@@ -41,7 +53,17 @@ const UniversityChart: FC<UniversityChartProps> = ({ data }) => {
       </h2>
       <p className="w-full text-2xl font-bold">Score: {data.universityScore}</p>
 
-      <LineChart width={800} height={400} data={transformData(data.players)}>
+      <LineChart
+        width={800}
+        height={400}
+        data={transformedData}
+        margin={{
+          top: 5,
+          right: 50,
+          bottom: 5,
+          left: 0,
+        }}
+      >
         <XAxis dataKey="date" />
         <YAxis />
         <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
@@ -51,9 +73,15 @@ const UniversityChart: FC<UniversityChartProps> = ({ data }) => {
             dataKey={name}
             key={name}
             stroke={getColor(name)}
-          />
+          >
+            <LabelList
+              dataKey={name + "_"}
+              id={name}
+              position="top"
+              offset={10}
+            />
+          </Line>
         ))}
-        <YAxis />
       </LineChart>
     </div>
   );