4d: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"] 4e: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"] 4f:T21fc,"use client" import * as React from "react" import { Bar, BarChart as RechartsBarChart, CartesianGrid, Cell, XAxis, YAxis, } 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, type FormatPreset } from "@/lib/format-utils" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart" // ── Types ────────────────────────────────────────────────────────────────── export type WaterfallEntryType = "start" | "positive" | "negative" | "end" export interface WaterfallEntry { name: string value: number /** "start" = first total bar, "end" = final total bar, "positive" = gain, "negative" = loss */ type?: WaterfallEntryType } export interface WaterfallChartProps extends React.HTMLAttributes { data: WaterfallEntry[] title?: string subtitle?: string footer?: React.ReactNode height?: number showGrid?: boolean showTooltip?: boolean valueFormatter?: (value: number) => string format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean loading?: boolean locale?: UILocale } // ── Variants ─────────────────────────────────────────────────────────────── export const waterfallChartContainerVariants = cva("w-full", { variants: {}, }) // ── Helpers ──────────────────────────────────────────────────────────────── interface WaterfallBarData { name: string value: number type: WaterfallEntryType /** Y offset for the floating bar */ base: number /** Display value (absolute) for labels */ displayValue: number } function computeWaterfallData(entries: WaterfallEntry[]): WaterfallBarData[] { let running = 0 return entries.map((entry, i) => { const type = entry.type ?? (i === 0 ? "start" : "positive") const isTotal = type === "start" || type === "end" let base = 0 let value = entry.value if (isTotal) { base = 0 value = entry.value } else if (type === "positive") { base = running value = entry.value } else { // negative base = running + entry.value // entry.value is negative value = -entry.value // height is positive } if (isTotal) { running = entry.value } else { running += entry.value } return { name: entry.name, value, type, base, displayValue: entry.value, } }) } // ── WaterfallChart ───────────────────────────────────────────────────────── export function WaterfallChart({ data, title, subtitle, footer, height = 320, showGrid = true, showTooltip = true, valueFormatter, format, decimals = 0, currency = "USD", abbreviate = false, loading = false, locale = "en-US", className, ...props }: WaterfallChartProps) { const formatValue = React.useCallback( (v: number) => { if (valueFormatter) return valueFormatter(v) return formatChartValue(v, { format, decimals, locale, currency, abbreviate, }) }, [valueFormatter, format, decimals, locale, currency, abbreviate] ) // ── Loading ───────────────────────────────────────────────────────────── if (loading) { return ( {(title || subtitle) && ( {title && } {subtitle && } )} {footer && {footer}} ) } // ── Empty ──────────────────────────────────────────────────────────────── if (data.length === 0) { return ( {(title || subtitle) && ( {title && {title}} {subtitle && {subtitle}} )}

{UI_I18N[locale].emptyState.noData}

{footer && {footer}} ) } // ── Compute ────────────────────────────────────────────────────────────── const computed = computeWaterfallData(data) const chartConfig: Record = { value: { label: "Value", color: "var(--chart-1)" }, } // Recharts trick: use a "base" invisible bar (no fill) to shift the real bar const rechartsData = computed.map((d) => ({ name: d.name, base: d.base, value: d.value, type: d.type, displayValue: d.displayValue, })) const getBarColor = (type: WaterfallEntryType) => { if (type === "start" || type === "end") return "var(--muted-foreground)" if (type === "positive") return "var(--chart-1)" return "var(--destructive)" } return ( {(title || subtitle) && ( {title && {title}} {subtitle && {subtitle}} )} {showGrid && ( )} {showTooltip && ( { const display = item.payload?.displayValue ?? value return formatValue(Number(display)) }} labelClassName="font-medium text-foreground" /> } /> )} {/* Invisible "base" bar to lift the real bar */} {/* Real bar */} {rechartsData.map((entry, i) => ( ))} {footer && {footer}} ) } 4c:["$","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,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["chart","skeleton","card","ui-i18n","format-utils"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/waterfall-chart.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-waterfall-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]