{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "diverging-bars",
  "type": "registry:component",
  "title": "Diverging bars",
  "description": "In and out, from one zero line. Sample data: weekly inflow and outflow, W29 to W40, on a ±400K axis.",
  "registryDependencies": [
    "@chartory/core",
    "@chartory/plot-diverge"
  ],
  "files": [
    {
      "path": "registry/chartory/components/diverging-bars.tsx",
      "type": "registry:component",
      "target": "components/chartory/diverging-bars.tsx",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// Diverging bars (Chartory chart 004): 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/diverging-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/004-diverging-bars/data\"\nimport { def } from \"@/lib/chartory/charts/types/004-diverging-bars/layout\"\n\nregisterChart(def, sample)\n\nexport type DivergingBarsData = typeof sample\nexport type DivergingBarsProps = Omit<ChartViewProps, \"def\" | \"data\" | \"states\"> & {\n  /** the data to draw (default: the sample) */\n  data?: DivergingBarsData\n  /** further data states: the chart morphs to them (update) or ticks through them (live, with interval) */\n  states?: DivergingBarsData[]\n}\n\nexport function DivergingBars(props: DivergingBarsProps) {\n  return <ChartView def={def} {...props} />\n}\n"
    },
    {
      "path": "registry/chartory/charts/types/004-diverging-bars/data.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/004-diverging-bars/data.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 004 · sample data (Figma chart/004-diverging-bars, fintech: weekly inflow and outflow in $K, W29 → W40).\nimport type { DivergeData } from \"../../plots/diverge\";\n\nexport const data: DivergeData = {\n  max: 400,\n  ticks: [[400, \"400K\"], [0, \"0\"], [-400, \"−400K\"]],\n  up: [220, 260, 240, 300, 280, 330, 310, 290, 360, 340, 380, 350],\n  down: [180, 210, 230, 200, 240, 220, 260, 250, 230, 270, 240, 260],\n  xl: { 0: \"W29\", 4: \"W33\", 8: \"W37\", 11: \"W40\" },\n};\n"
    },
    {
      "path": "registry/chartory/charts/types/004-diverging-bars/layout.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/004-diverging-bars/layout.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 004 Diverging bars (Figma chart/004-diverging-bars): C.diverge on weekly cash in and out.\nimport type { ChartDef, TooltipSpec } from \"../../core/shell\";\nimport { diverge } from \"../../plots/diverge\";\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 week = (i: number) => \"W\" + (29 + i);\nconst sum = (a: number[]) => a.reduce((x, y) => x + y, 0);\n\n/** Hover tooltip: one week's inflow and outflow bars, with the net. */\nconst tip = (d: unknown, g: number): TooltipSpec => {\n  const o = d as typeof data, net = o.up[g] - o.down[g];\n  return {\n    kind: \"series\",\n    caps: week(g) + \" · CASH FLOW\",\n    rows: [\n      { label: \"Inflow\", value: \"$\" + o.up[g] + \"K\", swatch: \"data/primary\" },\n      { label: \"Outflow\", value: \"−$\" + o.down[g] + \"K\", swatch: \"data/cat-2\" },\n    ],\n    total: { label: \"Net\", value: (net < 0 ? \"−$\" : \"$\") + Math.abs(net) + \"K\" },\n  };\n};\n\nexport const def: ChartDef = {\n  no: 4,\n  slug: \"diverging-bars\",\n  legend: [[\"data/primary\", \"Inflow\"], [\"data/cat-2\", \"Outflow\"]],\n  plot: (K, p, w, d) => diverge(K, p, w, (d as typeof data | undefined) ?? data),\n  tip,\n  update: (d, step) => {\n    const o = d as typeof data;\n    // inflow and outflow move ±12 % per week on their own rhythm, inside the ±400K axis\n    const mv = (a: number[], k: number) => a.map((v, i) => clamp(Math.round(v * (1 + 0.12 * wave(i + k, step))), 40, 395));\n    return { ...o, up: mv(o.up, 0), down: mv(o.down, 7) };\n  },\n  describe: {\n    title: \"Net cash flow\",\n    summary: `Weekly inflow (up) and outflow (down) in $K, W29 to W40: inflow totals $${sum(data.up).toLocaleString(\"en-US\")}K, outflow $${sum(data.down).toLocaleString(\"en-US\")}K, net $${sum(data.up) - sum(data.down)}K.`,\n    table: { head: [\"Week\", \"Inflow ($K)\", \"Outflow ($K)\"], rows: data.up.map((u, i) => [week(i), u, data.down[i]]) },\n  },\n};\n"
    }
  ],
  "categories": [
    "charts",
    "compare-items"
  ],
  "meta": {
    "access": "free",
    "no": 4,
    "family": "Compare items"
  }
}