{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pie-chart",
  "type": "registry:ui",
  "title": "Pie Chart",
  "description": "A pie chart for proportions with donut, label, and legend display modes.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "chart",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/pie-chart.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n\tCell,\n\tLabel,\n\tPie,\n\tPieChart as RechartsPieChart,\n} from \"recharts\";\nimport { Card, CardContent, CardFooter, CardHeader } from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartLegend,\n\tChartLegendContent,\n\tChartTooltip,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\n\nconst PIE_COLORS = [\"#00bbff\", \"#34d399\", \"#60a5fa\", \"#a78bfa\", \"#f472b6\"];\n\nfunction ChartCard({\n\ttitle,\n\tdescription,\n\tfooter,\n\tchildren,\n\tdataPoints = 0,\n}: {\n\ttitle?: string;\n\tdescription?: string;\n\tfooter?: string;\n\tchildren: React.ReactNode;\n\tdataPoints?: number;\n}) {\n\tconst maxWidth =\n\t\tdataPoints > 0 ? Math.min(768, Math.max(300, dataPoints * 80)) : undefined;\n\treturn (\n\t\t<Card\n\t\t\tclassName=\"w-full max-w-3xl\"\n\t\t\tstyle={maxWidth ? { maxWidth } : undefined}\n\t\t>\n\t\t\t{(title || description) && (\n\t\t\t\t<CardHeader className=\"pb-0\">\n\t\t\t\t\t{title && (\n\t\t\t\t\t\t<p className=\"text-sm font-semibold text-card-foreground\">\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t\t{description && (\n\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">{description}</p>\n\t\t\t\t\t)}\n\t\t\t\t</CardHeader>\n\t\t\t)}\n\t\t\t<CardContent>{children}</CardContent>\n\t\t\t{footer && (\n\t\t\t\t<CardFooter>\n\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">{footer}</p>\n\t\t\t\t</CardFooter>\n\t\t\t)}\n\t\t</Card>\n\t);\n}\n\nexport type PieChartProps = {\n\tdata: Array<Record<string, string | number>>;\n\tnameKey: string;\n\tvalueKey: string;\n\ttitle?: string;\n\tdescription?: string;\n\tfooter?: string;\n\tmode?: \"donut\" | \"legend\" | \"label\";\n};\n\nexport function PieChart(props: PieChartProps) {\n\tconst mode = props.mode ?? \"donut\";\n\tconst chartConfig: ChartConfig = Object.fromEntries(\n\t\tprops.data.map((entry, i) => {\n\t\t\tconst name = String(entry[props.nameKey] ?? i);\n\t\t\treturn [name, { label: name, color: PIE_COLORS[i % PIE_COLORS.length] }];\n\t\t}),\n\t);\n\tconst total = React.useMemo(\n\t\t() =>\n\t\t\tprops.data.reduce((sum, entry) => {\n\t\t\t\tconst val = entry[props.valueKey];\n\t\t\t\treturn sum + (typeof val === \"number\" ? val : 0);\n\t\t\t}, 0),\n\t\t[props.data, props.valueKey],\n\t);\n\treturn (\n\t\t<ChartCard\n\t\t\ttitle={props.title}\n\t\t\tdescription={props.description}\n\t\t\tfooter={props.footer}\n\t\t\tdataPoints={props.data.length}\n\t\t>\n\t\t\t<ChartContainer\n\t\t\t\tconfig={chartConfig}\n\t\t\t\tclassName={`h-50 w-full ${mode === \"label\" ? \"[&_.recharts-pie-label-text]:fill-foreground\" : \"\"}`}\n\t\t\t>\n\t\t\t\t<RechartsPieChart>\n\t\t\t\t\t{mode === \"donut\" ? (\n\t\t\t\t\t\t<Pie\n\t\t\t\t\t\t\tdata={props.data}\n\t\t\t\t\t\t\tdataKey={props.valueKey}\n\t\t\t\t\t\t\tnameKey={props.nameKey}\n\t\t\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\t\t\touterRadius={80}\n\t\t\t\t\t\t\tinnerRadius={60}\n\t\t\t\t\t\t\tstrokeWidth={0}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.data.map((entry, i) => (\n\t\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\t\tkey={String(entry[props.nameKey])}\n\t\t\t\t\t\t\t\t\tfill={PIE_COLORS[i % PIE_COLORS.length]}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\tcontent={({ viewBox }) => {\n\t\t\t\t\t\t\t\t\tif (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\ty={viewBox.cy}\n\t\t\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\t\t\tdominantBaseline=\"middle\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<tspan\n\t\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\t\ty={viewBox.cy}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"fill-foreground text-2xl font-bold\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{total}\n\t\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t\t\t<tspan\n\t\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\t\ty={(viewBox.cy || 0) + 20}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={12}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"#71717a\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{props.valueKey}\n\t\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Pie>\n\t\t\t\t\t) : mode === \"label\" ? (\n\t\t\t\t\t\t<Pie\n\t\t\t\t\t\t\tdata={props.data}\n\t\t\t\t\t\t\tdataKey={props.valueKey}\n\t\t\t\t\t\t\tnameKey={props.nameKey}\n\t\t\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\t\t\touterRadius={70}\n\t\t\t\t\t\t\tstrokeWidth={0}\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.data.map((entry, i) => (\n\t\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\t\tkey={String(entry[props.nameKey])}\n\t\t\t\t\t\t\t\t\tfill={PIE_COLORS[i % PIE_COLORS.length]}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</Pie>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Pie\n\t\t\t\t\t\t\tdata={props.data}\n\t\t\t\t\t\t\tdataKey={props.valueKey}\n\t\t\t\t\t\t\tnameKey={props.nameKey}\n\t\t\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\t\t\touterRadius={70}\n\t\t\t\t\t\t\tstrokeWidth={0}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.data.map((entry, i) => (\n\t\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\t\tkey={String(entry[props.nameKey])}\n\t\t\t\t\t\t\t\t\tfill={PIE_COLORS[i % PIE_COLORS.length]}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</Pie>\n\t\t\t\t\t)}\n\t\t\t\t\t<ChartTooltip\n\t\t\t\t\t\tcontent={<ChartTooltipContent nameKey={props.nameKey} />}\n\t\t\t\t\t/>\n\t\t\t\t\t{mode === \"legend\" && (\n\t\t\t\t\t\t<ChartLegend\n\t\t\t\t\t\t\tcontent={<ChartLegendContent nameKey={props.nameKey} />}\n\t\t\t\t\t\t\tclassName=\"-translate-y-2 flex-wrap gap-2\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</RechartsPieChart>\n\t\t\t</ChartContainer>\n\t\t</ChartCard>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}