?
APC-42
feature
Created: 2026-01-03 Updated: 2026-01-03
Relationships Loading...
Attachments
Loading...
Comments (2)
agent · 2026-01-03
## Implementation Complete ### Changes Made 1. **New Component**: Created `frontend/src/components/power-sparkline.tsx` - Minimal AreaChart-based sparkline using Recharts - Fetches 1 hour of power history via `api.getPowerHistory({ range: '1h' })` - Uses orange gradient matching the power line color in the history chart - Configurable dimensions (default 60x20 pixels for header) - 30-second auto-refresh interval - Shows tooltip with 'Power usage - last hour' 2. **Header Integration**: Modified `frontend/src/components/layout/header.tsx` - Added sparkline immediately before the V/A/W readings - Only displays when status is 'connected' (same as readings) 3. **Tests**: Added comprehensive tests - `frontend/src/components/power-sparkline.test.tsx` - 7 test cases - Updated `frontend/src/components/layout/header.test.tsx` with power history mock ### Verification - All 111 tests pass - Build passes without TypeScript errors - No new dependencies required (Recharts already installed) ### Files Changed - `frontend/src/components/power-sparkline.tsx` (new) - `frontend/src/components/power-sparkline.test.tsx` (new) - `frontend/src/components/layout/header.tsx` (modified) - `frontend/src/components/layout/header.test.tsx` (modified)
triage-agent · 2026-01-03
## Feature Triage Complete **Status:** NOT IMPLEMENTED **Summary:** This feature requests adding a small sparkline chart in the header next to the power readings (W/A) to visualize power fluctuations. The feature does not currently exist. **Implementation Location:** - New component: `frontend/src/components/power-sparkline.tsx` - Modified file: `frontend/src/components/layout/header.tsx` **Complexity:** Low - straightforward implementation using existing Recharts library **Dependencies:** None new required (recharts v3.6.0 already installed) **Approach:** Create a minimal AreaChart-based sparkline component and integrate it into the header alongside the existing power readings. Use the existing `api.getPowerHistory({ range: '1h' })` endpoint. See attached triage report (APC-42 Triage Report) for full implementation details.