{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "horizontal-bars",
  "type": "registry:component",
  "title": "Horizontal bars",
  "description": "Items in a list, with room for their names. Sample data: parcels delivered at five hubs against the scheduled count, Rotterdam 1,312.",
  "registryDependencies": [
    "@chartory/core",
    "@chartory/plot-h-bars"
  ],
  "files": [
    {
      "path": "registry/chartory/components/horizontal-bars.tsx",
      "type": "registry:component",
      "target": "components/chartory/horizontal-bars.tsx",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// Horizontal bars (Chartory chart 007): 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/horizontal-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/007-horizontal-bars/data\"\nimport { def } from \"@/lib/chartory/charts/types/007-horizontal-bars/layout\"\n\nregisterChart(def, sample)\n\nexport type HorizontalBarsData = typeof sample\nexport type HorizontalBarsProps = Omit<ChartViewProps, \"def\" | \"data\" | \"states\"> & {\n  /** the data to draw (default: the sample) */\n  data?: HorizontalBarsData\n  /** further data states: the chart morphs to them (update) or ticks through them (live, with interval) */\n  states?: HorizontalBarsData[]\n}\n\nexport function HorizontalBars(props: HorizontalBarsProps) {\n  return <ChartView def={def} {...props} />\n}\n"
    },
    {
      "path": "registry/chartory/charts/types/007-horizontal-bars/data.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/007-horizontal-bars/data.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 007 Horizontal bars · sample data (Figma chart/007-horizontal-bars, logistics: parcels delivered today of those\n// scheduled, per hub). Values grouped by thousands (1,312).\nimport type { HBarsData } from \"../../plots/h-bars\";\n\nconst rows: [string, number, number][] = [[\"ROTTERDAM\", 1480, 1312], [\"HAMBURG\", 1260, 1034], [\"ANTWERP\", 1120, 1046], [\"LYON\", 860, 598], [\"MILAN\", 720, 655]];\n\nexport const data: HBarsData = {\n  max: 1600,\n  ticks: [\"0\", \"400\", \"800\", \"1.2K\", \"1.6K\"],\n  tokTotal: \"data/seq-2\",\n  tokValue: \"data/primary\",\n  rows: rows.map(([label, total, value]) => ({ label, total, value, text: String(value).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\") })),\n};\n"
    },
    {
      "path": "registry/chartory/charts/types/007-horizontal-bars/layout.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/007-horizontal-bars/layout.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 007 Horizontal bars (Figma chart/007-horizontal-bars): C.hBars on the hub deliveries sample.\nimport type { ChartDef, TooltipSpec } from \"../../core/shell\";\nimport { hBars } from \"../../plots/h-bars\";\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\nconst num = (v: number) => v.toLocaleString(\"en-US\");\nconst hub = (s: string) => s.charAt(0) + s.slice(1).toLowerCase();\nconst del = data.rows.reduce((a, r) => a + r.value, 0), sch = data.rows.reduce((a, r) => a + r.total, 0);\n\n/** Hover tooltip: one hub's delivered bar against its scheduled bar (share delivered as the pill). */\nconst tip = (d: unknown, g: number): TooltipSpec => {\n  const r = (d as typeof data).rows[g], pc = Math.round((r.value / r.total) * 100);\n  return {\n    kind: \"compare\",\n    caps: r.label + \" · DELIVERED\",\n    value: num(r.value),\n    delta: { text: pc + \"%\", tone: pc >= 90 ? \"success\" : pc >= 75 ? \"neutral\" : \"warning\" },\n    comparison: \"OF \" + num(r.total) + \" SCHEDULED\",\n  };\n};\n\nexport const def: ChartDef = {\n  no: 7,\n  slug: \"horizontal-bars\",\n  legend: [[\"data/primary\", \"Delivered\"], [\"data/seq-2\", \"Scheduled\"]],\n  plot: (K, p, w, d) => hBars(K, p, w, (d as typeof data | undefined) ?? data),\n  tip,\n  update: (d, step) => {\n    const o = d as typeof data;\n    // later in the day: each hub delivers 4 % more a step (±6 %), never past what it scheduled\n    return {\n      ...o,\n      rows: o.rows.map((r, i) => {\n        const value = clamp(Math.round(r.value * (1 + 0.04 * step + 0.06 * wave(i, step))), 1, r.total);\n        return { ...r, value, text: num(value) };\n      }),\n    };\n  },\n  describe: {\n    title: \"Deliveries by hub\",\n    summary: `Parcels delivered today of those scheduled, across ${data.rows.length} hubs: ${num(del)} of ${num(sch)}; ${hub(data.rows[0].label)} delivered the most at ${num(data.rows[0].value)} of ${num(data.rows[0].total)}.`,\n    table: { head: [\"Hub\", \"Delivered\", \"Scheduled\"], rows: data.rows.map((r) => [hub(r.label), num(r.value), num(r.total)]) },\n  },\n};\n"
    }
  ],
  "categories": [
    "charts",
    "compare-items"
  ],
  "meta": {
    "access": "free",
    "no": 7,
    "family": "Compare items"
  }
}