51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T19a2,"use client" import { defineChart } from "@tanstack/charts" import { polar, radialBarAngle } from "@tanstack/charts/polar" import { scaleBand } from "@tanstack/charts/scales/band" import { scaleLinear } from "@tanstack/charts/scales/linear" import { ExperimentalChart, ExperimentalChartFrame, experimentalDefaultValueFormatter, getExperimentalChartSize, getExperimentalChartTooltip, getExperimentalChartTheme, getExperimentalPositiveMaximum, getExperimentalTextLabel, toExperimentalNamedSeriesData, useExperimentalChartFrame, type ExperimentalBaseChartProps, type ExperimentalChartPlotProps, type ExperimentalNamedSeriesDatum, } from "./experimental-chart" type ExperimentalRadialChartProps = ExperimentalBaseChartProps & { centerLabel?: string centerValue?: string endAngle?: number maxValue?: number nameKey?: string radiusRatio?: number startAngle?: number track?: "hidden" | "visible" } type ExperimentalRadialChartPlotProps = ExperimentalChartPlotProps type RadialDatum = ExperimentalNamedSeriesDatum function clampValue(value: number, maximum: number) { return Math.min(Math.max(value, 0), maximum) } function getAverageValue(rows: RadialDatum[]) { if (rows.length === 0) { return 0 } const total = rows.reduce((sum, row) => sum + row.value, 0) return total / rows.length } function ExperimentalRadialChartPlot({ ariaLabel = "Radial chart", centerLabel, centerValue, colors, config, data, dataKey, endAngle = Math.PI * 2, maxValue, nameKey = "name", radiusRatio = 0.84, size, startAngle = 0, tooltip, tooltipProps, track = "visible", valueFormatter = experimentalDefaultValueFormatter, }: ExperimentalRadialChartPlotProps) { const { actions: { selectSeries }, state: { selectedSeries }, } = useExperimentalChartFrame() const rows = toExperimentalNamedSeriesData({ colors, config, data, nameKey, selectedOpacity: 20, selectedSeries, valueKey: dataKey, }) const resolvedMaximum = getExperimentalPositiveMaximum( rows.map((row) => row.value), maxValue ) const marks = [] if (track === "visible") { marks.push( radialBarAngle(rows, { angle: () => resolvedMaximum, cornerRadius: "full", fill: "color-mix(in srgb, var(--muted-foreground) 13%, transparent)", id: "preskok-radial-track", key: "series", radius: "category", }) ) } marks.push( radialBarAngle(rows, { angle: (row) => clampValue(row.value, resolvedMaximum), color: "series", cornerRadius: "full", fill: (row) => row.color, id: "preskok-radial-value", key: "series", radius: "category", z: "series", }) ) const baseDefinition = defineChart({ color: { domain: rows.map((row) => row.series), range: rows.map((row) => row.color), }, focusRing: false, guides: false, marks: [ polar({ angle: { scale: scaleLinear().domain([0, resolvedMaximum]), }, endAngle, marks, radius: { range: [({ radius }) => radius * 0.34, ({ radius }) => radius], scale: () => scaleBand().padding(0.18), }, radiusRatio, startAngle, }), ], svgAnimation: true, theme: getExperimentalChartTheme(rows.map((row) => row.color)), x: null, y: null, }) const { definition, renderTooltipBody } = getExperimentalChartTooltip({ config, definition: baseDefinition, tooltip, tooltipProps, valueFormatter, }) const selectedRow = rows.find((row) => row.series === selectedSeries) const displayedValue = selectedRow ? valueFormatter(selectedRow.value) : (centerValue ?? valueFormatter(getAverageValue(rows))) const displayedLabel = selectedRow ? getExperimentalTextLabel(config, selectedRow.series) : centerLabel const chartSize = getExperimentalChartSize(size, 260) return (

{ selectSeries(point?.datum.series ?? null) }} renderTooltipBody={renderTooltipBody} size={chartSize} /> {centerLabel !== undefined ? (

{displayedValue} {displayedLabel}

) : null}

) } function ExperimentalRadialChart({ ariaLabel, centerLabel, centerValue, className, colors, config, data, dataKey, endAngle, legend, maxValue, nameKey, radiusRatio, size, startAngle, tooltip, tooltipProps, track, valueFormatter, ...frameProps }: ExperimentalRadialChartProps) { let resolvedLegend = legend if (legend === undefined && Object.keys(config).length < 2) { resolvedLegend = false } return ( ) } export { ExperimentalRadialChart } export type { ExperimentalRadialChartProps } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":["https://ui-three-mu.vercel.app/r/experimental-chart.json"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui-three-mu.vercel.app/r/experimental-radial-chart.json","proxyUrl":"https://shadcnregistry.com/r/preskok/experimental-radial-chart","itemId":"@preskok/experimental-radial-chart"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/preskok/ui/preskok-ui/experimental-radial-chart.tsx","content":"$54","type":"registry:ui"}]}]]}],"$L55"]}]

Experimental Radial Chart

Installation

Files

components

Styles