Metric HUD
An interactive developer telemetry card featuring hardware-accelerated SVG sparklines, pointer-scrubbing point inspection, spring-animated time range morphing, and delta indicators.
System Telemetry HUD
Live hardware-accelerated telemetry telemetry
p99 API Latency
14.2ms
-18.4%Global Throughput
84.5kreq/s
+12.1%Error Rate
0.002%
-0.04%p99 API Latency(24h)
Hover canvas to inspect timeline values
Min: 0.0Max: 26.0
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/metric-hud
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| metrics | MetricItem[] | [] | Array of telemetry metric definitions with time-series data |
| timeRanges | string[] | ['1h', '24h', '7d', '30d'] | Available time window filters |
| defaultTimeRange | string | '24h' | Initial active time range |
| className | string | undefined | Custom CSS container styling |