Timing bar
Horizontal request-phase waterfall, one segment per phase.
Basic usage
Data comes in via props; rendered as pure SVG with no third-party charting dependency.
Colors come from the --viz-1..8 tokens, colorblind-friendly.
Demo source
<CfTimingBar ... /><CfTimingBar ... />Real waterfall scenario
Three concurrent HTTP requests with their timings stitched together: DNS / Connect / TLS / Wait / Receive each in its own color.
GET /v1/me · 264ms
GET /v1/orders (cached) · 220ms
POST /v1/charges · 480ms
Demo source
<CfTimingBar :phases="phases" /><CfTimingBar phases={phases} />API
| Prop | Type | Default | Description |
|---|---|---|---|
phases | TimingPhase[] | — | { label, start, end, colorIndex? }[] (ms) |
showAxis | boolean | true | Bottom segment labels |
labelMode | 'auto' | 'all' | 'none' | 'auto' | Segment label strategy; auto hides colliding labels |
反馈与讨论
Timing bar · Discussion