51: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"] 52: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"] 53:T722c,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { BarChart2 } from "lucide-react" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { useUILocale } from "@/components/ui/ds-locale-provider" import { formatChartValue, type FormatPreset } from "@/lib/format-utils" // ── Types ────────────────────────────────────────────────────────────────── export type BoxPlotOrientation = "vertical" | "horizontal" export interface BoxPlotItem { name: string min: number q1: number median: number /** Optional mean marker (diamond) */ mean?: number q3: number max: number /** Individual outlier values outside min/max */ outliers?: number[] /** Defaults to next --chart-N token */ color?: string } export interface BoxPlotChartProps extends React.HTMLAttributes { data: BoxPlotItem[] title?: string subtitle?: string footer?: React.ReactNode /** "vertical" = boxes grow upward (default); "horizontal" = boxes grow rightward */ orientation?: BoxPlotOrientation height?: number /** Draw background grid lines on the value axis */ showGrid?: boolean /** Draw a diamond at the mean value */ showMean?: boolean /** Draw dots for outlier values */ showOutliers?: boolean /** Notch the box at the median — visually encodes median confidence */ notched?: boolean /** Format value-axis tick labels and tooltip values */ valueFormatter?: (value: number) => string format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean /** Show animated skeleton in place of the chart while data loads */ loading?: boolean locale?: UILocale } // ── Constants ────────────────────────────────────────────────────────────── const CHART_COLORS = [ "var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", ] const MARGIN_V = { top: 16, right: 20, bottom: 36, left: 48 } const MARGIN_H = { top: 8, right: 24, bottom: 8, left: 96 } // ── Skeleton ─────────────────────────────────────────────────────────────── const BOXPLOT_SKELETON_BOXES = [ { cx: 12, whiskerLo: 78, q1: 65, median: 50, q3: 32, whiskerHi: 18 }, { cx: 35, whiskerLo: 82, q1: 72, median: 55, q3: 38, whiskerHi: 22 }, { cx: 58, whiskerLo: 70, q1: 58, median: 40, q3: 25, whiskerHi: 15 }, { cx: 81, whiskerLo: 88, q1: 76, median: 62, q3: 45, whiskerHi: 28 }, ] const YAXIS_TICK_WIDTHS = [28, 20, 24, 18, 22] interface BoxPlotChartSkeletonProps { height?: number hasTitle?: boolean hasSubtitle?: boolean hasFooter?: boolean className?: string } function BoxPlotChartSkeleton({ height = 320, hasTitle = false, hasSubtitle = false, hasFooter = false, className, }: BoxPlotChartSkeletonProps) { const XAXIS_WIDTHS = [28, 36, 24, 32] return (

{(hasTitle || hasSubtitle) && (

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

)}

{/* Y-axis tick labels */}

{YAXIS_TICK_WIDTHS.map((w, i) => ( ))}

{/* Chart area with SVG box plots */}

{/* X-axis tick labels */}

{XAXIS_WIDTHS.map((w, i) => ( ))}

{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" ) // ── Helpers ──────────────────────────────────────────────────────────────── function niceTicks(lo: number, hi: number, count = 5): number[] { const raw = (hi - lo) / (count - 1) const mag = Math.pow(10, Math.floor(Math.log10(raw))) const nice = [1, 2, 2.5, 5, 10].find((f) => f * mag >= raw) ?? 10 const step = nice * mag const start = Math.floor(lo / step) * step const ticks: number[] = [] for ( let t = start; t <= hi + step * 0.001; t = Math.round((t + step) * 1e9) / 1e9 ) { ticks.push(t) } return ticks } function resolveColors(data: BoxPlotItem[]): BoxPlotItem[] { return data.map((d, i) => ({ ...d, color: d.color ?? CHART_COLORS[i % CHART_COLORS.length], })) } // ── Tooltip ──────────────────────────────────────────────────────────────── interface TooltipState { item: BoxPlotItem /** Position relative to the container element */ left: number top: number } function BoxTooltip({ item, left, top, fmt, locale: localeProp, }: { item: BoxPlotItem left: number top: number fmt: (v: number) => string locale?: UILocale }) { const locale = useUILocale(localeProp) const t = UI_I18N[locale].boxplot return (

{item.name}

{[ { label: t.max, value: item.max }, { label: t.q3, value: item.q3 }, { label: t.median, value: item.median }, ...(item.mean !== undefined ? [{ label: t.mean, value: item.mean }] : []), { label: t.q1, value: item.q1 }, { label: t.min, value: item.min }, ].map(({ label, value }) => (

{label} {fmt(value)}

))}

) } // ── Box rendering helpers ────────────────────────────────────────────────── interface BoxProps { item: BoxPlotItem cx: number // center x (vertical) or center y (horizontal) halfWidth: number // value → pixel coordinate scale: (v: number) => number orientation: BoxPlotOrientation notched: boolean showMean: boolean showOutliers: boolean onHover: (item: BoxPlotItem, ev: React.MouseEvent) => void onLeave: () => void isHovered: boolean } function BoxShape({ item, cx, halfWidth, scale, orientation, notched, showMean, showOutliers, onHover, onLeave, isHovered, }: BoxProps) { const color = item.color! const notchDepth = halfWidth * 0.28 // All coordinates in SVG pixel space if (orientation === "vertical") { const yMin = scale(item.min) const yQ1 = scale(item.q1) const yMed = scale(item.median) const yMean = item.mean !== undefined ? scale(item.mean) : null const yQ3 = scale(item.q3) const yMax = scale(item.max) const x1 = cx - halfWidth const x2 = cx + halfWidth const boxPath = notched ? [ `M ${x1} ${yQ3}`, `L ${x1} ${yMed + notchDepth}`, `L ${cx - notchDepth * 0.7} ${yMed}`, `L ${x1} ${yMed - notchDepth}`, `L ${x1} ${yQ1}`, `L ${x2} ${yQ1}`, `L ${x2} ${yMed - notchDepth}`, `L ${cx + notchDepth * 0.7} ${yMed}`, `L ${x2} ${yMed + notchDepth}`, `L ${x2} ${yQ3}`, "Z", ].join(" ") : null return ( onHover(item, e)} onMouseLeave={onLeave} opacity={isHovered ? 1 : 0.9} style={{ cursor: "default" }} > {/* Whisker: min → Q1 */} {/* Whisker: Q3 → max */} {/* Whisker caps */} {/* IQR Box */} {notched ? ( ) : ( )} {/* Median line */} {/* Mean diamond */} {showMean && yMean !== null && ( )} {/* Outliers */} {showOutliers && item.outliers?.map((v, idx) => ( ))} {/* Invisible hit area */} ) } // Horizontal orientation — swap x/y semantics const xMin = scale(item.min) const xQ1 = scale(item.q1) const xMed = scale(item.median) const xMean = item.mean !== undefined ? scale(item.mean) : null const xQ3 = scale(item.q3) const xMax = scale(item.max) const y1 = cx - halfWidth const y2 = cx + halfWidth const boxPathH = notched ? [ `M ${xQ1} ${y2}`, `L ${xMed - notchDepth} ${y2}`, `L ${xMed} ${y2 - notchDepth * 0.7}`, `L ${xMed + notchDepth} ${y2}`, `L ${xQ3} ${y2}`, `L ${xQ3} ${y1}`, `L ${xMed + notchDepth} ${y1}`, `L ${xMed} ${y1 + notchDepth * 0.7}`, `L ${xMed - notchDepth} ${y1}`, `L ${xQ1} ${y1}`, "Z", ].join(" ") : null return ( onHover(item, e)} onMouseLeave={onLeave} opacity={isHovered ? 1 : 0.9} style={{ cursor: "default" }} > {/* Whisker: min → Q1 */} {/* Whisker: Q3 → max */} {/* Whisker caps */} {/* IQR Box */} {notched ? ( ) : ( )} {/* Median line */} {/* Mean diamond */} {showMean && xMean !== null && ( )} {/* Outliers */} {showOutliers && item.outliers?.map((v, idx) => ( ))} {/* Invisible hit area */} ) } // ── BoxPlotChart ─────────────────────────────────────────────────────────── export function BoxPlotChart({ data, title, subtitle, footer, orientation = "vertical", height = 320, showGrid = true, showMean = true, showOutliers = true, notched = false, valueFormatter, format, decimals, currency, abbreviate, loading = false, locale: localeProp, className, ...props }: BoxPlotChartProps) { const locale = useUILocale(localeProp) // Hooks must be called unconditionally before any early returns const containerRef = React.useRef(null) const [width, setWidth] = React.useState(480) const [tooltip, setTooltip] = React.useState(null) React.useEffect(() => { const el = containerRef.current if (!el) return let raf = 0 const ro = new ResizeObserver(([entry]) => { cancelAnimationFrame(raf) raf = requestAnimationFrame(() => setWidth(entry.contentRect.width)) }) ro.observe(el) setWidth(el.clientWidth) return () => { cancelAnimationFrame(raf) ro.disconnect() } }, []) const fmt = React.useCallback( (v: number) => formatChartValue(v, { format, decimals, locale, currency, abbreviate, valueFormatter, }), [valueFormatter, format, decimals, locale, currency, abbreviate] ) if (loading) { return ( ) } if (data.length === 0) { return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)}

{UI_I18N[locale].emptyState.noData}

{UI_I18N[locale].emptyState.dataWillAppear}

{footer && (

{footer}

)}

) } const items = resolveColors(data) // Compute domain const allValues = items.flatMap((d) => [ d.min, d.q1, d.median, d.q3, d.max, ...(d.mean !== undefined ? [d.mean] : []), ...(d.outliers ?? []), ]) const domainMin = Math.min(...allValues) const domainMax = Math.max(...allValues) const pad = (domainMax - domainMin) * 0.08 const lo = domainMin - pad const hi = domainMax + pad const ticks = niceTicks(lo, hi, 5) const tickLo = ticks[0] const tickHi = ticks[ticks.length - 1] const m = orientation === "vertical" ? MARGIN_V : MARGIN_H // Drawable area const drawW = Math.max(width - m.left - m.right, 60) const drawH = Math.max(height - m.top - m.bottom, 60) // Value axis scale (value → px from top-left of drawable area) const valueScale = orientation === "vertical" ? (v: number) => drawH - ((v - tickLo) / (tickHi - tickLo)) * drawH : (v: number) => ((v - tickLo) / (tickHi - tickLo)) * drawW // Category axis — evenly split across the band axis const n = items.length const bandSize = (orientation === "vertical" ? drawW : drawH) / n const boxHalf = Math.min(bandSize * 0.28, 32) const centerOf = (i: number) => bandSize * (i + 0.5) return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)}

{/* Floating tooltip */} {tooltip && ( )}

{footer && (

{footer}

)}

) } 50:["$","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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@lema-ds","registryDependencies":["@lema-ds/skeleton","@lema-ds/ui-i18n","@lema-ds/format-utils","@lema-ds/ds-locale-provider"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ds/ds-boxplot-chart.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]