{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radar-chart",
  "type": "registry:ui",
  "title": "Radar chart",
  "description": "SVG radar chart that plots normalized 0 to 1 values on labelled axes over four concentric grid rings. Themed with currentColor and labelled for screen readers.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/radar-chart.tsx",
      "type": "registry:ui",
      "target": "components/ui/radar-chart.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** RadarChart — a filled polygon over concentric rings, one axis per label. */\n\n// Lumen vendor scorecard: each axis is a 0 to 1 score.\nconst SAMPLE_LABELS = [\"Uptime\", \"Speed\", \"Cost\", \"Support\", \"Docs\", \"Privacy\"]\nconst SAMPLE_VALUES = [0.92, 0.78, 0.64, 0.86, 0.7, 0.95]\n\ntype RadarChartProps = {\n  /** One axis per label, drawn clockwise from the top. */\n  labels?: string[]\n  /** One value per label, from 0 to 1. */\n  values?: number[]\n  className?: string\n  label?: string\n}\n\nfunction RadarChart({\n  labels = SAMPLE_LABELS,\n  values = SAMPLE_VALUES,\n  className,\n  label = \"Radar chart\",\n}: RadarChartProps) {\n  const n = labels.length\n  const cx = 80\n  const cy = 80\n  const r = 56\n  const pts = values.map((v, i) => {\n    const a = (-Math.PI / 2) + (i / n) * Math.PI * 2\n    const rr = r * Math.max(0, Math.min(1, v))\n    return [cx + Math.cos(a) * rr, cy + Math.sin(a) * rr] as const\n  })\n  const poly = pts.map(([x, y]) => `${x},${y}`).join(\" \")\n  const rings = [0.25, 0.5, 0.75, 1]\n  return (\n    <svg data-slot=\"radar-chart\" role=\"img\" aria-label={label} viewBox=\"0 0 160 160\" className={cn(\"size-48 text-accent\", className)}>\n      {rings.map((ring) => (\n        <polygon\n          key={ring}\n          fill=\"none\"\n          stroke=\"var(--border)\"\n          points={labels.map((_, i) => {\n            const a = (-Math.PI / 2) + (i / n) * Math.PI * 2\n            return `${cx + Math.cos(a) * r * ring},${cy + Math.sin(a) * r * ring}`\n          }).join(\" \")}\n        />\n      ))}\n      {labels.map((lab, i) => {\n        const a = (-Math.PI / 2) + (i / n) * Math.PI * 2\n        const x = cx + Math.cos(a) * (r + 14)\n        const y = cy + Math.sin(a) * (r + 14)\n        return <text key={lab} x={x} y={y} textAnchor=\"middle\" dominantBaseline=\"middle\" className=\"fill-fg-muted\" style={{ fontSize: 8 }}>{lab}</text>\n      })}\n      <polygon points={poly} fill=\"currentColor\" opacity={0.2} stroke=\"currentColor\" strokeWidth={1.5} />\n    </svg>\n  )\n}\nexport { RadarChart }\nexport type { RadarChartProps }\n"
    }
  ]
}