react-native-vroom-chart 0.7.0 → 0.8.0

package/lib/index.mjs

@@ -1,5 +1,5 @@
 // src/VroomChart.tsx
-import React, { useEffect as useEffect2, useRef as useRef2, useCallback, useState as useState2, useMemo } from "react";
+import React, { useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2, useState as useState2, useMemo } from "react";
 import { View } from "react-native";
 import { Canvas, Picture, Skia } from "@shopify/react-native-skia";
 import {
@@ -7,15 +7,95 @@ import {
   GestureDetector,
   GestureHandlerRootView
 } from "react-native-gesture-handler";
-import { useSharedValue } from "react-native-reanimated";
+import { useReducedMotion, useSharedValue } from "react-native-reanimated";
 
 // src/useChartCore.ts
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 // src/NativeVroomChart.ts
 import { TurboModuleRegistry } from "react-native";
 var NativeVroomChart_default = TurboModuleRegistry.getEnforcing("VroomChartModule");
 
+// src/dataTransitions.ts
+var STEP_TOLERANCE = 0.01;
+var MAX_SAME_ASSET_CLOSE_RATIO = 1.25;
+var MAX_END_DRIFT_STEPS = 3;
+var MAX_STREAM_ADVANCE_STEPS = 5;
+function inferStepMs(candles) {
+  if (candles.length < 2) return null;
+  const k = Math.min(candles.length - 1, 8);
+  const diffs = [];
+  for (let i = 0; i < k; i++) diffs.push(candles[i + 1].timeMs - candles[i].timeMs);
+  diffs.sort((a, b) => a - b);
+  const median = diffs[Math.floor(diffs.length / 2)];
+  return median > 0 ? median : null;
+}
+function indexByTime(candles, t) {
+  let lo = 0;
+  let hi = candles.length - 1;
+  while (lo <= hi) {
+    const mid = lo + hi >>> 1;
+    const v = candles[mid].timeMs;
+    if (v === t) return mid;
+    if (v < t) lo = mid + 1;
+    else hi = mid - 1;
+  }
+  return -1;
+}
+function classifyTransition(prev, next, seriesKeyChanged) {
+  if (!prev || prev.length === 0) return "initial";
+  if (next.length === 0) return "stream";
+  if (seriesKeyChanged) return "reset";
+  const prevStep = inferStepMs(prev);
+  const nextStep = inferStepMs(next);
+  if (prevStep == null || nextStep == null) return "reset";
+  const prevLast = prev[prev.length - 1];
+  const nextLast = next[next.length - 1];
+  if (Math.abs(nextStep - prevStep) <= prevStep * STEP_TOLERANCE) {
+    const idx = indexByTime(next, prevLast.timeMs);
+    const aligned = idx >= 0;
+    const sharedBarRatio = aligned && next[idx].close > 0 && prevLast.close > 0 ? Math.max(next[idx].close / prevLast.close, prevLast.close / next[idx].close) : Infinity;
+    const advanced = nextLast.timeMs >= prevLast.timeMs && nextLast.timeMs - prevLast.timeMs <= MAX_STREAM_ADVANCE_STEPS * nextStep;
+    return sharedBarRatio <= MAX_SAME_ASSET_CLOSE_RATIO && advanced ? "stream" : "reset";
+  }
+  const closeRatio = prevLast.close > 0 && nextLast.close > 0 ? Math.max(nextLast.close / prevLast.close, prevLast.close / nextLast.close) : Infinity;
+  const prevEnd = prevLast.timeMs + prevStep;
+  const nextEnd = nextLast.timeMs + nextStep;
+  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 timeframeWindow(oldWindow, oldStepMs, oldLastMs, newStepMs, newLastMs) {
+  const slots = (oldWindow.endMs - oldWindow.startMs) / oldStepMs;
+  const offsetRaw = (oldWindow.endMs - oldLastMs) / oldStepMs;
+  const offsetSlots = Math.min(Math.max(offsetRaw, 0), slots * 0.75);
+  const endMs = Math.round(newLastMs + offsetSlots * newStepMs);
+  return { startMs: Math.round(endMs - slots * newStepMs), endMs };
+}
+
+// src/easing.ts
+function ease(kind, p) {
+  switch (kind) {
+    case "linear":
+      return p;
+    case "ease-in":
+      return p * p;
+    case "ease-out":
+      return p * (2 - p);
+    default:
+      return p * p * (3 - 2 * p);
+  }
+}
+var EASINGS = [
+  "linear",
+  "ease-in",
+  "ease-out",
+  "ease-in-out"
+];
+function easingIndex(kind) {
+  const i = kind ? EASINGS.indexOf(kind) : -1;
+  return i < 0 ? EASINGS.indexOf("ease-in-out") : i;
+}
+
 // src/packCandles.ts
 var BYTES_PER_CANDLE = 48;
 function packCandles(candles) {
@@ -250,15 +330,53 @@ function ensureInstalled() {
   }
   installed = true;
 }
-function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines) {
+function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines, transition) {
   const handleRef = useRef(null);
   const defaultWidthAppliedRef = useRef(false);
   const volumeCollapseRef = useRef(null);
+  const prevDataRef = useRef(null);
+  const intervalMorphRaf = useRef(null);
   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 });
+  animRef.current = {
+    ms: Math.max(0, transition?.transitionMs ?? 300),
+    easing: transition?.transitionEasing,
+    reduceMotion: transition?.reduceMotion ?? false
+  };
+  const onFrameRef = useRef(transition?.onFrame);
+  onFrameRef.current = transition?.onFrame;
+  const seriesKey = transition?.seriesKey;
+  const endIntervalMorph = useCallback(() => {
+    if (intervalMorphRaf.current != null) {
+      cancelAnimationFrame(intervalMorphRaf.current);
+      intervalMorphRaf.current = null;
+    }
+    handleRef.current?.setIntervalMorph(1);
+  }, []);
+  const startIntervalMorph = useCallback((h) => {
+    const { ms, easing } = animRef.current;
+    const start = performance.now();
+    const step = (now) => {
+      const p = Math.min(1, (now - start) / ms);
+      h.setIntervalMorph(p < 1 ? ease(easing, p) : 1);
+      const pic = h.render();
+      if (pic) onFrameRef.current?.(pic);
+      intervalMorphRaf.current = p < 1 ? requestAnimationFrame(step) : null;
+    };
+    intervalMorphRaf.current = requestAnimationFrame(step);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (intervalMorphRaf.current != null) {
+        cancelAnimationFrame(intervalMorphRaf.current);
+        intervalMorphRaf.current = null;
+      }
+    };
+  }, []);
   const explicit = visibleRange != null;
   const startMs = visibleRange?.startMs ?? 0;
   const endMs = visibleRange?.endMs ?? 0;
@@ -278,8 +396,54 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
       h.setDefaultCandleWidth(defaultCandleWidth);
       defaultWidthAppliedRef.current = true;
     }
+    let morphing = false;
     if (candles.length > 0) {
-      h.setCandles(packCandles(candles));
+      const prev = prevDataRef.current;
+      const freshHandle = prev == null || prev.handle !== h;
+      if (freshHandle || prev.candles !== candles || prev.seriesKey !== seriesKey) {
+        const transitionKind = freshHandle ? "initial" : explicit ? "stream" : classifyTransition(prev.candles, candles, seriesKey !== prev.seriesKey);
+        let tfArgs = null;
+        let prevEnvelope = null;
+        if (transitionKind === "timeframe" && prev != null) {
+          const oldWindow = h.getVisibleRange();
+          const oldStepMs = inferStepMs(prev.candles);
+          if (oldWindow.endMs > oldWindow.startMs && oldStepMs != null) {
+            tfArgs = {
+              oldWindow,
+              oldStepMs,
+              oldLastMs: prev.candles[prev.candles.length - 1].timeMs
+            };
+          }
+          prevEnvelope = h.getVisiblePriceEnvelope();
+          morphing = animRef.current.ms > 0 && !animRef.current.reduceMotion && onFrameRef.current != null;
+          if (morphing) {
+            endIntervalMorph();
+            h.beginIntervalMorph();
+          }
+        } else if (transitionKind === "initial" || transitionKind === "reset") {
+          endIntervalMorph();
+        }
+        h.setCandles(packCandles(candles));
+        if (transitionKind === "timeframe") {
+          const newStepMs = inferStepMs(candles);
+          if (tfArgs && newStepMs != null) {
+            const w = timeframeWindow(
+              tfArgs.oldWindow,
+              tfArgs.oldStepMs,
+              tfArgs.oldLastMs,
+              newStepMs,
+              candles[candles.length - 1].timeMs
+            );
+            h.setVisibleRange(w.startMs, w.endMs);
+          }
+          if (prevEnvelope) h.preservePriceEnvelope(prevEnvelope.low, prevEnvelope.high);
+          else h.resetPriceScale();
+          if (morphing) startIntervalMorph(h);
+        } else if (transitionKind === "reset") {
+          h.resetView();
+        }
+        prevDataRef.current = { handle: h, candles, seriesKey };
+      }
     }
     if (explicit) {
       h.setVisibleRange(startMs, endMs);
@@ -298,39 +462,16 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     h.setPriceLines(
       priceLines?.lines.length ? priceLinesToSpec(priceLines) : EMPTY_PRICE_LINES
     );
-    setPicture(h.render());
-  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, volumeKey, priceLinesKey]);
+    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]);
   return { handle: handleRef.current, picture, volumeCollapseRef };
 }
 
-// src/easing.ts
-function ease(kind, p) {
-  switch (kind) {
-    case "linear":
-      return p;
-    case "ease-in":
-      return p * p;
-    case "ease-out":
-      return p * (2 - p);
-    default:
-      return p * p * (3 - 2 * p);
-  }
-}
-var EASINGS = [
-  "linear",
-  "ease-in",
-  "ease-out",
-  "ease-in-out"
-];
-function easingIndex(kind) {
-  const i = kind ? EASINGS.indexOf(kind) : -1;
-  return i < 0 ? EASINGS.indexOf("ease-in-out") : i;
-}
-
 // src/VroomChart.tsx
 function VroomChart(props) {
   const {
     candles,
+    seriesKey,
     width: widthProp,
     height: heightProp,
     style,
@@ -358,7 +499,7 @@ function VroomChart(props) {
   const [measured, setMeasured] = useState2({ width: 0, height: 0 });
   const width = widthProp ?? measured.width;
   const height = heightProp ?? measured.height;
-  const onLayout = useCallback((e) => {
+  const onLayout = useCallback2((e) => {
     const w = Math.round(e.nativeEvent.layout.width);
     const h = Math.round(e.nativeEvent.layout.height);
     setMeasured(
@@ -373,6 +514,19 @@ function VroomChart(props) {
     } : void 0,
     [priceLines, priceLinesStyle, onPriceLineClose]
   );
+  const emptyPicture = useMemo(() => {
+    const rec = Skia.PictureRecorder();
+    rec.beginRecording(Skia.XYWHRect(0, 0, 1, 1));
+    return rec.finishRecordingAsPicture();
+  }, []);
+  const pictureSV = useSharedValue(emptyPicture);
+  const reduceMotion = useReducedMotion();
+  const onFrame = useCallback2(
+    (p) => {
+      pictureSV.value = p;
+    },
+    [pictureSV]
+  );
   const { handle, picture, volumeCollapseRef } = useChartCore(
     candles,
     { width, height },
@@ -386,21 +540,16 @@ function VroomChart(props) {
     vwap,
     bollingerBands,
     volume,
-    priceLinesProp
+    priceLinesProp,
+    { seriesKey, transitionMs, transitionEasing, reduceMotion, onFrame }
   );
-  const emptyPicture = useMemo(() => {
-    const rec = Skia.PictureRecorder();
-    rec.beginRecording(Skia.XYWHRect(0, 0, 1, 1));
-    return rec.finishRecordingAsPicture();
-  }, []);
-  const pictureSV = useSharedValue(emptyPicture);
   const crosshairActive = useRef2(false);
   const lastCrosshairTime = useRef2(null);
   useEffect2(() => {
     if (picture) pictureSV.value = picture;
   }, [picture, pictureSV]);
   const decayRaf = useRef2(null);
-  const cancelDecay = useCallback(() => {
+  const cancelDecay = useCallback2(() => {
     if (decayRaf.current != null) {
       cancelAnimationFrame(decayRaf.current);
       decayRaf.current = null;
@@ -408,7 +557,7 @@ function VroomChart(props) {
   }, []);
   useEffect2(() => cancelDecay, [cancelDecay]);
   const animRaf = useRef2(null);
-  const animTick = useCallback(() => {
+  const animTick = useCallback2(() => {
     animRaf.current = null;
     if (!handle) return;
     const next = handle.render();
@@ -417,7 +566,7 @@ function VroomChart(props) {
       animRaf.current = requestAnimationFrame(animTick);
     }
   }, [handle, pictureSV]);
-  const maybeStartAnim = useCallback(() => {
+  const maybeStartAnim = useCallback2(() => {
     if (animRaf.current != null) return;
     if (!handle?.isAnimating()) return;
     animRaf.current = requestAnimationFrame(animTick);
@@ -466,7 +615,7 @@ function VroomChart(props) {
       const prog = Math.min(1, (now - startTs) / dur);
       const fade = from + (target - from) * ease(easingRef.current, prog);
       morphFade.current = fade;
-      handle.setMorph(fade, fade);
+      handle.setMorph(reduceMotion ? 0 : fade, fade);
       const p = handle.render();
       if (p) pictureSV.value = p;
       if (prog < 1) {
@@ -486,7 +635,7 @@ function VroomChart(props) {
         morphRaf.current = null;
       }
     };
-  }, [handle, chartType, transitionMs, pictureSV]);
+  }, [handle, chartType, transitionMs, reduceMotion, pictureSV]);
   const volumeRaf = useRef2(null);
   const volumeHandle = useRef2(null);
   useEffect2(() => {
@@ -504,7 +653,7 @@ function VroomChart(props) {
       volumeRaf.current = null;
     }
     const dur = Math.max(0, transitionMs ?? 300);
-    if (dur === 0) {
+    if (dur === 0 || reduceMotion) {
       volumeCollapseRef.current = { t: target, easing };
       handle.setVolumeCollapse(target, easing);
       const p = handle.render();
@@ -531,8 +680,8 @@ function VroomChart(props) {
         volumeRaf.current = null;
       }
     };
-  }, [handle, volume?.enabled, transitionMs, pictureSV, volumeCollapseRef]);
-  const hitAxis = useCallback(
+  }, [handle, volume?.enabled, transitionMs, reduceMotion, pictureSV, volumeCollapseRef]);
+  const hitAxis = useCallback2(
     (x, y) => {
       if (!handle) return "chart";
       const { yAxisWidth, xAxisHeight, indicatorHeight } = handle.getAxisMetrics();
@@ -545,7 +694,7 @@ function VroomChart(props) {
     },
     [handle, width, height]
   );
-  const hitPriceLine = useCallback(
+  const hitPriceLine = useCallback2(
     (x, y) => {
       if (!handle || !priceLines?.length) return null;
       const hit = handle.hitTestPriceLine(x, y);
@@ -742,6 +891,9 @@ function VroomChart(props) {
   );
 }
 export {
-  VroomChart
+  VroomChart,
+  classifyTransition,
+  inferStepMs,
+  timeframeWindow
 };
 //# sourceMappingURL=index.mjs.map