{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "charts-2",
  "title": "Active Users Area Trend",
  "description": "Gradient area chart of monthly active users, topped by a three KPI row (total, peak month, peak users) and a year over year growth badge.",
  "dependencies": [
    "recharts",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "card",
    "chart"
  ],
  "files": [
    {
      "path": "registry/blocks/charts/2/charts-block.tsx",
      "content": "\"use client\"\n\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  type ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/chart\"\n\nconst chartData = [\n  { month: \"Jan\", users: 11_240 },\n  { month: \"Feb\", users: 13_870 },\n  { month: \"Mar\", users: 12_580 },\n  { month: \"Apr\", users: 16_340 },\n  { month: \"May\", users: 19_120 },\n  { month: \"Jun\", users: 22_490 },\n  { month: \"Jul\", users: 20_870 },\n  { month: \"Aug\", users: 25_630 },\n  { month: \"Sep\", users: 28_140 },\n  { month: \"Oct\", users: 31_760 },\n  { month: \"Nov\", users: 29_980 },\n  { month: \"Dec\", users: 35_210 },\n]\n\nconst chartConfig = {\n  users: {\n    label: \"Active Users\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nconst totalUsers = chartData.reduce((sum, d) => sum + d.users, 0)\nconst peak = Math.max(...chartData.map((d) => d.users))\nconst peakMonth = chartData.find((d) => d.users === peak)?.month ?? \"\"\nconst growth = Math.round(\n  ((chartData[11].users - chartData[0].users) / chartData[0].users) * 100\n)\n\nexport default function ChartsBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Card className=\"w-full max-w-3xl\">\n        <CardHeader className=\"flex flex-row items-start justify-between gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <CardTitle className=\"text-lg\">Monthly Active Users</CardTitle>\n            <CardDescription>\n              Acme Platform, rolling 12-month engagement trend\n            </CardDescription>\n          </div>\n          <Badge variant=\"secondary\" className=\"shrink-0 tabular-nums\">\n            +{growth}% YoY\n          </Badge>\n        </CardHeader>\n\n        <CardContent className=\"flex flex-col gap-6\">\n          <div className=\"grid grid-cols-3 rounded-lg border border-border\">\n            <div className=\"flex flex-col gap-1 px-5 py-4\">\n              <span className=\"text-xs text-muted-foreground\">Total Users</span>\n              <span className=\"font-mono text-2xl font-semibold tabular-nums\">\n                {(totalUsers / 1_000).toFixed(1)}k\n              </span>\n            </div>\n            <div className=\"flex flex-col gap-1 border-l border-border px-5 py-4\">\n              <span className=\"text-xs text-muted-foreground\">Peak Month</span>\n              <span className=\"font-mono text-2xl font-semibold tabular-nums\">\n                {peakMonth}\n              </span>\n            </div>\n            <div className=\"flex flex-col gap-1 border-l border-border px-5 py-4\">\n              <span className=\"text-xs text-muted-foreground\">Peak Users</span>\n              <span className=\"font-mono text-2xl font-semibold tabular-nums\">\n                {(peak / 1_000).toFixed(1)}k\n              </span>\n            </div>\n          </div>\n\n          <ChartContainer\n            config={chartConfig}\n            className=\"h-56 w-full [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-ring [&_.recharts-surface:focus-visible]:outline-solid\"\n          >\n            <AreaChart\n              aria-label=\"Active users by month\"\n              data={chartData}\n              margin={{ left: 0, right: 0 }}\n            >\n              <defs>\n                <linearGradient id=\"fillUsers\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop\n                    offset=\"5%\"\n                    stopColor=\"var(--color-users)\"\n                    stopOpacity={0.3}\n                  />\n                  <stop\n                    offset=\"95%\"\n                    stopColor=\"var(--color-users)\"\n                    stopOpacity={0}\n                  />\n                </linearGradient>\n              </defs>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={\n                  <ChartTooltipContent\n                    formatter={(value) =>\n                      Number(value).toLocaleString(\"en-US\") + \" users\"\n                    }\n                  />\n                }\n              />\n              <Area\n                type=\"monotone\"\n                dataKey=\"users\"\n                stroke=\"var(--color-users)\"\n                strokeWidth={2}\n                fill=\"url(#fillUsers)\"\n                dot={false}\n                activeDot={{ r: 4, strokeWidth: 0 }}\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/charts-2.tsx"
    }
  ],
  "meta": {
    "height": "538px",
    "tier": "free"
  },
  "categories": [
    "charts"
  ],
  "type": "registry:block"
}