{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radar-chart",
  "type": "registry:ui",
  "title": "Radar Chart",
  "description": "A radar chart for multi-axis comparisons across several dimensions.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "chart",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/radar-chart.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport {\n\tPolarAngleAxis,\n\tPolarGrid,\n\tRadar,\n\tRadarChart as RechartsRadarChart,\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 CHART_COLORS = [\"#00bbff\", \"#34d399\", \"#60a5fa\", \"#f472b6\", \"#fb923c\"];\n\nfunction toKeys(v: string | string[]): string[] {\n\treturn Array.isArray(v) ? v : [v];\n}\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 RadarChartProps = {\n\tdata: Array<Record<string, string | number>>;\n\tangleKey: string;\n\tvalueKeys: string | string[];\n\ttitle?: string;\n\tdescription?: string;\n\tfooter?: string;\n\tcolors?: string[];\n};\n\nexport function RadarChart(props: RadarChartProps) {\n\tconst keys = toKeys(props.valueKeys);\n\tconst colors = props.colors ?? CHART_COLORS;\n\tconst chartConfig: ChartConfig = Object.fromEntries(\n\t\tkeys.map((key, i) => [\n\t\t\tkey,\n\t\t\t{ label: key, color: colors[i % colors.length] },\n\t\t]),\n\t);\n\tconst showLegend = keys.length > 1;\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 config={chartConfig} className=\"h-55 w-full\">\n\t\t\t\t<RechartsRadarChart data={props.data}>\n\t\t\t\t\t<PolarGrid stroke=\"#3f3f46\" />\n\t\t\t\t\t<PolarAngleAxis\n\t\t\t\t\t\tdataKey={props.angleKey}\n\t\t\t\t\t\ttick={({ x, y, textAnchor, index, ...tickProps }) => {\n\t\t\t\t\t\t\tconst d = props.data[index] as Record<string, string | number>;\n\t\t\t\t\t\t\tconst yNum = typeof y === \"number\" ? y : 0;\n\t\t\t\t\t\t\tconst vals = keys.map((k) => d[k]).join(\" / \");\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\tx={x}\n\t\t\t\t\t\t\t\t\ty={yNum + (index === 0 ? -10 : 0)}\n\t\t\t\t\t\t\t\t\ttextAnchor={textAnchor}\n\t\t\t\t\t\t\t\t\tfontSize={12}\n\t\t\t\t\t\t\t\t\t{...tickProps}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<tspan fill=\"#e4e4e7\" fontWeight={500}>\n\t\t\t\t\t\t\t\t\t\t{vals}\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t<tspan x={x} dy=\"1.1em\" fontSize={11} fill=\"#71717a\">\n\t\t\t\t\t\t\t\t\t\t{String(d[props.angleKey])}\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<ChartTooltip content={<ChartTooltipContent />} />\n\t\t\t\t\t{keys.map((key) => (\n\t\t\t\t\t\t<Radar\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tdataKey={key}\n\t\t\t\t\t\t\tstroke={`var(--color-${key})`}\n\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\tfill={`var(--color-${key})`}\n\t\t\t\t\t\t\tfillOpacity={0.2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t\t{showLegend && <ChartLegend content={<ChartLegendContent />} />}\n\t\t\t\t</RechartsRadarChart>\n\t\t\t</ChartContainer>\n\t\t</ChartCard>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}