{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "dashboard-charts",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "For FX/crypto pairs.",
  "files": [
    {
      "content": "\"use client\";\nimport { niceTicks } from \"@/lib/ledger/chart-utils\";\nimport { DataTableToggle } from \"@/components/ledger/chart-primitives\";\n\nexport type Candle = {\n  label: string;\n  open: number;\n  high: number;\n  low: number;\n  close: number;\n};\n\nexport interface CandlestickChartProps {\n  candles: Candle[];\n  className?: string;\n  height?: number;\n  pair: string;\n}\n\n/**\n * Up and down candles differ in **fill** (hollow vs. solid) as well as\n * colour — the traditional convention, which happens to be the correct\n * accessibility answer.\n *\n * A rate axis does not start at zero; forcing it destroys the resolution.\n */\nexport function CandlestickChart({ candles, pair, height = 280, className }: CandlestickChartProps) {\n  const width = 720;\n  const PAD = { bottom: 28, left: 72, right: 16, top: 16 };\n  const lows = candles.map((c) => c.low);\n  const highs = candles.map((c) => c.high);\n  const pad = (Math.max(...highs) - Math.min(...lows)) * 0.1 || 0.001;\n  const min = Math.min(...lows) - pad;\n  const max = Math.max(...highs) + pad;\n  const ticks = niceTicks(min, max, 4);\n\n  const plotW = width - PAD.left - PAD.right;\n  const plotH = height - PAD.top - PAD.bottom;\n  const y = (v: number) => PAD.top + plotH - ((v - min) / (max - min || 1)) * plotH;\n  const slot = plotW / candles.length;\n  const bodyW = slot * 0.6;\n\n  return (\n    <DataTableToggle\n      className={className}\n      table={\n        <table className=\"w-full text-body\">\n          <caption className=\"sr-only\">{pair} price data</caption>\n          <thead>\n            <tr className=\"border-b border-border-subtle\">\n              {[\"Period\", \"Open\", \"High\", \"Low\", \"Close\"].map((h) => (\n                <th\n                  className=\"py-2 text-right text-label text-text-secondary first:text-left\"\n                  key={h}\n                  scope=\"col\"\n                >\n                  {h}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {candles.map((c) => (\n              <tr className=\"border-b border-border-subtle\" key={c.label}>\n                <th className=\"py-2 text-left font-normal\" scope=\"row\">\n                  {c.label}\n                </th>\n                {[c.open, c.high, c.low, c.close].map((v, i) => (\n                  <td className=\"numeric py-2 text-right\" key={i}>\n                    {v.toFixed(5)}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      }\n    >\n      <svg\n        aria-label={`${pair} candlestick chart`}\n        className=\"w-full\"\n        role=\"img\"\n        style={{ height }}\n        viewBox={`0 0 ${width} ${height}`}\n      >\n        {ticks.map((t) => (\n          <g key={t}>\n            <line stroke=\"var(--border-subtle)\" x1={PAD.left} x2={width - PAD.right} y1={y(t)} y2={y(t)} />\n            <text\n              className=\"numeric\"\n              fill=\"var(--text-tertiary)\"\n              fontSize=\"12\"\n              textAnchor=\"end\"\n              x={PAD.left - 8}\n              y={y(t) + 4}\n            >\n              {t.toFixed(4)}\n            </text>\n          </g>\n        ))}\n        {candles.map((c, i) => {\n          const cx = PAD.left + i * slot + slot / 2;\n          const up = c.close >= c.open;\n          const color = up ? \"var(--positive)\" : \"var(--negative)\";\n          const top = y(Math.max(c.open, c.close));\n          const h = Math.max(1, Math.abs(y(c.open) - y(c.close)));\n          return (\n            <g key={c.label}>\n              <line stroke={color} strokeWidth=\"1\" x1={cx} x2={cx} y1={y(c.high)} y2={y(c.low)} />\n              <rect\n                fill={up ? \"var(--surface)\" : color}\n                height={h}\n                stroke={color}\n                strokeWidth=\"1.5\"\n                width={bodyW}\n                x={cx - bodyW / 2}\n                y={top}\n              />\n            </g>\n          );\n        })}\n      </svg>\n      <p className=\"mt-2 text-caption text-text-tertiary\">\n        Hollow candles closed up, solid closed down. The rate axis does not start at zero.\n      </p>\n    </DataTableToggle>\n  );\n}\n",
      "path": "components/ledger/candlestick-chart.tsx",
      "target": "components/ledger/candlestick-chart.tsx",
      "type": "registry:component"
    }
  ],
  "name": "candlestick-chart",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/chart-primitives",
    "@lopifi/chart-utils"
  ],
  "title": "CandlestickChart",
  "type": "registry:component"
}