4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T572d,"use client" import * as React from "react" import { Label, Legend, Pie, PieChart as RechartsPieChart, ResponsiveContainer, Sector, Tooltip, } from "recharts" import type { PieSectorDataItem } from "recharts" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { formatChartValue, formatValue, type FormatPreset, } from "@/lib/format-utils" import { PieChart as PieChartIcon } from "lucide-react" // ── Types ────────────────────────────────────────────────────────────────── export type PieChartVariant = "pie" | "donut" export type LegendPosition = "top" | "bottom" | "left" | "right" export interface PieChartItem { label: string value: number /** Overrides the auto --chart-N color for this slice */ color?: string } export interface PieChartProps extends React.HTMLAttributes { data: PieChartItem[] variant?: PieChartVariant title?: string subtitle?: string footer?: React.ReactNode height?: number showLegend?: boolean /** @default "bottom" */ legendPosition?: LegendPosition showTooltip?: boolean /** Show percentage labels on the outside of each slice */ showLabels?: boolean /** Center label shown when no slice is hovered (donut only) — defaults to "Total" */ innerLabel?: string /** Gap between slices in degrees */ paddingAngle?: number /** Format slice values in the tooltip, legend, and donut center */ valueFormatter?: (value: number) => string format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean /** Locale used for default number and percentage formatting */ locale?: UILocale /** Show animated skeleton in place of the chart while data loads */ loading?: boolean } // ── Constants ────────────────────────────────────────────────────────────── const LEGEND_LAYOUT: Record< LegendPosition, { verticalAlign: "top" | "middle" | "bottom" align: "left" | "center" | "right" layout: "horizontal" | "vertical" } > = { top: { verticalAlign: "top", align: "center", layout: "horizontal" }, bottom: { verticalAlign: "bottom", align: "center", layout: "horizontal" }, left: { verticalAlign: "middle", align: "left", layout: "vertical" }, right: { verticalAlign: "middle", align: "right", layout: "vertical" }, } const CHART_COLORS = [ "var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", ] // ── Skeleton ─────────────────────────────────────────────────────────────── function sectorPath( cx: number, cy: number, r: number, startDeg: number, endDeg: number ): string { const toRad = (d: number) => (d * Math.PI) / 180 const x1 = cx + r * Math.cos(toRad(startDeg - 90)) const y1 = cy + r * Math.sin(toRad(startDeg - 90)) const x2 = cx + r * Math.cos(toRad(endDeg - 90)) const y2 = cy + r * Math.sin(toRad(endDeg - 90)) const largeArc = endDeg - startDeg > 180 ? 1 : 0 return `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z` } interface PieChartSkeletonProps { height?: number hasTitle?: boolean hasSubtitle?: boolean hasFooter?: boolean isDonut?: boolean className?: string } function PieChartSkeleton({ height = 280, hasTitle = false, hasSubtitle = false, hasFooter = false, isDonut = false, className, }: PieChartSkeletonProps) { // 5 sectors: 25%, 20%, 18%, 22%, 15% = angles 0→90, 90→162, 162→226.8, 226.8→306, 306→360 const sectors: [number, number][] = [ [0, 90], [90, 162], [162, 226.8], [226.8, 306], [306, 358.5], ] return (

{(hasTitle || hasSubtitle) && (

{hasTitle && ( )} {hasSubtitle && ( )}

)}

{hasFooter && (

)}

) } // ── Variants ─────────────────────────────────────────────────────────────── const chartWrapperVariants = cva("flex w-full flex-col") const chartHeaderVariants = cva("flex flex-col px-1 pb-4") const chartTitleVariants = cva( "text-sm leading-tight font-semibold text-foreground" ) const chartSubtitleVariants = cva("mt-0.5 text-xs text-muted-foreground") const chartFooterVariants = cva( "mt-4 flex items-center gap-2 border-t border-border px-1 pt-3 text-xs text-muted-foreground" ) // ── Active Shape ─────────────────────────────────────────────────────────── interface ActiveShapeProps { cx: number cy: number innerRadius: number outerRadius: number startAngle: number endAngle: number fill: string } function ActiveShape(props: PieSectorDataItem): React.ReactElement { const { cx = 0, cy = 0, innerRadius = 0, outerRadius = 0, startAngle = 0, endAngle = 0, fill, payload, } = props as ActiveShapeProps & PieSectorDataItem & { payload?: { color?: string } } const customFill = payload?.color ?? fill return ( {/* Main slice — expanded outward by 8px */} {/* Inner ring highlight shown only on donut variant */} {innerRadius > 0 && ( )} ) } // ── Donut Center Label ───────────────────────────────────────────────────── interface CenterLabelProps { viewBox?: unknown value: number label: string percent: string | null fmt: (v: number) => string } function CenterLabel({ viewBox, value, label, percent, fmt, }: CenterLabelProps) { const { cx, cy } = (viewBox ?? {}) as { cx?: number; cy?: number } if (cx == null || cy == null) return const display = fmt(value) const hasPercent = percent !== null return ( {display} {label} {hasPercent && ( {percent} )} ) } // ── Custom Tooltip ───────────────────────────────────────────────────────── interface TooltipPayloadEntry { name: string value: number payload: { color: string } } function ChartTooltip({ active, payload, total, fmt, locale = "en-US", }: { active?: boolean payload?: TooltipPayloadEntry[] total: number fmt: (v: number) => string locale?: UILocale }) { if (!active || !payload?.length) return null const entry = payload[0] const pct = formatValue(entry.value / total, "percent", { decimals: 1, locale, }) return (

{entry.name}

{fmt(entry.value)} {pct}

) } // ── Custom Legend ────────────────────────────────────────────────────────── interface NormalizedPieItem { label: string value: number color: string } function ChartLegend({ items, total, hiddenLabels, onToggle, fmt, position = "bottom", locale = "en-US", }: { items: NormalizedPieItem[] total: number hiddenLabels: Set onToggle: (label: string) => void fmt: (v: number) => string position?: LegendPosition locale?: UILocale }) { // Rendered through Recharts' portal, whose container is itself a node // managed elsewhere in the same React tree. React's synthetic click dispatch does // not reliably resolve back to handlers on elements portaled this way, so toggling // is wired through a native listener instead of onClick. const containerRef = React.useRef(null) const onToggleRef = React.useRef(onToggle) React.useEffect(() => { onToggleRef.current = onToggle }, [onToggle]) React.useEffect(() => { const container = containerRef.current if (!container) return const handleActivate = (label: string) => onToggleRef.current(label) const handleClick = (e: MouseEvent) => { const target = (e.target as HTMLElement).closest( "[data-legend-label]" ) if (target) handleActivate(target.dataset.legendLabel!) } const handleKeyDown = (e: KeyboardEvent) => { if (e.key !== "Enter" && e.key !== " ") return const target = (e.target as HTMLElement).closest( "[data-legend-label]" ) if (target) { e.preventDefault() handleActivate(target.dataset.legendLabel!) } } container.addEventListener("click", handleClick) container.addEventListener("keydown", handleKeyDown) return () => { container.removeEventListener("click", handleClick) container.removeEventListener("keydown", handleKeyDown) } }, []) return (

{items.map((item) => { const hidden = hiddenLabels.has(item.label) const pct = formatValue(item.value / total, "percent", { decimals: 1, locale, }) const display = fmt(item.value) return ( ) })}

) } // ── PieChart ─────────────────────────────────────────────────────────────── export function PieChart({ data, variant = "pie", title, subtitle, footer, height = 280, showLegend = true, legendPosition = "bottom", showTooltip = true, showLabels = false, innerLabel, paddingAngle = 0, valueFormatter, format, decimals, currency, abbreviate, loading = false, locale = "en-US", className, ...props }: PieChartProps) { const i18nInnerLabel = innerLabel ?? UI_I18N[locale as UILocale]?.pieChart?.total ?? UI_I18N["en-US"].pieChart.total // Hooks must be called unconditionally before any early returns const fmt = React.useCallback( (v: number) => formatChartValue(v, { format, decimals, locale, currency, abbreviate, valueFormatter, }), [valueFormatter, format, decimals, locale, currency, abbreviate] ) const [activeLabel, setActiveLabel] = React.useState(null) const [hiddenLabels, setHiddenLabels] = React.useState>(new Set()) const toggleLabel = React.useCallback((label: string) => { setHiddenLabels((prev) => { const next = new Set(prev) if (next.has(label)) next.delete(label) else next.add(label) return next }) }, []) const items = React.useMemo( () => data.map((d, i) => ({ ...d, color: d.color ?? CHART_COLORS[i % CHART_COLORS.length], })), [data] ) // Items rendered in the pie — hidden ones are excluded so the remaining slices fill the space const visibleItems = React.useMemo( () => items.filter((d) => !hiddenLabels.has(d.label)), [items, hiddenLabels] ) // Full total (used for legend percentages — stable even when slices are hidden) const total = React.useMemo( () => items.reduce((sum, d) => sum + d.value, 0), [items] ) // Visible total (used for center label and tooltip) const visibleTotal = React.useMemo( () => visibleItems.reduce((sum, d) => sum + d.value, 0), [visibleItems] ) const isDonut = variant === "donut" // Center label state — computed before early returns so renderCenterLabel hook is unconditional const centerItem = activeLabel !== null ? (visibleItems.find((i) => i.label === activeLabel) ?? null) : null const centerValue = centerItem?.value ?? visibleTotal const centerLabel = centerItem?.label ?? i18nInnerLabel const centerPercent = centerItem ? formatValue(centerItem.value / visibleTotal, "percent", { decimals: 1, locale, }) : null const renderCenterLabel = React.useCallback( ({ viewBox }: { viewBox?: unknown }) => ( ), [centerValue, centerLabel, centerPercent, fmt] ) // Stable identity across renders — an inline arrow function here would give Recharts' // Legend a new `content` type every render, forcing it to unmount/remount the legend // subtree instead of reconciling it. const renderLegendContent = React.useCallback( () => ( ), [items, total, hiddenLabels, toggleLabel, fmt, legendPosition, locale] ) if (loading) { return ( ) } if (data.length === 0) { return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)}

{UI_I18N[locale as UILocale]?.emptyState?.noData ?? UI_I18N["en-US"].emptyState.noData}

{UI_I18N[locale as UILocale]?.emptyState?.dataWillAppear ?? UI_I18N["en-US"].emptyState.dataWillAppear}

{footer && (

{footer}

)}

) } return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)} {showTooltip && ( } /> )} {showLegend && ( )} setActiveLabel((d as unknown as { label: string }).label) } onMouseLeave={() => setActiveLabel(null)} label={ showLabels ? ({ percent }: { percent?: number }) => (percent ?? 0) > 0.04 ? formatValue(percent ?? 0, "percent", { decimals: 0, locale, }) : "" : false } labelLine={ showLabels ? { stroke: "var(--muted-foreground)", strokeWidth: 1 } : false } shape={(props: unknown) => { const p = props as PieSectorDataItem & { payload?: { color?: string } } return }} > {isDonut && } {footer && (

{footer}

)}

) } 4b:["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4c",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","ui-i18n","format-utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/pie-chart.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-pie-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]