{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "radar-chart",
  "title": "radar-chart",
  "description": "radar-chart",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://intentui.com/r/use-mobile",
    "https://intentui.com/r/chart"
  ],
  "files": [
    {
      "path": "src/components/ui/radar-chart.tsx",
      "content": "\"use client\"\n\nimport { type ComponentProps, type ReactNode, useMemo } from \"react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart as RadarChartPrimitive,\n} from \"recharts\"\nimport { useIsMobile } from \"@/hooks/use-mobile\"\nimport {\n  Chart,\n  type ChartConfig,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  constructCategoryColors,\n  DEFAULT_COLORS,\n  getColorValue,\n} from \"./chart\"\n\nexport interface RadarChartSeries {\n  dataKey: string\n  name?: string\n  radarProps?: Omit<ComponentProps<typeof Radar>, \"dataKey\" | \"name\">\n}\n\nexport interface RadarChartProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n  config: ChartConfig\n  data: Record<string, any>[]\n  dataKey: string\n  series: RadarChartSeries[]\n  colors?: readonly string[]\n  containerHeight?: number\n  legend?: boolean\n  tooltip?: boolean | ComponentProps<typeof ChartTooltip>[\"content\"]\n  tooltipProps?: Omit<ComponentProps<typeof ChartTooltip>, \"content\">\n  polarGridProps?: ComponentProps<typeof PolarGrid>\n  angleAxisProps?: Omit<ComponentProps<typeof PolarAngleAxis>, \"dataKey\">\n  radiusAxisProps?: ComponentProps<typeof PolarRadiusAxis>\n  chartProps?: Omit<ComponentProps<typeof RadarChartPrimitive>, \"data\">\n  children?: ReactNode\n}\n\nexport function RadarChart({\n  config,\n  data,\n  dataKey,\n  series,\n  colors = DEFAULT_COLORS,\n  containerHeight = 360,\n  legend = series.length > 1,\n  tooltip = true,\n  tooltipProps,\n  polarGridProps,\n  angleAxisProps,\n  radiusAxisProps,\n  chartProps,\n  children,\n  ...props\n}: RadarChartProps) {\n  const isMobile = useIsMobile()\n  const seriesKeys = useMemo(() => series.map((item) => item.dataKey), [series])\n  const categoryColors = useMemo(\n    () => constructCategoryColors(seriesKeys, colors),\n    [seriesKeys, colors]\n  )\n\n  return (\n    <Chart\n      config={config}\n      data={data}\n      dataKey={dataKey}\n      containerHeight={containerHeight}\n      layout=\"radial\"\n      {...props}\n    >\n      {({ selectedLegend }) => (\n        <RadarChartPrimitive data={data} outerRadius={isMobile ? \"52%\" : \"72%\"} {...chartProps}>\n          <PolarGrid {...polarGridProps} />\n          <PolarAngleAxis\n            dataKey={dataKey}\n            tick={{ fill: \"var(--color-muted-foreground)\", fontSize: isMobile ? 10 : 12 }}\n            {...angleAxisProps}\n          />\n          <PolarRadiusAxis tick={false} axisLine={false} {...radiusAxisProps} />\n          {children}\n          {tooltip ? (\n            <ChartTooltip\n              content={\n                typeof tooltip === \"boolean\" ? <ChartTooltipContent accessibilityLayer /> : tooltip\n              }\n              {...tooltipProps}\n            />\n          ) : null}\n          {legend ? <ChartLegend content={<ChartLegendContent />} /> : null}\n          {series.map((item, index) => {\n            const color = getColorValue(\n              config[item.dataKey]?.color ??\n                categoryColors.get(item.dataKey) ??\n                colors[index % colors.length]\n            )\n            const isDimmed = selectedLegend && selectedLegend !== item.dataKey\n            const {\n              fillOpacity = series.length > 1 ? 0.16 : 0.28,\n              strokeOpacity = 1,\n              ...radarProps\n            } = item.radarProps ?? {}\n\n            return (\n              <Radar\n                key={item.dataKey}\n                dataKey={item.dataKey}\n                name={item.name ?? item.dataKey}\n                fill={color}\n                fillOpacity={isDimmed ? 0.03 : fillOpacity}\n                stroke={color}\n                strokeOpacity={isDimmed ? 0.12 : strokeOpacity}\n                strokeWidth={2}\n                {...radarProps}\n              />\n            )\n          })}\n        </RadarChartPrimitive>\n      )}\n    </Chart>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}