{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "charts-5",
  "title": "Traffic Source Donut",
  "description": "Donut chart splitting traffic by source, with a centered visitor total and a ranked, color coded legend list underneath.",
  "dependencies": [
    "recharts",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "card",
    "chart"
  ],
  "files": [
    {
      "path": "registry/blocks/charts/5/charts-block.tsx",
      "content": "\"use client\"\n\nimport { Label, Pie, PieChart } from \"recharts\"\n\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  { source: \"Organic\", visitors: 4820, fill: \"var(--color-organic)\" },\n  { source: \"Referral\", visitors: 3110, fill: \"var(--color-referral)\" },\n  { source: \"Social\", visitors: 2240, fill: \"var(--color-social)\" },\n  { source: \"Direct\", visitors: 1680, fill: \"var(--color-direct)\" },\n  { source: \"Email\", visitors: 940, fill: \"var(--color-email)\" },\n]\n\nconst chartConfig = {\n  visitors: { label: \"Visitors\" },\n  organic: { label: \"Organic\", color: \"var(--chart-1)\" },\n  referral: { label: \"Referral\", color: \"var(--chart-2)\" },\n  social: { label: \"Social\", color: \"var(--chart-3)\" },\n  direct: { label: \"Direct\", color: \"var(--chart-4)\" },\n  email: { label: \"Email\", color: \"var(--chart-5)\" },\n} satisfies ChartConfig\n\nconst total = chartData.reduce((sum, item) => sum + item.visitors, 0)\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-md\">\n        <CardHeader>\n          <CardTitle>Traffic By Source</CardTitle>\n          <CardDescription>\n            Where this month&rsquo;s visitors came from\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer\n            config={chartConfig}\n            className=\"mx-auto aspect-square max-h-64 [&_.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            <PieChart aria-label=\"Visitors by traffic source\">\n              <ChartTooltip\n                cursor={false}\n                content={\n                  <ChartTooltipContent\n                    hideLabel\n                    formatter={(value, name) =>\n                      `${name}: ${Number(value).toLocaleString(\"en-US\")}`\n                    }\n                  />\n                }\n              />\n              <Pie\n                data={chartData}\n                dataKey=\"visitors\"\n                nameKey=\"source\"\n                innerRadius={70}\n                strokeWidth={2}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-2xl font-bold tabular-nums\"\n                          >\n                            {total.toLocaleString(\"en-US\")}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy ?? 0) + 22}\n                            className=\"fill-muted-foreground text-xs\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                    return null\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n          <div className=\"mt-4 grid grid-cols-1 gap-2\">\n            {chartData.map((item) => (\n              <div\n                key={item.source}\n                className=\"flex items-center justify-between text-sm\"\n              >\n                <span className=\"flex items-center gap-2 text-muted-foreground\">\n                  <span\n                    className=\"size-2.5 rounded-sm\"\n                    style={{ backgroundColor: item.fill }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.source}\n                </span>\n                <span className=\"font-medium text-foreground tabular-nums\">\n                  {item.visitors.toLocaleString(\"en-US\")}\n                </span>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/charts-5.tsx"
    }
  ],
  "meta": {
    "height": "600px",
    "tier": "free"
  },
  "categories": [
    "charts"
  ],
  "type": "registry:block"
}