react-native-vroom-chart 0.13.1 → 0.15.0

package/lib/index.js

@@ -363,6 +363,29 @@ function priceLinesToSpec(cfg) {
   };
 }
 var EMPTY_PRICE_LINES = priceLinesToSpec({ lines: [], hasCloseHandler: false });
+var DEFAULT_FOOTPRINT_HOVER_BOOST = 1.25;
+var FOOTPRINT_BUY = 0;
+var FOOTPRINT_SELL = 1;
+var UNBUCKETABLE_MS = -864e13;
+function footprintsToSpec(cfg) {
+  return {
+    // Index alignment is load-bearing: the core reports hits as indices into this
+    // array and the gesture layer maps them straight back to the consumer's
+    // `footprints`. So a non-finite time — which can't be bucketed and would
+    // reach the native side as a garbage int64 — is neutralized *in place* rather
+    // than filtered out, which would shift every index after it onto the wrong
+    // trade.
+    prints: cfg.prints.map((f) => ({
+      timeMs: Number.isFinite(f.timeMs) ? f.timeMs : UNBUCKETABLE_MS,
+      side: f.side === "sell" ? FOOTPRINT_SELL : FOOTPRINT_BUY
+    })),
+    radiusPx: cfg.style?.radius ?? 0,
+    gapPx: cfg.style?.gap ?? 0,
+    marginPx: cfg.style?.margin ?? 0,
+    hoverBoost: cfg.style?.hoverBoost ?? DEFAULT_FOOTPRINT_HOVER_BOOST
+  };
+}
+var EMPTY_FOOTPRINTS = footprintsToSpec({ prints: [] });
 var installed = false;
 function ensureInstalled() {
   if (installed) return;
@@ -373,7 +396,7 @@ function ensureInstalled() {
   }
   installed = true;
 }
-function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines, transition) {
+function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines, footprints, transition) {
   const handleRef = (0, import_react.useRef)(null);
   const defaultWidthAppliedRef = (0, import_react.useRef)(false);
   const volumeCollapseRef = (0, import_react.useRef)(null);
@@ -384,11 +407,12 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     ensureInstalled();
     handleRef.current = globalThis.VroomChartJSI.create();
   }
-  const animRef = (0, import_react.useRef)({ ms: 300, easing: void 0, reduceMotion: false });
+  const animRef = (0, import_react.useRef)({ ms: 300, easing: void 0, reduceMotion: false, interval: "transform" });
   animRef.current = {
     ms: Math.max(0, transition?.transitionMs ?? 300),
     easing: transition?.transitionEasing,
-    reduceMotion: transition?.reduceMotion ?? false
+    reduceMotion: transition?.reduceMotion ?? false,
+    interval: transition?.intervalTransition === "fade" ? "fade" : "transform"
   };
   const onFrameRef = (0, import_react.useRef)(transition?.onFrame);
   onFrameRef.current = transition?.onFrame;
@@ -431,6 +455,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
   const bollingerKey = bollingerBands ? JSON.stringify(bollingerBands) : "";
   const volumeKey = volume ? JSON.stringify(volume) : "";
   const priceLinesKey = priceLines ? JSON.stringify(priceLines) : "";
+  const footprintsKey = footprints ? JSON.stringify(footprints) : "";
   (0, import_react.useEffect)(() => {
     const h = handleRef.current;
     if (!h) return;
@@ -461,7 +486,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
           morphing = animRef.current.ms > 0 && !animRef.current.reduceMotion && onFrameRef.current != null;
           if (morphing) {
             endIntervalMorph();
-            h.beginIntervalMorph();
+            h.beginIntervalMorph(animRef.current.interval);
           }
         } else if (transitionKind === "initial" || transitionKind === "reset") {
           endIntervalMorph();
@@ -508,12 +533,16 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     h.setPriceLines(
       priceLines?.lines.length ? priceLinesToSpec(priceLines) : EMPTY_PRICE_LINES
     );
+    h.setFootprints(
+      footprints?.prints.length ? footprintsToSpec(footprints) : EMPTY_FOOTPRINTS
+    );
     if (!morphing) setPicture(h.render());
-  }, [candles, seriesKey, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, volumeKey, priceLinesKey, startIntervalMorph, endIntervalMorph]);
+  }, [candles, seriesKey, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, volumeKey, priceLinesKey, footprintsKey, startIntervalMorph, endIntervalMorph]);
   return { handle: handleRef.current, picture, volumeCollapseRef };
 }
 
 // src/VroomChart.tsx
+var FOOTPRINT_SELL2 = 1;
 function isSkImage(frame) {
   return typeof frame.getImageInfo === "function";
 }
@@ -529,6 +558,7 @@ function VroomChart(props) {
     chartType,
     transitionMs,
     transitionEasing,
+    intervalTransition,
     theme,
     rsi,
     macd,
@@ -543,7 +573,10 @@ function VroomChart(props) {
     priceLinesStyle,
     onPriceLineDrag,
     onPriceLineDragEnd,
-    onPriceLineClose
+    onPriceLineClose,
+    footprints,
+    footprintsStyle,
+    onFootprint
   } = props;
   const [measured, setMeasured] = (0, import_react2.useState)({ width: 0, height: 0 });
   const width = widthProp ?? measured.width;
@@ -563,6 +596,10 @@ function VroomChart(props) {
     } : void 0,
     [priceLines, priceLinesStyle, onPriceLineClose]
   );
+  const footprintsProp = (0, import_react2.useMemo)(
+    () => footprints ? { prints: footprints, style: footprintsStyle } : void 0,
+    [footprints, footprintsStyle]
+  );
   const emptyPicture = (0, import_react2.useMemo)(() => {
     const rec = import_react_native_skia.Skia.PictureRecorder();
     rec.beginRecording(import_react_native_skia.Skia.XYWHRect(0, 0, 1, 1));
@@ -611,9 +648,11 @@ function VroomChart(props) {
     bollingerBands,
     volume,
     priceLinesProp,
-    { seriesKey, transitionMs, transitionEasing, reduceMotion, onFrame }
+    footprintsProp,
+    { seriesKey, transitionMs, transitionEasing, intervalTransition, reduceMotion, onFrame }
   );
   const crosshairActive = (0, import_react2.useRef)(false);
+  const footprintActive = (0, import_react2.useRef)(false);
   const lastCrosshairTime = (0, import_react2.useRef)(null);
   const decayRaf = (0, import_react2.useRef)(null);
   const cancelDecay = (0, import_react2.useCallback)(() => {
@@ -873,6 +912,24 @@ function VroomChart(props) {
     null
   );
   const panMode = (0, import_react2.useRef)("chart");
+  const dismissFootprint = (redraw = true) => {
+    if (!handle || !footprintActive.current) return;
+    footprintActive.current = false;
+    handle.setFootprintHover(0, -1);
+    if (redraw) {
+      const frame = handle.render();
+      if (frame) applyFrame(frame);
+    }
+    onFootprint?.({
+      active: false,
+      reason: "hide",
+      side: null,
+      timeMs: null,
+      footprints: [],
+      badge: null,
+      pane: null
+    });
+  };
   const pan = import_react_native_gesture_handler.Gesture.Pan().runOnJS(true).maxPointers(1).onStart((e) => {
     cancelDecay();
     panMode.current = hitAxis(e.x, e.y);
@@ -887,6 +944,7 @@ function VroomChart(props) {
         if (p) applyFrame(p);
       }
     }
+    if (panMode.current !== "price-line") dismissFootprint();
   }).onChange((e) => {
     if (!handle) return;
     let next = null;
@@ -969,6 +1027,7 @@ function VroomChart(props) {
   });
   const pinch = import_react_native_gesture_handler.Gesture.Pinch().runOnJS(true).onTouchesDown((e) => {
     if (e.numberOfTouches < 2) return;
+    dismissFootprint();
     const [a, b] = e.allTouches;
     const spanX = Math.abs(a.x - b.x);
     const spanY = Math.abs(a.y - b.y);
@@ -1009,6 +1068,7 @@ function VroomChart(props) {
     if (hitAxis(e.x, e.y) !== "chart") return;
     if (hitPriceLine(e.x, e.y)) return;
     cancelDecay();
+    dismissFootprint(false);
     crosshairActive.current = true;
     const ch = handle.setCrosshair(e.x, e.y - crosshairOffset);
     if (ch) applyFrame(ch);
@@ -1025,6 +1085,28 @@ function VroomChart(props) {
   });
   const tap = import_react_native_gesture_handler.Gesture.Tap().runOnJS(true).onStart((e) => {
     if (!handle) return;
+    const prints = footprints ?? [];
+    const fp = prints.length ? handle.hitTestFootprint(e.x, e.y) : null;
+    if (fp) {
+      handle.setFootprintHover(fp.candleTimeMs, fp.side);
+      const frame = handle.render();
+      if (frame) applyFrame(frame);
+      const wasActive = footprintActive.current;
+      footprintActive.current = true;
+      onFootprint?.({
+        active: true,
+        reason: wasActive ? "move" : "show",
+        side: fp.side === FOOTPRINT_SELL2 ? "sell" : "buy",
+        timeMs: fp.candleTimeMs,
+        // The core reports indices into the array we last pushed, which is this
+        // same prop — so this rejoins each badge to the consumer's own objects.
+        footprints: fp.indices.map((i) => prints[i]).filter((f) => f != null),
+        badge: { x: fp.x, y: fp.y, radius: fp.radius },
+        pane: fp.pane
+      });
+      return;
+    }
+    dismissFootprint();
     const pl = hitPriceLine(e.x, e.y);
     if (pl && pl.part === 1) {
       onPriceLineClose?.(pl.line.id);