{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "area",
  "type": "registry:component",
  "title": "Area",
  "description": "A trend with weight under it. Sample data: spot price, Sep 10 to Oct 9.",
  "registryDependencies": [
    "@chartory/core",
    "@chartory/plot-line"
  ],
  "files": [
    {
      "path": "registry/chartory/components/area.tsx",
      "type": "registry:component",
      "target": "components/chartory/area.tsx",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// Area (Chartory chart 011): 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/area\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/011-area/data\"\nimport { def } from \"@/lib/chartory/charts/types/011-area/layout\"\n\nregisterChart(def, sample)\n\nexport type AreaData = typeof sample\nexport type AreaProps = Omit<ChartViewProps, \"def\" | \"data\" | \"states\"> & {\n  /** the data to draw (default: the sample) */\n  data?: AreaData\n  /** further data states: the chart morphs to them (update) or ticks through them (live, with interval) */\n  states?: AreaData[]\n}\n\nexport function Area(props: AreaProps) {\n  return <ChartView def={def} {...props} />\n}\n"
    },
    {
      "path": "registry/chartory/charts/types/011-area/data.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/011-area/data.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 011 Area · sample data (Figma chart/011-area, crypto: daily close, Sep 10 → Oct 9). The values are the seeded\n// series the Figma builder generated (exact floats, so every size lands on the same points).\nimport type { LineData } from \"../../plots/line\";\n\nexport const data: LineData = {\n  vals: [3211.1023009525625, 3230.874410666653, 3224.122375391993, 3214.0655141774873, 3225.799081976665, 3229.2730827571236, 3224.2041999241824, 3236.890426683468, 3249.7035699994317, 3253.603281406035, 3263.4528921880537, 3271.2613055760326, 3286.665117333068, 3277.9293178281414, 3274.7470385312317, 3285.5788953717697, 3295.996814290479, 3279.3600810365565, 3289.1842823584957, 3289.9359001889525, 3309.7767766795478, 3324.7879541135335, 3311.047087113441, 3313.695416563421, 3333.5684823729416, 3343.5855429832754, 3351.723220865998, 3357.075395781861, 3376.4792066960495, 3412],\n  min: 3200,\n  max: 3500,\n  ticks: [\"3.5K\", \"3.4K\", \"3.3K\", \"3.2K\"],\n  yW: 40,\n  area: \"gradient\",\n  end: true,\n  xl: { 0: \"SEP 10\", 7: \"SEP 17\", 14: \"SEP 24\", 21: \"OCT 1\", 29: \"OCT 9\" },\n};\n"
    },
    {
      "path": "registry/chartory/charts/types/011-area/layout.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/011-area/layout.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 011 Area (Figma chart/011-area): C.line with a gradient area and an end point; no legend (one series).\nimport type { ChartDef } from \"../../core/shell\";\nimport { line } from \"../../plots/line\";\nimport { tickSeries } from \"../../core/vary\";\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// Day labels for the table: Sep 10 → Oct 9 (30 days).\nconst day = (i: number) => (i < 21 ? `Sep ${10 + i}` : `Oct ${i - 20}`);\nconst fmt = (v: number) => Math.round(v).toLocaleString(\"en-US\");\n\nexport const def: ChartDef = {\n  no: 11,\n  slug: \"area\",\n  legend: null,\n  plot: (K, p, w, d) => line(K, p, w, (d as typeof data | undefined) ?? data),\n  // live: one point per tick\n  tick: (d, step) => { const o = d as typeof data; return { ...o, vals: tickSeries(o.vals, step + 1, o.min, o.max) }; },\n  update: (d, step) => {\n    const o = d as typeof data;\n    // later windows: each close moves ±30 with a slow swell and a drift that builds to the latest day, inside 3.2K–3.5K\n    return { ...o, vals: o.vals.map((v, i) => clamp(v + 22 * wave(i, step) + 18 * Math.sin(step * 1.9 + i * 0.35) + (12 * step * i) / (o.vals.length - 1), o.min + 5, o.max - 5)) };\n  },\n  describe: {\n    title: \"Daily close\",\n    summary: `Daily close from Sep 10 to Oct 9: from ${fmt(data.vals[0])} to ${fmt(data.vals[data.vals.length - 1])}.`,\n    table: { head: [\"Day\", \"Close\"], rows: data.vals.map((v, i) => [day(i), fmt(v)]) },\n  },\n};\n"
    }
  ],
  "categories": [
    "charts",
    "change-over-time"
  ],
  "meta": {
    "access": "free",
    "no": 11,
    "family": "Change over time"
  }
}