53: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"] 54: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"] 55:T56bd,"use client"; import { PolarAngleAxis as RechartsPolarAngleAxis, PolarGrid as RechartsPolarGrid, PolarRadiusAxis as RechartsPolarRadiusAxis, Radar as RechartsRadar, RadarChart as RechartsRadarChart, } from "recharts"; import { Children, createContext, isValidElement, use, useCallback, useEffect, useId, useMemo, useState, type ComponentProps, type FC, type ReactElement, type ReactNode, } from "react"; import { ChartTooltip, ChartTooltipContent, type TooltipRoundness, type TooltipVariant, } from "@/registry/ui/recharts-tooltip"; import { type ChartConfig, ChartContainer, getColorsCount, LoadingIndicator, } from "@/registry/ui/recharts-chart"; import { ChartLegend, ChartLegendContent, type ChartLegendVariant } from "@/registry/ui/recharts-legend"; import { ChartBackground, type BackgroundVariant } from "@/registry/ui/recharts-background"; import { ChartDot, type DotVariant } from "@/registry/ui/recharts-dot"; // Constants const STROKE_WIDTH = 1; const DEFAULT_FILL_OPACITY = 0.3; const LOADING_POINTS = 6; const LOADING_ANIMATION_DURATION = 1500; // in milliseconds const LOADING_RADAR_DATA_KEY = "value"; type RadarVariant = "filled" | "lines"; // ───────────────────────────────────────────────────────────────────────────── // Shared context // ───────────────────────────────────────────────────────────────────────────── /** * Shared state for every part of the chart. Lifted into so that * , , , and friends can read it without prop * drilling. Sub-components are composed freely — the provider is the single source * of truth. */ type RadarChartContextValue = { config: ChartConfig; // colors + labels for every series isLoading: boolean; // whether the chart shows its loading skeleton selectedDataKey: string | null; // currently selected series, or null when none selectDataKey: (dataKey: string | null) => void; // sets the selected series }; const RadarChartContext = createContext(null); // Reads the chart context, throwing a helpful error when used outside function useRadarChart() { const context = use(RadarChartContext); if (!context) { throw new Error( "Radar chart parts (, , …) must be used within ", ); } return context; } // ───────────────────────────────────────────────────────────────────────────── // Root container // ───────────────────────────────────────────────────────────────────────────── // Validates that every config key also exists on the data row type type ValidateConfigKeys = { [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never; }; type EvilRadarChartBaseProps< TData extends Record, TConfig extends Record, > = { config: TConfig & ValidateConfigKeys; // series colors + labels data: TData[]; // rows rendered by the chart children: ReactNode; // composed parts — , , , … className?: string; // extra classes for the chart container chartProps?: ComponentProps; // escape hatch for the raw Recharts chart backgroundVariant?: BackgroundVariant; // background pattern drawn behind the chart defaultSelectedDataKey?: string | null; // series selected on first render onSelectionChange?: (selectedDataKey: string | null) => void; // fires when the selected series changes isLoading?: boolean; // shows the animated loading skeleton loadingPoints?: number; // number of points in the loading skeleton }; type EvilRadarChartProps< TData extends Record, TConfig extends Record, > = EvilRadarChartBaseProps; /** * Root of the composible radar chart. Owns the data, the shared context, and the * loading skeleton. Everything visual — the polar grid, axes, tooltip, legend, and * the radars themselves — is composed as children, so a consumer renders exactly * the parts they need. */ export function EvilRadarChart< TData extends Record, TConfig extends Record, >({ config, data, children, className, chartProps, backgroundVariant, defaultSelectedDataKey = null, onSelectionChange, isLoading = false, loadingPoints, }: EvilRadarChartProps) { const chartId = useId().replace(/:/g, ""); // colon-free id keeps CSS/SVG selectors valid const [selectedDataKey, setSelectedDataKey] = useState(defaultSelectedDataKey); const loadingData = useLoadingData(isLoading, loadingPoints); // Updates selection state and notifies the parent const selectDataKey = useCallback( (newSelectedDataKey: string | null) => { setSelectedDataKey(newSelectedDataKey); onSelectionChange?.(newSelectedDataKey); }, [onSelectionChange], ); const contextValue = useMemo( () => ({ config, isLoading, selectedDataKey, selectDataKey, }), [config, isLoading, selectedDataKey, selectDataKey], ); return ( {backgroundVariant && } {children} {isLoading && } ); } // ───────────────────────────────────────────────────────────────────────────── // Composible parts // ───────────────────────────────────────────────────────────────────────────── type RadarProps = { dataKey: string; // series key — must exist on the data and config variant?: RadarVariant; // fill style for this radar only fillOpacity?: number; // opacity of the filled area when `variant="filled"` isGlowing?: boolean; // adds a soft outer glow around this radar isClickable?: boolean; // lets this radar be selected by clicking it children?: ReactNode; // optional and composition radarProps?: Omit, "dataKey">; // escape hatch for raw Recharts Radar props }; /** * A single radar series. Each is fully self-contained: it generates its * own stroke/fill gradients and glow filter under a unique id, so any number of * radars — each with its own variant, opacity, and clickability — can live in one * chart without style collisions. Compose and inside it to * add point markers. */ function Radar({ dataKey, variant = "filled", fillOpacity = DEFAULT_FILL_OPACITY, isGlowing = false, isClickable = false, children, radarProps, }: RadarProps) { const { config, isLoading, selectedDataKey, selectDataKey } = useRadarChart(); const id = useId().replace(/:/g, ""); // unique id scopes this radar's style defs // The root renders the skeleton radar while loading, so real radars step aside if (isLoading) return null; const isSelected = selectedDataKey === null || selectedDataKey === dataKey; const isDimmed = isClickable && !isSelected; // Opacity when another radar is selected. The stroke stays full (1) on the // selected/normal radar; when dimmed the fill recedes twice as far as the // stroke and dots (fill 0.1 vs 0.2) so the picked radar reads clearly. The // fill value multiplies the `fillOpacity` prop; stroke/dot are absolute. const opacity = { stroke: isDimmed ? 0.2 : 1, fill: isDimmed ? 0.1 : 1, dot: isDimmed ? 0.2 : 1, }; const isFilled = variant === "filled"; const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot); return ( <> { if (!isClickable) return; // Clicking the selected radar clears the selection, otherwise selects it selectDataKey(selectedDataKey === dataKey ? null : dataKey); }} {...radarProps} /> {isFilled && } {isGlowing && } ); } type DotProps = { variant?: DotVariant; // visual style of the point marker }; /** * Declares a resting point marker for the it is composed inside. * It renders nothing on its own — the parent reads its variant and * wires it into the Recharts dot slot. */ const Dot: FC = () => null; /** * Declares the hovered/active point marker for the it is composed * inside. Like , it is a configuration slot and renders nothing itself. */ const ActiveDot: FC = () => null; type PolarGridProps = ComponentProps; /** * The polar grid lines. Defaults to a dashed polygon grid and forwards every * Recharts PolarGrid prop, so `gridType`, `polarRadius`, etc. pass straight through. */ function PolarGrid({ gridType = "polygon", stroke = "currentColor", strokeOpacity = 0.2, strokeDasharray = "3 4", ...props }: PolarGridProps) { return ( ); } type PolarAngleAxisProps = ComponentProps; /** * The angular category axis — the labels around the chart's perimeter. Ships * with the chart's flat default styling and forwards every Recharts * PolarAngleAxis prop. Hidden automatically while the chart is loading. */ function PolarAngleAxis({ tick = { fill: "currentColor", fontSize: 12 }, tickLine = false, ...props }: PolarAngleAxisProps) { const { isLoading } = useRadarChart(); if (isLoading) return null; return ; } type PolarRadiusAxisProps = ComponentProps; /** * The radial value axis — the scale running from the center outward. Forwards * every Recharts PolarRadiusAxis prop. Hidden automatically while the chart is * loading. */ function PolarRadiusAxis({ tick = { fill: "currentColor", fontSize: 10 }, tickLine = false, axisLine = false, ...props }: PolarRadiusAxisProps) { const { isLoading } = useRadarChart(); if (isLoading) return null; return ; } type TooltipProps = { variant?: TooltipVariant; // visual style of the tooltip surface roundness?: TooltipRoundness; // border-radius of the tooltip defaultIndex?: number; // data index shown by default with no hover }; /** * The hover tooltip. Reads the chart's selection from context so its content * dims unselected series. Hidden automatically while the chart is loading. */ function Tooltip({ variant, roundness, defaultIndex }: TooltipProps) { const { isLoading, selectedDataKey } = useRadarChart(); if (isLoading) return null; return ( } /> ); } type LegendProps = { variant?: ChartLegendVariant; // visual style of the legend indicators align?: "left" | "center" | "right"; // horizontal placement verticalAlign?: "top" | "middle" | "bottom"; // vertical placement isClickable?: boolean; // lets each entry toggle selection of its series }; /** * The series legend. When `isClickable` is set, each entry toggles selection of * its series, driving the shared selection state read by every . * Hidden automatically while the chart is loading. */ function Legend({ variant, align = "center", verticalAlign = "bottom", isClickable = false, }: LegendProps) { const { isLoading, selectedDataKey, selectDataKey } = useRadarChart(); if (isLoading) return null; return ( } /> ); } // ───────────────────────────────────────────────────────────────────────────── // Dot helpers // ───────────────────────────────────────────────────────────────────────────── type RadarDotProp = ComponentProps["dot"]; type RadarActiveDotProp = ComponentProps["activeDot"]; // Pulls and out of a radar's children into Recharts dot slots const resolveDots = ( children: ReactNode, id: string, dataKey: string, dotOpacity: number, ): { dot: RadarDotProp; activeDot: RadarActiveDotProp } => { let dot: RadarDotProp = false; let activeDot: RadarActiveDotProp = false; Children.forEach(children, (child) => { if (!isValidElement(child)) return; if (child.type === Dot) { const { variant } = (child as ReactElement).props; dot = ; } if (child.type === ActiveDot) { const { variant } = (child as ReactElement).props; activeDot = ( ); } }); return { dot, activeDot }; }; // ───────────────────────────────────────────────────────────────────────────── // Style definitions — one set per , scoped to its unique id // ───────────────────────────────────────────────────────────────────────────── type StyleProps = { id: string; // unique id of the owning dataKey: string; // series key the styles belong to config: ChartConfig; // colors + labels for every series }; type ColorStopsProps = { dataKey: string; // series key the stops belong to colorsCount: number; // number of color steps in the gradient opacities?: number[]; // optional per-stop opacity ramp }; // Emits one per color, falling back to a flat gradient for single colors const ColorStops = ({ dataKey, colorsCount, opacities }: ColorStopsProps) => { if (colorsCount === 1) { return ( <> ); } return ( <> {Array.from({ length: colorsCount }, (_, index) => { const offset = `${(index / (colorsCount - 1)) * 100}%`; return ( ); })} ); }; /** * Horizontal left-to-right color gradient for a series. Always rendered — the * radar's dots paint from this single gradient. */ const ColorGradient = ({ id, dataKey, config }: StyleProps) => { const colorsCount = getColorsCount(config[dataKey] ?? {}); return ( ); }; /** Diagonal color gradient used for the radar's outline stroke. */ const StrokeGradient = ({ id, dataKey, config }: StyleProps) => { const colorsCount = getColorsCount(config[dataKey] ?? {}); return ( ); }; /** Radial color gradient used for the radar's filled area, fading toward the edge. */ const FillGradient = ({ id, dataKey, config }: StyleProps) => { const colorsCount = getColorsCount(config[dataKey] ?? {}); const opacities = colorsCount === 1 ? [0.8, 0.3] : Array.from({ length: colorsCount }, (_, i) => (i === 0 ? 0.8 : 0.3)); return ( ); }; /** Soft outer glow filter applied to a radar when `isGlowing` is set. */ const GlowFilter = ({ id, dataKey }: Pick) => { return ( ); }; // ───────────────────────────────────────────────────────────────────────────── // Loading skeleton // ───────────────────────────────────────────────────────────────────────────── // Builds a fresh set of randomized loading points for the skeleton radar const generateLoadingData = (points: number) => { const categories = ["A", "B", "C", "D", "E", "F"]; return categories.slice(0, points).map((category) => ({ skill: category, [LOADING_RADAR_DATA_KEY]: 30 + Math.random() * 70, })); }; /** * Hook that regenerates the loading skeleton data on a fixed interval, so the * skeleton radar keeps animating between shapes while the chart is loading. */ export function useLoadingData(isLoading: boolean, loadingPoints: number = LOADING_POINTS) { const [refreshKey, setRefreshKey] = useState(0); useEffect(() => { if (!isLoading) return; const interval = setInterval(() => { setRefreshKey((prev) => prev + 1); }, LOADING_ANIMATION_DURATION); return () => clearInterval(interval); }, [isLoading]); const loadingData = useMemo( () => generateLoadingData(loadingPoints), // refreshKey toggle triggers re-computation each animation cycle // eslint-disable-next-line react-hooks/exhaustive-deps [loadingPoints, refreshKey], ); return loadingData; } /** * The skeleton radar shown while the chart is loading. Rendered by the root in * place of the real radars, it animates between randomized shapes. */ const LoadingRadar = () => { return ( ); }; // Compound API: every part hangs off the root as a static member, so a consumer // writes , , … from a single import // — no colliding named marker exports when several charts share one file. EvilRadarChart.Radar = Radar; EvilRadarChart.Dot = Dot; EvilRadarChart.ActiveDot = ActiveDot; EvilRadarChart.PolarGrid = PolarGrid; EvilRadarChart.PolarAngleAxis = PolarAngleAxis; EvilRadarChart.PolarRadiusAxis = PolarRadiusAxis; EvilRadarChart.Tooltip = Tooltip; EvilRadarChart.Legend = Legend; 52:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L53",null,{"namespace":"@blockdex","registryDependencies":["@evilcharts/recharts-chart","@evilcharts/recharts-tooltip","@evilcharts/recharts-legend","@evilcharts/recharts-dot","@evilcharts/recharts-background"]}]]}],null]}],["$","$L54",null,{"files":[{"path":"src/registry/charts/recharts-radar-chart.tsx","content":"$55","type":"registry:component","target":"components/evilcharts/charts/recharts-radar-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]