{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "donut-chart-card",
  "title": "Donut Chart Card",
  "author": "Zubeyr <https://zubeyr.dev>",
  "description": "A donut breakdown with the total and trend in the centre and a legend listing each slice with its change.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://tomei.zubeyr.dev/ui/r/card.json"
  ],
  "files": [
    {
      "path": "registry/dashboard/blocks/donut-chart-card/donut-chart-card.tsx",
      "content": "'use client'\n\nimport { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts'\n\nimport { Card, Trend } from '@/registry/dashboard/components/card/card'\n\nexport type DonutSlice = { name: string; value: number; change?: number; color?: string }\n\ntype DonutChartCardProps = {\n  title: React.ReactNode\n  data: DonutSlice[]\n  change?: number\n  formatOptions?: Intl.NumberFormatOptions\n  maxLegendItems?: number\n  action?: React.ReactNode\n  className?: string\n}\n\nconst palette = [\n  'var(--chart-1)',\n  'var(--chart-3)',\n  'var(--chart-4)',\n  'var(--chart-5)',\n  'var(--chart-2)',\n]\n\nexport function DonutChartCard({\n  title,\n  data,\n  change,\n  formatOptions,\n  maxLegendItems = 4,\n  action,\n  className,\n}: DonutChartCardProps) {\n  const compact = new Intl.NumberFormat('en', { ...formatOptions, notation: 'compact' })\n  const total = data.reduce((sum, d) => sum + d.value, 0)\n  const slices = data.map((d, i) => ({ ...d, color: d.color ?? palette[i % palette.length] }))\n  const hidden = slices.length - maxLegendItems\n\n  return (\n    <Card title={title} action={action} className={className}>\n      <div className=\"flex items-center gap-6\">\n        <div className=\"relative size-40 shrink-0\">\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <PieChart>\n              <Pie\n                data={slices}\n                dataKey=\"value\"\n                nameKey=\"name\"\n                innerRadius=\"68%\"\n                outerRadius=\"100%\"\n                paddingAngle={2}\n                cornerRadius={3}\n                stroke=\"none\"\n                isAnimationActive={false}\n              >\n                {slices.map((s) => (\n                  <Cell key={s.name} fill={s.color} />\n                ))}\n              </Pie>\n            </PieChart>\n          </ResponsiveContainer>\n          <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center\">\n            <span className=\"text-2xl font-bold tabular-nums\">{compact.format(total)}</span>\n            {change !== undefined && <Trend value={change} />}\n          </div>\n        </div>\n        <ul className=\"flex min-w-0 flex-1 flex-col gap-2 text-xs\">\n          {slices.slice(0, maxLegendItems).map((s) => (\n            <li key={s.name} className=\"flex items-center gap-2\">\n              <span className=\"size-2.5 shrink-0 rounded-[3px]\" style={{ background: s.color }} />\n              <span className=\"truncate\">{s.name}</span>\n              <span className=\"ml-auto font-semibold tabular-nums\">{compact.format(s.value)}</span>\n              {s.change !== undefined && <Trend value={s.change} className=\"w-10 justify-end\" />}\n            </li>\n          ))}\n          {hidden > 0 && <li className=\"pl-4.5 text-muted-foreground\">+{hidden} more</li>}\n        </ul>\n      </div>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/dashboard/donut-chart-card.tsx"
    }
  ],
  "meta": {
    "scenario": "dashboard",
    "kind": "blocks"
  },
  "categories": [
    "dashboard",
    "charts"
  ],
  "type": "registry:block"
}