Charts
Timeline Chart
A timeline chart for visualizing distributed traces (spans)
Installation
npx shadcn@latest add @dr-ui/timeline-chartRegistry dependencies
@dr-ui/button
@dr-ui/use-d3
@dr-ui/utils
Dependencies
d3@^7.9.0
lucide-react@^1.7.0
Basic
- GET /api/query: starts at 0ms, lasts 950ms
- db.connect: starts at 10ms, lasts 580ms
- auth.validate: starts at 12ms, lasts 120ms
- cache.lookup: starts at 15ms, lasts 18ms
- db.query: starts at 140ms, lasts 390ms
- db.query: starts at 145ms, lasts 20ms (failed)
- db.query.exec: starts at 155ms, lasts 310ms
- serializer: starts at 540ms, lasts 200ms
- response.write: starts at 740ms, lasts 90ms
- cleanup: starts at 830ms, lasts 60ms
Randomize
- GET /api/query: starts at 0ms, lasts 950ms
- db.connect: starts at 10ms, lasts 580ms
- auth.validate: starts at 12ms, lasts 120ms
- cache.lookup: starts at 15ms, lasts 18ms (failed)
- db.query: starts at 140ms, lasts 390ms
- db.query.exec: starts at 155ms, lasts 310ms
- serializer: starts at 540ms, lasts 200ms
- response.write: starts at 740ms, lasts 90ms
- cleanup: starts at 830ms, lasts 60ms