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:T36e2,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type ComponentProps, type KeyboardEvent, type PointerEvent, type ReactNode, } from "react"; import { useEntrance } from "@/registry/default/hooks/use-entrance"; import { cn } from "@/registry/default/lib/utils"; // Size of the drawing until the browser has measured it, in px. const SIZE = 200; // Space between segments, in px along the ring. const GAP = 2; const DRAW = "cubic-bezier(0.65, 0, 0.35, 1)"; const n = (value: number) => Math.round(value * 100) / 100; /** * The default colour of segment `index` out of `count`: the primary colour * for the first, then the primary colour mixed with the background, lighter * for each segment down to 30%. */ function defaultColor(index: number, count: number) { if (index === 0) return "var(--primary)"; const share = Math.round(100 - (index / Math.max(count - 1, 1)) * 70); return `color-mix(in oklab, var(--primary) ${share}%, var(--background))`; } interface DonutChartItem { /** Name of the part, shown in the legend. */ label: string; /** Its size. Negative values count as 0. */ value: number; /** Segment colour; any CSS colour. See `DonutChart` for the defaults. */ color?: string; } interface DonutChartProps extends Omit, "children"> { /** The parts of the whole, drawn clockwise from the top. */ data: DonutChartItem[]; /** Name of the chart, used as the accessible name of the legend. */ name?: string; /** Width of the ring, in px. */ thickness?: number; /** Shown small in the hole. Defaults to the highlighted part's label, or `totalLabel`. */ centerLabel?: ReactNode; /** Shown large in the hole. Defaults to the highlighted part's value, or the total. */ centerValue?: ReactNode; /** Label for the total in the hole. */ totalLabel?: string; /** * Locale and options for the numbers, as in `Intl.NumberFormat`. Both can * be passed from a server component; a fixed default keeps the server and * the browser in agreement. */ locale?: string; numberFormat?: Intl.NumberFormatOptions; /** Options for the percentages in the legend, as in `Intl.NumberFormat`. */ percentFormat?: Intl.NumberFormatOptions; /** * Formats values in the legend and the hole; overrides `locale` and * `numberFormat`. `index` is -1 for the total. */ formatValue?: (value: number, index: number) => ReactNode; /** The part highlighted at first. Defaults to none. */ defaultIndex?: number; /** Called when the highlighted part changes, by pointer or keyboard; `null` when none is. */ onIndexChange?: (index: number | null) => void; /** Sweep the segments in the first time the chart comes into view. */ animated?: boolean; } /** * A donut chart for the parts of a whole, with a legend listing each part's * value and share. The ring is decorative; the legend carries the data. Each * legend entry is a toggle button that highlights its segment: Tab reaches * the list, the arrow keys, Home and End move between entries, Enter or * Space pins one and Escape clears it. Hovering a segment or an entry * highlights it too, dims the rest and shows its value in the hole, which * otherwise shows the total. The segments sweep in the first time the chart * scrolls into view; with `prefers-reduced-motion` they are simply shown. * * Parts without a `color` get the primary colour, then lighter mixes of it * with the background, so the chart follows the theme; pass colours to tell * many parts apart. * * @example * */ function DonutChart({ data, name, thickness = 24, centerLabel, centerValue, totalLabel = "Total", locale = "en-US", numberFormat, percentFormat, formatValue, defaultIndex, onIndexChange, animated = true, className, "aria-label": ariaLabel, ...props }: DonutChartProps) { const id = useId().replace(/[^\w-]/g, ""); const [box, setBox] = useState(null); const [size, setSize] = useState(SIZE); const [pinned, setPinned] = useState(defaultIndex ?? null); const [hovered, setHovered] = useState(null); const buttons = useRef<(HTMLButtonElement | null)[]>([]); const [observe, phase] = useEntrance({ play: animated ? undefined : true }); const entrance = animated ? phase : "static"; const boxRef = useCallback( (node: HTMLDivElement | null) => { setBox(node); observe(node); }, [observe] ); useEffect(() => { if (!box || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(([entry]) => { if (entry?.contentRect.width) setSize(entry.contentRect.width); }); observer.observe(box); return () => observer.disconnect(); }, [box]); const ring = Math.max(1, Math.min(thickness, size / 2 - 1)); const radius = (size - ring) / 2; const circumference = 2 * Math.PI * radius; const segments = useMemo(() => { const values = data.map((item) => Math.max(0, item.value)); const total = values.reduce((sum, value) => sum + value, 0); const shown = values.filter((value) => value > 0).length; const shares = values.map((value) => (total ? value / total : 0)); // Where each segment ends, as a fraction of the ring. const ends = shares.map((_, index) => shares.slice(0, index + 1).reduce((sum, share) => sum + share, 0) ); return { total, items: data.map((item, index) => { const share = shares[index]!; const from = ends[index]! - share; return { label: item.label, value: values[index]!, color: item.color ?? defaultColor(index, data.length), share, from, to: ends[index]!, // Leave a gap between segments, never more than the segment itself. length: Math.max(0, share * circumference - (shown > 1 ? GAP : 0)), offset: from * circumference, }; }), }; }, [data, circumference]); const numbers = useMemo( () => new Intl.NumberFormat(locale, numberFormat), [locale, numberFormat] ); const percents = useMemo( () => new Intl.NumberFormat( locale, percentFormat ?? { style: "percent", maximumFractionDigits: 1 } ), [locale, percentFormat] ); if (data.length === 0) return null; const clamp = (index: number | null) => index === null ? null : Math.min(Math.max(index, 0), data.length - 1); const active = clamp(hovered ?? pinned); const update = (nextPinned: number | null, nextHovered: number | null) => { const next = clamp(nextHovered ?? nextPinned); setPinned(nextPinned); setHovered(nextHovered); if (next !== active) onIndexChange?.(next); }; const onPointerMove = (event: PointerEvent) => { const rect = event.currentTarget.getBoundingClientRect(); if (rect.width === 0 || segments.total === 0) return; const scale = rect.width / size; const dx = event.clientX - (rect.left + rect.width / 2); const dy = event.clientY - (rect.top + rect.height / 2); const distance = Math.hypot(dx, dy) / scale; if (distance < radius - ring / 2 || distance > radius + ring / 2) { if (hovered !== null) update(pinned, null); return; } // Clockwise from the top, from 0 to 1. const turn = (Math.atan2(dx, -dy) / (2 * Math.PI) + 1) % 1; const index = segments.items.findIndex((item) => item.share > 0 && turn < item.to); const next = index === -1 ? null : index; if (next !== hovered) update(pinned, next); }; const format = (value: number, index: number) => formatValue ? formatValue(value, index) : numbers.format(value); const onKeyDown = (event: KeyboardEvent, index: number) => { if (event.key === "Escape") { if (pinned === null) return; event.preventDefault(); update(null, hovered); return; } const moves: Record = { ArrowUp: index - 1, ArrowLeft: index - 1, ArrowDown: index + 1, ArrowRight: index + 1, Home: 0, End: data.length - 1, }; const move = moves[event.key]; if (move === undefined) return; event.preventDefault(); const next = clamp(move)!; buttons.current[next]?.focus(); update(next, hovered); }; const focusable = clamp(pinned) ?? 0; const highlighted = active === null ? null : segments.items[active]!; const center = size / 2; return (

{ if (hovered !== null) update(pinned, null); }} >

{centerLabel ?? highlighted?.label ?? totalLabel} {" "} {centerValue ?? (highlighted ? format(highlighted.value, active!) : formatValue ? formatValue(segments.total, -1) : numbers.format(segments.total))}

); } export { DonutChart, type DonutChartItem, type DonutChartProps }; 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":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/use-entrance"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/donut-chart.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]