\n {\n if (event.pointerType !== 'touch' && !pinned.current) setActive(axisUnder(event.clientX, event.clientY));\n }}\n onPointerLeave={(event) => {\n if (event.pointerType !== 'touch' && !pinned.current) setActive(-1);\n }}\n onBlur={() => {\n if (!pinned.current) setActive(-1);\n }}\n onClick={(event) => {\n const axis = axisUnder(event.clientX, event.clientY);\n pinned.current = axis >= 0 && !(pinned.current && axis === activeIndex);\n setActive(pinned.current ? axis : -1);\n }}\n onKeyDown={(event) => {\n // The browser's own shortcuts, such as going back.\n if (event.altKey || event.ctrlKey || event.metaKey) return;\n const next = radarKeyWalk(activeIndex, count, event.key);\n if (next !== undefined) {\n event.preventDefault();\n pinned.current = false;\n setActive(next);\n } else if (event.key === 'Escape') {\n release();\n } else if ((event.key === 'Enter' || event.key === ' ') && activeIndex >= 0) {\n event.preventDefault();\n pinned.current = !pinned.current;\n }\n }}\n >\n {/* The chart refuses a scale no mark uses, so it waits for a shape. */}\n {radius > 0 && marks.length ? (\n // Inert, because the drawing would otherwise take focus away from the plot, which reads the keys.\n
\n \n
\n ) : null}\n \n {children}\n \n ),\n },\n props\n ),\n });\n\n return {element};\n});\nRadarChartRoot.displayName = 'RadarChart';\n\nexport interface RadarChartGridProps {\n /** How many rings, including the outermost. */\n rings?: number;\n /** Which of the theme's roles to draw it in. Defaults to the border colour. */\n color?: RadarChartColor;\n /** Draw the rings as circles rather than polygons through the spokes. */\n circular?: boolean;\n /** Draw a line from the centre to the rim along each axis. */\n spokes?: boolean;\n}\n\n/**\n * The scale, as rings. Polygons by default, because they are read against the shape on\n * top of them, and a round ring behind a polygon gives each axis a different distance\n * to the edge. Fewer than three axes is not a shape, so it draws nothing.\n */\nfunction RadarChartGrid({ rings = 4, color, circular = false, spokes = true }: RadarChartGridProps) {\n const { data, width, height, cx, cy, radius } = useChart('RadarChart.Grid');\n const count = data.length;\n if (count < 3 || radius <= 0 || rings < 1) return null;\n\n const polygon = (reach: number) =>\n Array.from({ length: count }, (_, index) => {\n const point = radarPoint(cx, cy, reach, index, count);\n return `${point.x},${point.y}`;\n }).join(' ');\n\n return (\n \n {Array.from({ length: rings }, (_, index) => {\n const reach = (radius * (index + 1)) / rings;\n return circular ? : ;\n })}\n {spokes\n ? Array.from({ length: count }, (_, index) => {\n const point = radarPoint(cx, cy, radius, index, count);\n return ;\n })\n : null}\n \n );\n}\nRadarChartGrid.displayName = 'RadarChart.Grid';\n\nexport interface RadarChartAxisProps {\n /** Which of the theme's roles to draw the labels in. Defaults to the muted text colour. */\n color?: RadarChartColor;\n /** Label size in pixels. */\n fontSize?: number;\n /** Gap between the outer ring and the label, in pixels. */\n offset?: number;\n /** Rewrite a label, usually to shorten it. */\n formatLabel?: (label: string, index: number) => string;\n}\n\n/**\n * The axis names around the rings. Each runs away from the shape by which side of the\n * circle it is on, and a label too long for the room ends in an ellipsis.\n */\nfunction RadarChartAxis({ color, fontSize = 11, offset = 10, formatLabel }: RadarChartAxisProps) {\n const { data, axisKey, width, height, cx, cy, radius } = useChart('RadarChart.Axis');\n const count = data.length;\n if (count < 3 || radius <= 0) return null;\n const slots = radarChartVariants();\n const shift = { start: '0', middle: '-50%', end: '-100%' };\n\n return (\n
\n );\n}\nRadarChartAxis.displayName = 'RadarChart.Axis';\n\nexport interface RadarChartSeriesProps {\n /** The key in each row holding this series' value. */\n dataKey: string;\n /** What the legend, the readout and screen readers call it. Defaults to `dataKey`. */\n name?: string;\n /** Which of the theme's roles to draw it in. Defaults to the chart palette, in the order the series are declared. */\n color?: RadarChartColor;\n /** Outline width in pixels. */\n strokeWidth?: number;\n /** Opacity of the fill. Pass `0` for an outline only. */\n fillOpacity?: number;\n /** Draw a dot at each vertex. */\n showDots?: boolean;\n}\n\n/**\n * One profile. An axis with no number is left out of the shape, and a series with fewer\n * than three numbers draws nothing, because two points are a line.\n */\nfunction RadarChartSeries({ dataKey, name, color, strokeWidth = 2, fillOpacity = 0.18, showDots = false }: RadarChartSeriesProps) {\n const { registerSeries, unregisterSeries } = useChart('RadarChart.Series');\n useEffect(() => {\n registerSeries({ dataKey, name, color, strokeWidth, fillOpacity, showDots });\n }, [dataKey, name, color, strokeWidth, fillOpacity, showDots, registerSeries]);\n useEffect(() => () => unregisterSeries(dataKey), [dataKey, unregisterSeries]);\n return null;\n}\nRadarChartSeries.displayName = 'RadarChart.Series';\n\nexport interface RadarChartTooltipProps {\n /** Format a value. Defaults to a compact number. */\n formatValue?: (value: number, dataKey: string) => string;\n /** Added to the readout. */\n className?: string;\n}\n\n/**\n * The reading for the axis nearest the pointer or walked to with the keys: its spoke\n * lit, a dot where each series crosses it, and each series' value in a readout.\n */\nfunction RadarChartTooltip({ formatValue, className }: RadarChartTooltipProps) {\n const { data, axisKey, width, height, cx, cy, radius, series, colorOf, nameOf, fractions, activeIndex } = useChart('RadarChart.Tooltip');\n const row = data[activeIndex];\n if (!row) return null;\n const slots = radarChartVariants();\n const count = data.length;\n const rim = radarPoint(cx, cy, radius, activeIndex, count);\n const anchor = radarPoint(cx, cy, radius * TOOLTIP_AT, activeIndex, count);\n const boxHeight = TOOLTIP_BASE_HEIGHT + TOOLTIP_ROW_HEIGHT * series.length;\n\n return (\n
\n )),\n },\n props\n ),\n });\n return series.length ? element : null;\n}\nRadarChartLegend.displayName = 'RadarChart.Legend';\n\nexport interface RadarChartHeaderProps extends Omit, 'title'> {\n /** Small line above the value: what the chart is of. */\n title?: ReactNode;\n /** The readout. The largest thing on the card, and the first thing read. */\n value?: ReactNode;\n /** One muted line under the value: a period, a comparison, a caveat. */\n caption?: ReactNode;\n /** Draw a swatch and a name per series along the trailing edge. */\n legend?: boolean;\n /** Trailing slot: a control, a badge, a range picker. Wins over `legend`. */\n children?: ReactNode;\n}\n\n/** The strip above the rings. The value is not derived here, because its formatting is the caller's to know. */\nfunction RadarChartHeader({ title, value, caption, legend = false, className, children, render, ...props }: RadarChartHeaderProps & RenderProp<'div'>) {\n const { series, colorOf, nameOf } = useChart('RadarChart.Header');\n const slots = radarChartVariants();\n const trailing =\n children ??\n (legend && series.length\n ? series.map((config) => (\n \n \n {nameOf(config)}\n \n ))\n : null);\n\n return useRender({\n defaultTagName: 'div',\n render,\n props: mergeProps(\n {\n 'data-slot': 'radar-chart-header',\n className: slots.header({ className }),\n children: (\n <>\n
\n {title ?
{title}
: null}\n {value || value === 0 ?
{value}
: null}\n {caption ?
{caption}
: null}\n
\n {trailing ?
{trailing}
: null}\n \n ),\n },\n props\n ),\n });\n}\nRadarChartHeader.displayName = 'RadarChart.Header';\n\nexport const RadarChart = Object.assign(RadarChartRoot, {\n Header: RadarChartHeader,\n Grid: RadarChartGrid,\n Axis: RadarChartAxis,\n Series: RadarChartSeries,\n Tooltip: RadarChartTooltip,\n Legend: RadarChartLegend,\n});\n\n/* By name as well, for a Server Component, which cannot dot into a client\n module. */\nexport { RadarChartHeader, RadarChartGrid, RadarChartAxis, RadarChartSeries, RadarChartTooltip, RadarChartLegend };\n"
},
{
"path": "components/panelui/radar-chart/radar-layout.ts",
"type": "registry:component",
"target": "@components/panelui/radar-chart/radar-layout.ts",
"content": "/** One row is one axis: its label, and one value per series. */\nexport type RadarChartDatum = Record;\n\n/** A number a series can draw, or null for an axis it has no reading on. */\nexport function radarValue(value: unknown): number | null {\n return typeof value === 'number' && !Number.isNaN(value) ? value : null;\n}\n\n/**\n * The scale. From zero unless told otherwise, because rings are read as fractions of\n * the whole and a floor above zero makes a small value look like a large one.\n */\nexport function radarDomain(\n data: readonly RadarChartDatum[],\n keys: readonly string[],\n domain?: readonly [number, number]\n): readonly [number, number] {\n if (domain) return domain;\n let max = -Infinity;\n for (const row of data) {\n for (const key of keys) {\n const value = radarValue(row[key]);\n if (value !== null && value > max) max = value;\n }\n }\n if (max === -Infinity) return [0, 1];\n return [0, max <= 0 ? 1 : max * 1.05];\n}\n\n/** A value's distance from the centre as a share of the radius. A value past the domain draws past the outer ring, so a wrong `domain` shows. */\nexport function radarFraction(value: number, [min, max]: readonly [number, number]): number {\n if (max <= min) return 0;\n return (value - min) / (max - min);\n}\n\n/** Fractions part way through a change, `progress` running 0 to 1. A vertex with no earlier place grows from the centre. */\nexport function radarBetween(\n from: readonly (number | null)[] | undefined,\n to: readonly (number | null)[],\n progress: number\n): (number | null)[] {\n return to.map((value, index) => {\n if (value === null) return null;\n const start = from?.[index] ?? 0;\n return start + (value - start) * progress;\n });\n}\n\n/** A point on the dial, measured from the top-left of the box. Axis `index` of `count` runs clockwise from twelve. */\nexport function radarPoint(cx: number, cy: number, radius: number, index: number, count: number): { x: number; y: number } {\n const angle = (index / count) * Math.PI * 2;\n return { x: cx + Math.sin(angle) * radius, y: cy - Math.cos(angle) * radius };\n}\n\n/** The axis nearest a point measured from the centre, or -1 past `reach` or on a chart too small to have a shape. */\nexport function radarAxisAt(x: number, y: number, count: number, reach: number): number {\n if (count < 3 || Math.hypot(x, y) > reach) return -1;\n const turn = Math.atan2(x, -y) / (Math.PI * 2);\n return ((Math.round(turn * count) % count) + count) % count;\n}\n\nexport type RadarLabelAlign = 'start' | 'middle' | 'end';\n\n/**\n * Which way a label runs from its point. Close to the vertical it is centred. Either\n * side of that it runs away from the shape rather than across it, for as far as the\n * box lets it, so a long label ends in an ellipsis rather than being cut off.\n */\nexport function radarLabelPlacement(x: number, cx: number, radius: number, width: number): { align: RadarLabelAlign; maxWidth: number } {\n const dx = x - cx;\n if (Math.abs(dx) < radius * 0.15) return { align: 'middle', maxWidth: width };\n return dx > 0 ? { align: 'start', maxWidth: Math.max(width - x, 0) } : { align: 'end', maxWidth: Math.max(x, 0) };\n}\n\n/** Where a box goes over a point, pushed back inside the plot. */\nexport function radarBoxInside(point: number, boxSize: number, plot: number): number {\n return Math.max(0, Math.min(plot - boxSize, point - boxSize / 2));\n}\n\n/** The axis a navigation key moves the reading to, or undefined for any other key. Runs round, because the axes do. */\nexport function radarKeyWalk(current: number, count: number, key: string): number | undefined {\n if (count < 3) return undefined;\n switch (key) {\n case 'ArrowRight':\n case 'ArrowDown':\n return (current + 1) % count;\n case 'ArrowLeft':\n case 'ArrowUp':\n return current < 0 ? count - 1 : (current - 1 + count) % count;\n case 'Home':\n return 0;\n case 'End':\n return count - 1;\n default:\n return undefined;\n }\n}\n"
}
]
}