100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import { FC, useEffect, useState } from "react";
|
|
import { PlayerRanking } from "./types";
|
|
|
|
interface RaceChartProps {
|
|
players: PlayerRanking[];
|
|
std: boolean;
|
|
}
|
|
|
|
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;
|
|
};
|
|
|
|
const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
|
|
const [width, setWidth] = useState(determineNiceWidth(window.innerWidth));
|
|
//const [height, setHeight] = useState(window.innerHeight);
|
|
const height = players.length * 40;
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setWidth(determineNiceWidth(window.innerWidth));
|
|
//setHeight(window.innerHeight);
|
|
};
|
|
window.addEventListener("resize", handleResize);
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
};
|
|
}, []);
|
|
const padding = 24;
|
|
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 / 22);
|
|
|
|
return (
|
|
<svg width={width} height={height} id="RaceChartSVG">
|
|
{players.map((player, index) => (
|
|
<rect
|
|
key={String(index)}
|
|
x={4}
|
|
y={index * barHeight + padding}
|
|
width={(1 - player.rank / maxValue) * width}
|
|
height={barHeight - gap} // subtract 2 for some spacing between bars
|
|
fill="#36c"
|
|
stroke="aliceblue"
|
|
strokeWidth={4}
|
|
paintOrder={"stroke fill"}
|
|
/>
|
|
))}
|
|
|
|
{players.map((player, index) => (
|
|
<g key={"group" + index}>
|
|
<text
|
|
key={index + "_name"}
|
|
x={8}
|
|
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={fontSize}
|
|
fill="aliceblue"
|
|
stroke="#36c"
|
|
strokeWidth={4}
|
|
fontWeight={"bold"}
|
|
paintOrder={"stroke fill"}
|
|
fontFamily="monospace"
|
|
style={{ whiteSpace: "pre" }}
|
|
>
|
|
{`${String(index + 1).padStart(2)}. ${player.name}`}
|
|
</text>
|
|
<text
|
|
key={index + "_value"}
|
|
x={
|
|
8 +
|
|
(4 + Math.max(...players.map((p, _) => p.name.length))) *
|
|
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.8 * fontSize}
|
|
fill="aliceblue"
|
|
stroke="#36c"
|
|
fontWeight={"bold"}
|
|
fontFamily="monospace"
|
|
strokeWidth={4}
|
|
paintOrder={"stroke fill"}
|
|
style={{ whiteSpace: "pre" }}
|
|
>
|
|
{`${String(player.rank).padStart(5)} ± ${player.std} N = ${player.n}`}
|
|
</text>
|
|
</g>
|
|
))}
|
|
</svg>
|
|
);
|
|
};
|
|
export default RaceChart;
|