Trace Spans

Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.

http.req

auth

db.query

cache.set

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

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"
    }
  ]}
/>