{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radar-chart",
  "description": "A radar chart for single and comparative profiles",
  "registryDependencies": [
    "https://ui-three-mu.vercel.app/r/chart.json"
  ],
  "files": [
    {
      "path": "registry/preskok/ui/preskok-ui/radar-chart.tsx",
      "content": "\"use client\"\n\nimport { defineChart } from \"@tanstack/charts\"\nimport {\n  angleGrid,\n  focusGroupAngle,\n  polar,\n  radialArea,\n  radialDot,\n  radialGrid,\n  type RadialAreaOptions,\n  type RadialDotOptions,\n} from \"@tanstack/charts/polar\"\nimport { scaleBand } from \"@tanstack/charts/scales/band\"\nimport { scaleLinear } from \"@tanstack/charts/scales/linear\"\nimport { curveLinearClosed } from \"d3-shape\"\n\nimport {\n  Chart,\n  ChartFrame,\n  defaultValueFormatter,\n  getChartColors,\n  getChartOptions,\n  getPositiveMaximum,\n  getSelectedSeriesColor,\n  toSeriesData,\n  useSeriesSelection,\n  type BaseChartProps,\n  type ChartAxisProps,\n  type ChartNumericAxisProps,\n  type SeriesDatum,\n} from \"./chart\"\n\ntype RadarAreaProps = Pick<\n  RadialAreaOptions<SeriesDatum>,\n  \"fillOpacity\" | \"strokeOpacity\" | \"strokeWidth\"\n>\n\ntype RadarDotProps = Pick<\n  RadialDotOptions<SeriesDatum>,\n  \"fillOpacity\" | \"r\" | \"strokeOpacity\" | \"strokeWidth\"\n>\n\ntype RadarGridProps = {\n  shape?: \"circle\" | \"polygon\"\n  ticks?: number\n  valueLabels?: \"hidden\" | \"visible\"\n}\n\ntype RadarCategoryAxisProps = Pick<ChartAxisProps, \"tickFormatter\" | \"ticks\">\n\ntype RadarValueAxisProps = Pick<\n  ChartNumericAxisProps,\n  \"domain\" | \"tickFormatter\" | \"ticks\"\n>\n\ntype RadarChartProps = BaseChartProps & {\n  categoryAxis?: RadarCategoryAxisProps | false\n  dots?: RadarDotProps | false\n  grid?: RadarGridProps | false\n  radarAreaProps?: RadarAreaProps\n  radiusRatio?: number\n  valueAxis?: RadarValueAxisProps | false\n}\n\nfunction RadarChart({\n  ariaLabel = \"Radar chart\",\n  categoryAxis,\n  colors,\n  config,\n  data,\n  dataKey,\n  dots,\n  grid,\n  legend,\n  radarAreaProps,\n  radiusRatio = 0.72,\n  size,\n  tooltip,\n  tooltipProps,\n  valueAxis,\n  valueFormatter = defaultValueFormatter,\n  ...frameProps\n}: RadarChartProps) {\n  const [selectedSeries, selectSeries] = useSeriesSelection()\n  const rows = toSeriesData({ config, data, dataKey })\n  const chartColors = getChartColors(config, colors)\n  const seriesColor = (row: SeriesDatum) =>\n    getSelectedSeriesColor({\n      color: chartColors[row.series] ?? \"var(--chart-1)\",\n      opacity: 16,\n      selectedSeries,\n      series: row.series,\n    })\n\n  const valueAxisProps = valueAxis === false ? undefined : valueAxis\n  const categoryAxisProps = categoryAxis === false ? undefined : categoryAxis\n  const radiusScale = valueAxisProps?.domain\n    ? scaleLinear().domain(valueAxisProps.domain)\n    : scaleLinear()\n        .domain([0, getPositiveMaximum(rows.map((row) => row.value ?? 0))])\n        .nice(4)\n\n  const showGrid = grid !== false\n  const gridProps = grid === false ? undefined : grid\n  const showValueLabels =\n    valueAxis !== false && gridProps?.valueLabels === \"visible\"\n  const guideStroke = {\n    stroke: \"var(--muted-foreground)\",\n    strokeOpacity: showGrid ? 0.16 : 0,\n  }\n  const guides = []\n  if (showGrid || showValueLabels) {\n    guides.push(\n      radialGrid({\n        ...guideStroke,\n        format: (value) =>\n          (valueAxisProps?.tickFormatter ?? valueFormatter)(Number(value)),\n        labelFill: \"var(--muted-foreground)\",\n        labelFontSize: 10,\n        labels: showValueLabels,\n        shape: gridProps?.shape ?? \"polygon\",\n        ticks: gridProps?.ticks ?? 4,\n        values: valueAxisProps?.ticks,\n      })\n    )\n  }\n  if (showGrid || categoryAxis !== false) {\n    guides.push(\n      angleGrid({\n        ...guideStroke,\n        format: categoryAxisProps?.tickFormatter ?? String,\n        labelFill: \"var(--muted-foreground)\",\n        labelFontSize: 11,\n        labelOffset: 10,\n        labels: categoryAxis !== false,\n        values: categoryAxisProps?.ticks,\n      })\n    )\n  }\n\n  const area = radialArea(rows, {\n    angle: \"category\",\n    color: \"series\",\n    curve: curveLinearClosed,\n    fill: seriesColor,\n    fillOpacity: 0.16,\n    key: (row) => `${row.series}-${row.index}`,\n    radius: \"value\",\n    stroke: seriesColor,\n    strokeWidth: 2,\n    z: \"series\",\n    ...radarAreaProps,\n  })\n\n  const definition = defineChart({\n    ...getChartOptions(chartColors),\n    focus: focusGroupAngle,\n    marks: [\n      polar({\n        guides,\n        marks:\n          dots === false\n            ? [area]\n            : [\n                area,\n                radialDot(rows, {\n                  angle: \"category\",\n                  color: \"series\",\n                  fill: seriesColor,\n                  key: (row) => `${row.series}-${row.index}`,\n                  r: 3.5,\n                  radius: \"value\",\n                  stroke: \"var(--background)\",\n                  strokeWidth: 2,\n                  z: \"series\",\n                  ...dots,\n                }),\n              ],\n        radiusRatio,\n        scales: {\n          angle: { scale: scaleBand },\n          radius: { scale: radiusScale },\n        },\n      }),\n    ],\n    scales: { x: null, y: null },\n  })\n\n  return (\n    <ChartFrame\n      {...frameProps}\n      colors={colors}\n      config={config}\n      legend={Object.keys(config).length < 2 ? (legend ?? false) : legend}\n      onSelectedSeriesChange={selectSeries}\n      selectedSeries={selectedSeries}\n    >\n      <Chart\n        ariaLabel={ariaLabel}\n        className=\"w-full\"\n        config={config}\n        defaultHeight={320}\n        definition={definition}\n        onSelect={(point) => {\n          selectSeries(point?.datum.series ?? null)\n        }}\n        size={size}\n        tooltip={tooltip}\n        tooltipProps={{\n          anchor: \"pointer\",\n          offset: 20,\n          placement: \"auto\",\n          ...tooltipProps,\n        }}\n        valueFormatter={valueFormatter}\n      />\n    </ChartFrame>\n  )\n}\n\nexport { RadarChart }\nexport type { RadarChartProps }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}