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:T6329,"use client" import * as React from "react" import { Area, AreaChart as RechartsAreaChart, Brush, CartesianGrid, Legend, ReferenceLine as RechartsReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts" import { cva } from "class-variance-authority" import { TrendingUp } 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 ────────────────────────────────────────────────────────────────── /** "line" = plain strokes; "area" = gradient fill; "area-stacked" = stacked gradient areas */ export type LineChartVariant = "line" | "area" | "area-stacked" export type LegendPosition = "top" | "bottom" | "left" | "right" /** When data-point dots are rendered */ export type LineDotVisibility = "none" | "hover" | "always" /** Line interpolation style */ export type LineCurve = "linear" | "smooth" | "step" export interface LineChartKey { key: string label?: string /** Defaults to the next --chart-N token */ color?: string /** Render as a dashed stroke — useful for projected or estimated series */ dashed?: boolean } export interface LineChartReferenceLine { value: number label?: string color?: string /** @default true */ dashed?: boolean } export interface LineChartProps extends React.HTMLAttributes { data: Record[] /** Keys to plot — accepts plain strings or { key, label, color, dashed } objects */ dataKeys: LineChartKey[] | string[] /** Object key mapped to the category (X) axis */ categoryKey: string title?: string subtitle?: string footer?: React.ReactNode variant?: LineChartVariant curve?: LineCurve /** When to show data-point dots */ dots?: LineDotVisibility height?: number showGrid?: boolean showLegend?: boolean /** @default "bottom" */ legendPosition?: LegendPosition showTooltip?: boolean /** Bridge over null / undefined values instead of breaking the line */ connectNulls?: boolean /** Horizontal threshold lines — targets, SLA limits, averages, etc. */ referenceLines?: LineChartReferenceLine[] /** Format 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. * 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 CURVE_TYPE = { linear: "linear", smooth: "monotone", step: "step", } as const 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 ─────────────────────────────────────────────────────────────── const SKELETON_YAXIS_WIDTHS = [28, 20, 24, 18] const SKELETON_XAXIS_WIDTHS = [28, 36, 24, 32, 28, 20, 34, 26] const SKELETON_LINE_DOTS = [ [0, 65], [13, 40], [26, 52], [39, 20], [52, 35], [65, 10], [78, 28], [91, 15], ] interface LineChartSkeletonProps { height?: number hasTitle?: boolean hasSubtitle?: boolean hasFooter?: boolean className?: string } function LineChartSkeleton({ height = 280, hasTitle = false, hasSubtitle = false, hasFooter = false, className, }: LineChartSkeletonProps) { const polylinePoints = SKELETON_LINE_DOTS.map(([x, y]) => `${x},${y}`).join( " " ) const areaPath = `M 0,65 L 13,40 L 26,52 L 39,20 L 52,35 L 65,10 L 78,28 L 91,15 L 91,100 L 0,100 Z` return (

{(hasTitle || hasSubtitle) && (

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

)}

{/* Y-axis tick labels */}

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

{/* Chart area with SVG line */}

{/* 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 stroke: string color: string strokeDasharray?: 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) => { const color = entry.stroke ?? entry.color const isDashed = !!entry.strokeDasharray return (

{/* Line swatch — solid or dashed to mirror the series style */} {entry.name} {fmt(entry.value)}

) })}

) } // ── Custom Legend ────────────────────────────────────────────────────────── interface LegendPayloadEntry { value: string color: string payload?: { strokeDasharray?: 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 isDashed = !!entry.payload?.strokeDasharray 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}

) })}

) } // ── Reference Line Label ─────────────────────────────────────────────────── function ReferenceLineLabel({ viewBox, label, color, }: { viewBox?: { x?: number; width?: number; y?: number } label: string color: string }) { const x = (viewBox?.x ?? 0) + (viewBox?.width ?? 0) const y = viewBox?.y ?? 0 const padding = 6 const estimatedWidth = label.length * 6 + padding * 2 return ( {label} ) } // ── Helpers ──────────────────────────────────────────────────────────────── // 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 normalizeKeys( raw: LineChartKey[] | string[] ): Required[] { return raw.map((k, i) => { const color = CHART_COLORS[i % CHART_COLORS.length] if (typeof k === "string") return { key: k, label: k, color, dashed: false } return { label: k.key, dashed: false, ...k, color: k.color ?? color } }) } // ── LineChart ────────────────────────────────────────────────────────────── export function LineChart({ data, dataKeys, categoryKey, title, subtitle, footer, variant = "line", curve = "smooth", dots = "hover", height = 280, showGrid = true, showLegend = false, legendPosition = "bottom", showTooltip = true, connectNulls = false, referenceLines, valueFormatter, format, decimals, currency, abbreviate, showBrush = false, loading = false, locale = "en-US", xAxisLabel, yAxisLabel, className, ...props }: LineChartProps) { // 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] ) // useId produces strings like ":r0:" — strip non-alphanumeric for safe SVG IDs const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "") 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 isArea = variant !== "line" const curveType = CURVE_TYPE[curve] 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. 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}

}

)} {/* Gradient fills — only injected when variant is area or area-stacked */} {isArea && ( {keys.map((k) => ( ))} )} {showGrid && ( )} {showTooltip && ( } cursor={{ stroke: "var(--border)", strokeWidth: 1, strokeDasharray: "4 3", }} /> )} {showLegend && ( )} {referenceLines?.map((ref, i) => ( ( ) : undefined } /> ))} {keys.map((k) => ( ))} {showBrush && ( ) 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/line-chart.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-line-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]