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:T7fab,"use client" import * as React from "react" import { Bar, Brush, CartesianGrid, ComposedChart, Line, ReferenceLine as RechartsReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { CandlestickChart as CandlestickIcon } from "lucide-react" 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 LegendPosition = "top" | "bottom" | "left" | "right" export interface CandleDataPoint { date: string open: number high: number low: number close: number volume?: number [key: string]: string | number | undefined } export interface MovingAverageConfig { period: number /** Defaults to next --chart-N token */ color?: string label?: string /** Render as dashed stroke */ dashed?: boolean } export interface CandlestickReferenceLine { value: number label?: string color?: string /** @default true */ dashed?: boolean } export interface CandlestickChartProps extends React.HTMLAttributes { data: CandleDataPoint[] title?: string subtitle?: string footer?: React.ReactNode height?: number /** Color for bullish candles (close ≥ open). Default: green. */ positiveColor?: string /** Color for bearish candles (close < open). Default: red. */ negativeColor?: string /** Compute and overlay simple moving average lines */ movingAverages?: MovingAverageConfig[] /** Horizontal price reference lines — targets, support/resistance levels */ referenceLines?: CandlestickReferenceLine[] /** Render volume bars in the lower section of the chart */ showVolume?: boolean showGrid?: boolean showLegend?: boolean /** @default "bottom" */ legendPosition?: LegendPosition showTooltip?: boolean showBrush?: boolean /** Format price values (Y axis ticks + tooltip) */ valueFormatter?: (value: number) => string format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean /** Format date strings (X axis ticks + tooltip header) */ dateFormatter?: (date: string) => string /** Show animated skeleton in place of the chart while data loads */ loading?: boolean locale?: UILocale } // ── Constants ────────────────────────────────────────────────────────────── const POSITIVE_COLOR = "var(--success)" const NEGATIVE_COLOR = "var(--destructive)" /** Colors assigned in order to movingAverages when no color is specified */ const MA_COLORS = [ "var(--chart-1)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", ] // ── Skeleton ─────────────────────────────────────────────────────────────── // 10 candles: alternating up/down, x positions 5..95 const CANDLE_DATA = [ { x: 5, high: 18, open: 52, close: 38, low: 68 }, // down (close < open) { x: 15, high: 28, open: 40, close: 55, low: 72 }, // up { x: 25, high: 22, open: 58, close: 42, low: 75 }, // down { x: 35, high: 32, open: 44, close: 60, low: 78 }, // up { x: 45, high: 20, open: 55, close: 40, low: 70 }, // down { x: 55, high: 35, open: 42, close: 58, low: 80 }, // up { x: 65, high: 25, open: 60, close: 45, low: 82 }, // down { x: 75, high: 30, open: 48, close: 62, low: 76 }, // up { x: 85, high: 15, open: 62, close: 48, low: 85 }, // down { x: 95, high: 38, open: 45, close: 60, low: 78 }, // up ] const CANDLE_YAXIS_WIDTHS = [28, 20, 24, 18, 22] const CANDLE_XAXIS_WIDTHS = [24, 28, 22, 26, 24, 28, 22, 26, 24, 28] interface CandlestickChartSkeletonProps { height?: number hasTitle?: boolean hasSubtitle?: boolean hasFooter?: boolean className?: string } function CandlestickChartSkeleton({ height = 360, hasTitle = false, hasSubtitle = false, hasFooter = false, className, }: CandlestickChartSkeletonProps) { return (

{(hasTitle || hasSubtitle) && (

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

)}

{/* Y-axis tick labels */}

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

{/* Chart area with SVG candles */}

{/* X-axis tick labels */}

{CANDLE_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 defaultDateFmt(date: string, locale = "en-US"): string { try { const d = new Date(date) if (isNaN(d.getTime())) return date return d.toLocaleDateString(locale, { month: "short", day: "numeric", }) } catch { return date } } function fullDateFmt(date: string, locale = "en-US"): string { try { const d = new Date(date) if (isNaN(d.getTime())) return date return d.toLocaleDateString(locale, { year: "numeric", month: "short", day: "numeric", }) } catch { return date } } function computeMA( data: CandleDataPoint[], period: number ): (number | undefined)[] { return data.map((_, i) => { if (i < period - 1) return undefined const sum = data .slice(i - period + 1, i + 1) .reduce((s, d) => s + d.close, 0) return sum / period }) } function normalizeMA( raw: MovingAverageConfig[] ): Required[] { return raw.map((ma, i) => ({ period: ma.period, color: ma.color ?? MA_COLORS[i % MA_COLORS.length], label: ma.label ?? `MA ${ma.period}`, dashed: ma.dashed ?? false, })) } type EnrichedPoint = CandleDataPoint & Record function enrichData( data: CandleDataPoint[], mas: Required[] ): EnrichedPoint[] { const result: EnrichedPoint[] = data.map((d) => ({ ...d })) mas.forEach((ma) => { const values = computeMA(data, ma.period) values.forEach((v, i) => { result[i][`_ma${ma.period}`] = v }) }) return result } /** Full high/low range — the bar spans the entire wick */ const candleRangeKey = (entry: unknown): [number, number] => { const d = entry as CandleDataPoint return [d.low, d.high] } // ── Candlestick Shape ────────────────────────────────────────────────────── interface CandleShapeProps { x?: number y?: number width?: number height?: number payload?: CandleDataPoint positiveColor: string negativeColor: string } function CandleShape({ x = 0, y = 0, width = 0, height = 0, payload, positiveColor, negativeColor, }: CandleShapeProps) { if (!payload || width <= 0 || height <= 0) return null const { open, close, high, low } = payload const isUp = close >= open const color = isUp ? positiveColor : negativeColor const center = x + width / 2 const range = high - low const ratio = range > 0 ? height / range : 0 // Body rect coordinates within the full wick bar const bodyTop = ratio > 0 ? y + (high - Math.max(open, close)) * ratio : y const bodyBottom = ratio > 0 ? y + (high - Math.min(open, close)) * ratio : y const bodyH = Math.max(bodyBottom - bodyTop, 1.5) // Body width — leave 1px inset on each side const bx = x + 1 const bw = Math.max(width - 2, 2) return ( {/* Wick — thin vertical line covering the full high/low range */} {/* Body — fills between open and close */} ) } // ── Volume Bar Shape ─────────────────────────────────────────────────────── interface VolumeShapeProps { x?: number y?: number width?: number height?: number payload?: CandleDataPoint positiveColor: string negativeColor: string } function VolumeShape({ x = 0, y = 0, width = 0, height = 0, payload, positiveColor, negativeColor, }: VolumeShapeProps) { if (!payload || width <= 0 || height <= 0) return null const isUp = payload.close >= payload.open const color = isUp ? positiveColor : negativeColor return ( ) } // ── Custom Tooltip ───────────────────────────────────────────────────────── function CandleTooltip({ active, payload, positiveColor, negativeColor, valueFmt, locale = "en-US", }: { active?: boolean payload?: Array<{ payload: EnrichedPoint name?: string value?: unknown color?: string strokeDasharray?: string }> positiveColor: string negativeColor: string valueFmt: (v: number) => string locale?: UILocale }) { if (!active || !payload?.length) return null const candle = payload.find((p) => Array.isArray(p.value))?.payload as CandleDataPoint | undefined if (!candle) return null const isUp = candle.close >= candle.open const color = isUp ? positiveColor : negativeColor const change = candle.close - candle.open const changePct = candle.open !== 0 ? (change / candle.open) * 100 : 0 const sign = change >= 0 ? "+" : "" // MA line entries const maEntries = payload.filter( (p) => !Array.isArray(p.value) && p.name && p.name.startsWith("MA ") ) return (

{/* Header: date + change badge */}

{fullDateFmt(candle.date, locale)}

{sign} {valueFmt(change)} ({sign} {changePct.toFixed(2)}%)

{/* OHLC */}

{[ { label: UI_I18N[locale].candlestick.open, value: candle.open, extra: false, }, { label: UI_I18N[locale].candlestick.high, value: candle.high, extra: false, }, { label: UI_I18N[locale].candlestick.low, value: candle.low, extra: false, }, { label: UI_I18N[locale].candlestick.close, value: candle.close, extra: true, }, ].map(({ label, value, extra }) => (

{label} {valueFmt(value)}

))}

{/* Volume */} {candle.volume !== undefined && (

{UI_I18N[locale].candlestick.volume} {formatChartValue(candle.volume, { locale })}

)} {/* MA values */} {maEntries.length > 0 && (

{maEntries.map((ma) => (

{ma.name} {typeof ma.value === "number" ? valueFmt(ma.value) : "—"}

))}

)}

) } // ── Custom Legend ────────────────────────────────────────────────────────── interface LegendPayloadEntry { value: string color: string payload?: { strokeDasharray?: string } } function ChartLegend({ payload, hiddenSeries, onToggle, positiveColor, negativeColor, vertical = false, locale = "en-US", }: { payload?: LegendPayloadEntry[] hiddenSeries?: Set onToggle?: (name: string) => void positiveColor: string negativeColor: string vertical?: boolean locale?: UILocale }) { const maItems = payload ?? [] return (

{/* Static bull/bear indicators */} {[ { label: UI_I18N[locale].candlestick.bullish, color: positiveColor, hollow: true, }, { label: UI_I18N[locale].candlestick.bearish, color: negativeColor, hollow: false, }, ].map(({ label, color, hollow }) => (

{label}

))} {/* Toggleable MA line items */} {maItems.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 pad = 6 const estW = label.length * 6 + pad * 2 return ( {label} ) } // ── Brush Handle ─────────────────────────────────────────────────────────── 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 ( ) } // ── CandlestickChart ─────────────────────────────────────────────────────── export function CandlestickChart({ data, title, subtitle, footer, height = 360, positiveColor = POSITIVE_COLOR, negativeColor = NEGATIVE_COLOR, movingAverages, referenceLines, showVolume = false, showGrid = true, showLegend = false, legendPosition = "bottom", showTooltip = true, showBrush = false, valueFormatter, format, decimals, currency, abbreviate, dateFormatter, loading = false, locale = "en-US", className, ...props }: CandlestickChartProps) { // Hooks must be called unconditionally before any early returns const valueFmt = React.useCallback( (v: number) => formatChartValue(v, { format, decimals, locale, currency, abbreviate, valueFormatter, }), [valueFormatter, format, decimals, locale, currency, abbreviate] ) const dateFmt = React.useCallback( (d: string) => dateFormatter?.(d) ?? defaultDateFmt(d, locale), [dateFormatter, locale] ) const resolvedMAs = React.useMemo( () => normalizeMA(movingAverages ?? []), [movingAverages] ) const enrichedData = React.useMemo( () => enrichData(data, resolvedMAs), [data, resolvedMAs] ) const legendPayload = React.useMemo( () => resolvedMAs.map((ma) => ({ value: ma.label, color: ma.color, payload: { strokeDasharray: ma.dashed ? "5 3" : undefined }, })), [resolvedMAs] ) const maxVolume = React.useMemo( () => Math.max(...data.map((d) => d.volume ?? 0)), [data] ) 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 }) }, []) const axisStyle = { fontSize: "12px", fill: "var(--muted-foreground)" } // 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 priceAxisWidth = measureAxisWidth( [0, ...data.flatMap((d) => [d.high, d.low, d.open, d.close])], valueFmt, { min: 56 } ) 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}

}

)} {showGrid && ( )} {/* Price Y axis */} {/* Volume Y axis — inflated domain pushes bars to the bottom ~20% */} {showVolume && maxVolume > 0 && ( )} {showTooltip && ( ( )} cursor={{ fill: "var(--muted)", opacity: 0.15 }} /> )} {/* Reference lines */} {referenceLines?.map((rl, i) => ( ( ) : undefined } /> ))} {/* Volume bars — rendered first so candles appear on top */} {showVolume && maxVolume > 0 && ( { const p = shapeProps as VolumeShapeProps & { payload?: CandleDataPoint } return ( ) }} /> )} {/* Moving average lines */} {resolvedMAs.map((ma) => ( ))} {/* Candlestick bars — rendered last to appear above volume */} { const p = shapeProps as CandleShapeProps & { payload?: CandleDataPoint } return ( ) }} /> {showBrush && ( ) as React.ReactElement} tickFormatter={() => ""} /> )} {showLegend && ( )} {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":[["$","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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","ui-i18n","format-utils","chart-axis-width"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/candlestick-chart.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-candlestick-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]