react-native-vroom-chart 0.15.0 → 0.17.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;
@@ -151,8 +158,10 @@ var COLOR_KEYS = {
   // VROOM_COLOR_ACCENT_BULL
   accentBear: 15,
   // VROOM_COLOR_ACCENT_BEAR
-  lineColor: 16
+  lineColor: 16,
   // VROOM_COLOR_LINE
+  skeleton: 17
+  // VROOM_COLOR_SKELETON
 };
 var FLOAT_KEYS = {
   wickWidth: 1,
@@ -216,6 +225,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 +252,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 +284,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 +382,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,
@@ -368,39 +461,61 @@ function ensureInstalled() {
   }
   installed = true;
 }
-function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines, footprints, transition) {
+function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, atr, movingAverages, vwap, bollingerBands, ichimoku, fairValueGaps, volume, priceLines, footprints, transition, loading) {
   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;
   const seriesKey = transition?.seriesKey;
+  const loadingHandoffRef = useRef(false);
   const endIntervalMorph = useCallback(() => {
     if (intervalMorphRaf.current != null) {
       cancelAnimationFrame(intervalMorphRaf.current);
       intervalMorphRaf.current = null;
     }
-    handleRef.current?.setIntervalMorph(1);
+    const h = handleRef.current;
+    if (loadingHandoffRef.current) {
+      loadingHandoffRef.current = false;
+      h?.setLoadingMorph(1);
+      h?.beginLoadingReveal();
+    }
+    h?.setIntervalMorph(1);
   }, []);
-  const startIntervalMorph = useCallback((h) => {
+  const startIntervalMorph = useCallback((h, durationMs) => {
     const { ms, easing } = animRef.current;
+    const dur = durationMs ?? ms;
     const start = performance.now();
     const step = (now) => {
-      const p = Math.min(1, (now - start) / ms);
+      const p = Math.min(1, (now - start) / dur);
       h.setIntervalMorph(p < 1 ? ease(easing, p) : 1);
       const pic = h.render();
       if (pic) onFrameRef.current?.(pic);
@@ -408,23 +523,111 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     };
     intervalMorphRaf.current = requestAnimationFrame(step);
   }, []);
+  const startLoadingHandoff = useCallback(
+    (h) => {
+      const { ms, easing } = animRef.current;
+      const half = ms / 2;
+      loadingHandoffRef.current = true;
+      h.beginLoadingMorph();
+      const start = performance.now();
+      const step = (now) => {
+        const p = Math.min(1, (now - start) / half);
+        h.setLoadingMorph(p < 1 ? ease(easing, p) : 1);
+        const pic = h.render();
+        if (pic) onFrameRef.current?.(pic);
+        if (p < 1) {
+          intervalMorphRaf.current = requestAnimationFrame(step);
+          return;
+        }
+        intervalMorphRaf.current = null;
+        loadingHandoffRef.current = false;
+        h.beginLoadingReveal();
+        startIntervalMorph(h, half);
+      };
+      intervalMorphRaf.current = requestAnimationFrame(step);
+    },
+    [startIntervalMorph]
+  );
+  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;
   const startMs = visibleRange?.startMs ?? 0;
   const endMs = visibleRange?.endMs ?? 0;
+  const showLoadingLine = loading === true && candles.length === 0;
+  const lineUpRef = useRef(false);
   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) : "";
@@ -432,11 +635,25 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     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;
     }
     let morphing = false;
+    if (showLoadingLine) {
+      if (!lineUpRef.current) {
+        endIntervalMorph();
+        settleStream();
+        h.setCandles(packCandles([]));
+        prevDataRef.current = null;
+      }
+      h.setLoading(true, !animRef.current.reduceMotion);
+      lineUpRef.current = true;
+    } else if (lineUpRef.current && candles.length === 0) {
+      h.setLoading(false, true);
+      lineUpRef.current = false;
+    }
     if (candles.length > 0) {
       const prev = prevDataRef.current;
       const freshHandle = prev == null || prev.handle !== h;
@@ -444,6 +661,37 @@ 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 handOff = false;
+        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);
@@ -463,6 +711,11 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
         } else if (transitionKind === "initial" || transitionKind === "reset") {
           endIntervalMorph();
         }
+        if (lineUpRef.current) {
+          lineUpRef.current = false;
+          handOff = animRef.current.ms > 0 && !animRef.current.reduceMotion && onFrameRef.current != null;
+          if (!handOff) h.setLoading(false, true);
+        }
         h.setCandles(packCandles(candles));
         if (transitionKind === "timeframe") {
           const newStepMs = inferStepMs(candles);
@@ -479,9 +732,12 @@ 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();
         }
+        if (handOff) startLoadingHandoff(h);
         prevDataRef.current = { handle: h, candles, seriesKey };
       }
     }
@@ -496,9 +752,11 @@ 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);
@@ -509,7 +767,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
       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, footprintsKey, startIntervalMorph, endIntervalMorph]);
+  }, [candles, showLoadingLine, seriesKey, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, atrKey, maKey, vwapKey, bollingerKey, ichimokuKey, fvgKey, volumeKey, priceLinesKey, footprintsKey, startIntervalMorph, startLoadingHandoff, endIntervalMorph, startStreamAnim, settleStream]);
   return { handle: handleRef.current, picture, volumeCollapseRef };
 }
 
@@ -521,6 +779,7 @@ function isSkImage(frame) {
 function VroomChart(props) {
   const {
     candles,
+    loading,
     seriesKey,
     width: widthProp,
     height: heightProp,
@@ -531,12 +790,17 @@ function VroomChart(props) {
     transitionMs,
     transitionEasing,
     intervalTransition,
+    streamTransition,
+    streamTransitionMs,
     theme,
     rsi,
     macd,
+    atr,
     movingAverages,
     vwap,
     bollingerBands,
+    ichimoku,
+    fairValueGaps,
     volume,
     crosshairOffset = 40,
     onCrosshair,
@@ -615,14 +879,28 @@ function VroomChart(props) {
     theme,
     rsi,
     macd,
+    atr,
     movingAverages,
     vwap,
     bollingerBands,
+    ichimoku,
+    fairValueGaps,
     volume,
     priceLinesProp,
     footprintsProp,
-    { seriesKey, transitionMs, transitionEasing, intervalTransition, reduceMotion, onFrame }
+    {
+      seriesKey,
+      transitionMs,
+      transitionEasing,
+      intervalTransition,
+      streamTransition,
+      streamTransitionMs,
+      reduceMotion,
+      onFrame
+    },
+    loading
   );
+  const showLoadingLine = loading === true && candles.length === 0;
   const crosshairActive = useRef2(false);
   const footprintActive = useRef2(false);
   const lastCrosshairTime = useRef2(null);
@@ -902,7 +1180,7 @@ function VroomChart(props) {
       pane: null
     });
   };
-  const pan = Gesture.Pan().runOnJS(true).maxPointers(1).onStart((e) => {
+  const pan = Gesture.Pan().enabled(!showLoadingLine).runOnJS(true).maxPointers(1).onStart((e) => {
     cancelDecay();
     panMode.current = hitAxis(e.x, e.y);
     priceDrag.current = null;
@@ -997,7 +1275,7 @@ function VroomChart(props) {
     enableX: false,
     enableY: false
   });
-  const pinch = Gesture.Pinch().runOnJS(true).onTouchesDown((e) => {
+  const pinch = Gesture.Pinch().enabled(!showLoadingLine).runOnJS(true).onTouchesDown((e) => {
     if (e.numberOfTouches < 2) return;
     dismissFootprint();
     const [a, b] = e.allTouches;
@@ -1035,7 +1313,7 @@ function VroomChart(props) {
     if (next) applyFrame(next);
     maybeStartAnim();
   });
-  const longPress = Gesture.LongPress().runOnJS(true).onStart((e) => {
+  const longPress = Gesture.LongPress().enabled(!showLoadingLine).runOnJS(true).onStart((e) => {
     if (!handle) return;
     if (hitAxis(e.x, e.y) !== "chart") return;
     if (hitPriceLine(e.x, e.y)) return;
@@ -1055,7 +1333,7 @@ function VroomChart(props) {
       reason: "show"
     });
   });
-  const tap = Gesture.Tap().runOnJS(true).onStart((e) => {
+  const tap = Gesture.Tap().enabled(!showLoadingLine).runOnJS(true).onStart((e) => {
     if (!handle) return;
     const prints = footprints ?? [];
     const fp = prints.length ? handle.hitTestFootprint(e.x, e.y) : null;