markmorado/pvemanager
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases 3 Wiki Activity

fix(dashboard): make donut tooltip readable
All checks were successful
Deploy to Production / Trigger production update (push) Successful in 7s
Details

Browse Source 
Theme tokens are oklch(); wrapping them in hsl(var(--card)) produced an
invalid, transparent tooltip background so the label blended into the
card. Use the oklch vars directly and force readable text colour.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Dilshod Rasulov
2026-06-27 19:48:58 +05:00
parent daa75e1502
commit 3622747371
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/features/dashboard/DashboardPage.tsx
View File

@@ -336,12 +336,16 @@ function ClusterNodesSection({ nodeStats }: { nodeStats: Rec[] }) {
))} ))}
</Pie> </Pie>
<Tooltip <Tooltip
// Theme vars are oklch(); wrapping them in hsl() yields an
// invalid (transparent) colour, so reference them directly.
contentStyle={{ contentStyle={{
background: 'hsl(var(--card))', background: 'var(--popover)',
border: '1px solid hsl(var(--border))', border: '1px solid var(--border)',
borderRadius: 8, borderRadius: 8,
fontSize: 11, fontSize: 11,
color: 'var(--popover-foreground)',
}} }}
itemStyle={{ color: 'var(--popover-foreground)' }}
formatter={(v: number, name: string) => [`${v}%`, name]} formatter={(v: number, name: string) => [`${v}%`, name]}
/> />
<Legend <Legend