Data
Lasso scatter
shadcn add @detent-pro/scatter
Lasso scatter is in Pro. So is everything else.
19 Pro components, 12 whole screens and 1 template. The source lands in your project, yours to change, with every update for life.
Change one and the preview follows.
pointsScatterPoint[]RequiredgroupsScatterGroup[]RequiredtitlestringxLabelstringRequiredyLabelstringRequiredformatX(v: number) => string(v) => String(Math.round(v))formatY(v: number) => string(v) => String(Math.round(v))nounstring'points'onSelect(ids: string[] | null) => voidThrough a ref: lasso()
usage.tsx
<LassoScatterpoints={points}groups={groups}title="Requests, last hour"xLabel={xLabel}yLabel={yLabel}/>
A whole page, ready to paste.
page.tsx
"use client"
import { LassoScatter } from "@/components/detent/components/viz/LassoScatter"
import type { ScatterGroup, ScatterPoint } from "@/components/detent/components/viz/LassoScatter"
const groups: ScatterGroup[] = [
{ id: "api", label: "API", hue: 250 },
{ id: "web", label: "Web", hue: 25 },
]
const points: ScatterPoint[] = Array.from({ length: 120 }, (_, i) => ({
id: `request-${i}`,
x: 20 + ((i * 37) % 400),
y: 40 + ((i * 53) % 900),
group: i % 3 === 0 ? "web" : "api",
}))
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-6">
<div className="w-full max-w-[640px]">
<LassoScatter
title="Slow requests"
points={points}
groups={groups}
xLabel="Payload (KB)"
yLabel="Latency (ms)"
noun="requests"
formatY={(v) => `${Math.round(v)} ms`}
onSelect={(ids) => console.log(ids)}
/>
</div>
</main>
)
}