kriss/geniusrun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style chart tooltips to match the dark theme

Browse Source 
Recharts' default tooltip is a plain white box, which stood out badly
against the app's dark background. Applied across both the Review Queue's
pace/HR charts and the Progression chart.
This commit is contained in:
Kriss Vila
2026-07-19 16:13:52 +02:00
parent 02ee9fa76e
commit 9ec721b9fc
2 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/charts/ExpectedVsActualChart.tsx
View File

@@ -314,7 +314,7 @@ export function ExpectedVsActualChart({ laps, samples }: { laps: Lap[]; samples:
))} ))}
<XAxis dataKey="t" type="number" domain={[0, elapsedMin]} tick={{ fontSize: 10 }} tickFormatter={(v) => `${Math.round(Number(v))}m`} /> <XAxis dataKey="t" type="number" domain={[0, elapsedMin]} tick={{ fontSize: 10 }} tickFormatter={(v) => `${Math.round(Number(v))}m`} />
<YAxis reversed domain={paceDomain} ticks={paceTicks} interval={0} tick={{ fontSize: 10 }} width={34} tickFormatter={(v) => formatPaceShort(Number(v))} /> <YAxis reversed domain={paceDomain} ticks={paceTicks} interval={0} tick={{ fontSize: 10 }} width={34} tickFormatter={(v) => formatPaceShort(Number(v))} />
<Tooltip formatter={paceTooltipFormatter} labelFormatter={(t) => `${formatElapsed(Number(t))} elapsed`} contentStyle={{ fontSize: 12 }} /> <Tooltip formatter={paceTooltipFormatter} labelFormatter={(t) => `${formatElapsed(Number(t))} elapsed`} contentStyle={{ fontSize: 12, background: "#1a1d24", border: "1px solid #2a2d35", borderRadius: 6 }} labelStyle={{ color: "#9aa0ab" }} itemStyle={{ color: "#e6e6e6" }} />
{hasPaceTarget && ( {hasPaceTarget && (
<Area type="stepAfter" dataKey="targetPaceRange" stroke="none" fill="#9aa0ab" fillOpacity={0.25} isAnimationActive={false} name="Target range" connectNulls /> <Area type="stepAfter" dataKey="targetPaceRange" stroke="none" fill="#9aa0ab" fillOpacity={0.25} isAnimationActive={false} name="Target range" connectNulls />
)} )}
@@ -335,7 +335,7 @@ export function ExpectedVsActualChart({ laps, samples }: { laps: Lap[]; samples:
))} ))}
<XAxis dataKey="t" type="number" domain={[0, elapsedMin]} tick={{ fontSize: 10 }} tickFormatter={(v) => `${Math.round(Number(v))}m`} /> <XAxis dataKey="t" type="number" domain={[0, elapsedMin]} tick={{ fontSize: 10 }} tickFormatter={(v) => `${Math.round(Number(v))}m`} />
<YAxis domain={hrDomain} ticks={hrTicks} interval={0} tick={{ fontSize: 10 }} width={30} tickFormatter={(v) => String(Math.round(Number(v)))} /> <YAxis domain={hrDomain} ticks={hrTicks} interval={0} tick={{ fontSize: 10 }} width={30} tickFormatter={(v) => String(Math.round(Number(v)))} />
<Tooltip formatter={hrTooltipFormatter} labelFormatter={(t) => `${formatElapsed(Number(t))} elapsed`} contentStyle={{ fontSize: 12 }} /> <Tooltip formatter={hrTooltipFormatter} labelFormatter={(t) => `${formatElapsed(Number(t))} elapsed`} contentStyle={{ fontSize: 12, background: "#1a1d24", border: "1px solid #2a2d35", borderRadius: 6 }} labelStyle={{ color: "#9aa0ab" }} itemStyle={{ color: "#e6e6e6" }} />
{hasHRTarget && ( {hasHRTarget && (
<Area type="stepAfter" dataKey="targetHRRange" stroke="none" fill="#9aa0ab" fillOpacity={0.25} isAnimationActive={false} name="Target range" connectNulls /> <Area type="stepAfter" dataKey="targetHRRange" stroke="none" fill="#9aa0ab" fillOpacity={0.25} isAnimationActive={false} name="Target range" connectNulls />
)} )}

3
frontend/src/components/charts/ProgressionChart.tsx
View File

@@ -28,6 +28,9 @@ export function ProgressionChart({ points, metric }: { points: ProgressionPoint[
/> />
<Tooltip <Tooltip
formatter={(value) => [Number(value).toFixed(1), METRIC_LABELS[metric] ?? metric]} formatter={(value) => [Number(value).toFixed(1), METRIC_LABELS[metric] ?? metric]}
contentStyle={{ background: "#1a1d24", border: "1px solid #2a2d35", borderRadius: 6 }}
labelStyle={{ color: "#9aa0ab" }}
itemStyle={{ color: "#e6e6e6" }}
/> />
<Line type="monotone" dataKey="value" stroke="#3b82f6" strokeWidth={2} dot={{ r: 3 }} /> <Line type="monotone" dataKey="value" stroke="#3b82f6" strokeWidth={2} dot={{ r: 3 }} />
</LineChart> </LineChart>