4a: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"] 4b: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"] 4c:Tba5,"use client"; import { cn } from "@/lib/utils"; import { TradingChartSkeleton } from "./components/skeleton"; import type { TradingChartProps } from "./types"; import { useKlines } from "./hooks/use-klines"; import { useChartInstance } from "./hooks/use-chart-instance"; import { useChartTheme } from "./hooks/use-chart-theme"; import { useChartData } from "./hooks/use-chart-data"; import { useLiveCandles } from "./hooks/use-live-candles"; import { useBoundaryNotification } from "./hooks/use-boundary-notification"; function TradingChart({ symbol = "BTCUSDT", timeframe = "1h", trades = [], candles: candlesProp, live = true, height = 500, limit = 500, showTooltips = true, className, }: TradingChartProps) { const hasOverrideCandles = candlesProp !== undefined; const { candles, setCandles, loading, error, fetchMore, hasMoreHistory } = useKlines( symbol, timeframe, { limit, enabled: !hasOverrideCandles }, ); const effectiveCandles = candlesProp ?? candles; const { containerRef, stateRef, chartEpoch } = useChartInstance({ symbol, height, candles: effectiveCandles, trades, timeframe, showTooltips, loading, hasOverrideCandles, // With prop-supplied candles there is no more history to fetch. hasMoreHistory: hasOverrideCandles ? false : hasMoreHistory, fetchMore, }); useChartTheme(stateRef); useChartData({ stateRef, chartEpoch, candles: effectiveCandles, trades, symbol, timeframe }); useLiveCandles({ stateRef, symbol, timeframe, enabled: live && !hasOverrideCandles, setCandles, }); const showNoMoreData = useBoundaryNotification({ hasMoreHistory, loading, candlesCount: candles.length, hasOverrideCandles, symbol, timeframe, }); return (

{loading && effectiveCandles.length === 0 && ( )} {error && effectiveCandles.length === 0 && !loading && (

Market data is unavailable ({error}).

)} {showNoMoreData && (

No more historical data

)}

); } export { TradingChart }; 4d:T577,export type Timeframe = "1m" | "5m" | "15m" | "1h" | "4h" | "8h" | "1d" | "1w" | "1M"; export interface OhlcvCandle { /** Unix seconds (candle open time). */ time: number; open: number; high: number; low: number; close: number; volume: number; /** True while the candle is still open (live updates). */ isForming?: boolean; } export type TradeSide = "BUY" | "SELL"; export interface TradeSignal { id: string; /** Execution time in epoch milliseconds. */ ts: number; side: TradeSide; /** Execution price; with quantity set, tooltips show price * quantity as position size. */ price: number; quantity?: number; note?: string; category?: "trade" | "indicator"; indicator?: string; value?: number; /** Links buy/sell pairs, e.g. for PnL grouping. */ tradeId?: string; } export interface TradingChartProps { /** Binance spot symbol, e.g. "BTCUSDT". */ symbol?: string; timeframe?: Timeframe; /** Trade/indicator markers to draw on the chart. Always the user's own data. */ trades?: TradeSignal[]; /** Provide your own candles to bypass the bundled Binance fetcher. */ candles?: OhlcvCandle[]; /** Poll Binance for live candle updates. Ignored when candles is set. */ live?: boolean; height?: number; /** Number of candles for the initial load (Binance max 1000). */ limit?: number; showTooltips?: boolean; className?: string; } 4e:Tc04,"use client"; import { useMemo } from "react"; import { cn } from "@/lib/utils"; export interface TradingChartSkeletonProps { className?: string; /** Matches TradingChartProps["height"]. */ height?: number; } export interface GhostCandle { up: boolean; bodyHeightPct: number; wickHeightPct: number; } const GHOST_CANDLE_COUNT = 48; /** Deterministic heights; Math.random would cause a hydration mismatch. */ export function generateGhostCandles(count: number): GhostCandle[] { return Array.from({ length: count }, (_, i) => { const bodyHeightPct = 25 + 35 * Math.abs(Math.sin(i * 0.7)); const wickHeightPct = Math.min(bodyHeightPct + 12 + (i % 3) * 4, 100); return { up: i % 2 === 0, bodyHeightPct, wickHeightPct }; }); } export function TradingChartSkeleton({ className, height = 500 }: TradingChartSkeletonProps) { const candles = useMemo(() => generateGhostCandles(GHOST_CANDLE_COUNT), []); return (

{/* pr-14 keeps the candles clear of the price-axis placeholder column. */}

{candles.map((candle, i) => (

))}

{Array.from({ length: 5 }, (_, i) => (

))}

Loading market data

); } 4f:T1774,"use client"; import { useEffect, useRef, useState } from "react"; import type { RefObject } from "react"; import { useTheme } from "next-themes"; import type { IChartApi, ISeriesApi, ISeriesMarkersPluginApi, LogicalRange, Time, } from "lightweight-charts"; import type { OhlcvCandle, Timeframe, TradeSignal } from "../types"; import { CANDLE_SERIES_OPTIONS, getChartOptions } from "../lib/chart-options"; import { createSignalTooltip, type SignalTooltip } from "../lib/signal-tooltip"; /** Props snapshot for the imperative chart handlers, so they never see stale closures. */ export interface LatestChartProps { candles: OhlcvCandle[]; trades: TradeSignal[]; timeframe: Timeframe; showTooltips: boolean; loading: boolean; hasOverrideCandles: boolean; hasMoreHistory: boolean; fetchMore: (beforeSec: number) => Promise; } /** Mutable chart runtime shared by the trading chart hooks. */ export interface ChartState { chart: IChartApi | null; series: ISeriesApi<"Candlestick"> | null; markers: ISeriesMarkersPluginApi | null; latest: LatestChartProps; /** True once the initial fitContent ran for the current chart instance. */ autoFitDone: boolean; lastCandlesLength: number; /** Last seen `${symbol}-${timeframe}`, to detect dataset resets. */ lastKey: string; /** Open time of the newest closed bar merged from live polling. */ lastClosedTime: number; /** True between a symbol/timeframe reset and the next full setData. */ isResetting: boolean; /** Set by pagination, consumed by the next data-sync run (survives until read). */ isPrependingHistory: boolean; oldestTimestamp: number | null; } export interface UseChartInstanceOptions extends LatestChartProps { symbol: string; height: number; } /** Owns the chart lifecycle: lazy init, tooltip, pagination, resize, disposal. */ export function useChartInstance(options: UseChartInstanceOptions): { containerRef: RefObject; stateRef: RefObject; /** Bumped when a freshly initialized chart instance is ready for data. */ chartEpoch: number; } { const { symbol, height, ...latest } = options; const { resolvedTheme } = useTheme(); const containerRef = useRef(null); const tooltipRef = useRef(null); const [chartEpoch, setChartEpoch] = useState(0); const stateRef = useRef({ chart: null, series: null, markers: null, latest, autoFitDone: false, lastCandlesLength: 0, lastKey: `${symbol}-${latest.timeframe}`, lastClosedTime: 0, isResetting: false, isPrependingHistory: false, oldestTimestamp: null, }); useEffect(() => { stateRef.current.latest = latest; }); useEffect(() => { if (!latest.showTooltips) tooltipRef.current?.hide(); }, [latest.showTooltips]); useEffect(() => { const state = stateRef.current; let disposed = false; let resizeObserver: ResizeObserver | null = null; let chartInitialized = false; let isLoadingMore = false; const handleVisibleRangeChange = async (range: LogicalRange | null) => { if (!range || isLoadingMore || !state.oldestTimestamp || !state.latest.hasMoreHistory) { return; } // A full-dataset range is the initial fitContent or a zoom-out, not a // scroll toward history; only paginate on a real move to the left edge. if (range.to >= state.latest.candles.length - 2) return; if (range.from >= 50) return; isLoadingMore = true; try { const older = await state.latest.fetchMore(state.oldestTimestamp); // Only flag a prepend when candles were actually fetched. state.isPrependingHistory = older.length > 0; } finally { isLoadingMore = false; } }; const initChart = async (container: HTMLDivElement) => { const { createChart, CandlestickSeries, createSeriesMarkers } = await import( "lightweight-charts" ); if (disposed) return; const chart = createChart(container, { width: container.clientWidth, ...getChartOptions(resolvedTheme, height), }); const series = chart.addSeries(CandlestickSeries, CANDLE_SERIES_OPTIONS); state.chart = chart; state.series = series; state.markers = createSeriesMarkers(series, []); const tooltip = createSignalTooltip({ container, getCandles: () => state.latest.candles, getTrades: () => state.latest.trades, getTimeframe: () => state.latest.timeframe, isEnabled: () => state.latest.showTooltips, }); tooltipRef.current = tooltip; chart.subscribeCrosshairMove(tooltip.onCrosshairMove); chart.timeScale().fitContent(); chart.timeScale().subscribeVisibleLogicalRangeChange(handleVisibleRangeChange); setChartEpoch((epoch) => epoch + 1); }; if (containerRef.current) { resizeObserver = new ResizeObserver((entries) => { const { width, height: rectHeight } = entries[0].contentRect; if (width > 0 && rectHeight > 0 && !chartInitialized) { chartInitialized = true; initChart(containerRef.current!); } else if (width > 0 && chartInitialized && state.chart) { state.chart.applyOptions({ width }); } }); resizeObserver.observe(containerRef.current); } return () => { disposed = true; resizeObserver?.disconnect(); tooltipRef.current?.dispose(); tooltipRef.current = null; state.chart?.remove(); state.chart = null; state.series = null; state.markers = null; // Forces the next data-sync run to setData + fitContent the new instance. state.lastCandlesLength = 0; state.autoFitDone = false; }; // Only reinitialize if height changes. // eslint-disable-next-line react-hooks/exhaustive-deps }, [height]); return { containerRef, stateRef, chartEpoch }; } 50:Tde9,"use client"; import { useEffect } from "react"; import type { RefObject } from "react"; import type { LogicalRange } from "lightweight-charts"; import type { OhlcvCandle, Timeframe, TradeSignal } from "../types"; import { sanitizeCandles } from "../lib/candle-validation"; import { toChartTime } from "../lib/chart-time"; import { alignSignalsToBars, buildSeriesMarkers } from "../lib/markers"; import type { ChartState } from "./use-chart-instance"; export interface UseChartDataOptions { stateRef: RefObject; /** Bumped by useChartInstance when a fresh chart instance is ready for data. */ chartEpoch: number; candles: OhlcvCandle[]; trades: TradeSignal[]; symbol: string; timeframe: Timeframe; } /** Push candles and trade markers into the chart whenever they change. */ export function useChartData({ stateRef, chartEpoch, candles, trades, symbol, timeframe, }: UseChartDataOptions) { // Sync candle data. useEffect(() => { const state = stateRef.current; if (!state.series || !state.chart) return; const key = `${symbol}-${timeframe}`; const keyChanged = state.lastKey !== key; state.lastKey = key; if (candles.length === 0) { if (keyChanged) { state.series.setData([]); state.chart.timeScale().resetTimeScale(); state.autoFitDone = false; state.lastCandlesLength = 0; state.lastClosedTime = 0; state.isResetting = true; } return; } const sanitized = sanitizeCandles(candles); if (sanitized.length === 0) return; // setData only on resets/history injection; streaming goes through series.update(). const numCandlesAdded = sanitized.length - state.lastCandlesLength; const isMajorChange = keyChanged || state.lastCandlesLength === 0 || Math.abs(numCandlesAdded) > 2; if (isMajorChange) { state.isResetting = false; const timeScale = state.chart.timeScale(); const prevLogicalRange: LogicalRange | null = state.autoFitDone ? timeScale.getVisibleLogicalRange() : null; const mapped = sanitized.map((c) => ({ time: toChartTime(c.time, timeframe), open: c.open, high: c.high, low: c.low, close: c.close, })); const deduped = mapped.filter((c, i, arr) => i === 0 || c.time !== arr[i - 1].time); state.series.setData(deduped); if (!state.autoFitDone) { timeScale.fitContent(); state.autoFitDone = true; } const isHistoryPrepend = state.isPrependingHistory; state.isPrependingHistory = false; if (prevLogicalRange && isHistoryPrepend) { // Shift the view by the prepended count so the visible bars stay put. const prependedCount = state.oldestTimestamp ? sanitized.findIndex((c) => c.time === state.oldestTimestamp) : 0; const shift = prependedCount > 0 ? prependedCount : 0; timeScale.setVisibleLogicalRange({ from: prevLogicalRange.from + shift, to: prevLogicalRange.to + shift, }); } } state.lastCandlesLength = sanitized.length; state.oldestTimestamp = sanitized[0].time; }, [stateRef, candles, symbol, timeframe, chartEpoch]); // Sync trade/indicator markers. useEffect(() => { const markers = stateRef.current.markers; if (!markers) return; const aligned = alignSignalsToBars(trades, candles, timeframe); markers.setMarkers(buildSeriesMarkers(aligned)); }, [stateRef, candles, trades, timeframe, chartEpoch]); } 51:Ta14,"use client"; import { useCallback } from "react"; import type { Dispatch, RefObject, SetStateAction } from "react"; import type { OhlcvCandle, Timeframe } from "../types"; import { isValidCandle } from "../lib/candle-validation"; import { normalizeToSeconds, toChartTime } from "../lib/chart-time"; import { useLatestCandlePolling } from "./use-klines"; import type { ChartState } from "./use-chart-instance"; export interface UseLiveCandlesOptions { stateRef: RefObject; symbol: string; timeframe: Timeframe; enabled: boolean; setCandles: Dispatch>; } /** Merge polled live candles into the chart series and the candle state. */ export function useLiveCandles({ stateRef, symbol, timeframe, enabled, setCandles, }: UseLiveCandlesOptions) { const handleNewCandle = useCallback( (candle: OhlcvCandle) => { const state = stateRef.current; if (!state.series || !state.chart) return; if (state.isResetting) return; // Never mix live candles into a static prop-supplied dataset. if (state.latest.hasOverrideCandles) return; // Wait for the initial history, or fitContent would zoom into a 1-2 candle stub. if (state.latest.loading) return; if (!isValidCandle(candle)) return; const normalizedTime = normalizeToSeconds(Number(candle.time)); if (!Number.isFinite(normalizedTime) || normalizedTime <= 0) return; const isForming = candle.isForming === true; // Skip closed bars we already saw. if (!isForming && normalizedTime <= state.lastClosedTime) return; try { state.series.update({ time: toChartTime(normalizedTime, state.latest.timeframe), open: candle.open, high: candle.high, low: candle.low, close: candle.close, }); } catch { // Thrown for updates older than the earliest bar (timeframe transitions). return; } if (!isForming) state.lastClosedTime = normalizedTime; setCandles((prev) => { if (prev.length === 0) return [candle]; const last = prev[prev.length - 1]; const lastTime = Number(last.time); if (normalizedTime === lastTime) { const copy = [...prev]; copy[copy.length - 1] = candle; return copy; } else if (normalizedTime > lastTime) { return [...prev, candle]; } return prev; }); }, [stateRef, setCandles], ); useLatestCandlePolling(symbol, timeframe, enabled, handleNewCandle); } 52:T412,"use client"; import { useEffect, useState } from "react"; import type { Timeframe } from "../types"; export interface UseBoundaryNotificationOptions { hasMoreHistory: boolean; loading: boolean; candlesCount: number; hasOverrideCandles: boolean; symbol: string; timeframe: Timeframe; } /** "No more historical data" toast: auto-dismisses after 4s, re-arms on key change. */ export function useBoundaryNotification({ hasMoreHistory, loading, candlesCount, hasOverrideCandles, symbol, timeframe, }: UseBoundaryNotificationOptions): boolean { const atHistoryBoundary = !hasMoreHistory && !loading && candlesCount > 0 && !hasOverrideCandles; const [dismissedKey, setDismissedKey] = useState(null); useEffect(() => { if (!atHistoryBoundary) return; const timer = setTimeout(() => setDismissedKey(`${symbol}-${timeframe}`), 4000); return () => clearTimeout(timer); }, [atHistoryBoundary, symbol, timeframe]); return atHistoryBoundary && dismissedKey !== `${symbol}-${timeframe}`; } 53:T160b,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import type { OhlcvCandle, Timeframe } from "../types"; import { sanitizeCandles } from "../lib/candle-validation"; // Binance public spot klines. No API key, CORS-enabled, ~1200 weight/min/IP. const BINANCE_KLINES_URL = "https://api.binance.com/api/v3/klines"; /** Binance kline row: [openTimeMs, open, high, low, close, volume, closeTimeMs, ...]. */ export type RawKline = [number, string, string, string, string, string, number, ...unknown[]]; export function normalizeKlines(raw: RawKline[], nowMs: number = Date.now()): OhlcvCandle[] { const out: OhlcvCandle[] = []; for (const k of raw ?? []) { const openMs = Number(k[0]); const open = Number(k[1]); const high = Number(k[2]); const low = Number(k[3]); const close = Number(k[4]); const volume = Number(k[5]); const closeMs = Number(k[6]); if (![openMs, open, high, low, close, volume, closeMs].every(Number.isFinite)) continue; out.push({ time: Math.floor(openMs / 1000), open, high, low, close, volume, isForming: closeMs > nowMs, }); } return out; } export async function fetchKlines( symbol: string, interval: Timeframe, options: { limit?: number; startTime?: number; endTime?: number; signal?: AbortSignal } = {}, ): Promise { const params = new URLSearchParams({ symbol: symbol.toUpperCase(), interval, limit: String(options.limit ?? 500), }); if (options.startTime !== undefined) params.set("startTime", String(options.startTime)); if (options.endTime !== undefined) params.set("endTime", String(options.endTime)); const res = await fetch(`${BINANCE_KLINES_URL}?${params}`, { signal: options.signal }); if (!res.ok) throw new Error(`Binance klines request failed: ${res.status}`); const raw = (await res.json()) as RawKline[]; return normalizeKlines(raw); } /** Fetch historical candles with backward pagination support. */ export function useKlines( symbol: string, timeframe: Timeframe, options: { limit?: number; enabled?: boolean } = {}, ) { const { limit = 500, enabled = true } = options; const [candles, setCandles] = useState([]); const [loading, setLoading] = useState(enabled); const [error, setError] = useState(null); const [hasMoreHistory, setHasMoreHistory] = useState(true); const lastOldestRef = useRef(null); const fetchMore = useCallback( async (beforeSec: number) => { try { const older = await fetchKlines(symbol, timeframe, { limit: 500, endTime: beforeSec * 1000 - 1, }); if (older.length === 0) { setHasMoreHistory(false); return []; } const newOldest = older[0].time; // Oldest timestamp didn't advance: we hit the listing boundary. if (lastOldestRef.current !== null && newOldest >= lastOldestRef.current) { setHasMoreHistory(false); return []; } lastOldestRef.current = newOldest; setCandles((prev) => sanitizeCandles([...older, ...prev])); return older; } catch { setHasMoreHistory(false); return []; } }, [symbol, timeframe], ); useEffect(() => { if (!enabled) return; const controller = new AbortController(); const load = async () => { // Reset state on key param change. setCandles([]); setHasMoreHistory(true); setError(null); setLoading(true); lastOldestRef.current = null; try { const initial = await fetchKlines(symbol, timeframe, { limit, signal: controller.signal }); if (controller.signal.aborted) return; setCandles(sanitizeCandles(initial)); setLoading(false); } catch (err: unknown) { if (controller.signal.aborted || (err as Error).name === "AbortError") return; setError((err as Error).message); setLoading(false); } }; load(); return () => controller.abort(); }, [symbol, timeframe, limit, enabled]); // Forced false while disabled so a mid-fetch toggle can't leave loading stuck. return { candles, setCandles, loading: enabled ? loading : false, error, fetchMore, hasMoreHistory }; } /** Poll Binance for the latest (closed + forming) candles and push them to the chart. */ export function useLatestCandlePolling( symbol: string, timeframe: Timeframe, enabled: boolean, onUpdate: (candle: OhlcvCandle) => void, ) { const timerRef = useRef | null>(null); useEffect(() => { if (!enabled || !symbol) return; let active = true; const intervalFor = (tf: Timeframe): number => { switch (tf) { case "1m": return 4_000; case "5m": case "15m": return 12_000; case "1h": case "4h": case "8h": return 25_000; case "1d": case "1w": case "1M": return 60_000; default: return 30_000; } }; const poll = async () => { try { const latest = await fetchKlines(symbol, timeframe, { limit: 2 }); if (!active) return; for (const candle of latest) onUpdate(candle); } catch { // Retried on the next tick. } if (active) timerRef.current = setTimeout(poll, intervalFor(timeframe)); }; poll(); return () => { active = false; if (timerRef.current) clearTimeout(timerRef.current); }; }, [symbol, timeframe, enabled, onUpdate]); } 54:T5a7,import type { ChartOptions, ColorType, DeepPartial } from "lightweight-charts"; import { BUY_COLOR, SELL_COLOR } from "./markers"; const WICK_COLOR = "#838ca1"; export const CANDLE_SERIES_OPTIONS = { upColor: BUY_COLOR, downColor: SELL_COLOR, borderUpColor: BUY_COLOR, borderDownColor: SELL_COLOR, wickUpColor: WICK_COLOR, wickDownColor: WICK_COLOR, }; /** Theme-dependent chart options, applied at creation and on theme changes. */ export function getThemeOptions(resolvedTheme: string | undefined): DeepPartial { const isDark = resolvedTheme === "dark"; const gridColor = isDark ? "rgba(148,163,184,0.12)" : "rgba(0,0,0,0.05)"; return { layout: { // "solid" = ColorType.Solid; importing the enum would eagerly bundle the library. background: { type: "solid" as ColorType.Solid, color: "rgba(0,0,0,0)" }, textColor: isDark ? "#9CA3AF" : "#374151", }, grid: { vertLines: { color: gridColor }, horzLines: { color: gridColor }, }, }; } /** Full options for createChart. */ export function getChartOptions( resolvedTheme: string | undefined, height: number, ): DeepPartial { return { height, ...getThemeOptions(resolvedTheme), rightPriceScale: { borderVisible: false }, timeScale: { borderVisible: false, timeVisible: true, fixLeftEdge: true, fixRightEdge: true, }, crosshair: { mode: 0 }, }; } 55:T11c1,import type { SeriesMarker, UTCTimestamp } from "lightweight-charts"; import type { OhlcvCandle, TradeSignal } from "../types"; export const BUY_COLOR = "#00c176"; export const SELL_COLOR = "#cf304a"; export const INDICATOR_COLOR = "#8b5cf6"; export type AlignedSignal = TradeSignal & { alignedTime: UTCTimestamp }; export function floorToIntervalSeconds(tsMs: number, interval: string): number { const d = new Date(tsMs); const ms = d.getTime(); const oneMinute = 60 * 1000; const Y = d.getUTCFullYear(), M = d.getUTCMonth(), D = d.getUTCDate(), h = d.getUTCHours(); switch (interval) { case "1m": return Math.floor(ms / oneMinute) * 60; case "5m": return Math.floor(ms / (5 * oneMinute)) * 5 * 60; case "15m": return Math.floor(ms / (15 * oneMinute)) * 15 * 60; case "1h": return Date.UTC(Y, M, D, h, 0, 0) / 1000; case "4h": return Date.UTC(Y, M, D, Math.floor(h / 4) * 4, 0, 0) / 1000; case "8h": return Date.UTC(Y, M, D, Math.floor(h / 8) * 8, 0, 0) / 1000; case "1d": return Date.UTC(Y, M, D, 0, 0, 0) / 1000; case "1w": { // Floor to start of the week (Monday). const dayOfWeek = d.getUTCDay(); // 0=Sun, 1=Mon, ... const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1; return Date.UTC(Y, M, D - daysToMonday, 0, 0, 0) / 1000; } case "1M": return Date.UTC(Y, M, 1, 0, 0, 0) / 1000; default: return Math.floor(ms / 1000); } } export function findClosestBarTime(target: number, orderedTimes: number[]): number { if (!orderedTimes.length) return target; let closest = orderedTimes[0]; let diff = Math.abs(target - closest); for (let i = 1; i < orderedTimes.length; i++) { const cand = orderedTimes[i]; const candDiff = Math.abs(target - cand); if (candDiff < diff) { closest = cand; diff = candDiff; } else if (cand > target && candDiff > diff) { break; } } return closest; } /** Approximate seconds per interval, for the out-of-range tolerance below. */ const INTERVAL_SECONDS: Record = { "1m": 60, "5m": 300, "15m": 900, "1h": 3_600, "4h": 14_400, "8h": 28_800, "1d": 86_400, "1w": 604_800, "1M": 2_678_400, }; export function alignSignalsToBars( signals: TradeSignal[], candles: OhlcvCandle[], interval: string, ): AlignedSignal[] { if (!signals?.length || !candles?.length) return []; const barTimes = candles.map((c) => c.time); const barSet = new Set(barTimes); // Drop signals whose bar isn't loaded yet; they'd pile up on the edge bar. const tolerance = (INTERVAL_SECONDS[interval] ?? 3_600) * 2; return signals.flatMap((signal) => { const snapped = floorToIntervalSeconds(signal.ts, interval); const aligned = barSet.has(snapped) ? snapped : findClosestBarTime(snapped, barTimes); if (Math.abs(aligned - snapped) > tolerance) return []; return [ { ...signal, alignedTime: aligned as UTCTimestamp, }, ]; }); } export function buildSeriesMarkers(aligned: AlignedSignal[]): SeriesMarker[] { const tradeGrouped = new Map(); const indicatorGrouped = new Map(); for (const signal of aligned) { if (signal.category === "indicator") { const indicatorKey = `${signal.alignedTime}`; if (!indicatorGrouped.has(indicatorKey)) indicatorGrouped.set(indicatorKey, []); indicatorGrouped.get(indicatorKey)!.push(signal); continue; } const tradeKey = `${signal.alignedTime}_${signal.side}`; if (!tradeGrouped.has(tradeKey)) tradeGrouped.set(tradeKey, []); tradeGrouped.get(tradeKey)!.push(signal); } const markers: SeriesMarker[] = []; for (const [, signals] of tradeGrouped.entries()) { const isBuy = signals[0].side === "BUY"; const count = signals.length; markers.push({ time: signals[0].alignedTime, position: isBuy ? "belowBar" : "aboveBar", color: isBuy ? BUY_COLOR : SELL_COLOR, shape: isBuy ? "arrowUp" : "arrowDown", size: count >= 3 ? 2 : 1.5, text: count > 1 ? `${count}${isBuy ? "B" : "S"}` : isBuy ? "B" : "S", }); } for (const [, signals] of indicatorGrouped.entries()) { markers.push({ time: signals[0].alignedTime, position: "inBar", color: INDICATOR_COLOR, shape: "circle", size: 1.6, text: "I", }); } return markers.sort((a, b) => (a.time as number) - (b.time as number)); } 56:T482,export function isValidCandle(candle: { open: number; high: number; low: number; close: number; time: number; }): boolean { const { open, high, low, close, time } = candle; if (!isFinite(open) || !isFinite(high) || !isFinite(low) || !isFinite(close)) { return false; } if (open <= 0 || high <= 0 || low <= 0 || close <= 0) { return false; } // OHLC consistency: high must be the highest, low the lowest. if (high < Math.max(open, close)) return false; if (low > Math.min(open, close)) return false; if (high < low) return false; // Reject candles whose range exceeds 90% of the close price. if ((high - low) / close > 0.9) { return false; } // Timestamp must be in seconds, not milliseconds. const MAX_REASONABLE_TS = 9_999_999_999; if (time > MAX_REASONABLE_TS) { return false; } return true; } export function sanitizeCandles< T extends { time: number; open: number; high: number; low: number; close: number }, >(candles: T[]): T[] { return candles .filter(isValidCandle) .sort((a, b) => a.time - b.time) .filter((c, i, arr) => i === 0 || c.time !== arr[i - 1].time); } 57:T534,import type { Time, UTCTimestamp } from "lightweight-charts"; /** Timeframes lightweight-charts renders as business days rather than timestamps. */ const DAILY_PLUS: ReadonlySet = new Set(["1d", "1w", "1M"]); export function isDailyOrHigher(timeframe: string): boolean { return DAILY_PLUS.has(timeframe); } /** Accepts epoch seconds or milliseconds and returns epoch seconds. */ export function normalizeToSeconds(ts: number): number { return ts > 9_999_999_999 ? Math.floor(ts / 1000) : ts; } /** Unix seconds to a chart Time: "YYYY-MM-DD" for daily+, raw number for intraday. */ export function toChartTime(timeSec: number, timeframe: string): Time { return isDailyOrHigher(timeframe) ? new Date(timeSec * 1000).toISOString().split("T")[0] : (timeSec as UTCTimestamp); } /** A chart event time (number, "YYYY-MM-DD", or BusinessDay) back to unix seconds. */ export function normalizeParamTime(t: unknown): number | undefined { if (t == null) return undefined; if (typeof t === "number") return t; if (typeof t === "string") return Math.floor(new Date(t + "T00:00:00Z").getTime() / 1000); if (typeof t === "object" && "year" in t) { const bd = t as { year: number; month: number; day: number }; return Math.floor(Date.UTC(bd.year, bd.month - 1, bd.day) / 1000); } return undefined; } 58:T2019,import type { MouseEventParams } from "lightweight-charts"; import type { OhlcvCandle, TradeSignal } from "../types"; import { alignSignalsToBars, BUY_COLOR, SELL_COLOR, INDICATOR_COLOR, type AlignedSignal, } from "./markers"; import { normalizeParamTime } from "./chart-time"; export interface SignalTooltipDeps { container: HTMLElement; getCandles: () => OhlcvCandle[]; getTrades: () => TradeSignal[]; getTimeframe: () => string; isEnabled: () => boolean; } export interface SignalTooltip { /** Pass to chart.subscribeCrosshairMove. */ onCrosshairMove: (param: MouseEventParams) => void; hide: () => void; dispose: () => void; } const STYLE_ID = "voraui-tooltip-styles"; const TOOLTIP_EDGE_INSET = 8; const TOOLTIP_OFFSET = 12; interface TooltipPoint { x: number; y: number; } interface TooltipPosition { left: number; top: number; } interface TooltipBox { width: number; height: number; } function clamp(value: number, min: number, max: number): number { if (max < min) return min; return Math.min(Math.max(value, min), max); } /** Keeps the tooltip inside the chart while preferring the familiar above-cursor placement. */ export function getSignalTooltipPosition( point: TooltipPoint, tooltip: TooltipBox, container: TooltipBox, ): TooltipPosition { const maxLeft = Math.max(TOOLTIP_EDGE_INSET, container.width - tooltip.width - TOOLTIP_EDGE_INSET); const maxTop = Math.max(TOOLTIP_EDGE_INSET, container.height - tooltip.height - TOOLTIP_EDGE_INSET); const preferredTop = point.y - tooltip.height - TOOLTIP_OFFSET; const belowTop = point.y + TOOLTIP_OFFSET; const top = preferredTop >= TOOLTIP_EDGE_INSET ? preferredTop : belowTop + tooltip.height <= container.height - TOOLTIP_EDGE_INSET ? belowTop : preferredTop; return { left: clamp(point.x - tooltip.width / 2, TOOLTIP_EDGE_INSET, maxLeft), top: clamp(top, TOOLTIP_EDGE_INSET, maxTop), }; } function escapeHtml(value: string): string { return value.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """); } function renderSignalHtml(s: AlignedSignal): string { if (s.category === "indicator") { const indicatorLabel = escapeHtml(s.indicator || "Indicator"); const indicatorValue = typeof s.value === "number" && Number.isFinite(s.value) ? ` (${s.value.toFixed(2)})` : ""; const note = s.note ? `

${escapeHtml(s.note)}

` : ""; return `

${indicatorLabel} ${s.side}${indicatorValue}

${note}

`; } const price = Number(s.price); const qty = Number(s.quantity || 0); const amount = qty > 0 ? price * qty : price; const qtySuffix = qty > 0 ? ` (${qty} @ ${price.toLocaleString()})` : ""; const note = s.note ? `

${escapeHtml(s.note)}

` : ""; return `

${amount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 })} usd${qtySuffix}

${note}

`; } /** Pure renderer for the tooltip body; exported for tests. */ export function renderTooltipHtml(list: AlignedSignal[]): string { const signal = list[0]; const count = list.length; const indicatorSignals = list.filter((s) => s.category === "indicator"); const tradeSignals = list.filter((s) => s.category !== "indicator"); const buys = tradeSignals.filter((s) => s.side === "BUY"); const sells = tradeSignals.filter((s) => s.side === "SELL"); return `

${new Date(signal.ts).toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric" })} ${count} Signals

${indicatorSignals.length > 0 ? `

Indicator Signals

${indicatorSignals.slice(0, 8).map(renderSignalHtml).join("")}

` : ""} ${buys.length > 0 ? `

Buy Signals

${buys.slice(0, 5).map(renderSignalHtml).join("")}

` : ""} ${sells.length > 0 ? `

Sell Signals

${sells.slice(0, 5).map(renderSignalHtml).join("")}

` : ""} `; } export function createSignalTooltip({ container, getCandles, getTrades, getTimeframe, isEnabled, }: SignalTooltipDeps): SignalTooltip { if (!document.getElementById(STYLE_ID)) { const style = document.createElement("style"); style.id = STYLE_ID; style.textContent = ` @keyframes vorauiTooltipIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } `; document.head.appendChild(style); } const el = document.createElement("div"); Object.assign(el.style, { position: "absolute", pointerEvents: "none", zIndex: "50", padding: "12px", borderRadius: "12px", background: "rgba(17,17,20,0.95)", color: "#fff", fontSize: "12px", boxShadow: "0 8px 32px rgba(0,0,0,0.5)", border: "1px solid rgba(255,255,255,0.1)", backdropFilter: "blur(8px)", boxSizing: "border-box", display: "none", minWidth: "160px", maxWidth: `calc(100% - ${TOOLTIP_EDGE_INSET * 2}px)`, maxHeight: `calc(100% - ${TOOLTIP_EDGE_INSET * 2}px)`, overflow: "hidden", transition: "opacity 0.2s ease-in-out", } as unknown as CSSStyleDeclaration); container.appendChild(el); const hide = () => { el.style.display = "none"; }; const show = (list: AlignedSignal[], pt: { x: number; y: number }) => { const wasHidden = el.style.display !== "block"; el.innerHTML = renderTooltipHtml(list); el.style.display = "block"; const position = getSignalTooltipPosition( pt, { width: el.offsetWidth || 180, height: el.offsetHeight || 80 }, { width: container.clientWidth, height: container.clientHeight }, ); el.style.left = `${position.left}px`; el.style.top = `${position.top}px`; // Animate only on hidden -> shown; re-animating on every move would flicker. if (wasHidden && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) { el.style.animation = "none"; void el.offsetWidth; el.style.animation = "vorauiTooltipIn 0.16s ease-out"; } }; const onCrosshairMove = (param: MouseEventParams) => { if (!isEnabled()) { hide(); return; } const pt = param.point; const t = normalizeParamTime(param.time); if (!pt || t == null) { hide(); return; } if ( pt.x < 0 || pt.y < 0 || pt.x > container.clientWidth || pt.y > container.clientHeight ) { hide(); return; } const aligned = alignSignalsToBars(getTrades(), getCandles(), getTimeframe()); const found = aligned.filter((s) => s.alignedTime === t); if (found.length > 0) { show(found, pt); } else { hide(); } }; return { onCrosshairMove, hide, dispose: () => el.remove(), }; } 49:["$","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","lightweight-charts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lightweight-charts","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":"lightweight-charts"}]]}]}],["$","li","next-themes",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next-themes","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":"next-themes"}]]}]}]]}],["$","$L4a",null,{"namespace":"@voraui","registryDependencies":["utils"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"registry/voraui/trading-chart/index.ts","content":"export { TradingChart } from \"./trading-chart\";\nexport { TradingChartSkeleton } from \"./components/skeleton\";\nexport type {\n TradingChartProps,\n OhlcvCandle,\n TradeSignal,\n TradeSide,\n Timeframe,\n} from \"./types\";\n","type":"registry:lib","target":"components/voraui/trading-chart/index.ts"},{"path":"registry/voraui/trading-chart/trading-chart.tsx","content":"$4c","type":"registry:component","target":"components/voraui/trading-chart/trading-chart.tsx"},{"path":"registry/voraui/trading-chart/types.ts","content":"$4d","type":"registry:lib","target":"components/voraui/trading-chart/types.ts"},{"path":"registry/voraui/trading-chart/components/skeleton.tsx","content":"$4e","type":"registry:component","target":"components/voraui/trading-chart/components/skeleton.tsx"},{"path":"registry/voraui/trading-chart/hooks/use-chart-instance.ts","content":"$4f","type":"registry:hook","target":"components/voraui/trading-chart/hooks/use-chart-instance.ts"},{"path":"registry/voraui/trading-chart/hooks/use-chart-theme.ts","content":"\"use client\";\n\nimport { useEffect } from \"react\";\nimport type { RefObject } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport { getThemeOptions } from \"../lib/chart-options\";\nimport type { ChartState } from \"./use-chart-instance\";\n\n/** Restyle the chart when the next-themes theme changes. */\nexport function useChartTheme(stateRef: RefObject) {\n const { resolvedTheme } = useTheme();\n\n useEffect(() => {\n stateRef.current.chart?.applyOptions(getThemeOptions(resolvedTheme));\n }, [stateRef, resolvedTheme]);\n}\n","type":"registry:hook","target":"components/voraui/trading-chart/hooks/use-chart-theme.ts"},{"path":"registry/voraui/trading-chart/hooks/use-chart-data.ts","content":"$50","type":"registry:hook","target":"components/voraui/trading-chart/hooks/use-chart-data.ts"},{"path":"registry/voraui/trading-chart/hooks/use-live-candles.ts","content":"$51","type":"registry:hook","target":"components/voraui/trading-chart/hooks/use-live-candles.ts"},{"path":"registry/voraui/trading-chart/hooks/use-boundary-notification.ts","content":"$52","type":"registry:hook","target":"components/voraui/trading-chart/hooks/use-boundary-notification.ts"},{"path":"registry/voraui/trading-chart/hooks/use-klines.ts","content":"$53","type":"registry:hook","target":"components/voraui/trading-chart/hooks/use-klines.ts"},{"path":"registry/voraui/trading-chart/lib/chart-options.ts","content":"$54","type":"registry:lib","target":"components/voraui/trading-chart/lib/chart-options.ts"},{"path":"registry/voraui/trading-chart/lib/markers.ts","content":"$55","type":"registry:lib","target":"components/voraui/trading-chart/lib/markers.ts"},{"path":"registry/voraui/trading-chart/lib/candle-validation.ts","content":"$56","type":"registry:lib","target":"components/voraui/trading-chart/lib/candle-validation.ts"},{"path":"registry/voraui/trading-chart/lib/chart-time.ts","content":"$57","type":"registry:lib","target":"components/voraui/trading-chart/lib/chart-time.ts"},{"path":"registry/voraui/trading-chart/lib/signal-tooltip.ts","content":"$58","type":"registry:lib","target":"components/voraui/trading-chart/lib/signal-tooltip.ts"}],"className":"h-[70svh] min-h-80"}]]}]