52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.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 } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@preskok","registryDependencies":["https://ui-three-mu.vercel.app/r/experimental-chart.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/preskok/ui/preskok-ui/experimental-radial-chart.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]