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:T3f48,"use client" import * as React from "react" import { ResponsiveContainer, Treemap, Tooltip } from "recharts" import { cva } from "class-variance-authority" import { ChevronRight, Home, Layers } from "lucide-react" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { formatChartValue, type FormatPreset } from "@/lib/format-utils" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" // ── Types ────────────────────────────────────────────────────────────────── export interface TreeMapItem { name: string value?: number color?: string children?: TreeMapItem[] } interface EnrichedItem extends Omit { color: string /** True when this node has drillable children */ _hasChildren: boolean /** Enriched children for drill-down (separate from recharts' `children`) */ _children?: EnrichedItem[] children?: EnrichedItem[] [key: string]: unknown } export interface TreeMapChartProps extends React.HTMLAttributes { data: TreeMapItem[] title?: string subtitle?: string footer?: React.ReactNode height?: number aspectRatio?: number /** Show name + value labels inside each cell (hidden below size threshold) */ showLabels?: boolean showTooltip?: boolean /** Format the numeric value displayed in labels and tooltip */ 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)", ] // ── Skeleton ─────────────────────────────────────────────────────────────── const TREEMAP_TILES = [ { x: 0, y: 0, w: 57, h: 54 }, { x: 57, y: 0, w: 43, h: 30 }, { x: 57, y: 30, w: 43, h: 24 }, { x: 0, y: 54, w: 34, h: 46 }, { x: 34, y: 54, w: 28, h: 46 }, { x: 62, y: 54, w: 38, h: 24 }, { x: 62, y: 78, w: 38, h: 22 }, ] interface TreeMapChartSkeletonProps { height?: number hasTitle?: boolean hasSubtitle?: boolean hasFooter?: boolean className?: string } function TreeMapChartSkeleton({ height = 360, hasTitle = false, hasSubtitle = false, hasFooter = false, className, }: TreeMapChartSkeletonProps) { return (

{(hasTitle || hasSubtitle) && (

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

)}

{TREEMAP_TILES.map((tile, 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" ) // ── Custom Tooltip ───────────────────────────────────────────────────────── interface TooltipEntry { name?: string value?: number payload?: Record } function ChartTooltip({ active, payload, fmt, }: { active?: boolean payload?: TooltipEntry[] fmt: (v: number) => string }) { if (!active || !payload?.length) return null const entry = payload[0] const name = entry.name ?? (entry.payload?.name as string | undefined) ?? "" const value = entry.value ?? (entry.payload?.value as number | undefined) const color = (entry.payload?.color as string | undefined) ?? "var(--chart-1)" return (

{name}

{value !== undefined && (

{fmt(value)}

)}

) } // ── Helpers ──────────────────────────────────────────────────────────────── function enrichData( items: TreeMapItem[], idx = 0, parentColor?: string ): EnrichedItem[] { return items.map((item, i) => { const color = item.color ?? parentColor ?? CHART_COLORS[(idx + i) % CHART_COLORS.length] const enrichedChildren = item.children?.length ? enrichData(item.children, idx + i + 1, color) : undefined return { ...item, color, _hasChildren: !!item.children?.length, _children: enrichedChildren, children: enrichedChildren, } }) } // ── CustomizedContent ───────────────────────────────────────────────────── interface CellDataProps { x?: number y?: number width?: number height?: number depth?: number name?: string value?: number color?: string _hasChildren?: boolean _children?: EnrichedItem[] } interface CellBehaviorProps { showLabels: boolean fmt: (v: number) => string locale: string onNodeClick?: (name: string, children: EnrichedItem[]) => void } function CustomizedContent(props: CellDataProps & CellBehaviorProps) { const { x = 0, y = 0, width = 0, height = 0, depth = 0, name = "", value = 0, color = "var(--chart-1)", _hasChildren = false, _children, showLabels, fmt, locale, onNodeClick, } = props const formatted = fmt(value) const canLabel = showLabels && width > 64 && height > 44 const nameFontSize = Math.max(Math.min(width / 11, 13), 10) const valueFontSize = Math.max(Math.min(width / 14, 11), 9) const handleClick = () => { if (_hasChildren && _children?.length && onNodeClick) { onNodeClick(name, _children) } } return ( {canLabel && (

{name} {value > 0 && ( {formatted} )} {_hasChildren && height > 60 && ( {UI_I18N[locale as UILocale]?.treemap?.explore ?? "click to explore"} )}

)} ) } // ── TreeMapChart ─────────────────────────────────────────────────────────── export function TreeMapChart({ data, title, subtitle, footer, height = 360, aspectRatio = 4 / 3, showLabels = true, showTooltip = true, valueFormatter, format, decimals, currency, abbreviate, loading = false, locale = "en-US", className, ...props }: TreeMapChartProps) { // 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 enrichedData = React.useMemo(() => enrichData(data), [data]) const [drillStack, setDrillStack] = React.useState< { name: string; items: EnrichedItem[] }[] >([]) const handleNodeClick = React.useCallback( (name: string, children: EnrichedItem[]) => { setDrillStack((prev) => [...prev, { name, items: children }]) }, [] ) const handleBreadcrumbClick = React.useCallback((index: number) => { setDrillStack((prev) => prev.slice(0, index)) }, []) const [prevData, setPrevData] = React.useState(data) if (data !== prevData) { setPrevData(data) if (drillStack.length > 0) setDrillStack([]) } const currentData = drillStack.length > 0 ? drillStack[drillStack.length - 1].items : enrichedData 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}

)}

) } return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)} {drillStack.length > 0 && ( )} ) as unknown as React.ReactElement } > {showTooltip && } />} {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/treemap-chart.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-treemap-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]