{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "area-chart",
  "type": "registry:ui",
  "title": "Area Chart",
  "description": "Overlapping or stacked area chart on a single y-axis: vertical gradient washes in each series token under a 2px edge line, stacked offsets from chart core, the same crosshair tooltip, keyboard readout, legend filtering and table view as LineChart.",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://components.dethink.co.uk/r/dethink-base.json",
    "https://components.dethink.co.uk/r/chart-core.json",
    "https://components.dethink.co.uk/r/chart.json"
  ],
  "files": [
    {
      "path": "packages/components/src/components/area-chart/area-chart.tsx",
      "type": "registry:file",
      "target": "~/components/dethink/components/area-chart/area-chart.tsx",
      "content": "import { forwardRef } from \"react\";\nimport { ChartArea, ChartLine } from \"../chart/chart\";\nimport {\n  CartesianChart,\n  valueAt,\n  type CartesianChartProps,\n  type CartesianLayout,\n  type ChartDatum,\n} from \"../chart/cartesian-chart\";\nimport { isFiniteValue, stackSeries } from \"../chart/chart-core\";\n\nexport type { ChartDatum };\n\nexport interface AreaChartProps extends CartesianChartProps {\n  /**\n   * Stack series so the top edge reads as the total. Positive values stack\n   * up and negative values down; a missing value stacks as zero.\n   */\n  stacked?: boolean;\n}\n\nexport const AreaChart = forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    { animate = true, curve = \"monotone\", data, stacked = false, ...props },\n    ref,\n  ) => (\n    <CartesianChart\n      {...props}\n      ref={ref}\n      data={data}\n      kind=\"area\"\n      data-stacked={stacked ? \"\" : undefined}\n      layout={(visible): CartesianLayout => {\n        const keys = visible.map((item) => item.key);\n        // Bands in value space: [lower, upper] per index, or the raw value\n        // over the shared floor when overlapping.\n        const bands = stacked\n          ? stackSeries(data, keys, valueAt).map((band) => band.values)\n          : undefined;\n        // The edge that carries the series line (away from zero) and the\n        // stack base it grows from. A fill between these two, rather than\n        // between each band's lower and upper bound, stays bounded by the line\n        // when a series changes sign.\n        const edge = (s: number, i: number) => {\n          const band = bands?.[s]?.[i];\n          if (!band) return valueAt(data[i], keys[s]!);\n          return (valueAt(data[i], keys[s]!) ?? 0) < 0 ? band[0] : band[1];\n        };\n        const base = (s: number, i: number) => {\n          const band = bands![s]![i]!;\n          return (valueAt(data[i], keys[s]!) ?? 0) < 0 ? band[1] : band[0];\n        };\n\n        return {\n          domainValues: bands\n            ? bands.flatMap((band) => band.flat())\n            : data.flatMap((datum) => keys.map((key) => valueAt(datum, key))),\n          pointValue: (key, i) => {\n            const s = keys.indexOf(key);\n            return isFiniteValue(valueAt(data[i], key)) ? edge(s, i) : null;\n          },\n          render: ({ x, y, active, highlighted }) => {\n            const dimmed = (key: string) =>\n              highlighted !== undefined && highlighted !== key;\n            const edges = visible.map((_, s) =>\n              data.map((__, i) => edge(s, i)),\n            );\n            return (\n              <>\n                {/* Every wash first, so no fill covers another series' line. */}\n                {visible.map((item, s) => (\n                  <ChartArea\n                    key={item.key}\n                    data-series={item.key}\n                    values={edges[s]!}\n                    baseline={\n                      bands ? data.map((_, i) => base(s, i)) : undefined\n                    }\n                    x={x}\n                    y={y}\n                    color={item.colorVar}\n                    curve={curve}\n                    animate={animate}\n                    dimmed={dimmed(item.key)}\n                  />\n                ))}\n                {visible.map((item, s) => (\n                  <ChartLine\n                    key={item.key}\n                    data-series={item.key}\n                    values={edges[s]!}\n                    x={x}\n                    y={y}\n                    color={item.colorVar}\n                    curve={curve}\n                    animate={animate}\n                    endMarker={active === undefined}\n                    dimmed={dimmed(item.key)}\n                  />\n                ))}\n              </>\n            );\n          },\n        };\n      }}\n    />\n  ),\n);\n\nAreaChart.displayName = \"AreaChart\";\n"
    },
    {
      "path": "packages/components/src/components/area-chart/index.ts",
      "type": "registry:file",
      "target": "~/components/dethink/components/area-chart/index.ts",
      "content": "export { AreaChart, type AreaChartProps } from \"./area-chart\";\n"
    }
  ]
}