alex/manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Developer
2026-07-11 13:05:42 +00:00
parent b011d2421b
commit 50c0c9b548
6 changed files with 43 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/widgets/.pi-map.index.md
+4 -4
View File
@@ -2,7 +2,7 @@
dir: frontend/src/widgets
## role
Dashboard widget components that render visual data for various integrations (Alertmanager, Backups, Jellyfin, Prometheus, qBittorrent, SSH tasks, static content) within the monitoring application.
Provides self-contained dashboard widget components for rendering various data sources (Alertmanager, backups, Jellyfin, Prometheus metrics, qBittorrent, SSH tasks, and static content) in a unified card layout.
## parent
index: frontend/src/.pi-map.index.md
map: frontend/src/.pi-map.md
@@ -15,9 +15,9 @@ map: frontend/src/.pi-map.md
- BackupsWidget.tsx
- JellyfinNowPlayingWidget.tsx
- JellyfinWidget.tsx
- PrometheusChartWidget.tsx
- PrometheusGaugeWidget.tsx
- PrometheusMeanWidget.tsx
- MetricChartWidget.tsx
- MetricGaugeWidget.tsx
- MetricMeanWidget.tsx
- PrometheusMetricWidget.tsx
- QbittorrentActiveTorrentsWidget.tsx
- QbittorrentSpeedWidget.tsx