{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "benchmark-echarts-area-chart",
  "description": "Growth against a dashed benchmark — hatched lead area, rounded step plateaus",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-area-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-benchmark-echarts-area-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsAreaChart, type ChartConfig } from \"@/registry/charts/echarts-area-chart\";\n\nconst chartData = [\n  { date: \"Jan 1\", actual: 240, target: 125 },\n  { date: \"Jan 8\", actual: 240, target: 125 },\n  { date: \"Jan 15\", actual: 175, target: 200 },\n  { date: \"Jan 22\", actual: 175, target: 200 },\n  { date: \"Feb 1\", actual: 175, target: 200 },\n  { date: \"Feb 8\", actual: 260, target: 125 },\n  { date: \"Feb 15\", actual: 260, target: 125 },\n  { date: \"Feb 22\", actual: 260, target: 125 },\n  { date: \"Mar 1\", actual: 260, target: 190 },\n  { date: \"Mar 8\", actual: 335, target: 190 },\n  { date: \"Mar 15\", actual: 335, target: 190 },\n  { date: \"Mar 22\", actual: 335, target: 390 },\n  { date: \"Apr 1\", actual: 335, target: 390 },\n  { date: \"Apr 8\", actual: 335, target: 390 },\n  { date: \"Apr 15\", actual: 190, target: 390 },\n  { date: \"Apr 22\", actual: 215, target: 305 },\n  { date: \"May 1\", actual: 215, target: 305 },\n  { date: \"May 8\", actual: 215, target: 175 },\n  { date: \"May 15\", actual: 215, target: 175 },\n  { date: \"May 22\", actual: 275, target: 175 },\n  { date: \"Jun 1\", actual: 275, target: 245 },\n];\n\nconst chartConfig = {\n  actual: { label: \"Actual\", colors: { light: [\"#0a0a0a\"], dark: [\"#ffffff\"] } },\n  target: { label: \"Target\", colors: { light: [\"#a1a1aa\"], dark: [\"#666\"] } },\n} satisfies ChartConfig;\n\nconst LATEST = chartData[chartData.length - 1];\nconst DELTA = ((LATEST.actual - LATEST.target) / LATEST.target) * 100;\n\nexport function EChartsBenchmarkAreaChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col p-4\">\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"text-muted-foreground text-xs\">Weekly signups</span>\n          <div className=\"flex items-baseline gap-2\">\n            <span className=\"text-primary text-2xl font-semibold tracking-tight sm:text-3xl\">\n              {LATEST.actual}\n            </span>\n            <span className=\"text-sm font-medium text-emerald-500\">\n              +{DELTA.toFixed(1)}% vs target\n            </span>\n          </div>\n        </div>\n\n        <div className=\"flex flex-col items-end gap-1.5 pt-1\">\n          <div className=\"text-muted-foreground flex items-center gap-2 text-xs\">\n            <svg className=\"text-primary\" width=\"18\" height=\"2\" viewBox=\"0 0 18 2\" aria-hidden>\n              <line x1=\"0\" y1=\"1\" x2=\"18\" y2=\"1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            </svg>\n            Actual\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 text-xs\">\n            <svg width=\"18\" height=\"2\" viewBox=\"0 0 18 2\" aria-hidden>\n              <line\n                x1=\"0\"\n                y1=\"1\"\n                x2=\"18\"\n                y2=\"1\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeDasharray=\"4 3\"\n              />\n            </svg>\n            Target\n          </div>\n        </div>\n      </div>\n\n      <EChartsAreaChart\n        data={chartData}\n        config={chartConfig}\n        xDataKey=\"date\"\n        className=\"mt-4 min-h-0 w-full flex-1\"\n        curveType=\"smooth\"\n      >\n        <EChartsAreaChart.Grid />\n        <EChartsAreaChart.XAxis\n          dataKey=\"date\"\n          tickFormatter={(value) => (value.split(\" \")[1] === \"1\" ? value.split(\" \")[0] : \"\")}\n        />\n        <EChartsAreaChart.YAxis />\n        <EChartsAreaChart.Tooltip />\n        <EChartsAreaChart.Area dataKey=\"target\" variant=\"none\" strokeVariant=\"dashed\" />\n        <EChartsAreaChart.Area dataKey=\"actual\" variant=\"lines\" strokeVariant=\"solid\" />\n      </EChartsAreaChart>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/benchmark-echarts-area-chart.tsx"
    }
  ],
  "type": "registry:block"
}