@adrienhobbs/candlekit 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -166,8 +166,19 @@ interface ChartComponentProps {
     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, trades, selectedTradeId, renderTradePopup, }: 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;

package/dist/index.js

@@ -299,7 +299,9 @@ function ChartComponent({
   onBarClick,
   trades = [],
   selectedTradeId = null,
-  renderTradePopup
+  renderTradePopup,
+  height,
+  focusTradeId = null
 }) {
   const chartContainerRef = useRef(null);
   const chartRef = useRef(null);
@@ -323,6 +325,10 @@ function ChartComponent({
   const barsRef = useRef(bars);
   const isDraggingRef = useRef(false);
   const mouseDownPosRef = useRef(null);
+  const heightRef = useRef(height);
+  heightRef.current = height;
+  const lineEditEnabledRef = useRef(false);
+  lineEditEnabledRef.current = Boolean(onAddLine || onClearAllLines);
   useEffect(() => {
     if (!chartContainerRef.current) return;
     chartContainerRef.current.style.position = "relative";
@@ -341,7 +347,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,
@@ -396,10 +405,20 @@ 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) => {
+      if (!lineEditEnabledRef.current) return;
       e.preventDefault();
       e.stopPropagation();
       if (!candlestickSeriesRef.current) {
@@ -490,6 +509,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);
@@ -501,6 +521,52 @@ 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 seen = /* @__PURE__ */ new Set();
+    const series = [];
+    for (const b of [...bars].sort((a, b2) => a.timestamp - b2.timestamp)) {
+      if (seen.has(b.timestamp)) continue;
+      seen.add(b.timestamp);
+      series.push(b.timestamp);
+    }
+    if (series.length === 0) return;
+    const nearestIdx = (ms) => {
+      let lo = 0;
+      let hi = series.length - 1;
+      let idx = series.length - 1;
+      while (lo <= hi) {
+        const mid = lo + hi >> 1;
+        if (series[mid] >= ms) {
+          idx = mid;
+          hi = mid - 1;
+        } else {
+          lo = mid + 1;
+        }
+      }
+      return idx;
+    };
+    const entryIdx = nearestIdx(trade.entryTime);
+    const exitIdx = Math.max(entryIdx, nearestIdx(trade.exitTime));
+    const PAD = 15;
+    const raf = requestAnimationFrame(() => {
+      try {
+        chartRef.current?.timeScale().setVisibleLogicalRange({
+          from: entryIdx - PAD,
+          to: exitIdx + 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);
@@ -836,7 +902,7 @@ function ChartComponent({
         }
       )
     ] }),
-    chartContainerRef.current && lines.map((line) => {
+    onDeleteLine && chartContainerRef.current && lines.map((line) => {
       const pos = linePositions.get(line.id);
       if (!pos) return null;
       return createPortal(