react-native-vroom-chart 0.14.0 → 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);
@@ -432,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;
@@ -509,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";
 }
@@ -545,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;
@@ -565,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));
@@ -613,9 +648,11 @@ function VroomChart(props) {
     bollingerBands,
     volume,
     priceLinesProp,
+    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)(() => {
@@ -875,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);
@@ -889,6 +944,7 @@ function VroomChart(props) {
         if (p) applyFrame(p);
       }
     }
+    if (panMode.current !== "price-line") dismissFootprint();
   }).onChange((e) => {
     if (!handle) return;
     let next = null;
@@ -971,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);
@@ -1011,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);
@@ -1027,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);