Beeswarm 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 { useState } from "react";
import { Beeswarm, createSwarmItems, type SwarmBand } from "@/components/ui/bjork-beeswarm";
import { formatCompact } from "@/components/ui/bjork-beeswarm-utils/components-bjork-ui-charts-_kit-scale";
import { DemoColumn } from "@/components/ui/bjork-beeswarm-utils/app-charts-_demo-controls";
const EDGE = createSwarmItems(31, "edge");
const DEALS = createSwarmItems(32, "deals");
const EDGE_BANDS: SwarmBand[] = [
{ to: 0, label: "No edge", style: "hatch" },
{ from: 2, label: "Edge ≥ 2%", style: "accent" },
];
const EDGE_DOMAIN: [number, number] = [-4, 8];
const formatEdge = (v: number) => `${v > 0 ? "+" : v < 0 ? "−" : ""}${Math.abs(v).toFixed(1)}%`;
const formatDeal = (v: number) => `$${formatCompact(v, 0)}`;
function SourceDemo(){
const isPreview = false;
const [kind, setKind] = useState<"edge" | "deals">("edge");
const [scale, setScale] = useState<"linear" | "log">("log");
function reset() {
setKind("edge");
setScale("log");
}
return <>
{isPreview ? (
<div className="w-[740px]">
<Beeswarm items={EDGE} domain={EDGE_DOMAIN} bands={EDGE_BANDS} highlightId="b17" radius={5} formatValue={formatEdge} height={360} ariaLabel="Edge of placed bets" />
</div>
) : (
<DemoColumn width={820}>
{kind === "edge" ? (
<Beeswarm key="edge" items={EDGE} domain={EDGE_DOMAIN} bands={EDGE_BANDS} highlightId="b17" formatValue={formatEdge} height={320} ariaLabel="Edge of placed bets" />
) : (
<Beeswarm key="deals" items={DEALS} scale={scale} formatValue={formatDeal} height={320} ariaLabel="Deal size" />
)}
</DemoColumn>
)}
</>;
}
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>}