julius/cutt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adjust formatting slightly

Browse Source
This commit is contained in:
julius 2025-03-03 16:31:32 +01:00
parent 70a4ece5bc
commit d61bea3c86
Signed by: julius
GPG Key ID: C80A63E6A5FD7092
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/RaceChart.tsx
View File

@ -34,6 +34,7 @@ const RaceChart: FC<RaceChartProps> = ({ 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 (
<svg width={width} height={height}>
@ -51,41 +52,43 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
{players.map((player, index) => (
<g>
<text
key={index}
key={index + "_name"}
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`}
fontSize={fontSize}
fill="aliceblue"
stroke="#36c"
strokeWidth={4}
fontWeight={"bold"}
paintOrder={"stroke fill"}
fontFamily="monospace"
style={{ whiteSpace: "pre" }}
>
{index + 1}. {player.name}
{`${String(index + 1).padStart(2)}. ${player.name}`}
</text>
<text
key={index}
key={index + "_value"}
x={
4 +
(4 + Math.max(...players.map((p, _) => 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}`}
</text>
</g>
))}