From de79970987a974700e100fbba9c04d1df71f7a1c Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Sun, 2 Mar 2025 20:09:54 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20add=20value=20=C2=B1=20standard=20devia?=
 =?UTF-8?q?tion=20to=20`RaceChart`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/RaceChart.tsx | 88 +++++++++++++++++++++++++++++------------------
 1 file changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/RaceChart.tsx b/src/RaceChart.tsx
index 60813d7..5dd5e55 100644
--- a/src/RaceChart.tsx
+++ b/src/RaceChart.tsx
@@ -1,5 +1,5 @@
-import { FC, useEffect, useState } from 'react';
-import { PlayerRanking } from './types';
+import { FC, useEffect, useState } from "react";
+import { PlayerRanking } from "./types";
 
 interface RaceChartProps {
   players: PlayerRanking[];
@@ -8,38 +8,35 @@ interface RaceChartProps {
 
 const determineNiceWidth = (width: number) => {
   const max = 1080;
-  if (width >= max)
-    return max
-  else if (width > 768)
-    return width * 0.8
-  else
-    return width * 0.96
-}
+  if (width >= max) return max;
+  else if (width > 768) return width * 0.8;
+  else return width * 0.96;
+};
 
 const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
   // State to store window's width and height
   const [width, setWidth] = useState(determineNiceWidth(window.innerWidth));
-  const [height, setHeight] = useState(window.innerHeight);
+  //const [height, setHeight] = useState(window.innerHeight);
+  const height = players.length * 40;
 
   // Update state on  resize
   useEffect(() => {
     const handleResize = () => {
       setWidth(determineNiceWidth(window.innerWidth));
-      setHeight(window.innerHeight);
+      //setHeight(window.innerHeight);
     };
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
     };
   }, []);
   const padding = 24;
-  const gap = 8
+  const gap = 8;
   const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
   const barHeight = (height - 2 * padding) / players.length;
 
   return (
     <svg width={width} height={height}>
-
       {players.map((player, index) => (
         <rect
           key={index}
@@ -48,25 +45,50 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
           width={(1 - player.rank / maxValue) * width}
           height={barHeight - gap} // subtract 2 for some spacing between bars
           fill="#36c"
-        />))}
-
-      {players.map((player, index) => (
-        <text
-          key={index}
-          x={4}
-          y={index * barHeight + barHeight / 2 + padding + gap / 2}
-          width={(1 - player.rank / maxValue) * width}
-          height={barHeight - 8} // subtract 2 for some spacing between bars
-          fontSize={`${barHeight - 1.5 * gap}px`}
-          fill="aliceblue"
-          stroke='#36c'
-          strokeWidth={1.6}
-          fontWeight={"bold"}
-          paintOrder={"stroke fill"}
-        >{player.name}</text>
+        />
       ))}
 
+      {players.map((player, index) => (
+        <g>
+          <text
+            key={index}
+            x={4}
+            y={index * barHeight + barHeight / 2 + padding + gap / 2}
+            width={(1 - player.rank / maxValue) * width}
+            height={barHeight - 8} // subtract 2 for some spacing between bars
+            fontSize={`${barHeight - 1.5 * gap}px`}
+            fill="aliceblue"
+            stroke="#36c"
+            strokeWidth={4}
+            fontWeight={"bold"}
+            paintOrder={"stroke fill"}
+            fontFamily="monospace"
+          >
+            {player.name}
+          </text>
+          <text
+            key={index}
+            x={
+              4 +
+              Math.max(...players.map((p, _) => p.name.length)) *
+                (barHeight - 1.5 * gap) *
+                0.66
+            }
+            y={index * barHeight + barHeight / 2 + padding + gap / 2}
+            width={(1 - player.rank / maxValue) * width}
+            height={barHeight - 8} // subtract 2 for some spacing between bars
+            fontSize={`${0.75 * (barHeight - 1.5 * gap)}px`}
+            fill="aliceblue"
+            stroke="#36c"
+            fontWeight={"bold"}
+            strokeWidth={4}
+            paintOrder={"stroke fill"}
+          >
+            {`${player.rank} ± ${player.std}`}
+          </text>
+        </g>
+      ))}
     </svg>
-  )
-}
+  );
+};
 export default RaceChart;