react-native-vroom-chart 0.14.0 → 0.16.0

package/lib/index.mjs

@@ -71,6 +71,13 @@ function classifyTransition(prev, next, seriesKeyChanged) {
   const endsTogether = Math.abs(nextEnd - prevEnd) <= MAX_END_DRIFT_STEPS * Math.max(prevStep, nextStep);
   return closeRatio <= MAX_SAME_ASSET_CLOSE_RATIO && endsTogether ? "timeframe" : "reset";
 }
+function classifyStream(prev, next) {
+  if (prev.length === 0 || next.length === 0) return "tick";
+  return next[next.length - 1].timeMs > prev[prev.length - 1].timeMs ? "append" : "tick";
+}
+function isPinnedToLatest(window, lastMs, stepMs) {
+  return window.endMs >= lastMs + stepMs;
+}
 function timeframeWindow(oldWindow, oldStepMs, oldLastMs, newStepMs, newLastMs) {
   const slots = (oldWindow.endMs - oldWindow.startMs) / oldStepMs;
   const offsetRaw = (oldWindow.endMs - oldLastMs) / oldStepMs;
@@ -216,6 +223,7 @@ var MA_SOURCES = [
   "hlc3",
   "ohlc4"
 ];
+var ATR_SMOOTHINGS = ["rma", "sma", "ema"];
 var inheritColor = (v) => (v != null ? parseColor(v) : null) ?? 0;
 function overlayToNumeric(o) {
   const srcIdx = o.source ? MA_SOURCES.indexOf(o.source) : 0;
@@ -242,7 +250,8 @@ function rsiToSpec(cfg) {
     maColor: inheritColor(cfg?.maColor),
     maWidth: cfg?.maWidth ?? -1,
     bandColor: inheritColor(cfg?.bandColor),
-    bandsVisible: cfg?.bandsVisible ?? true
+    bandsVisible: cfg?.bandsVisible ?? true,
+    extremeFill: cfg?.extremeFill ?? true
   };
 }
 function vwapToSpec(cfg) {
@@ -273,6 +282,79 @@ function bollingerToSpec(cfg) {
     fillOpacity: cfg?.fillOpacity ?? 0.1
   };
 }
+var DEFAULT_ICH_GREEN = 4280723098;
+var DEFAULT_ICH_RED = 4293874512;
+var DEFAULT_ICH_BLUE = 4280902399;
+var DEFAULT_ICH_ORANGE = 4294929664;
+var DEFAULT_ICH_TEAL = 4278238420;
+function ichimokuToSpec(cfg) {
+  const color = (v, fallback) => (v != null ? parseColor(v) : null) ?? fallback;
+  return {
+    enabled: cfg?.enabled ?? false,
+    tenkanPeriod: cfg?.tenkanPeriod ?? 9,
+    kijunPeriod: cfg?.kijunPeriod ?? 26,
+    senkouBPeriod: cfg?.senkouBPeriod ?? 52,
+    displacement: cfg?.displacement ?? 26,
+    tenkanColor: color(cfg?.tenkanColor, DEFAULT_ICH_BLUE),
+    tenkanWidth: cfg?.tenkanWidth ?? 1,
+    tenkanEnabled: cfg?.tenkanVisible ?? true,
+    kijunColor: color(cfg?.kijunColor, DEFAULT_ICH_RED),
+    kijunWidth: cfg?.kijunWidth ?? 1,
+    kijunEnabled: cfg?.kijunVisible ?? true,
+    senkouAColor: color(cfg?.senkouAColor, DEFAULT_ICH_GREEN),
+    senkouAWidth: cfg?.senkouAWidth ?? 1,
+    senkouAEnabled: cfg?.senkouAVisible ?? true,
+    senkouBColor: color(cfg?.senkouBColor, DEFAULT_ICH_ORANGE),
+    senkouBWidth: cfg?.senkouBWidth ?? 1,
+    senkouBEnabled: cfg?.senkouBVisible ?? true,
+    chikouColor: color(cfg?.chikouColor, DEFAULT_ICH_TEAL),
+    chikouWidth: cfg?.chikouWidth ?? 1,
+    chikouEnabled: cfg?.chikouVisible ?? true,
+    cloudEnabled: cfg?.cloudVisible ?? true,
+    bullishCloudColor: color(cfg?.bullishCloudColor, DEFAULT_ICH_GREEN),
+    bearishCloudColor: color(cfg?.bearishCloudColor, DEFAULT_ICH_RED),
+    cloudOpacity: cfg?.cloudOpacity ?? 0.15
+  };
+}
+var DEFAULT_FVG_GREEN = 4280723098;
+var DEFAULT_FVG_RED = 4293874512;
+var FVG_FILL_TYPES = ["close", "wick"];
+var FVG_BORDER_STYLES = ["solid", "dotted", "dashed"];
+function fvgToSpec(cfg) {
+  const color = (v, fallback) => (v != null ? parseColor(v) : null) ?? fallback;
+  const bullish = color(cfg?.bullishColor, DEFAULT_FVG_GREEN);
+  const bearish = color(cfg?.bearishColor, DEFAULT_FVG_RED);
+  return {
+    enabled: cfg?.enabled ?? false,
+    maxBarsBack: cfg?.maxBarsBack ?? 300,
+    waitForClose: cfg?.waitForClose ?? false,
+    fillType: Math.max(0, FVG_FILL_TYPES.indexOf(cfg?.fillType ?? "close")),
+    deleteAfterFill: cfg?.deleteAfterFill ?? true,
+    extendBoxes: cfg?.extendBoxes ?? false,
+    boxLength: cfg?.boxLength ?? 20,
+    bullishColor: bullish,
+    bearishColor: bearish,
+    opacity: cfg?.opacity ?? 0.15,
+    borderEnabled: cfg?.borderVisible ?? true,
+    borderStyle: Math.max(
+      0,
+      FVG_BORDER_STYLES.indexOf(cfg?.borderStyle ?? "solid")
+    ),
+    borderWidth: cfg?.borderWidth ?? 1,
+    bullishBorderColor: color(cfg?.bullishBorderColor, bullish),
+    bearishBorderColor: color(cfg?.bearishBorderColor, bearish),
+    labelsEnabled: cfg?.showLabels ?? true,
+    label: cfg?.label ?? "FVG",
+    labelDistance: cfg?.labelDistance ?? 10,
+    // Alpha 0 is the core's "inherit the border color" sentinel.
+    labelColor: color(cfg?.labelColor, 0),
+    labelFontSize: cfg?.labelFontSize ?? 0,
+    showInverse: cfg?.showInverse ?? false,
+    inverseBullishColor: color(cfg?.inverseBullishColor, bullish),
+    inverseBearishColor: color(cfg?.inverseBearishColor, bearish),
+    inverseLabel: cfg?.inverseLabel ?? "iFVG"
+  };
+}
 function macdToSpec(cfg) {
   const srcIdx = cfg?.source ? MA_SOURCES.indexOf(cfg.source) : 0;
   return {
@@ -298,6 +380,15 @@ function macdToSpec(cfg) {
     zeroVisible: cfg?.zeroLineVisible ?? true
   };
 }
+function atrToSpec(cfg) {
+  return {
+    enabled: cfg?.enabled ?? false,
+    period: cfg?.period ?? 14,
+    smoothing: Math.max(0, ATR_SMOOTHINGS.indexOf(cfg?.smoothing ?? "rma")),
+    lineColor: inheritColor(cfg?.lineColor),
+    lineWidth: cfg?.lineWidth ?? -1
+  };
+}
 function volumeToSpec(cfg) {
   return {
     enabled: cfg?.enabled ?? true,
@@ -335,6 +426,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;
@@ -345,23 +459,37 @@ 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, atr, movingAverages, vwap, bollingerBands, ichimoku, fairValueGaps, volume, priceLines, footprints, transition) {
   const handleRef = useRef(null);
   const defaultWidthAppliedRef = useRef(false);
   const volumeCollapseRef = useRef(null);
   const prevDataRef = useRef(null);
   const intervalMorphRaf = useRef(null);
+  const streamRaf = useRef(null);
+  const streamWindowRef = useRef(null);
+  const streamMorphRef = useRef(false);
   const [picture, setPicture] = useState(null);
   if (!handleRef.current && size.width > 0 && size.height > 0) {
     ensureInstalled();
     handleRef.current = globalThis.VroomChartJSI.create();
   }
-  const animRef = useRef({ ms: 300, easing: void 0, reduceMotion: false, interval: "transform" });
+  const animRef = useRef({
+    ms: 300,
+    easing: void 0,
+    reduceMotion: false,
+    interval: "transform",
+    stream: "none",
+    streamMs: 150
+  });
   animRef.current = {
     ms: Math.max(0, transition?.transitionMs ?? 300),
     easing: transition?.transitionEasing,
     reduceMotion: transition?.reduceMotion ?? false,
-    interval: transition?.intervalTransition === "fade" ? "fade" : "transform"
+    interval: transition?.intervalTransition === "fade" ? "fade" : "transform",
+    stream: transition?.streamTransition === "transform" ? "transform" : "none",
+    // Shorter than transitionMs by default: ticks can land faster than a 300ms
+    // curve, and every one that does interrupts the last.
+    streamMs: Math.max(0, transition?.streamTransitionMs ?? 150)
   };
   const onFrameRef = useRef(transition?.onFrame);
   onFrameRef.current = transition?.onFrame;
@@ -385,12 +513,70 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     };
     intervalMorphRaf.current = requestAnimationFrame(step);
   }, []);
+  const settleStream = useCallback((keepMorph = false) => {
+    if (streamRaf.current != null) {
+      cancelAnimationFrame(streamRaf.current);
+      streamRaf.current = null;
+    }
+    const h = handleRef.current;
+    const target = streamWindowRef.current;
+    streamWindowRef.current = null;
+    if (target) h?.setVisibleRange(target.startMs, target.endMs);
+    if (streamMorphRef.current && !keepMorph) {
+      streamMorphRef.current = false;
+      h?.setIntervalMorph(1);
+    }
+  }, []);
+  const startStreamAnim = useCallback(
+    (h, morphing, window) => {
+      const { streamMs, easing } = animRef.current;
+      let from = window ? h.getVisibleRange() : null;
+      let applied = null;
+      streamWindowRef.current = window;
+      streamMorphRef.current = morphing;
+      const start = performance.now();
+      const step = (now) => {
+        if (from && applied) {
+          const now_w = h.getVisibleRange();
+          if (now_w.startMs !== applied.startMs || now_w.endMs !== applied.endMs) {
+            from = null;
+            streamWindowRef.current = null;
+          }
+        }
+        const p = Math.min(1, (now - start) / streamMs);
+        const e = p < 1 ? ease(easing, p) : 1;
+        if (morphing) h.setIntervalMorph(e);
+        if (from && window) {
+          applied = {
+            startMs: Math.round(from.startMs + (window.startMs - from.startMs) * e),
+            endMs: Math.round(from.endMs + (window.endMs - from.endMs) * e)
+          };
+          h.setVisibleRange(applied.startMs, applied.endMs);
+        }
+        const pic = h.render();
+        if (pic) onFrameRef.current?.(pic);
+        if (p < 1) {
+          streamRaf.current = requestAnimationFrame(step);
+        } else {
+          streamRaf.current = null;
+          streamWindowRef.current = null;
+          streamMorphRef.current = false;
+        }
+      };
+      streamRaf.current = requestAnimationFrame(step);
+    },
+    []
+  );
   useEffect(() => {
     return () => {
       if (intervalMorphRaf.current != null) {
         cancelAnimationFrame(intervalMorphRaf.current);
         intervalMorphRaf.current = null;
       }
+      if (streamRaf.current != null) {
+        cancelAnimationFrame(streamRaf.current);
+        streamRaf.current = null;
+      }
     };
   }, []);
   const explicit = visibleRange != null;
@@ -399,15 +585,20 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
   const themeKey = theme ? JSON.stringify(theme) : "";
   const rsiKey = rsi ? JSON.stringify(rsi) : "";
   const macdKey = macd ? JSON.stringify(macd) : "";
+  const atrKey = atr ? JSON.stringify(atr) : "";
   const maKey = movingAverages ? JSON.stringify(movingAverages) : "";
   const vwapKey = vwap ? JSON.stringify(vwap) : "";
   const bollingerKey = bollingerBands ? JSON.stringify(bollingerBands) : "";
+  const ichimokuKey = ichimoku ? JSON.stringify(ichimoku) : "";
+  const fvgKey = fairValueGaps ? JSON.stringify(fairValueGaps) : "";
   const volumeKey = volume ? JSON.stringify(volume) : "";
   const priceLinesKey = priceLines ? JSON.stringify(priceLines) : "";
+  const footprintsKey = footprints ? JSON.stringify(footprints) : "";
   useEffect(() => {
     const h = handleRef.current;
     if (!h) return;
     h.setSize(size.width, size.height, size.pxRatio ?? 1);
+    h.setIchimoku(ichimokuToSpec(ichimoku));
     if (!defaultWidthAppliedRef.current && !explicit && defaultCandleWidth != null && defaultCandleWidth > 0) {
       h.setDefaultCandleWidth(defaultCandleWidth);
       defaultWidthAppliedRef.current = true;
@@ -420,6 +611,36 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
         const transitionKind = freshHandle ? "initial" : explicit ? "stream" : classifyTransition(prev.candles, candles, seriesKey !== prev.seriesKey);
         let tfArgs = null;
         let prevEnvelope = null;
+        let stream = null;
+        if (transitionKind === "stream" && prev != null && !explicit) {
+          const { stream: mode, streamMs, reduceMotion } = animRef.current;
+          const stepMs = inferStepMs(candles);
+          if (mode === "transform" && streamMs > 0 && stepMs != null && !reduceMotion && onFrameRef.current != null) {
+            const lastMs = candles[candles.length - 1].timeMs;
+            const prevLastMs = prev.candles[prev.candles.length - 1].timeMs;
+            if (classifyStream(prev.candles, candles) === "append") {
+              const w = h.getVisibleRange();
+              const prevStepMs = inferStepMs(prev.candles) ?? stepMs;
+              if (isPinnedToLatest(w, prevLastMs, prevStepMs)) {
+                const by = lastMs - prevLastMs;
+                stream = {
+                  morph: false,
+                  window: { startMs: w.startMs + by, endMs: w.endMs + by }
+                };
+              }
+            } else {
+              stream = { morph: true, window: null };
+            }
+          }
+          if (stream?.morph) {
+            settleStream(true);
+            h.beginStreamMorph();
+          } else {
+            settleStream();
+          }
+        } else if (transitionKind === "stream") {
+          settleStream();
+        }
         if (transitionKind === "timeframe" && prev != null) {
           const oldWindow = h.getVisibleRange();
           const oldStepMs = inferStepMs(prev.candles);
@@ -455,6 +676,8 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
           if (prevEnvelope) h.preservePriceEnvelope(prevEnvelope.low, prevEnvelope.high);
           else h.resetPriceScale();
           if (morphing) startIntervalMorph(h);
+        } else if (stream) {
+          startStreamAnim(h, stream.morph, stream.window);
         } else if (transitionKind === "reset") {
           h.resetView();
         }
@@ -472,21 +695,27 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     }
     h.setRSI(rsiToSpec(rsi));
     h.setMACD(macdToSpec(macd));
+    h.setATR(atrToSpec(atr));
     h.setOverlays((movingAverages ?? []).map(overlayToNumeric));
     h.setVWAP(vwapToSpec(vwap));
     h.setBollinger(bollingerToSpec(bollingerBands));
+    h.setFairValueGaps(fvgToSpec(fairValueGaps));
     h.setVolume(volumeToSpec(volume));
     const collapse = volumeCollapseRef.current;
     if (collapse) h.setVolumeCollapse(collapse.t, collapse.easing);
     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, atrKey, maKey, vwapKey, bollingerKey, ichimokuKey, fvgKey, volumeKey, priceLinesKey, footprintsKey, startIntervalMorph, endIntervalMorph, startStreamAnim, settleStream]);
   return { handle: handleRef.current, picture, volumeCollapseRef };
 }
 
 // src/VroomChart.tsx
+var FOOTPRINT_SELL2 = 1;
 function isSkImage(frame) {
   return typeof frame.getImageInfo === "function";
 }
@@ -503,12 +732,17 @@ function VroomChart(props) {
     transitionMs,
     transitionEasing,
     intervalTransition,
+    streamTransition,
+    streamTransitionMs,
     theme,
     rsi,
     macd,
+    atr,
     movingAverages,
     vwap,
     bollingerBands,
+    ichimoku,
+    fairValueGaps,
     volume,
     crosshairOffset = 40,
     onCrosshair,
@@ -517,7 +751,10 @@ function VroomChart(props) {
     priceLinesStyle,
     onPriceLineDrag,
     onPriceLineDragEnd,
-    onPriceLineClose
+    onPriceLineClose,
+    footprints,
+    footprintsStyle,
+    onFootprint
   } = props;
   const [measured, setMeasured] = useState2({ width: 0, height: 0 });
   const width = widthProp ?? measured.width;
@@ -537,6 +774,10 @@ function VroomChart(props) {
     } : void 0,
     [priceLines, priceLinesStyle, onPriceLineClose]
   );
+  const footprintsProp = useMemo(
+    () => footprints ? { prints: footprints, style: footprintsStyle } : void 0,
+    [footprints, footprintsStyle]
+  );
   const emptyPicture = useMemo(() => {
     const rec = Skia.PictureRecorder();
     rec.beginRecording(Skia.XYWHRect(0, 0, 1, 1));
@@ -580,14 +821,28 @@ function VroomChart(props) {
     theme,
     rsi,
     macd,
+    atr,
     movingAverages,
     vwap,
     bollingerBands,
+    ichimoku,
+    fairValueGaps,
     volume,
     priceLinesProp,
-    { seriesKey, transitionMs, transitionEasing, intervalTransition, reduceMotion, onFrame }
+    footprintsProp,
+    {
+      seriesKey,
+      transitionMs,
+      transitionEasing,
+      intervalTransition,
+      streamTransition,
+      streamTransitionMs,
+      reduceMotion,
+      onFrame
+    }
   );
   const crosshairActive = useRef2(false);
+  const footprintActive = useRef2(false);
   const lastCrosshairTime = useRef2(null);
   const decayRaf = useRef2(null);
   const cancelDecay = useCallback2(() => {
@@ -847,6 +1102,24 @@ function VroomChart(props) {
     null
   );
   const panMode = useRef2("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 = Gesture.Pan().runOnJS(true).maxPointers(1).onStart((e) => {
     cancelDecay();
     panMode.current = hitAxis(e.x, e.y);
@@ -861,6 +1134,7 @@ function VroomChart(props) {
         if (p) applyFrame(p);
       }
     }
+    if (panMode.current !== "price-line") dismissFootprint();
   }).onChange((e) => {
     if (!handle) return;
     let next = null;
@@ -943,6 +1217,7 @@ function VroomChart(props) {
   });
   const pinch = 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);
@@ -983,6 +1258,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);
@@ -999,6 +1275,28 @@ function VroomChart(props) {
   });
   const tap = 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);