Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.
The import and the props worth knowing about, in one place.
import { Monitoring15 } from "@/components/beste/piece/monitoring15";
<Monitoring15
spans={[
{
"label": "http.req",
"start": 0,
"width": 100,
"tone": "sky"
},
{
"label": "auth",
"start": 4,
"width": 14,
"tone": "violet"
},
{
"label": "db.query",
"start": 22,
"width": 48,
"tone": "emerald"
},
{
"label": "cache.set",
"start": 76,
"width": 12,
"tone": "amber"
}
]}
bordered={false}
/>