{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radar-chart",
  "title": "Radar Chart",
  "description": "Radar chart component with customizable data and optional title and description. | カスタマイズ可能なデータとオプションのタイトルと説明を備えたラダーチャートコンポーネント。",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "recharts",
    "card"
  ],
  "files": [
    {
      "path": "components/chart/radar-chart.tsx",
      "content": "\"use client\";\n\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  Radar,\n  RadarChart as RechartsRadarChart,\n} from \"recharts\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/chart\";\n\nexport type RadarChartDataPoint = { name: string; value: number };\n\nconst DEMO_RADAR_DATA: RadarChartDataPoint[] = [\n  { name: \"Java\", value: 10 },\n  { name: \"Python\", value: 49 },\n  { name: \"JavaScript\", value: 80 },\n  { name: \"TypeScript\", value: 85 },\n  { name: \"React\", value: 90 },\n  { name: \"Next.js\", value: 85 },\n];\n\nexport interface RadarChartProps {\n  data?: RadarChartDataPoint[];\n  title?: string;\n  description?: string;\n  valueLabel?: string;\n  className?: string; // Card className\n  chartClassName?: string; // ChartContainer className\n}\n\nexport default function RadarChart({\n  data,\n  title,\n  description,\n  valueLabel = \"Points\",\n  className,\n  chartClassName,\n}: RadarChartProps) {\n  const chartData = data ?? DEMO_RADAR_DATA;\n  const chartConfig = {\n    value: {\n      label: valueLabel,\n    },\n  } satisfies ChartConfig;\n  // ヘッダーを表示するかどうか if title or description is not null, show header\n  const showHeader = title != null || description != null;\n\n  return (\n    <Card\n      className={cn(\n        \"w-full h-full flex flex-col justify-center items-center\",\n        className,\n      )}\n    >\n      {showHeader && (\n        <CardHeader className=\"items-center\">\n          {title != null && (\n            <CardTitle className=\"text-center text-3xl\">{title}</CardTitle>\n          )}\n          {description != null && (\n            <CardDescription>{description}</CardDescription>\n          )}\n        </CardHeader>\n      )}\n      <CardContent className=\"p-2 w-full h-full flex justify-center items-center\">\n        <ChartContainer\n          config={chartConfig}\n          className={cn(\"mx-auto w-full h-full\", chartClassName)}\n        >\n          <RechartsRadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"name\" />\n            <PolarGrid />\n            <Radar dataKey=\"value\" fill=\"var(--accent)\" fillOpacity={0.6} />\n          </RechartsRadarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}