{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "audience-echarts-area-chart",
  "description": "Audience growth card with a multi-stop gradient line and faded wash",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-area-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-audience-echarts-area-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsAreaChart, type ChartConfig } from \"@/registry/charts/echarts-area-chart\";\n\nconst chartData = [\n  { month: \"Jan\", listeners: 2980 },\n  { month: \"Feb\", listeners: 3120 },\n  { month: \"Mar\", listeners: 3460 },\n  { month: \"Apr\", listeners: 3380 },\n  { month: \"May\", listeners: 3720 },\n  { month: \"Jun\", listeners: 4180 },\n  { month: \"Jul\", listeners: 4560 },\n];\n\nconst chartConfig = {\n  listeners: {\n    label: \"Listeners\",\n    colors: {\n      light: [\"#10b981\", \"#0ea5e9\", \"#8b5cf6\"],\n      dark: [\"#34d399\", \"#38bdf8\", \"#a78bfa\"],\n    },\n  },\n} satisfies ChartConfig;\n\nconst TOTAL = chartData.reduce((sum, { listeners }) => sum + listeners, 0);\n\nexport function EChartsAudienceAreaChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col\">\n      <div className=\"flex items-start justify-between gap-4 px-4 pt-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"text-primary text-base font-medium tracking-tight sm:text-lg\">\n            Listeners\n          </span>\n          <span className=\"text-muted-foreground max-w-[26ch] text-xs leading-snug\">\n            Monthly reach across every show and episode\n          </span>\n        </div>\n        <div className=\"flex shrink-0 flex-col items-end gap-2\">\n          <span className=\"text-primary text-2xl font-semibold tracking-tight sm:text-4xl\">\n            {TOTAL.toLocaleString(\"en-US\")}\n          </span>\n          <span className=\"text-muted-foreground text-xs\">Total listeners</span>\n        </div>\n      </div>\n\n      <div className=\"relative mt-2 min-h-0 w-full flex-1\">\n        <EChartsAreaChart\n          data={chartData}\n          config={chartConfig}\n          xDataKey=\"month\"\n          className=\"h-full w-full\"\n          curveType=\"monotone\"\n          chartOptions={{\n            grid: { left: 0, right: 0, top: 16, bottom: 0, outerBoundsMode: \"none\" },\n            yAxis: { type: \"value\", show: false, scale: true, boundaryGap: [\"16%\", \"20%\"] },\n          }}\n        >\n          <EChartsAreaChart.Tooltip variant=\"frosted-glass\" />\n          <EChartsAreaChart.Area\n            dataKey=\"listeners\"\n            variant=\"gradient\"\n            strokeVariant=\"solid\"\n            strokeWidth={2.5}\n          >\n            <EChartsAreaChart.ActiveDot variant=\"ping\" />\n          </EChartsAreaChart.Area>\n        </EChartsAreaChart>\n\n        <div className=\"text-muted-foreground pointer-events-none absolute inset-x-0 bottom-0 flex justify-between px-4 pb-3 text-[10px] sm:text-xs\">\n          {chartData.map(({ month }) => (\n            <span key={month}>{month}</span>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/audience-echarts-area-chart.tsx"
    }
  ],
  "type": "registry:block"
}