react-native-vroom-chart 0.6.0 → 0.8.0

package/lib/index.js

@@ -30,7 +30,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  VroomChart: () => VroomChart
+  VroomChart: () => VroomChart,
+  classifyTransition: () => classifyTransition,
+  inferStepMs: () => inferStepMs,
+  timeframeWindow: () => timeframeWindow
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -48,6 +51,86 @@ var import_react = require("react");
 var import_react_native = require("react-native");
 var NativeVroomChart_default = import_react_native.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) {
@@ -104,8 +187,10 @@ var FLOAT_KEYS = {
   // VROOM_FLOAT_CANDLE_RADIUS_PX
   volumeRadius: 10,
   // VROOM_FLOAT_VOLUME_RADIUS_PX
-  lineWidth: 11
+  lineWidth: 11,
   // VROOM_FLOAT_LINE_WIDTH_PX
+  lineGradientOpacity: 12
+  // VROOM_FLOAT_LINE_GRADIENT_OPACITY
 };
 var BOOL_KEYS = {
   wickRoundCap: 9
@@ -151,16 +236,43 @@ var MA_SOURCES = [
   "hlc3",
   "ohlc4"
 ];
+var inheritColor = (v) => (v != null ? parseColor(v) : null) ?? 0;
 function overlayToNumeric(o) {
   const srcIdx = o.source ? MA_SOURCES.indexOf(o.source) : 0;
   return {
-    kind: o.kind === "ema" ? 1 : 0,
-    period: o.length,
+    kind: o.maType === "ema" ? 1 : 0,
+    period: o.period,
     source: srcIdx < 0 ? 0 : srcIdx,
     color: (o.color != null ? parseColor(o.color) : null) ?? 4280902399,
     width: o.width ?? 1.5
   };
 }
+function rsiToSpec(cfg) {
+  return {
+    enabled: cfg?.enabled ?? false,
+    period: cfg?.period ?? 14,
+    upperBand: cfg?.upperBand ?? 70,
+    lowerBand: cfg?.lowerBand ?? 30,
+    maPeriod: cfg?.maPeriod ?? 14,
+    maKind: cfg?.maType === "ema" ? 1 : 0,
+    maVisible: cfg?.maVisible ?? true,
+    lineColor: inheritColor(cfg?.lineColor),
+    lineWidth: cfg?.lineWidth ?? -1,
+    lineVisible: cfg?.lineVisible ?? true,
+    maColor: inheritColor(cfg?.maColor),
+    maWidth: cfg?.maWidth ?? -1,
+    bandColor: inheritColor(cfg?.bandColor),
+    bandsVisible: cfg?.bandsVisible ?? true
+  };
+}
+function vwapToSpec(cfg) {
+  return {
+    enabled: cfg?.enabled ?? false,
+    resetOffsetMin: cfg?.resetMinutes ?? 0,
+    color: inheritColor(cfg?.color),
+    width: cfg?.width ?? -1
+  };
+}
 var DEFAULT_BB_BAND_COLOR = 4280902399;
 var DEFAULT_BB_BASIS_COLOR = 4294929664;
 function bollingerToSpec(cfg) {
@@ -170,17 +282,52 @@ function bollingerToSpec(cfg) {
     period: cfg?.period ?? 20,
     mult: cfg?.stdDev ?? 2,
     source: srcIdx < 0 ? 0 : srcIdx,
-    basisKind: cfg?.basis === "ema" ? 1 : 0,
+    basisKind: cfg?.maType === "ema" ? 1 : 0,
     upperColor: (cfg?.upperColor != null ? parseColor(cfg.upperColor) : null) ?? DEFAULT_BB_BAND_COLOR,
     upperWidth: cfg?.upperWidth ?? 1,
     middleColor: (cfg?.middleColor != null ? parseColor(cfg.middleColor) : null) ?? DEFAULT_BB_BASIS_COLOR,
     middleWidth: cfg?.middleWidth ?? 1,
     lowerColor: (cfg?.lowerColor != null ? parseColor(cfg.lowerColor) : null) ?? DEFAULT_BB_BAND_COLOR,
     lowerWidth: cfg?.lowerWidth ?? 1,
-    fillEnabled: cfg?.fill ?? true,
+    fillEnabled: cfg?.fillVisible ?? true,
     fillOpacity: cfg?.fillOpacity ?? 0.1
   };
 }
+function macdToSpec(cfg) {
+  const srcIdx = cfg?.source ? MA_SOURCES.indexOf(cfg.source) : 0;
+  return {
+    enabled: cfg?.enabled ?? false,
+    fast: cfg?.fast ?? 12,
+    slow: cfg?.slow ?? 26,
+    signal: cfg?.signal ?? 9,
+    source: srcIdx < 0 ? 0 : srcIdx,
+    maKind: cfg?.maType === "sma" ? 0 : 1,
+    signalMaKind: cfg?.signalMaType === "sma" ? 0 : 1,
+    lineColor: inheritColor(cfg?.lineColor),
+    lineWidth: cfg?.lineWidth ?? -1,
+    lineVisible: cfg?.lineVisible ?? true,
+    signalColor: inheritColor(cfg?.signalColor),
+    signalWidth: cfg?.signalWidth ?? -1,
+    signalVisible: cfg?.signalVisible ?? true,
+    histVisible: cfg?.histogramVisible ?? true,
+    histUpColor: inheritColor(cfg?.histogramUpColor),
+    histUpFadingColor: inheritColor(cfg?.histogramUpFadingColor),
+    histDownColor: inheritColor(cfg?.histogramDownColor),
+    histDownFadingColor: inheritColor(cfg?.histogramDownFadingColor),
+    zeroColor: inheritColor(cfg?.zeroLineColor),
+    zeroVisible: cfg?.zeroLineVisible ?? true
+  };
+}
+function volumeToSpec(cfg) {
+  return {
+    enabled: cfg?.enabled ?? true,
+    heightFrac: cfg?.height ?? -1,
+    opacity: cfg?.opacity ?? -1,
+    radiusPx: cfg?.radius ?? -1,
+    upColor: (cfg?.upColor != null ? parseColor(cfg.upColor) : null) ?? 0,
+    downColor: (cfg?.downColor != null ? parseColor(cfg.downColor) : null) ?? 0
+  };
+}
 var DEFAULT_PRICE_LINE_COLOR = 4293874512;
 var DEFAULT_PRICE_LINE_BODY_BG = 3642499368;
 var DEFAULT_PRICE_LINE_HOVER_BOOST = 1.25;
@@ -218,14 +365,53 @@ function ensureInstalled() {
   }
   installed = true;
 }
-function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, priceLines) {
+function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines, transition) {
   const handleRef = (0, import_react.useRef)(null);
   const defaultWidthAppliedRef = (0, import_react.useRef)(false);
+  const volumeCollapseRef = (0, import_react.useRef)(null);
+  const prevDataRef = (0, import_react.useRef)(null);
+  const intervalMorphRaf = (0, import_react.useRef)(null);
   const [picture, setPicture] = (0, import_react.useState)(null);
   if (!handleRef.current && size.width > 0 && size.height > 0) {
     ensureInstalled();
     handleRef.current = globalThis.VroomChartJSI.create();
   }
+  const animRef = (0, import_react.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 = (0, import_react.useRef)(transition?.onFrame);
+  onFrameRef.current = transition?.onFrame;
+  const seriesKey = transition?.seriesKey;
+  const endIntervalMorph = (0, import_react.useCallback)(() => {
+    if (intervalMorphRaf.current != null) {
+      cancelAnimationFrame(intervalMorphRaf.current);
+      intervalMorphRaf.current = null;
+    }
+    handleRef.current?.setIntervalMorph(1);
+  }, []);
+  const startIntervalMorph = (0, import_react.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);
+  }, []);
+  (0, import_react.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;
@@ -235,6 +421,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
   const maKey = movingAverages ? JSON.stringify(movingAverages) : "";
   const vwapKey = vwap ? JSON.stringify(vwap) : "";
   const bollingerKey = bollingerBands ? JSON.stringify(bollingerBands) : "";
+  const volumeKey = volume ? JSON.stringify(volume) : "";
   const priceLinesKey = priceLines ? JSON.stringify(priceLines) : "";
   (0, import_react.useEffect)(() => {
     const h = handleRef.current;
@@ -244,8 +431,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);
@@ -253,40 +486,27 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     if (theme) {
       applyTheme(h, theme);
     }
-    h.setRSI(
-      rsi?.enabled ?? false,
-      rsi?.period ?? 14,
-      rsi?.upperBand ?? 70,
-      rsi?.lowerBand ?? 30,
-      rsi?.maEnabled ?? true,
-      rsi?.maPeriod ?? 14
-    );
-    h.setMACD(
-      macd?.enabled ?? false,
-      macd?.fast ?? 12,
-      macd?.slow ?? 26,
-      macd?.signal ?? 9
-    );
+    h.setRSI(rsiToSpec(rsi));
+    h.setMACD(macdToSpec(macd));
     h.setOverlays((movingAverages ?? []).map(overlayToNumeric));
-    h.setVWAP(
-      vwap?.enabled ?? false,
-      vwap?.resetMinutes ?? 0,
-      (vwap?.color != null ? parseColor(vwap.color) : null) ?? 4278238420,
-      vwap?.width ?? 1.5
-    );
+    h.setVWAP(vwapToSpec(vwap));
     h.setBollinger(bollingerToSpec(bollingerBands));
+    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
     );
-    setPicture(h.render());
-  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, priceLinesKey]);
-  return { handle: handleRef.current, picture };
+    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/VroomChart.tsx
 function VroomChart(props) {
   const {
     candles,
+    seriesKey,
     width: widthProp,
     height: heightProp,
     style,
@@ -294,12 +514,14 @@ function VroomChart(props) {
     defaultCandleWidth,
     chartType,
     transitionMs,
+    transitionEasing,
     theme,
     rsi,
     macd,
     movingAverages,
     vwap,
     bollingerBands,
+    volume,
     crosshairOffset = 40,
     onCrosshair,
     onViewportChange,
@@ -327,7 +549,20 @@ function VroomChart(props) {
     } : void 0,
     [priceLines, priceLinesStyle, onPriceLineClose]
   );
-  const { handle, picture } = useChartCore(
+  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));
+    return rec.finishRecordingAsPicture();
+  }, []);
+  const pictureSV = (0, import_react_native_reanimated.useSharedValue)(emptyPicture);
+  const reduceMotion = (0, import_react_native_reanimated.useReducedMotion)();
+  const onFrame = (0, import_react2.useCallback)(
+    (p) => {
+      pictureSV.value = p;
+    },
+    [pictureSV]
+  );
+  const { handle, picture, volumeCollapseRef } = useChartCore(
     candles,
     { width, height },
     visibleRange,
@@ -339,14 +574,10 @@ function VroomChart(props) {
     movingAverages,
     vwap,
     bollingerBands,
-    priceLinesProp
+    volume,
+    priceLinesProp,
+    { seriesKey, transitionMs, transitionEasing, reduceMotion, onFrame }
   );
-  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));
-    return rec.finishRecordingAsPicture();
-  }, []);
-  const pictureSV = (0, import_react_native_reanimated.useSharedValue)(emptyPicture);
   const crosshairActive = (0, import_react2.useRef)(false);
   const lastCrosshairTime = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
@@ -386,6 +617,8 @@ function VroomChart(props) {
   const morphRaf = (0, import_react2.useRef)(null);
   const morphFade = (0, import_react2.useRef)(null);
   const morphHandle = (0, import_react2.useRef)(null);
+  const easingRef = (0, import_react2.useRef)(transitionEasing);
+  easingRef.current = transitionEasing;
   (0, import_react2.useEffect)(() => {
     if (!handle) return void 0;
     const target = chartType === "line" ? 1 : 0;
@@ -415,10 +648,9 @@ function VroomChart(props) {
     const step = (now) => {
       if (startTs == null) startTs = now;
       const prog = Math.min(1, (now - startTs) / dur);
-      const e = prog * prog * (3 - 2 * prog);
-      const fade = from + (target - from) * e;
+      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) {
@@ -438,7 +670,52 @@ function VroomChart(props) {
         morphRaf.current = null;
       }
     };
-  }, [handle, chartType, transitionMs, pictureSV]);
+  }, [handle, chartType, transitionMs, reduceMotion, pictureSV]);
+  const volumeRaf = (0, import_react2.useRef)(null);
+  const volumeHandle = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!handle) return void 0;
+    const target = volume?.enabled ?? true ? 0 : 1;
+    const easing = easingIndex(easingRef.current);
+    if (volumeHandle.current !== handle || volumeCollapseRef.current == null) {
+      volumeHandle.current = handle;
+      volumeCollapseRef.current = { t: target, easing };
+      return void 0;
+    }
+    if (volumeCollapseRef.current.t === target) return void 0;
+    if (volumeRaf.current != null) {
+      cancelAnimationFrame(volumeRaf.current);
+      volumeRaf.current = null;
+    }
+    const dur = Math.max(0, transitionMs ?? 300);
+    if (dur === 0 || reduceMotion) {
+      volumeCollapseRef.current = { t: target, easing };
+      handle.setVolumeCollapse(target, easing);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      return void 0;
+    }
+    const from = volumeCollapseRef.current.t;
+    let startTs = null;
+    const step = (now) => {
+      if (startTs == null) startTs = now;
+      const prog = Math.min(1, (now - startTs) / dur);
+      const t = prog < 1 ? from + (target - from) * prog : target;
+      const kind = easingIndex(easingRef.current);
+      volumeCollapseRef.current = { t, easing: kind };
+      handle.setVolumeCollapse(t, kind);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      volumeRaf.current = prog < 1 ? requestAnimationFrame(step) : null;
+    };
+    volumeRaf.current = requestAnimationFrame(step);
+    return () => {
+      if (volumeRaf.current != null) {
+        cancelAnimationFrame(volumeRaf.current);
+        volumeRaf.current = null;
+      }
+    };
+  }, [handle, volume?.enabled, transitionMs, reduceMotion, pictureSV, volumeCollapseRef]);
   const hitAxis = (0, import_react2.useCallback)(
     (x, y) => {
       if (!handle) return "chart";
@@ -650,6 +927,9 @@ function VroomChart(props) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  VroomChart
+  VroomChart,
+  classifyTransition,
+  inferStepMs,
+  timeframeWindow
 });
 //# sourceMappingURL=index.js.map