feat(tui): multi-row color-coded latency chart in detail panel #147

2026-06-21T21:46:22Z

lerko commented

2026-06-21 21:46:22 +00:00

Summary

Custom multi-row sparkline chart replacing the single-row sparkline in the inline detail panel.

3 rows tall with 24 discrete height levels (3 × 8 block elements)
Color-coded by latency: green (< 200ms), yellow (< 500ms), red (> 500ms)
DOWN checks render in red regardless of latency
Y-axis labels: max ms at top, min ms at bottom
Min/Avg/Max stats below the chart
Zero external dependencies — tried ntcharts but our custom renderer produces denser, color-coded output that fits the monitoring use case better

Design item P3 from tui-polish-design.local.md.

Test plan

Chart renders in inline detail panel (press i on a monitor)
Chart colors reflect latency thresholds (green/yellow/red)
DOWN checks show as red bars
Y-axis labels show correct min/max ms values
Min/Avg/Max stats are accurate
Chart width adapts to panel width
Works at narrow terminal (< 120 cols, no sidebar)

## Summary Custom multi-row sparkline chart replacing the single-row sparkline in the inline detail panel. - **3 rows tall** with 24 discrete height levels (3 × 8 block elements) - **Color-coded by latency**: green (< 200ms), yellow (< 500ms), red (> 500ms) - **DOWN checks** render in red regardless of latency - **Y-axis labels**: max ms at top, min ms at bottom - **Min/Avg/Max stats** below the chart - **Zero external dependencies** — tried ntcharts but our custom renderer produces denser, color-coded output that fits the monitoring use case better Design item P3 from `tui-polish-design.local.md`. ## Test plan - [x] Chart renders in inline detail panel (press `i` on a monitor) - [x] Chart colors reflect latency thresholds (green/yellow/red) - [x] DOWN checks show as red bars - [x] Y-axis labels show correct min/max ms values - [x] Min/Avg/Max stats are accurate - [x] Chart width adapts to panel width - [x] Works at narrow terminal (< 120 cols, no sidebar)

lerko added 4 commits 2026-06-21 21:46:23 +00:00

feat(tui): ntcharts latency line chart in inline detail panel ad469c86eb

Replace block-element sparkline with ntcharts streamline chart in the
inline detail panel. Renders a 4-row line chart with thin line style
using the theme accent color. Auto-scales Y axis to latency range.

Added github.com/NimbleMarkets/ntcharts v0.5.1 dependency (lipgloss v1
compatible). Min/Avg/Max stats rendered below the chart.

fix(tui): size chart width to data point count d0805f61c6

feat(tui): ntcharts sparkline with Y-axis labels and stats a8c43bdb8e

Replaced streamline chart with ntcharts sparkline (block elements,
auto-scaling). Height=2, Y-axis labels (max/min ms) on the left,
Min/Avg/Max stats below. Denser and more readable than the line chart.

feat(tui): multi-row color-coded sparkline chart with Y-axis

CI / test (pull_request) Successful in 1m48s

Details

CI / lint (pull_request) Successful in 1m17s

Details

CI / vulncheck (pull_request) Successful in 56s

Details

4af800a359

Replace ntcharts with custom multi-row sparkline. Each bar is color-
coded by latency threshold (green < 200ms, yellow < 500ms, red > 500ms)
and DOWN checks render in red. 3 rows tall with 24 discrete levels.

Y-axis labels (max/min ms) on the left, Min/Avg/Max stats below.
Zero external dependencies — removed ntcharts.

lerko merged commit 4af800a359 into main

2026-06-21 21:51:59 +00:00

lerko deleted branch feat/ntcharts-latency

2026-06-21 21:52:00 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: lerkolabs/uptop#147