{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bars",
  "type": "registry:component",
  "title": "Bars",
  "description": "One value per item, side by side. Sample data: monthly company card spend, January to September, 71K in July, September month to date.",
  "registryDependencies": [
    "@chartory/core",
    "@chartory/plot-vbars"
  ],
  "files": [
    {
      "path": "registry/chartory/components/bars.tsx",
      "type": "registry:component",
      "target": "components/chartory/bars.tsx",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// Bars (Chartory chart 001): sizes xs | s | m | l, laid out again from the data at each\n// size; collection \"hearth\" (default) or \"signal\" (with @chartory/signal, Code and Complete). Data in the type's shape (default: the sample). Docs:\n// https://usechartory.com/docs/charts/bars\nimport { ChartView, type ChartViewProps } from \"@/lib/chartory/charts/chart-view\"\nimport { registerChart } from \"@/lib/chartory/charts/defs\"\nimport { data as sample } from \"@/lib/chartory/charts/types/001-bars/data\"\nimport { def } from \"@/lib/chartory/charts/types/001-bars/layout\"\n\nregisterChart(def, sample)\n\nexport type BarsData = typeof sample\nexport type BarsProps = Omit<ChartViewProps, \"def\" | \"data\" | \"states\"> & {\n  /** the data to draw (default: the sample) */\n  data?: BarsData\n  /** further data states: the chart morphs to them (update) or ticks through them (live, with interval) */\n  states?: BarsData[]\n}\n\nexport function Bars(props: BarsProps) {\n  return <ChartView def={def} {...props} />\n}\n"
    },
    {
      "path": "registry/chartory/charts/types/001-bars/data.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/001-bars/data.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 001 Bars · sample data (Figma chart/001-bars, fintech: monthly card spend in $K; the open month highlighted).\nimport type { VBarsData } from \"../../plots/vbars\";\n\nconst track = \"data/track\";\nexport const data: VBarsData = {\n  cats: [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\"],\n  vals: [48, 52, 61, 57, 66, 59, 71, 68, 40],\n  toks: [track, track, track, track, track, track, track, track, \"data/primary\"],\n  max: 80,\n  shape: \"top\",\n  inside: \"flat\",\n  ratio: 0.25,\n  fmt: (x) => x + \"K\",\n};\n"
    },
    {
      "path": "registry/chartory/charts/types/001-bars/layout.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/001-bars/layout.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 001 Bars (Figma chart/001-bars): C.vBars on the monthly spend sample.\nimport type { ChartDef, TooltipSpec } from \"../../core/shell\";\nimport { vBars } from \"../../plots/vbars\";\nimport { data } from \"./data\";\n\n/** Deterministic wave in [-1, 1] per index and update step (no randomness: the same step gives the same period). */\nconst wave = (i: number, step: number, f = 1.7) => Math.sin(step * 2.3 + i * f + 0.5);\nconst clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));\n\n/** Hover tooltip: one month's bar (the open month reads \"to date\"). */\nconst tip = (d: unknown, g: number): TooltipSpec => {\n  const o = d as typeof data, m = o.cats[g];\n  return { kind: \"value\", text: `${m.charAt(0) + m.slice(1).toLowerCase()}${o.toks[g] === \"data/primary\" ? \" to date\" : \"\"} · $${o.fmt(o.vals[g])}` };\n};\n\nexport const def: ChartDef = {\n  no: 1,\n  slug: \"bars\",\n  legend: [[\"data/primary\", \"Month to date\"], [\"data/track\", \"Closed months\"]],\n  plot: (K, p, w, d) => vBars(K, p, w, (d as typeof data | undefined) ?? data),\n  tip,\n  update: (d, step) => {\n    const o = d as typeof data;\n    // later months: spend drifts 0–10 % up with a ±10 % swing, inside the 80K axis\n    return { ...o, vals: o.vals.map((v, i) => clamp(Math.round(v * (1 + 0.03 * step + 0.1 * wave(i, step))), 24, 78)) };\n  },\n  describe: {\n    title: \"Monthly card spend\",\n    summary: `Card spend by month, January to September, in $K. September (month to date) is ${data.fmt(data.vals[8])}; the highest month is July at ${data.fmt(Math.max(...data.vals))}.`,\n    table: { head: [\"Month\", \"Spend\"], rows: data.cats.map((c, i) => [c, \"$\" + data.fmt(data.vals[i])]) },\n  },\n};\n"
    }
  ],
  "categories": [
    "charts",
    "compare-items"
  ],
  "meta": {
    "access": "free",
    "no": 1,
    "family": "Compare items"
  }
}