@adrienhobbs/candlekit 0.2.0 → 0.2.1

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,8 @@ function ChartComponent({
   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";
@@ -341,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,
@@ -396,9 +403,18 @@ 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) => {
       e.preventDefault();
       e.stopPropagation();
@@ -490,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);
@@ -501,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);