{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radial-chart",
  "description": "A concentric radial bar chart",
  "registryDependencies": [
    "https://ui-three-mu.vercel.app/r/chart.json"
  ],
  "files": [
    {
      "path": "registry/preskok/ui/preskok-ui/radial-chart.tsx",
      "content": "\"use client\"\n\nimport { defineChart } from \"@tanstack/charts\"\nimport { polar, radialBarAngle } from \"@tanstack/charts/polar\"\nimport { scaleBand } from \"@tanstack/charts/scales/band\"\nimport { scaleLinear } from \"@tanstack/charts/scales/linear\"\n\nimport {\n  Chart,\n  ChartCenterLabel,\n  ChartFrame,\n  defaultValueFormatter,\n  getChartOptions,\n  getFocusStates,\n  getNamedSeriesColors,\n  getPositiveMaximum,\n  getTextLabel,\n  toNamedSeriesData,\n  useSeriesSelection,\n  type BaseChartProps,\n  type NamedSeriesDatum,\n} from \"./chart\"\n\ntype RadialChartProps = BaseChartProps & {\n  centerLabel?: string\n  centerValue?: string\n  endAngle?: number\n  maxValue?: number\n  nameKey?: string\n  radiusRatio?: number\n  startAngle?: number\n  track?: \"hidden\" | \"visible\"\n}\n\nfunction RadialChart({\n  ariaLabel = \"Radial chart\",\n  centerLabel,\n  centerValue,\n  colors,\n  config,\n  data,\n  dataKey,\n  endAngle = Math.PI * 2,\n  legend,\n  maxValue,\n  nameKey = \"name\",\n  radiusRatio = 0.84,\n  size,\n  startAngle = 0,\n  tooltip,\n  tooltipProps,\n  track = \"visible\",\n  valueFormatter = defaultValueFormatter,\n  ...frameProps\n}: RadialChartProps) {\n  const [selectedSeries, selectSeries] = useSeriesSelection()\n  const rows = toNamedSeriesData({\n    colors,\n    config,\n    data,\n    nameKey,\n    selectedOpacity: 20,\n    selectedSeries,\n    valueKey: dataKey,\n  })\n  const maximum = getPositiveMaximum(\n    rows.map((row) => row.value),\n    maxValue\n  )\n  const selectedRow = rows.find((row) => row.series === selectedSeries)\n  const average =\n    rows.length === 0\n      ? 0\n      : rows.reduce((sum, row) => sum + row.value, 0) / rows.length\n\n  const valueBars = radialBarAngle(rows, {\n    angle: (row) => Math.min(Math.max(row.value, 0), maximum),\n    color: \"series\",\n    cornerRadius: \"full\",\n    fill: (row) => row.color,\n    id: \"preskok-radial-value\",\n    key: \"series\",\n    radius: \"category\",\n    states: getFocusStates<NamedSeriesDatum>(\"primary\", 0.55),\n    z: \"series\",\n  })\n\n  const definition = defineChart({\n    ...getChartOptions(getNamedSeriesColors(rows)),\n    focusRing: false,\n    marks: [\n      polar({\n        endAngle,\n        marks:\n          track === \"visible\"\n            ? [\n                radialBarAngle(rows, {\n                  angle: () => maximum,\n                  cornerRadius: \"full\",\n                  fill: \"color-mix(in srgb, var(--muted-foreground) 13%, transparent)\",\n                  id: \"preskok-radial-track\",\n                  key: \"series\",\n                  radius: \"category\",\n                }),\n                valueBars,\n              ]\n            : [valueBars],\n        radiusRatio,\n        scales: {\n          angle: { scale: scaleLinear().domain([0, maximum]) },\n          radius: {\n            range: [({ radius }) => radius * 0.34, ({ radius }) => radius],\n            scale: () => scaleBand().padding(0.18),\n          },\n        },\n        startAngle,\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      <div className=\"relative\">\n        <Chart\n          ariaLabel={ariaLabel}\n          className=\"w-full\"\n          config={config}\n          defaultHeight={260}\n          definition={definition}\n          onSelect={(point) => {\n            selectSeries(point?.datum.series ?? null)\n          }}\n          size={size}\n          tooltip={tooltip}\n          tooltipProps={tooltipProps}\n          valueFormatter={valueFormatter}\n        />\n        {centerLabel !== undefined ? (\n          <ChartCenterLabel\n            label={\n              selectedRow\n                ? getTextLabel(config, selectedRow.series)\n                : centerLabel\n            }\n            value={\n              selectedRow\n                ? valueFormatter(selectedRow.value)\n                : (centerValue ?? valueFormatter(average))\n            }\n          />\n        ) : null}\n      </div>\n    </ChartFrame>\n  )\n}\n\nexport { RadialChart }\nexport type { RadialChartProps }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}