{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "area-charts",
  "type": "registry:block",
  "title": "All Area Charts",
  "description": "RosenCharts All Area Charts",
  "dependencies": [
    "react",
    "d3",
    "@types/d3"
  ],
  "files": [
    {
      "path": "temp/area/Live1_AreaChart.tsx",
      "content": "import { scaleTime, scaleLinear, line as d3line, max, area as d3area, curveMonotoneX } from \"d3\";\nimport { CSSProperties } from \"react\";\n\nconst sales = [\n  { date: \"2023-04-30\", value: 4 },\n  { date: \"2023-05-01\", value: 6 },\n  { date: \"2023-05-02\", value: 8 },\n  { date: \"2023-05-03\", value: 7 },\n  { date: \"2023-05-04\", value: 10 },\n  { date: \"2023-05-05\", value: 12 },\n  { date: \"2023-05-06\", value: 10.5 },\n  { date: \"2023-05-07\", value: 6 },\n  { date: \"2023-05-08\", value: 8 },\n  { date: \"2023-05-09\", value: 7.5 },\n  { date: \"2023-05-10\", value: 6 },\n  { date: \"2023-05-11\", value: 8 },\n  { date: \"2023-05-12\", value: 9 },\n  { date: \"2023-05-13\", value: 10 },\n  { date: \"2023-05-14\", value: 17 },\n  { date: \"2023-05-15\", value: 14 },\n  { date: \"2023-05-16\", value: 15 },\n  { date: \"2023-05-17\", value: 20 },\n  { date: \"2023-05-18\", value: 18 },\n  { date: \"2023-05-19\", value: 16 },\n  { date: \"2023-05-20\", value: 15 },\n  { date: \"2023-05-21\", value: 16 },\n  { date: \"2023-05-22\", value: 13 },\n  { date: \"2023-05-23\", value: 11 },\n  { date: \"2023-05-24\", value: 11 },\n  { date: \"2023-05-25\", value: 13 },\n  { date: \"2023-05-26\", value: 12 },\n  { date: \"2023-05-27\", value: 9 },\n  { date: \"2023-05-28\", value: 8 },\n  { date: \"2023-05-29\", value: 10 },\n  { date: \"2023-05-30\", value: 11 },\n  { date: \"2023-05-31\", value: 8 },\n  { date: \"2023-06-01\", value: 9 },\n  { date: \"2023-06-02\", value: 10 },\n  { date: \"2023-06-03\", value: 12 },\n  { date: \"2023-06-04\", value: 13 },\n  { date: \"2023-06-05\", value: 15 },\n  { date: \"2023-06-06\", value: 13.5 },\n  { date: \"2023-06-07\", value: 13 },\n  { date: \"2023-06-08\", value: 13 },\n  { date: \"2023-06-09\", value: 14 },\n  { date: \"2023-06-10\", value: 13 },\n  { date: \"2023-06-11\", value: 12.5 },\n];\nlet data = sales.map((d) => ({ ...d, date: new Date(d.date) }));\n\nexport function AreaChart() {\n  let xScale = scaleTime()\n    .domain([data[0].date, data[data.length - 1].date])\n    .range([0, 100]);\n\n  let yScale = scaleLinear()\n    .domain([0, max(data.map((d) => d.value)) ?? 0])\n    .range([100, 0]);\n\n  let line = d3line<(typeof data)[number]>()\n    .x((d) => xScale(d.date))\n    .y((d) => yScale(d.value))\n    .curve(curveMonotoneX);\n\n  let area = d3area<(typeof data)[number]>()\n    .x((d) => xScale(d.date))\n    .y0(yScale(0))\n    .y1((d) => yScale(d.value))\n    .curve(curveMonotoneX);\n\n  let areaPath = area(data) ?? undefined;\n\n  let d = line(data);\n\n  if (!d) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"relative h-72 w-full\"\n      style={\n        {\n          \"--marginTop\": \"0px\",\n          \"--marginRight\": \"10px\",\n          \"--marginBottom\": \"15px\",\n          \"--marginLeft\": \"0px\",\n        } as CSSProperties\n      }\n    >\n      {/* Chart area */}\n      <div\n        className=\"absolute inset-0\n          h-[calc(100%-var(--marginTop)-var(--marginBottom))]\n          w-[calc(100%-var(--marginLeft)-var(--marginRight))]\n          translate-x-[var(--marginLeft)]\n          translate-y-[var(--marginTop)]\n          overflow-visible\n          \"\n      >\n        <svg\n          viewBox=\"0 0 100 100\"\n          className=\"w-full h-full overflow-visible\"\n          preserveAspectRatio=\"none\"\n        >\n          {/* Area */}\n          <path d={areaPath} className=\"text-purple-200 dark:text-purple-400\" fill=\"currentColor\" />\n\n          {/* Line */}\n          <path\n            d={d}\n            fill=\"none\"\n            className=\"text-gray-50 dark:text-zinc-800\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n          \n        </svg>\n\n        {/* X Axis */}\n        <div className=\"translate-y-1\">\n          {data.map((day, i) => {\n            const isFirst = i === 0;\n            const isLast = i === data.length - 1;\n            const isMax = day.value === Math.max(...data.map((d) => d.value));\n            if (!isFirst && !isLast && !isMax) return null;\n            return (\n              <div key={i} className=\"overflow-visible text-zinc-500\">\n                <div\n                  style={{\n                    left: `${xScale(day.date)}%`,\n                    top: \"100%\",\n                    transform: `translateX(${i === 0 ? \"0%\" : i === data.length - 1 ? \"-100%\" : \"-50%\"})`, // The first and last labels should be within the chart area\n                  }}\n                  className=\"text-xs absolute whitespace-nowrap\"\n                >\n                  {day.date.toLocaleDateString(\"en-US\", {\n                    month: \"short\",\n                    day: \"numeric\",\n                  })}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n\n      {/* Y axis */}\n      <div\n        className=\"absolute right-0 top-0\n          h-[calc(100%-var(--marginTop)-var(--marginBottom))]\n          translate-y-[var(--marginTop)]\n          w-[var(--marginRight)]\n          overflow-visible\n        \"\n      >\n        {yScale\n          .ticks(8)\n          .map(yScale.tickFormat(8, \"d\"))\n          .map((value, i) => (\n            <div\n              key={i}\n              style={{\n                top: `${yScale(+value)}%`,\n                left: \"0%\",\n              }}\n              className=\"absolute text-xs -translate-y-1/2 text-gray-400 w-full text-right pl-1\"\n            >\n              {value}\n            </div>\n          ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/charts/area/area-chart.tsx"
    },
    {
      "path": "temp/area/Live2_AreaChartFull.tsx",
      "content": "import { scaleTime, scaleLinear, line as d3line, max, area as d3area, curveMonotoneX } from \"d3\";\n\nconst sales = [\n  { date: \"2023-04-30\", value: 4 },\n  { date: \"2023-05-01\", value: 6 },\n  { date: \"2023-05-02\", value: 8 },\n  { date: \"2023-05-03\", value: 7 },\n  { date: \"2023-05-04\", value: 10 },\n  { date: \"2023-05-05\", value: 12 },\n  { date: \"2023-05-06\", value: 10.5 },\n  { date: \"2023-05-07\", value: 6 },\n  { date: \"2023-05-08\", value: 8 },\n  { date: \"2023-05-09\", value: 7.5 },\n  { date: \"2023-05-10\", value: 6 },\n  { date: \"2023-05-11\", value: 8 },\n  { date: \"2023-05-12\", value: 9 },\n  { date: \"2023-05-13\", value: 10 },\n  { date: \"2023-05-14\", value: 17 },\n  { date: \"2023-05-15\", value: 14 },\n  { date: \"2023-05-16\", value: 15 },\n  { date: \"2023-05-17\", value: 20 },\n  { date: \"2023-05-18\", value: 18 },\n  { date: \"2023-05-19\", value: 16 },\n  { date: \"2023-05-20\", value: 15 },\n  { date: \"2023-05-21\", value: 16 },\n  { date: \"2023-05-22\", value: 13 },\n  { date: \"2023-05-23\", value: 11 },\n  { date: \"2023-05-24\", value: 11 },\n  { date: \"2023-05-25\", value: 13 },\n  { date: \"2023-05-26\", value: 12 },\n  { date: \"2023-05-27\", value: 9 },\n  { date: \"2023-05-28\", value: 8 },\n  { date: \"2023-05-29\", value: 10 },\n  { date: \"2023-05-30\", value: 11 },\n  { date: \"2023-05-31\", value: 8 },\n  { date: \"2023-06-01\", value: 9 },\n  { date: \"2023-06-02\", value: 10 },\n  { date: \"2023-06-03\", value: 12 },\n  { date: \"2023-06-04\", value: 13 },\n  { date: \"2023-06-05\", value: 15 },\n  { date: \"2023-06-06\", value: 13.5 },\n  { date: \"2023-06-07\", value: 13 },\n  { date: \"2023-06-08\", value: 13 },\n  { date: \"2023-06-09\", value: 14 },\n  { date: \"2023-06-10\", value: 13 },\n  { date: \"2023-06-11\", value: 12.5 },\n];\nlet data = sales.map((d) => ({ ...d, date: new Date(d.date) }));\n\nexport function AreaChartFull() {\n  let xScale = scaleTime()\n    .domain([data[0].date, data[data.length - 1].date])\n    .range([0, 100]);\n\n  let yScale = scaleLinear()\n    .domain([0, max(data.map((d) => d.value)) ?? 0])\n    .range([100, 0]);\n\n  let line = d3line<(typeof data)[number]>()\n    .x((d) => xScale(d.date))\n    .y((d) => yScale(d.value))\n    .curve(curveMonotoneX);\n\n  let area = d3area<(typeof data)[number]>()\n    .x((d) => xScale(d.date))\n    .y0(yScale(0))\n    .y1((d) => yScale(d.value))\n    .curve(curveMonotoneX);\n\n  let areaPath = area(data) ?? undefined;\n\n  let d = line(data);\n\n  if (!d) {\n    return null;\n  }\n\n  return (\n    <div className=\"relative h-72 w-full\">\n      <div\n        className=\"absolute inset-0\n        h-full\n        w-full\n        overflow-visible\"\n      >\n        {/* Chart area */}\n        <svg\n          viewBox=\"0 0 100 100\"\n          className=\"w-full h-full overflow-visible\"\n          preserveAspectRatio=\"none\"\n        >\n          {/* Area */}\n          <path d={areaPath} className=\"text-blue-200 dark:text-blue-400\" fill=\"currentColor\" />\n\n          {/* Line */}\n          <path\n            d={d}\n            fill=\"none\"\n            className=\"text-gray-50 dark:text-zinc-800\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n          \n        </svg>\n\n        {/* X axis */}\n        {data.map((day, i) => {\n          // show 1 every x labels\n          if (i % 6 !== 0 || i === 0 || i >= data.length - 3) return;\n          return (\n            <div\n              key={i}\n              style={{\n                left: `${xScale(day.date)}%`,\n                top: \"90%\",\n              }}\n              className=\"absolute text-xs text-zinc-500 -translate-x-1/2\"\n            >\n              {day.date.toLocaleDateString(\"en-US\", {\n                month: \"short\",\n                day: \"numeric\",\n              })}\n            </div>\n          );\n        })}\n      </div>\n      {/* Y axis */}\n      {yScale\n        .ticks(8)\n        .map(yScale.tickFormat(8, \"d\"))\n        .map((value, i) => {\n          if (i < 1) return;\n          return (\n            <div\n              key={i}\n              style={{\n                top: `${yScale(+value)}%`,\n                right: \"3%\",\n              }}\n              className=\"absolute text-xs tabular-nums text-zinc-400 -translate-y-1/2\"\n            >\n              {value}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/charts/area/area-chart-full.tsx"
    },
    {
      "path": "temp/area/Live3_AreaChartGradient.tsx",
      "content": "import { scaleTime, scaleLinear, line as d3line, max, area as d3area, curveMonotoneX } from \"d3\";\n\nconst sales = [\n  { date: \"2023-04-30\", value: 4 },\n  { date: \"2023-05-01\", value: 6 },\n  { date: \"2023-05-02\", value: 8 },\n  { date: \"2023-05-03\", value: 7 },\n  { date: \"2023-05-04\", value: 10 },\n  { date: \"2023-05-05\", value: 12 },\n  { date: \"2023-05-06\", value: 10.5 },\n  { date: \"2023-05-07\", value: 6 },\n  { date: \"2023-05-08\", value: 8 },\n  { date: \"2023-05-09\", value: 7.5 },\n  { date: \"2023-05-10\", value: 6 },\n  { date: \"2023-05-11\", value: 8 },\n  { date: \"2023-05-12\", value: 9 },\n  { date: \"2023-05-13\", value: 10 },\n  { date: \"2023-05-14\", value: 17 },\n  { date: \"2023-05-15\", value: 14 },\n  { date: \"2023-05-16\", value: 15 },\n  { date: \"2023-05-17\", value: 20 },\n  { date: \"2023-05-18\", value: 18 },\n  { date: \"2023-05-19\", value: 16 },\n  { date: \"2023-05-20\", value: 15 },\n  { date: \"2023-05-21\", value: 16 },\n  { date: \"2023-05-22\", value: 13 },\n  { date: \"2023-05-23\", value: 11 },\n  { date: \"2023-05-24\", value: 11 },\n  { date: \"2023-05-25\", value: 13 },\n  { date: \"2023-05-26\", value: 12 },\n  { date: \"2023-05-27\", value: 9 },\n  { date: \"2023-05-28\", value: 8 },\n  { date: \"2023-05-29\", value: 10 },\n  { date: \"2023-05-30\", value: 11 },\n  { date: \"2023-05-31\", value: 8 },\n  { date: \"2023-06-01\", value: 9 },\n  { date: \"2023-06-02\", value: 10 },\n  { date: \"2023-06-03\", value: 12 },\n  { date: \"2023-06-04\", value: 13 },\n  { date: \"2023-06-05\", value: 15 },\n  { date: \"2023-06-06\", value: 13.5 },\n  { date: \"2023-06-07\", value: 13 },\n  { date: \"2023-06-08\", value: 13 },\n  { date: \"2023-06-09\", value: 14 },\n  { date: \"2023-06-10\", value: 13 },\n  { date: \"2023-06-11\", value: 12.5 },\n];\nlet data = sales.map((d) => ({ ...d, date: new Date(d.date) }));\n\nexport function AreaChartGradient() {\n  let xScale = scaleTime()\n    .domain([data[0].date, data[data.length - 1].date])\n    .range([0, 100]);\n\n  let yScale = scaleLinear()\n    .domain([0, max(data.map((d) => d.value)) ?? 0])\n    .range([100, 0]);\n\n  let line = d3line<(typeof data)[number]>()\n    .x((d) => xScale(d.date))\n    .y((d) => yScale(d.value))\n    .curve(curveMonotoneX);\n\n  let area = d3area<(typeof data)[number]>()\n    .x((d) => xScale(d.date))\n    .y0(yScale(0))\n    .y1((d) => yScale(d.value))\n    .curve(curveMonotoneX);\n\n  let areaPath = area(data) ?? undefined;\n\n  let d = line(data);\n\n  if (!d) {\n    return null;\n  }\n\n  return (\n    <div className=\"relative h-72 w-full\">\n      <div\n        className=\"absolute inset-0\n        h-full\n        w-full\n        overflow-visible\"\n      >\n        {/* Chart area */}\n        <svg\n          viewBox=\"0 0 100 100\"\n          className=\"w-full h-full overflow-visible\"\n          preserveAspectRatio=\"none\"\n        >\n          {/* Area */}\n          <path d={areaPath} className=\"text-blue-200\" fill=\"url(#areaGradient)\" />\n          <defs>\n            {/* Gradient definition */}\n            <linearGradient id=\"areaGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n              <stop\n                offset=\"0%\"\n                className=\"text-lime-500 dark:text-lime-100\"\n                stopColor=\"currentColor\"\n              />\n              <stop\n                offset=\"90%\"\n                className=\"text-lime-50/10 dark:text-green-900\"\n                stopColor=\"currentColor\"\n              />\n            </linearGradient>\n          </defs>\n\n          {/* Line */}\n          <path\n            d={d}\n            fill=\"none\"\n            className=\"text-gray-50 dark:text-zinc-800\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n          \n        </svg>\n\n        {/* X axis */}\n        {data.map((day, i) => {\n          // show 1 every x labels\n          if (i % 6 !== 0 || i === 0 || i >= data.length - 3) return;\n          return (\n            <div\n              key={i}\n              style={{\n                left: `${xScale(day.date)}%`,\n                top: \"90%\",\n              }}\n              className=\"absolute text-xs text-zinc-500 -translate-x-1/2\"\n            >\n              {day.date.toLocaleDateString(\"en-US\", {\n                month: \"short\",\n                day: \"numeric\",\n              })}\n            </div>\n          );\n        })}\n      </div>\n      {/* Y axis */}\n      {yScale\n        .ticks(8)\n        .map(yScale.tickFormat(8, \"d\"))\n        .map((value, i) => {\n          if (i < 1) return;\n          return (\n            <div\n              key={i}\n              style={{\n                top: `${yScale(+value)}%`,\n                right: \"3%\",\n              }}\n              className=\"absolute text-xs tabular-nums text-zinc-400 -translate-y-1/2\"\n            >\n              {value}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/charts/area/area-chart-gradient.tsx"
    },
    {
      "path": "temp/area/Live4_AreaChartSemiFilled.tsx",
      "content": "import { scaleTime, scaleLinear, line as d3line, max, area as d3area, curveMonotoneX } from \"d3\";\n\nconst sales = [\n  { date: \"2023-04-30\", value: 4 },\n  { date: \"2023-05-01\", value: 6 },\n  { date: \"2023-05-02\", value: 8 },\n  { date: \"2023-05-03\", value: 7 },\n  { date: \"2023-05-04\", value: 10 },\n  { date: \"2023-05-05\", value: 12 },\n  { date: \"2023-05-06\", value: 10.5 },\n  { date: \"2023-05-07\", value: 6 },\n  { date: \"2023-05-08\", value: 8 },\n  { date: \"2023-05-09\", value: 7.5 },\n  { date: \"2023-05-10\", value: 6 },\n  { date: \"2023-05-11\", value: 8 },\n  { date: \"2023-05-12\", value: 9 },\n  { date: \"2023-05-13\", value: 10 },\n  { date: \"2023-05-14\", value: 17 },\n  { date: \"2023-05-15\", value: 14 },\n  { date: \"2023-05-16\", value: 15 },\n  { date: \"2023-05-17\", value: 20 },\n  { date: \"2023-05-18\", value: 18 },\n  { date: \"2023-05-19\", value: 16 },\n  { date: \"2023-05-20\", value: 15 },\n  { date: \"2023-05-21\", value: 16 },\n  { date: \"2023-05-22\", value: 13 },\n  { date: \"2023-05-23\", value: 11 },\n  { date: \"2023-05-24\", value: 11 },\n  { date: \"2023-05-25\", value: 13 },\n  { date: \"2023-05-26\", value: 12 },\n  { date: \"2023-05-27\", value: 9 },\n  { date: \"2023-05-28\", value: 8 },\n  { date: \"2023-05-29\", value: 10 },\n  { date: \"2023-05-30\", value: 11 },\n  { date: \"2023-05-31\", value: 8 },\n  { date: \"2023-06-01\", value: 9 },\n  { date: \"2023-06-02\", value: 10 },\n  { date: \"2023-06-03\", value: 12 },\n  { date: \"2023-06-04\", value: 13 },\n  { date: \"2023-06-05\", value: 15 },\n  { date: \"2023-06-06\", value: 13.5 },\n  { date: \"2023-06-07\", value: 13 },\n  { date: \"2023-06-08\", value: 13 },\n  { date: \"2023-06-09\", value: 14 },\n  { date: \"2023-06-10\", value: 13 },\n  { date: \"2023-06-11\", value: 12.5 },\n];\nlet data = sales.map((d) => ({ ...d, date: new Date(d.date) }));\n\nexport function AreaChartSemiFilled() {\n  let xScale = scaleTime()\n    .domain([data[0].date, data[data.length - 1].date])\n    .range([0, 100]);\n\n  let yScale = scaleLinear()\n    .domain([0, max(data.map((d) => d.value)) ?? 0])\n    .range([100, 0]);\n\n  let line = d3line<(typeof data)[number]>()\n    .x((d) => xScale(d.date))\n    .y((d) => yScale(d.value))\n    .curve(curveMonotoneX);\n\n  let area = d3area<(typeof data)[number]>()\n    .x((d) => xScale(d.date))\n    .y0(yScale(0))\n    .y1((d) => yScale(d.value))\n    .curve(curveMonotoneX);\n\n  let areaPath = area(data) ?? undefined;\n\n  let d = line(data);\n\n  if (!d) {\n    return null;\n  }\n\n  return (\n    <div className=\"relative h-72 w-full\">\n      <div\n        className=\"absolute inset-0\n        h-full\n        w-full\n        overflow-visible\"\n      >\n        {/* Chart area */}\n        <svg\n          viewBox=\"0 0 100 100\"\n          className=\"w-full h-full overflow-visible\"\n          preserveAspectRatio=\"none\"\n        >\n          {/* Area */}\n          <path d={areaPath} className=\"text-blue-200\" fill=\"url(#outlinedAreaGradient)\" />\n          <defs>\n            {/* Gradient definition */}\n            <linearGradient id=\"outlinedAreaGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n              <stop\n                offset=\"0%\"\n                className=\"text-yellow-500/20 dark:text-yellow-500/20\"\n                stopColor=\"currentColor\"\n              />\n              <stop\n                offset=\"100%\"\n                className=\"text-yellow-50/5 dark:text-yellow-900/5\"\n                stopColor=\"currentColor\"\n              />\n            </linearGradient>\n          </defs>\n\n          {/* Line */}\n          <path\n            d={d}\n            fill=\"none\"\n            className=\"text-yellow-400 dark:text-yellow-600\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n          \n        </svg>\n\n        {/* X axis */}\n        {data.map((day, i) => {\n          // show 1 every x labels\n          if (i % 6 !== 0 || i === 0 || i >= data.length - 3) return;\n          return (\n            <div\n              key={i}\n              style={{\n                left: `${xScale(day.date)}%`,\n                top: \"90%\",\n              }}\n              className=\"absolute text-xs text-zinc-500 -translate-x-1/2\"\n            >\n              {day.date.toLocaleDateString(\"en-US\", {\n                month: \"short\",\n                day: \"numeric\",\n              })}\n            </div>\n          );\n        })}\n      </div>\n      {/* Y axis */}\n      {yScale\n        .ticks(8)\n        .map(yScale.tickFormat(8, \"d\"))\n        .map((value, i) => {\n          if (i < 1) return;\n          return (\n            <div\n              key={i}\n              style={{\n                top: `${yScale(+value)}%`,\n                right: \"3%\",\n              }}\n              className=\"absolute text-xs tabular-nums text-zinc-400 -translate-y-1/2\"\n            >\n              {value}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/charts/area/area-chart-semi-filled.tsx"
    }
  ]
}