Route trace is a production-ready charts component from BJORK UI, packaged for shadcn registries.
Loading preview...
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useMemo, useState } from "react";
import { RouteTrace, type RouteEdge, type RouteNode } from "@/components/ui/bjork-route-trace";
const NODES: RouteNode[] = [
{ id: "client", label: "Client", sublabel: "web", col: 0, row: 1 },
{ id: "edge", label: "Edge", sublabel: "cdn", col: 1, row: 1 },
{ id: "gateway", label: "Gateway", sublabel: "api", col: 2, row: 1 },
{ id: "auth", label: "Auth", sublabel: "sessions", col: 3, row: 0 },
{ id: "search", label: "Search", sublabel: "index", col: 3, row: 1 },
{ id: "billing", label: "Billing", sublabel: "invoices", col: 3, row: 2 },
{ id: "postgres", label: "Postgres", sublabel: "primary", col: 4, row: 1 },
];
const EDGE_TEMPLATE: RouteEdge[] = [
{ from: "client", to: "edge", throughput: 0.9 },
{ from: "edge", to: "gateway", throughput: 0.85 },
{ from: "gateway", to: "auth", throughput: 0.3 },
{ from: "gateway", to: "search", throughput: 0.7 },
{ from: "gateway", to: "billing", throughput: 0.2 },
{ from: "search", to: "postgres", throughput: 0.6 },
{ from: "billing", to: "postgres", throughput: 0.15 },
{ from: "auth", to: "postgres", throughput: 0.25 },
];
const DEMO_CELL = { w: 124, h: 88 };
function SourceDemo(){
const isPreview = false;
const [downIds, setDownIds] = useState<Record<string, boolean>>({});
const [searchThroughput, setSearchThroughput] = useState(0.7);
const [speed, setSpeed] = useState(1);
const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
const nodes = useMemo<RouteNode[]>(() => {
if (isPreview) {
return NODES.map((n) => (n.id === "billing" ? { ...n, status: "down" } : n));
}
return NODES.map((n) => ({ ...n, status: downIds[n.id] ? "down" : "ok" }));
}, [isPreview, downIds]);
const edges = useMemo<RouteEdge[]>(
() =>
EDGE_TEMPLATE.map((e) =>
e.from === "gateway" && e.to === "search" ? { ...e, throughput: searchThroughput } : e,
),
[searchThroughput],
);
const reset = () => {
setDownIds({});
setSearchThroughput(0.7);
setSpeed(1);
};
return <>
<div className="flex w-full min-w-0 flex-col items-center gap-6">
<div className={isPreview ? "w-[min(920px,calc(100vw-56px))] min-w-0" : "w-[min(760px,calc(100vw-56px))] lg:w-[min(760px,calc(50vw-128px))] min-w-0"}>
<RouteTrace
className="w-full"
nodes={nodes}
edges={edges}
cell={DEMO_CELL}
speed={speed}
selectedId={selectedId}
onNodeSelect={setSelectedId}
ariaLabel="Route trace demo"
frozen={isPreview}
attract={false}
/>
</div>
</div>
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}