diff --git a/src/RaceChart.tsx b/src/RaceChart.tsx index 60d1142..402ef36 100644 --- a/src/RaceChart.tsx +++ b/src/RaceChart.tsx @@ -34,6 +34,7 @@ const RaceChart: FC = ({ players, std }) => { const gap = 8; const maxValue = Math.max(...players.map((player) => player.rank)) + 1; const barHeight = (height - 2 * padding) / players.length; + const fontSize = Math.min(barHeight - 1.5 * gap, width / 20); return ( @@ -51,41 +52,43 @@ const RaceChart: FC = ({ players, std }) => { {players.map((player, index) => ( - {index + 1}. {player.name} + {`${String(index + 1).padStart(2)}. ${player.name}`} p.name.length))) * - (barHeight - 1.5 * gap) * + fontSize * 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`} + fontSize={0.8 * fontSize} fill="aliceblue" stroke="#36c" fontWeight={"bold"} + fontFamily="monospace" strokeWidth={4} paintOrder={"stroke fill"} style={{ whiteSpace: "pre" }} > - {`${player.rank} ± ${player.std} N = ${player.n}`} + {`${String(player.rank).padStart(5)} ± ${player.std} N = ${player.n}`} ))}