Files

T

Developer 50c0c9b548 fix(gauge): render single value arc with correct Tailwind v4 colors

The gauge rendered as multiple black rings. Two causes:

1. recharts RadialBarChart draws each data entry as a CONCENTRIC RING, not an
   arc segment, so the 3 "track band" entries + value produced 4 nested rings.
   Render a single value arc over a neutral background track instead, colored
   by status, with the readout absolutely centered (replacing the -mt-12 hack).

2. The fills used hsl(var(--primary)) / hsl(var(--chart-1)) etc., but this
   project's Tailwind v4 theme (index.css) defines colors as --color-* holding
   full hex values (--color-primary: #4f8cff). So the references were doubly
   invalid (wrong name + hsl() wrapping a hex) -> invalid SVG fill defaults to
   black. Use var(--color-*) directly, with the semantically correct chart
   colors: ok=--color-chart-2 (green), warn=--color-chart-3 (amber),
   crit=--color-chart-4 (red).

Also fix the same hsl(var(--x)) -> var(--color-x) bug in LineSeriesChart's
tooltip contentStyle (popover/border/popover-foreground). The line stroke
palette already used the correct var(--color-chart-N) form.

166/166 frontend tests pass; typecheck + ESLint clean.

2026-07-11 13:05:42 +00:00

1.3 KiB

Raw Blame History

frontend/src/components (index)

dir: frontend/src/components

role

Shared UI component library providing reusable React display, table, dialog, card, chart, and widget components for the frontend application.

parent

index: frontend/src/.pi-map.index.md map: frontend/src/.pi-map.md

children

frontend/src/components/tests index: frontend/src/components/tests/.pi-map.index.md map: frontend/src/components/tests/.pi-map.md
frontend/src/components/ui index: frontend/src/components/ui/.pi-map.index.md map: frontend/src/components/ui/.pi-map.md

files

BackupAlertsTable.tsx
BackupDashboardWidget.tsx
BackupJobsTable.tsx
BackupRunsTable.tsx
ConfirmDialog.tsx
DialogFooter.tsx
HoverEditButton.tsx
LibraryOverview.tsx
LineSeriesChart.tsx
MetricCard.tsx
NowPlaying.tsx
PinnedServiceLink.tsx
SectionCard.tsx
SelectionRailCard.tsx
ServiceTestPanel.tsx
SessionActivityPanel.tsx
TabbedCard.tsx
WidgetConfigDialog.tsx
WidgetInstance.tsx

links

index: frontend/src/components/.pi-map.index.md map: frontend/src/components/.pi-map.md

workflows

change components behavior read: BackupAlertsTable.tsx, BackupDashboardWidget.tsx, BackupJobsTable.tsx
explore components subdirectories index: frontend/src/components/tests/.pi-map.index.md, frontend/src/components/ui/.pi-map.index.md

1.3 KiB Raw Blame History