react-native-vroom-chart 0.5.0 → 0.7.0

package/lib/index.js

@@ -104,8 +104,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 +153,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 +199,79 @@ 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;
+var LINE_STYLES = { solid: 0, dotted: 1, dashed: 2 };
+var PRICE_LINE_DRAGGABLE = 1 << 0;
+var PRICE_LINE_CLOSABLE = 1 << 1;
+var PRICE_LINE_AXIS_LABEL = 1 << 2;
+var PRICE_LINE_EXTEND_LEFT = 1 << 3;
+function priceLinesToSpec(cfg) {
+  return {
+    lines: cfg.lines.map((l) => ({
+      price: l.price,
+      color: (l.color != null ? parseColor(l.color) : null) ?? DEFAULT_PRICE_LINE_COLOR,
+      width: l.width ?? 1,
+      lineStyle: LINE_STYLES[l.lineStyle ?? "dotted"],
+      text: l.text ?? "",
+      quantity: l.quantity ?? "",
+      flags: (l.draggable ? PRICE_LINE_DRAGGABLE : 0) | (cfg.hasCloseHandler && l.closable !== false ? PRICE_LINE_CLOSABLE : 0) | (l.axisLabel !== false ? PRICE_LINE_AXIS_LABEL : 0) | (l.extendLeft !== false ? PRICE_LINE_EXTEND_LEFT : 0)
+    })),
+    bodyBg: (cfg.style?.bodyBackground != null ? parseColor(cfg.style.bodyBackground) : null) ?? DEFAULT_PRICE_LINE_BODY_BG,
+    fontSizePx: cfg.style?.fontSize ?? 0,
+    lineLengthFrac: cfg.style?.inset ?? 0,
+    align: cfg.style?.align === "left" ? 0 : cfg.style?.align === "center" ? 1 : 2,
+    hoverBoost: cfg.style?.hoverBoost ?? DEFAULT_PRICE_LINE_HOVER_BOOST
+  };
+}
+var EMPTY_PRICE_LINES = priceLinesToSpec({ lines: [], hasCloseHandler: false });
 var installed = false;
 function ensureInstalled() {
   if (installed) return;
@@ -191,9 +282,10 @@ function ensureInstalled() {
   }
   installed = true;
 }
-function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands) {
+function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines) {
   const handleRef = (0, import_react.useRef)(null);
   const defaultWidthAppliedRef = (0, import_react.useRef)(false);
+  const volumeCollapseRef = (0, import_react.useRef)(null);
   const [picture, setPicture] = (0, import_react.useState)(null);
   if (!handleRef.current && size.width > 0 && size.height > 0) {
     ensureInstalled();
@@ -208,6 +300,8 @@ 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;
     if (!h) return;
@@ -225,31 +319,44 @@ 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]);
-  return { handle: handleRef.current, picture };
+  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, volumeKey, priceLinesKey]);
+  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
@@ -263,15 +370,22 @@ function VroomChart(props) {
     defaultCandleWidth,
     chartType,
     transitionMs,
+    transitionEasing,
     theme,
     rsi,
     macd,
     movingAverages,
     vwap,
     bollingerBands,
+    volume,
     crosshairOffset = 40,
     onCrosshair,
-    onViewportChange
+    onViewportChange,
+    priceLines,
+    priceLinesStyle,
+    onPriceLineDrag,
+    onPriceLineDragEnd,
+    onPriceLineClose
   } = props;
   const [measured, setMeasured] = (0, import_react2.useState)({ width: 0, height: 0 });
   const width = widthProp ?? measured.width;
@@ -283,7 +397,15 @@ function VroomChart(props) {
       (prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h }
     );
   }, []);
-  const { handle, picture } = useChartCore(
+  const priceLinesProp = (0, import_react2.useMemo)(
+    () => priceLines ? {
+      lines: priceLines,
+      style: priceLinesStyle,
+      hasCloseHandler: onPriceLineClose != null
+    } : void 0,
+    [priceLines, priceLinesStyle, onPriceLineClose]
+  );
+  const { handle, picture, volumeCollapseRef } = useChartCore(
     candles,
     { width, height },
     visibleRange,
@@ -294,7 +416,9 @@ function VroomChart(props) {
     macd,
     movingAverages,
     vwap,
-    bollingerBands
+    bollingerBands,
+    volume,
+    priceLinesProp
   );
   const emptyPicture = (0, import_react2.useMemo)(() => {
     const rec = import_react_native_skia.Skia.PictureRecorder();
@@ -341,6 +465,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;
@@ -370,8 +496,7 @@ 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);
       const p = handle.render();
@@ -394,6 +519,51 @@ function VroomChart(props) {
       }
     };
   }, [handle, chartType, transitionMs, 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) {
+      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, pictureSV, volumeCollapseRef]);
   const hitAxis = (0, import_react2.useCallback)(
     (x, y) => {
       if (!handle) return "chart";
@@ -407,12 +577,33 @@ function VroomChart(props) {
     },
     [handle, width, height]
   );
-  const panMode = (0, import_react2.useRef)(
-    "chart"
+  const hitPriceLine = (0, import_react2.useCallback)(
+    (x, y) => {
+      if (!handle || !priceLines?.length) return null;
+      const hit = handle.hitTestPriceLine(x, y);
+      const line = hit ? priceLines[hit.index] : void 0;
+      return hit && line ? { index: hit.index, part: hit.part, line } : null;
+    },
+    [handle, priceLines]
   );
+  const priceDrag = (0, import_react2.useRef)(
+    null
+  );
+  const panMode = (0, import_react2.useRef)("chart");
   const pan = import_react_native_gesture_handler.Gesture.Pan().runOnJS(true).maxPointers(1).onStart((e) => {
     cancelDecay();
     panMode.current = hitAxis(e.x, e.y);
+    priceDrag.current = null;
+    if (handle && panMode.current === "chart" && !crosshairActive.current) {
+      const pl = hitPriceLine(e.x, e.y);
+      if (pl && pl.part === 0) {
+        panMode.current = "price-line";
+        priceDrag.current = { index: pl.index, id: pl.line.id, price: pl.line.price };
+        handle.setPriceLineDrag(pl.index, pl.line.price);
+        const p = handle.render();
+        if (p) pictureSV.value = p;
+      }
+    }
   }).onChange((e) => {
     if (!handle) return;
     let next = null;
@@ -422,6 +613,15 @@ function VroomChart(props) {
       next = handle.scaleTimeAxis(e.changeX);
     } else if (panMode.current === "indicator") {
       next = handle.pan(e.changeX, 0);
+    } else if (panMode.current === "price-line") {
+      const g = priceDrag.current;
+      if (!g) return;
+      const c = handle.coordAt(e.x, e.y);
+      if (!c) return;
+      g.price = c.price;
+      handle.setPriceLineDrag(g.index, c.price);
+      onPriceLineDrag?.(g.id, c.price);
+      next = handle.render();
     } else if (crosshairActive.current) {
       const ch = handle.setCrosshair(e.x, e.y - crosshairOffset);
       if (ch) pictureSV.value = ch;
@@ -439,6 +639,15 @@ function VroomChart(props) {
     maybeStartAnim();
   }).onEnd((e) => {
     if (!handle) return;
+    if (panMode.current === "price-line") {
+      const g = priceDrag.current;
+      priceDrag.current = null;
+      handle.setPriceLineDrag(-1, 0);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      if (g) onPriceLineDragEnd?.(g.id, g.price);
+      return;
+    }
     if (panMode.current === "chart" && crosshairActive.current) return;
     onViewportChange?.(0, 0);
     if (panMode.current !== "chart" && panMode.current !== "indicator") return;
@@ -515,6 +724,7 @@ function VroomChart(props) {
   const longPress = import_react_native_gesture_handler.Gesture.LongPress().runOnJS(true).onStart((e) => {
     if (!handle) return;
     if (hitAxis(e.x, e.y) !== "chart") return;
+    if (hitPriceLine(e.x, e.y)) return;
     cancelDecay();
     crosshairActive.current = true;
     const ch = handle.setCrosshair(e.x, e.y - crosshairOffset);
@@ -531,7 +741,13 @@ function VroomChart(props) {
     });
   });
   const tap = import_react_native_gesture_handler.Gesture.Tap().runOnJS(true).onStart((e) => {
-    if (!handle || !crosshairActive.current) return;
+    if (!handle) return;
+    const pl = hitPriceLine(e.x, e.y);
+    if (pl && pl.part === 1) {
+      onPriceLineClose?.(pl.line.id);
+      return;
+    }
+    if (!crosshairActive.current) return;
     if (hitAxis(e.x, e.y) !== "chart") return;
     crosshairActive.current = false;
     const ch = handle.clearCrosshair();