Dumbbell chart is a production-ready charts component from BJORK UI, packaged for shadcn registries.
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { DumbbellChart, type DumbbellRow, type DumbbellSort } from "@/components/ui/bjork-dumbbell-chart";
import { formatCompact, formatSigned } from "@/components/ui/bjork-dumbbell-chart-utils/components-bjork-ui-charts-_kit-scale";
import { DemoColumn } from "@/components/ui/bjork-dumbbell-chart-utils/app-charts-_demo-controls";
const ROWS: DumbbellRow[] = [
{ id: "ml", label: "ML engineer", a: 148000, b: 196000 },
{ id: "sre", label: "Site reliability", a: 136000, b: 162000 },
{ id: "fe", label: "Frontend", a: 118000, b: 131000 },
{ id: "be", label: "Backend", a: 128000, b: 149000 },
{ id: "design", label: "Product design", a: 112000, b: 128000 },
{ id: "pm", label: "Product manager", a: 134000, b: 151000 },
{ id: "data", label: "Data analyst", a: 92000, b: 99000 },
{ id: "qa", label: "QA engineer", a: 96000, b: 94000 },
{ id: "sec", label: "Security", a: 138000, b: 171000 },
];
const YEARS: [string, string] = ["2020", "2025"];
const money = (v: number) => `$${formatCompact(v, 0)}`;
const gap = (g: number) => formatSigned(g, (n) => `$${formatCompact(n, 0)}`);
function SourceDemo(){
const isPreview = false;
const [sort, setSort] = useState<DumbbellSort>("gap");
function reset() {
setSort("gap");
}
return <>
{isPreview ? (
<div className="w-[660px]">
<DumbbellChart rows={ROWS} labels={YEARS} formatValue={money} formatGap={gap} rowHeight={36} activeId="ml" ariaLabel="Median salary by role" />
</div>
) : (
<DemoColumn width={720}>
<DumbbellChart rows={ROWS} labels={YEARS} sort={sort} onSortChange={setSort} formatValue={money} formatGap={gap} rowHeight={34} ariaLabel="Median salary by role" />
</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>}