@adrienhobbs/candlekit 0.1.0 → 0.2.0

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,11 @@ interface ChartComponentProps {
     onClearAllLines?: () => void;
     enableBarSelection?: boolean;
     onBarClick?: (bar: OHLCVBar | null) => void;
+    trades?: ChartTrade[];
+    selectedTradeId?: string | null;
+    renderTradePopup?: (trade: ChartTrade) => ReactNode;
 }
-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, }: ChartComponentProps): react_jsx_runtime.JSX.Element;
 
 interface IndicatorBrowserProps {
     isOpen: boolean;
@@ -422,4 +434,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,10 @@ function ChartComponent({
   onAddLine,
   onClearAllLines,
   enableBarSelection = true,
-  onBarClick
+  onBarClick,
+  trades = [],
+  selectedTradeId = null,
+  renderTradePopup
 }) {
   const chartContainerRef = useRef(null);
   const chartRef = useRef(null);
@@ -283,6 +316,7 @@ 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);
@@ -291,6 +325,7 @@ function ChartComponent({
   const mouseDownPosRef = useRef(null);
   useEffect(() => {
     if (!chartContainerRef.current) return;
+    chartContainerRef.current.style.position = "relative";
     const chart = createChart(chartContainerRef.current, {
       layout: {
         background: { type: ColorType.Solid, color: "#0f172a" },
@@ -349,11 +384,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) {
@@ -367,25 +400,20 @@ function ChartComponent({
       }
     };
     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 +433,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 +468,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);
@@ -509,21 +511,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 +532,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 +559,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 +571,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 +731,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 +771,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 +827,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 +927,10 @@ function ChartComponent({
     )
   ] });
 }
+function estimateLabelTitleWidth(title) {
+  if (!title) return 0;
+  return title.length * 7 + 18;
+}
 function getLineStyle(style) {
   switch (style) {
     case "dashed":