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:T6061,"use client" import * as React from "react" import { Bar, BarChart as RechartsBarChart, Brush, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts" import { cva } from "class-variance-authority" import { BarChart2 } from "lucide-react" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { formatChartValue, type FormatPreset } from "@/lib/format-utils" import { measureAxisWidth } from "@/lib/chart-axis-width" // ── Types ────────────────────────────────────────────────────────────────── export type BarOrientation = "vertical" | "horizontal" export type LegendPosition = "top" | "bottom" | "left" | "right" export interface BarChartKey { key: string label?: string /** Defaults to the next --chart-N token */ color?: string } export interface BarChartProps extends React.HTMLAttributes { data: Record[] /** Keys to render as bars — accepts plain strings or { key, label, color } */ dataKeys: BarChartKey[] | string[] /** Object key mapped to the category axis (X on vertical, Y on horizontal) */ categoryKey: string title?: string subtitle?: string footer?: React.ReactNode /** "vertical" = bars point up (default); "horizontal" = bars point right */ orientation?: BarOrientation /** Chart canvas height in px — container width is always 100% */ height?: number showGrid?: boolean showLegend?: boolean /** @default "bottom" */ legendPosition?: LegendPosition showTooltip?: boolean /** Stack all bars into a single column/row */ stacked?: boolean /** Fixed bar thickness in px; recharts auto-sizes when omitted */ barSize?: number /** Round the leading edge of each bar */ rounded?: boolean /** Format the value axis tick labels and tooltip values */ valueFormatter?: (value: number) => string /** * Show a range brush below the chart to scroll and zoom the category axis. * Works with vertical orientation only. The brush occupies ~30 px of the * chart height, so increase `height` accordingly when enabling. */ showBrush?: boolean format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean /** Show animated skeleton in place of the chart while data loads */ loading?: boolean locale?: UILocale /** Label centred on the horizontal (category/value) axis */ xAxisLabel?: string /** Label centred on the vertical (value/category) axis */ yAxisLabel?: string } // ── Constants ────────────────────────────────────────────────────────────── const CHART_COLORS = [ "var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", ] const CORNER_RADIUS = 4 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" }, } // ── Skeleton ─────────────────────────────────────────────────────────────── // Vertical orientation skeleton data const SKELETON_BAR_HEIGHTS = [45, 72, 54, 86, 38, 78, 62, 50] const SKELETON_YAXIS_WIDTHS = [28, 20, 24, 18] const SKELETON_XAXIS_WIDTHS = [28, 36, 24, 32, 28, 20, 34, 26] // Horizontal orientation skeleton data const SKELETON_H_BAR_WIDTHS = [65, 42, 78, 35, 55, 82, 48] const SKELETON_H_YAXIS_WIDTHS = [52, 40, 60, 44, 56, 36, 50] const SKELETON_H_XAXIS_WIDTHS = [24, 20, 28, 18, 24] interface BarChartSkeletonProps { height?: number hasTitle?: boolean hasSubtitle?: boolean hasFooter?: boolean orientation?: BarOrientation className?: string } function BarChartSkeleton({ height = 280, hasTitle = false, hasSubtitle = false, hasFooter = false, orientation = "vertical", className, }: BarChartSkeletonProps) { return (

{(hasTitle || hasSubtitle) && (

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

)} {orientation === "horizontal" ? (

{/* Faint vertical grid lines */}

{SKELETON_H_XAXIS_WIDTHS.map((_, i) => ( ))}

{/* Y-axis category labels */}

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

{/* Horizontal bars — cascade top to bottom */}

{SKELETON_H_BAR_WIDTHS.map((pct, i) => ( ))}

{/* X-axis value tick labels */}

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

) : (

{/* Faint horizontal grid lines */}

{[0, 1, 2, 3].map((i) => ( ))}

{/* Y-axis tick labels */}

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

{/* Bars — wave cascade from left to right */}

{SKELETON_BAR_HEIGHTS.map((pct, i) => ( ))}

{/* X-axis tick labels */}

{SKELETON_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" ) // ── Custom Tooltip ───────────────────────────────────────────────────────── interface TooltipPayloadEntry { name: string value: number fill: string } function ChartTooltip({ active, payload, label, fmt, }: { active?: boolean payload?: TooltipPayloadEntry[] label?: string fmt: (v: number) => string }) { if (!active || !payload?.length) return null return (

{label}

{payload.map((entry) => (

{entry.name} {fmt(entry.value)}

))}

) } // ── Custom Legend ────────────────────────────────────────────────────────── interface LegendPayloadEntry { value: string color: string } function ChartLegend({ payload, hiddenSeries, onToggle, vertical = false, }: { payload?: LegendPayloadEntry[] hiddenSeries?: Set onToggle?: (name: string) => void vertical?: boolean }) { if (!payload?.length) return null return (

{payload.map((entry, i) => { const hidden = hiddenSeries?.has(entry.value) return (

onToggle?.(entry.value)} onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && onToggle?.(entry.value) } className={cn( "flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 select-none", "transition-opacity focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none", hidden ? "opacity-40" : "hover:opacity-70" )} > {entry.value}

) })}

) } // ── Helpers ──────────────────────────────────────────────────────────────── function normalizeKeys(raw: BarChartKey[] | string[]): BarChartKey[] { return raw.map((k, i) => { const color = CHART_COLORS[i % CHART_COLORS.length] if (typeof k === "string") return { key: k, label: k, color } return { label: k.key, ...k, color: k.color ?? color } }) } // Custom traveller handle for recharts Brush — styled with semantic tokens function BrushHandle(props: { x?: number y?: number width?: number height?: number }): React.ReactElement { const { x = 0, y = 0, width = 8, height = 30 } = props const midY = y + height / 2 return ( ) } function barRadius( orientation: BarOrientation, index: number, total: number, stacked: boolean, rounded: boolean ): number | [number, number, number, number] { if (!rounded) return 0 // For stacked charts only the last bar in the stack gets rounded corners if (stacked && index < total - 1) return 0 const r = CORNER_RADIUS return orientation === "vertical" ? [r, r, 0, 0] // top-left, top-right, bottom-right, bottom-left : [0, r, r, 0] // leading edge is the right side } // ── BarChart ─────────────────────────────────────────────────────────────── export function BarChart({ data, dataKeys, categoryKey, title, subtitle, footer, orientation = "vertical", height = 280, showGrid = true, showLegend = false, legendPosition = "bottom", showTooltip = true, stacked = false, barSize, rounded = true, valueFormatter, format, decimals, currency, abbreviate, showBrush = false, loading = false, locale = "en-US", xAxisLabel, yAxisLabel, className, ...props }: BarChartProps) { // 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 [hiddenSeries, setHiddenSeries] = React.useState>(new Set()) const toggleSeries = React.useCallback((name: string) => { setHiddenSeries((prev) => { const next = new Set(prev) if (next.has(name)) next.delete(name) else next.add(name) return next }) }, []) // 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 (and dropping click events along the way). const renderLegendContent = React.useCallback( (props: { payload?: unknown }) => ( ), [hiddenSeries, toggleSeries, legendPosition] ) 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 keys = normalizeKeys(dataKeys) const stackId = stacked ? "stack" : undefined // recharts layout axis convention is inverted relative to user mental model const rechartsLayout = orientation === "horizontal" ? "vertical" : "horizontal" const axisStyle = { fontSize: "12px", fill: "var(--muted-foreground)", } const axisLabelStyle = { fontSize: "11px", fill: "var(--muted-foreground)", } // Expand chart margins when axis labels are present to avoid clipping const marginBottom = xAxisLabel ? 28 : 4 const marginLeft = yAxisLabel ? 8 : 4 // Sized from the actual formatted tick values (not a fixed guess) so // abbreviated currency ("R$ 800,0 mi") never wraps or clips — see // lib/chart-axis-width.ts. Only feeds the vertical-orientation value axis; // horizontal orientation uses a fixed width for its category axis instead. const yAxisValues = [ 0, ...data.flatMap((d) => keys.map((k) => Number(d[k.key]))), ] const yAxisWidth = measureAxisWidth(yAxisValues, fmt, { padding: yAxisLabel ? 52 : 32, }) const yAxisLabelOffset = yAxisLabel ? 0 : 10 return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)} {showGrid && ( )} {orientation === "vertical" ? ( <> ) : ( <> )} {showTooltip && ( } cursor={{ fill: "var(--muted)", opacity: 0.4, radius: 4, }} /> )} {showLegend && ( )} {keys.map((k, i) => ( ))} {showBrush && orientation === "vertical" && ( ) as React.ReactElement} tickFormatter={(v) => (typeof v === "string" ? v : String(v))} /> )} {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","chart-axis-width"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/bar-chart.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-bar-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]