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

feat: add unique key prop to g

Browse Source
This commit is contained in:
julius 2025-03-05 12:59:09 +01:00
parent bc6c2a4a98
commit 854bd03c40
Signed by: julius
GPG Key ID: C80A63E6A5FD7092
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/RaceChart.tsx
View File

@ -1,5 +1,6 @@
import { FC, useEffect, useState } from "react"; import { FC, useEffect, useState } from "react";
import { PlayerRanking } from "./types"; import { PlayerRanking } from "./types";
import { useSession } from "./Session";
interface RaceChartProps { interface RaceChartProps {
players: PlayerRanking[]; players: PlayerRanking[];
@ -34,13 +35,13 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
const gap = 8; const gap = 8;
const maxValue = Math.max(...players.map((player) => player.rank)) + 1; const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
const barHeight = (height - 2 * padding) / players.length; const barHeight = (height - 2 * padding) / players.length;
const fontSize = Math.min(barHeight - 1.5 * gap, width / 20); const fontSize = Math.min(barHeight - 1.5 * gap, width / 22);
return ( return (
<svg width={width} height={height}> <svg width={width} height={height} id="RaceChartSVG">
{players.map((player, index) => ( {players.map((player, index) => (
<rect <rect
key={index} key={String(index)}
x={0} x={0}
y={index * barHeight + padding} y={index * barHeight + padding}
width={(1 - player.rank / maxValue) * width} width={(1 - player.rank / maxValue) * width}
@ -50,7 +51,7 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
))} ))}
{players.map((player, index) => ( {players.map((player, index) => (
<g> <g key={"group" + index}>
<text <text
key={index + "_name"} key={index + "_name"}
x={4} x={4}