@adrienhobbs/candlekit 0.1.0 → 0.2.1

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 import { z } from 'zod';
 
 interface OHLCVBar {
@@ -18,7 +19,15 @@ interface ChartLine {
     lineWidth?: number;
     lineStyle?: 'solid' | 'dashed' | 'dotted';
     title?: string;
-    type?: 'entry' | 'stopLoss' | 'takeProfit';
+    type?: 'entry' | 'stopLoss' | 'takeProfit' | 'mfe' | 'mae';
+}
+interface ChartTrade {
+    id: string;
+    entryTime: number;
+    exitTime: number;
+    entryPrice: number;
+    exitPrice: number;
+    outcome: 'win' | 'loss';
 }
 interface IndicatorSettings$1 {
     [key: string]: any;
@@ -154,8 +163,22 @@ interface ChartComponentProps {
     onClearAllLines?: () => void;
     enableBarSelection?: boolean;
     onBarClick?: (bar: OHLCVBar | null) => void;
+    trades?: ChartTrade[];
+    selectedTradeId?: string | null;
+    renderTradePopup?: (trade: ChartTrade) => ReactNode;
+    /**
+     * Fixed chart height in px. When omitted, the chart fills its container's
+     * height (observed via ResizeObserver) instead of a fixed default — so a
+     * flex/percent-sized parent gets a full-height chart.
+     */
+    height?: number;
+    /**
+     * When set, recenter the time scale on this trade (by id) so it scrolls into
+     * view. Pairs with `selectedTradeId` to drive both selection and focus.
+     */
+    focusTradeId?: string | null;
 }
-declare function ChartComponent({ bars, onLoadMoreData, indicators, lines, onBarUpdate, onNewBar, onDeleteLine, onAddLine, onClearAllLines, enableBarSelection, onBarClick, }: ChartComponentProps): react_jsx_runtime.JSX.Element;
+declare function ChartComponent({ bars, onLoadMoreData, indicators, lines, onBarUpdate, onNewBar, onDeleteLine, onAddLine, onClearAllLines, enableBarSelection, onBarClick, trades, selectedTradeId, renderTradePopup, height, focusTradeId, }: ChartComponentProps): react_jsx_runtime.JSX.Element;
 
 interface IndicatorBrowserProps {
     isOpen: boolean;
@@ -422,4 +445,4 @@ declare function getOldestBar(bars: OHLCVBar[]): OHLCVBar | null;
 declare function getNewestBar(bars: OHLCVBar[]): OHLCVBar | null;
 declare function updateCurrentBar(bars: OHLCVBar[], tradePrice: number, tradeVolume: number): OHLCVBar[];
 
-export { ADXIndicator, ATRIndicator, AlpacaBarAdapter, type BarDataAdapter, type BarDataAdapterOptions, BollingerBandsIndicator, CCIIndicator, ChartComponent, type ChartLine, ChartSeriesType, DonchianChannelsIndicator, EMAIndicator, ForceIndexIndicator, type HistoricalDataParams, IchimokuIndicator, IndicatorBrowser, type IndicatorCalculation, IndicatorCategory, type IndicatorDefinition, type IndicatorInstance, IndicatorInstanceSchema, type IndicatorMetadata, IndicatorMetadataSchema, type IndicatorOutput, type IndicatorPanel, type IndicatorSettings$1 as IndicatorSettings, IndicatorSettingsForm, IndicatorSettingsSchema, KeltnerChannelsIndicator, type LineStyle, LineStyleSchema, LocalStoragePersistenceAdapter, MACDIndicator, MFIIndicator, MockAdapter, NoOpPersistenceAdapter, OBVIndicator, type OHLCVBar, PSARIndicator, type PersistenceAdapter, ROCIndicator, RSIIndicator, type RealtimeHandlers, type RealtimeSubscription, type RenderConfig, RenderConfigSchema, SMAIndicator, type SettingField, SettingFieldSchema, type SettingFieldType, SettingFieldTypeSchema, SettingsDialog, StochRSIIndicator, StochasticIndicator, SuperTrendIndicator, VWAPIndicator, WMAIndicator, WilliamsRIndicator, appendBar, calculateBollingerBands, calculateEMA, calculateRSI, calculateSMA, calculateStandardDeviation, createPersistenceAdapter, deduplicateBars, displaceArray, getNewestBar, getOldestBar, indicatorCalculator, indicatorRegistry, isValidBar, mergeBars, normalizeTimestamp, padIndicatorArray, prependBars, registerBuiltInIndicators, sortBars, updateBarInArray, updateCurrentBar, useBarsData, useChartAPI, useRealtimeUpdates, validateAndNormalizeBars, validateBar };
+export { ADXIndicator, ATRIndicator, AlpacaBarAdapter, type BarDataAdapter, type BarDataAdapterOptions, BollingerBandsIndicator, CCIIndicator, ChartComponent, type ChartLine, ChartSeriesType, type ChartTrade, DonchianChannelsIndicator, EMAIndicator, ForceIndexIndicator, type HistoricalDataParams, IchimokuIndicator, IndicatorBrowser, type IndicatorCalculation, IndicatorCategory, type IndicatorDefinition, type IndicatorInstance, IndicatorInstanceSchema, type IndicatorMetadata, IndicatorMetadataSchema, type IndicatorOutput, type IndicatorPanel, type IndicatorSettings$1 as IndicatorSettings, IndicatorSettingsForm, IndicatorSettingsSchema, KeltnerChannelsIndicator, type LineStyle, LineStyleSchema, LocalStoragePersistenceAdapter, MACDIndicator, MFIIndicator, MockAdapter, NoOpPersistenceAdapter, OBVIndicator, type OHLCVBar, PSARIndicator, type PersistenceAdapter, ROCIndicator, RSIIndicator, type RealtimeHandlers, type RealtimeSubscription, type RenderConfig, RenderConfigSchema, SMAIndicator, type SettingField, SettingFieldSchema, type SettingFieldType, SettingFieldTypeSchema, SettingsDialog, StochRSIIndicator, StochasticIndicator, SuperTrendIndicator, VWAPIndicator, WMAIndicator, WilliamsRIndicator, appendBar, calculateBollingerBands, calculateEMA, calculateRSI, calculateSMA, calculateStandardDeviation, createPersistenceAdapter, deduplicateBars, displaceArray, getNewestBar, getOldestBar, indicatorCalculator, indicatorRegistry, isValidBar, mergeBars, normalizeTimestamp, padIndicatorArray, prependBars, registerBuiltInIndicators, sortBars, updateBarInArray, updateCurrentBar, useBarsData, useChartAPI, useRealtimeUpdates, validateAndNormalizeBars, validateBar };

package/dist/index.js

@@ -1,4 +1,5 @@
 import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { createChart, ColorType, CandlestickSeries, HistogramSeries, createSeriesMarkers, LineSeries, AreaSeries, LineStyle } from 'lightweight-charts';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { X, Search, Plus } from 'lucide-react';
@@ -255,6 +256,35 @@ var BandsPrimitive = class {
     this._paneViews.forEach((pw) => pw.update());
   }
 };
+
+// src/components/trade-markers.ts
+var WIN = "#10b981";
+var LOSS = "#ef4444";
+var SEL = "#3b82f6";
+function buildTradeMarkers(trades, selectedTradeId) {
+  const markers = [];
+  for (const t of trades) {
+    const selected = t.id === selectedTradeId;
+    const base = t.outcome === "win" ? WIN : LOSS;
+    const color = selected ? SEL : base;
+    markers.push({
+      time: t.entryTime / 1e3,
+      position: "belowBar",
+      shape: "arrowUp",
+      color,
+      text: selected ? `${t.outcome === "win" ? "+" : ""}entry` : ""
+    });
+    markers.push({
+      time: t.exitTime / 1e3,
+      position: "aboveBar",
+      shape: "arrowDown",
+      color,
+      text: selected ? "exit" : ""
+    });
+  }
+  markers.sort((a, b) => a.time - b.time);
+  return markers;
+}
 function ChartComponent({
   bars,
   onLoadMoreData,
@@ -266,7 +296,12 @@ function ChartComponent({
   onAddLine,
   onClearAllLines,
   enableBarSelection = true,
-  onBarClick
+  onBarClick,
+  trades = [],
+  selectedTradeId = null,
+  renderTradePopup,
+  height,
+  focusTradeId = null
 }) {
   const chartContainerRef = useRef(null);
   const chartRef = useRef(null);
@@ -283,14 +318,18 @@ function ChartComponent({
   const [selectedBar, setSelectedBar] = useState(null);
   const selectedBarRef = useRef(null);
   const [spotlightPosition, setSpotlightPosition] = useState(null);
+  const [tradePopupPos, setTradePopupPos] = useState(null);
   const previousBarsRef = useRef([]);
   const previousBarsLengthRef = useRef(0);
   const isLoadingRef = useRef(false);
   const barsRef = useRef(bars);
   const isDraggingRef = useRef(false);
   const mouseDownPosRef = useRef(null);
+  const heightRef = useRef(height);
+  heightRef.current = height;
   useEffect(() => {
     if (!chartContainerRef.current) return;
+    chartContainerRef.current.style.position = "relative";
     const chart = createChart(chartContainerRef.current, {
       layout: {
         background: { type: ColorType.Solid, color: "#0f172a" },
@@ -306,7 +345,10 @@ function ChartComponent({
         horzLines: { color: "#1e293b" }
       },
       width: chartContainerRef.current.clientWidth,
-      height: 600,
+      // Auto-fill the container's height unless an explicit `height` is given.
+      // Fall back to 600 only when the container hasn't been laid out yet (a
+      // ResizeObserver below corrects it on first measure).
+      height: height ?? (chartContainerRef.current.clientHeight || 600),
       timeScale: {
         timeVisible: true,
         secondsVisible: true,
@@ -349,11 +391,9 @@ function ChartComponent({
     seriesMarkersRef.current = createSeriesMarkers(candlestickSeries, []);
     chart.timeScale().subscribeVisibleLogicalRangeChange((logicalRange) => {
       if (logicalRange && logicalRange.from < 5 && !isLoadingRef.current && onLoadMoreData) {
-        console.log("Triggering load more, logicalRange.from:", logicalRange.from);
         isLoadingRef.current = true;
         setIsLoadingMore(true);
         previousBarsLengthRef.current = barsRef.current.length;
-        console.log("Set previousBarsLengthRef to:", previousBarsLengthRef.current);
         const sortedBars = [...barsRef.current].sort((a, b) => a.timestamp - b.timestamp);
         const oldestTimestamp = sortedBars[0]?.timestamp;
         if (oldestTimestamp) {
@@ -363,29 +403,33 @@ function ChartComponent({
     });
     const handleResize = () => {
       if (chartContainerRef.current && chart) {
-        chart.applyOptions({ width: chartContainerRef.current.clientWidth });
+        const nextHeight = heightRef.current ?? chartContainerRef.current.clientHeight;
+        chart.applyOptions({
+          width: chartContainerRef.current.clientWidth,
+          // Only drive height when auto-filling and the container has a real
+          // measured height; otherwise leave the current height untouched.
+          ...heightRef.current === void 0 && nextHeight > 0 ? { height: nextHeight } : {},
+          ...heightRef.current !== void 0 ? { height: heightRef.current } : {}
+        });
       }
     };
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(chartContainerRef.current);
     const handleContextMenu = (e) => {
-      console.log("Context menu event triggered!", e);
       e.preventDefault();
       e.stopPropagation();
       if (!candlestickSeriesRef.current) {
-        console.log("No candlestick series yet");
         return;
       }
       const rect = chartContainerRef.current.getBoundingClientRect();
       const y = e.clientY - rect.top;
-      console.log("Y position:", y, "Rect:", rect);
       const price = candlestickSeriesRef.current.coordinateToPrice(y);
-      console.log("Calculated price:", price);
       if (price !== null) {
         setContextMenu({
           x: e.clientX - rect.left,
           y,
           price
         });
-        console.log("Context menu set:", { x: e.clientX - rect.left, y, price });
       }
     };
     const handleMouseDown = (e) => {
@@ -405,54 +449,34 @@ function ChartComponent({
       mouseDownPosRef.current = null;
     };
     const handleClick = (e) => {
-      console.log("=== CLICK DEBUG START ===");
-      console.log("Click event - closing context menu");
       setContextMenu(null);
       if (isDraggingRef.current) {
-        console.log("Ignoring click - user was dragging");
         isDraggingRef.current = false;
         return;
       }
-      console.log("enableBarSelection prop:", enableBarSelection);
-      console.log("chartRef.current:", !!chartRef.current);
-      console.log("candlestickSeriesRef.current:", !!candlestickSeriesRef.current);
-      console.log("bars.length:", bars.length);
       if (!enableBarSelection) {
-        console.log("Bar selection is DISABLED - exiting");
         return;
       }
       if (!chartRef.current) {
-        console.log("Chart ref is NULL - exiting");
         return;
       }
       if (!candlestickSeriesRef.current) {
-        console.log("Candlestick series ref is NULL - exiting");
         return;
       }
-      console.log("All checks passed - proceeding with bar selection");
       const rect = chartContainerRef.current.getBoundingClientRect();
       const x = e.clientX - rect.left;
-      console.log("Click X coordinate:", x);
       const timeScale = chartRef.current.timeScale();
       const coordinate = timeScale.coordinateToTime(x);
-      console.log("Coordinate from timeScale:", coordinate);
       if (!coordinate) {
-        console.log("No coordinate from timeScale - exiting");
         return;
       }
       const clickedTime = coordinate;
-      console.log("Clicked time:", clickedTime);
-      console.log("Sample bar timestamps (first 3):", barsRef.current.slice(0, 3).map((b) => b.timestamp / 1e3));
       const clickedBar = barsRef.current.find((bar) => {
         const diff = Math.abs(bar.timestamp / 1e3 - clickedTime);
         return diff < 300;
       });
-      console.log("Clicked bar found:", !!clickedBar);
       if (clickedBar) {
-        console.log("Clicked bar details:", clickedBar);
-        console.log("Current selectedBarRef.current:", selectedBarRef.current);
         if (selectedBarRef.current && selectedBarRef.current.timestamp === clickedBar.timestamp) {
-          console.log("Deselecting bar (same bar clicked)");
           selectedBarRef.current = null;
           setSelectedBar(null);
           setSpotlightPosition(null);
@@ -460,24 +484,18 @@ function ChartComponent({
             onBarClick(null);
           }
         } else {
-          console.log("Selecting new bar");
           selectedBarRef.current = clickedBar;
           setSelectedBar(clickedBar);
           const barX = timeScale.timeToCoordinate(clickedBar.timestamp / 1e3);
-          console.log("Bar X position:", barX);
           if (barX !== null) {
             const barWidth = Math.max(8, rect.width / barsRef.current.length);
-            console.log("Bar width:", barWidth);
             setSpotlightPosition({ x: barX - barWidth / 2, width: barWidth });
           }
           if (onBarClick) {
             onBarClick(clickedBar);
           }
         }
-      } else {
-        console.log("No bar found at clicked position");
       }
-      console.log("=== CLICK DEBUG END ===");
     };
     window.addEventListener("resize", handleResize);
     chartContainerRef.current.addEventListener("contextmenu", handleContextMenu, true);
@@ -488,6 +506,7 @@ function ChartComponent({
     const container = chartContainerRef.current;
     return () => {
       window.removeEventListener("resize", handleResize);
+      resizeObserver.disconnect();
       container.removeEventListener("contextmenu", handleContextMenu, true);
       container.removeEventListener("mousedown", handleMouseDown, true);
       container.removeEventListener("mousemove", handleMouseMove, true);
@@ -499,6 +518,31 @@ function ChartComponent({
   useEffect(() => {
     barsRef.current = bars;
   }, [bars]);
+  useEffect(() => {
+    if (chartRef.current && height !== void 0) {
+      chartRef.current.applyOptions({ height });
+    }
+  }, [height]);
+  useEffect(() => {
+    if (!chartRef.current || !focusTradeId) return;
+    const trade = trades.find((t) => t.id === focusTradeId);
+    if (!trade) return;
+    const entrySec = trade.entryTime / 1e3;
+    const exitSec = trade.exitTime / 1e3;
+    const sorted = [...bars].sort((a, b) => a.timestamp - b.timestamp);
+    const stepSec = sorted.length > 1 ? (sorted[sorted.length - 1].timestamp - sorted[0].timestamp) / 1e3 / (sorted.length - 1) : 300;
+    const pad = Math.max(exitSec - entrySec, stepSec * 12);
+    const raf = requestAnimationFrame(() => {
+      try {
+        chartRef.current?.timeScale().setVisibleRange({
+          from: entrySec - pad,
+          to: exitSec + pad
+        });
+      } catch {
+      }
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [focusTradeId, trades, bars]);
   useEffect(() => {
     if (!candlestickSeriesRef.current || !volumeSeriesRef.current) return;
     const sortedBars = [...bars].sort((a, b) => a.timestamp - b.timestamp);
@@ -509,21 +553,15 @@ function ChartComponent({
       }
       return acc;
     }, []);
-    console.log("Debug - bars.length:", bars.length, "uniqueBars.length:", uniqueBars.length, "isLoadingRef:", isLoadingRef.current, "previousBarsLength:", previousBarsLengthRef.current);
     const previousBars = previousBarsRef.current;
     const isInitialLoad = previousBars.length === 0;
     const hasNewBars = uniqueBars.length > previousBars.length;
     const lastBarChanged = uniqueBars.length > 0 && previousBars.length > 0 && uniqueBars[uniqueBars.length - 1].timestamp === previousBars[previousBars.length - 1].timestamp;
-    console.log("isInitialLoad:", isInitialLoad, "hasNewBars:", hasNewBars, "lastBarChanged:", lastBarChanged);
-    console.log("previousBars.length:", previousBars.length, "uniqueBars.length:", uniqueBars.length);
     if (isLoadingRef.current && uniqueBars.length > previousBarsLengthRef.current) {
-      console.log("Hiding loading indicator");
       isLoadingRef.current = false;
       setIsLoadingMore(false);
     }
-    const firstBarChanged = uniqueBars.length > 0 && previousBars.length > 0 && uniqueBars[0].timestamp !== previousBars[0].timestamp;
     if (isInitialLoad || hasNewBars) {
-      console.log("Setting data with", uniqueBars.length, "bars", "firstBarChanged:", firstBarChanged);
       const candleData = uniqueBars.map((bar) => ({
         time: bar.timestamp / 1e3,
         open: bar.open,
@@ -536,8 +574,6 @@ function ChartComponent({
         value: bar.volume,
         color: bar.close >= bar.open ? "#10b98180" : "#ef444480"
       }));
-      console.log("candleData sample (first 3):", candleData.slice(0, 3));
-      console.log("candleData sample (last 3):", candleData.slice(-3));
       candlestickSeriesRef.current.setData(candleData);
       volumeSeriesRef.current.setData(volumeData);
     } else if (lastBarChanged && uniqueBars.length > 0 && !hasNewBars) {
@@ -565,7 +601,6 @@ function ChartComponent({
       candlestickSeriesRef.current?.removePriceLine(priceLine);
     });
     priceLineRefs.current.clear();
-    const newPositions = /* @__PURE__ */ new Map();
     lines.forEach((line) => {
       const priceLine = candlestickSeriesRef.current?.createPriceLine({
         price: line.price,
@@ -578,28 +613,47 @@ function ChartComponent({
       if (priceLine) {
         priceLineRefs.current.set(line.id, priceLine);
       }
-      const y = candlestickSeriesRef.current?.priceToCoordinate(line.price);
-      if (y !== null && y !== void 0) {
-        newPositions.set(line.id, y);
-      }
     });
-    setLinePositions(newPositions);
+    requestAnimationFrame(() => {
+      if (!candlestickSeriesRef.current || !chartContainerRef.current) return;
+      const rect = chartContainerRef.current.getBoundingClientRect();
+      const newPositions = /* @__PURE__ */ new Map();
+      lines.forEach((line) => {
+        const y = candlestickSeriesRef.current?.priceToCoordinate(line.price);
+        if (y !== null && y !== void 0) {
+          newPositions.set(line.id, {
+            top: rect.top + y,
+            right: window.innerWidth - rect.right + 68 + estimateLabelTitleWidth(line.title)
+          });
+        }
+      });
+      setLinePositions(newPositions);
+    });
   }, [lines]);
   useEffect(() => {
     if (!chartRef.current || !candlestickSeriesRef.current) return;
     const updatePositions = () => {
+      if (!candlestickSeriesRef.current || !chartContainerRef.current) return;
+      const rect = chartContainerRef.current.getBoundingClientRect();
       const newPositions = /* @__PURE__ */ new Map();
       lines.forEach((line) => {
         const y = candlestickSeriesRef.current?.priceToCoordinate(line.price);
         if (y !== null && y !== void 0) {
-          newPositions.set(line.id, y);
+          newPositions.set(line.id, {
+            top: rect.top + y,
+            right: window.innerWidth - rect.right + 68 + estimateLabelTitleWidth(line.title)
+          });
         }
       });
       setLinePositions(newPositions);
     };
     chartRef.current.timeScale().subscribeVisibleLogicalRangeChange(updatePositions);
+    window.addEventListener("scroll", updatePositions, { passive: true });
+    window.addEventListener("resize", updatePositions);
     return () => {
       chartRef.current?.timeScale().unsubscribeVisibleLogicalRangeChange(updatePositions);
+      window.removeEventListener("scroll", updatePositions);
+      window.removeEventListener("resize", updatePositions);
     };
   }, [lines]);
   useEffect(() => {
@@ -719,31 +773,22 @@ function ChartComponent({
     });
   }, [bars, indicators]);
   useEffect(() => {
-    console.log("Marker effect running, selectedBar:", selectedBar);
-    if (!seriesMarkersRef.current) {
-      console.log("Marker API not initialized yet.");
-      return;
-    }
-    if (!enableBarSelection) {
-      console.log("Marker effect: clearing markers, selection disabled");
-      seriesMarkersRef.current.setMarkers([]);
-      return;
-    }
-    if (!selectedBar) {
-      console.log("Marker effect: clearing markers, no bar selected");
-      seriesMarkersRef.current.setMarkers([]);
-      return;
-    }
-    console.log("Marker effect: setting marker for bar:", selectedBar.timestamp);
-    const marker = {
-      time: selectedBar.timestamp / 1e3,
-      position: "aboveBar",
-      color: "#3b82f6",
-      shape: "circle",
-      text: "Selected"
-    };
-    seriesMarkersRef.current.setMarkers([marker]);
-  }, [selectedBar, enableBarSelection]);
+    if (!seriesMarkersRef.current) return;
+    const tradeMarkers = buildTradeMarkers(trades, selectedTradeId);
+    const selectionMarker = enableBarSelection && selectedBar ? [
+      {
+        time: selectedBar.timestamp / 1e3,
+        position: "aboveBar",
+        color: "#3b82f6",
+        shape: "circle",
+        text: ""
+      }
+    ] : [];
+    const all = [...tradeMarkers, ...selectionMarker].sort(
+      (a, b) => a.time - b.time
+    );
+    seriesMarkersRef.current.setMarkers(all);
+  }, [trades, selectedTradeId, selectedBar, enableBarSelection]);
   useEffect(() => {
     if (!chartRef.current || !selectedBar || !enableBarSelection) {
       setSpotlightPosition(null);
@@ -768,6 +813,28 @@ function ChartComponent({
       }
     };
   }, [selectedBar, enableBarSelection, bars.length]);
+  const selectedTrade = trades.find((t) => t.id === selectedTradeId) ?? null;
+  useEffect(() => {
+    if (!chartRef.current || !selectedTrade) {
+      setTradePopupPos(null);
+      return;
+    }
+    const updateTradePopupPos = () => {
+      if (!chartRef.current || !selectedTrade || !chartContainerRef.current) return;
+      const timeScale2 = chartRef.current.timeScale();
+      const x = timeScale2.timeToCoordinate(selectedTrade.entryTime / 1e3);
+      const width = chartContainerRef.current.getBoundingClientRect().width;
+      setTradePopupPos(x !== null && x >= 0 && x <= width ? { x } : null);
+    };
+    updateTradePopupPos();
+    const timeScale = chartRef.current.timeScale();
+    timeScale.subscribeVisibleLogicalRangeChange(updateTradePopupPos);
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.timeScale().unsubscribeVisibleLogicalRangeChange(updateTradePopupPos);
+      }
+    };
+  }, [selectedTrade, selectedTrade?.entryTime]);
   const handleDeleteLine = (lineId) => {
     if (onDeleteLine) {
       onDeleteLine(lineId);
@@ -802,25 +869,38 @@ function ChartComponent({
           }
         }
       ),
-      lines.map((line) => {
-        const y = linePositions.get(line.id);
-        if (y === null || y === void 0) return null;
-        return /* @__PURE__ */ jsx(
+      selectedTrade && tradePopupPos && renderTradePopup && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute z-20 pointer-events-auto",
+          style: { left: `${tradePopupPos.x}px`, top: 8, transform: "translateX(-50%)" },
+          children: renderTradePopup(selectedTrade)
+        }
+      )
+    ] }),
+    chartContainerRef.current && lines.map((line) => {
+      const pos = linePositions.get(line.id);
+      if (!pos) return null;
+      return createPortal(
+        /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => handleDeleteLine(line.id),
-            className: "absolute bg-red-500/70 hover:bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center text-xs font-bold transition-colors z-20 shadow-md",
+            className: "bg-red-500/70 hover:bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center text-xs font-bold transition-colors shadow-md",
             style: {
-              right: "68px",
-              top: `${y - 8}px`
+              position: "fixed",
+              top: `${pos.top - 8}px`,
+              right: `${pos.right}px`,
+              zIndex: 9999
             },
             title: "Delete line",
             children: "\xD7"
           },
           line.id
-        );
-      })
-    ] }),
+        ),
+        document.body
+      );
+    }),
     contextMenu && /* @__PURE__ */ jsxs(
       "div",
       {
@@ -889,6 +969,10 @@ function ChartComponent({
     )
   ] });
 }
+function estimateLabelTitleWidth(title) {
+  if (!title) return 0;
+  return title.length * 7 + 18;
+}
 function getLineStyle(style) {
   switch (style) {
     case "dashed":