react-native-vroom-chart 0.6.0 → 0.7.0

package/src/useChartCore.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import type { MutableRefObject } from 'react';
 import type { SkPicture } from '@shopify/react-native-skia';
 
 import NativeVroomChart from './NativeVroomChart';
@@ -15,6 +16,7 @@ import type {
   PriceLinesStyle,
   RSIConfig,
   VisibleRange,
+  VolumeConfig,
   VroomTheme,
   VWAPConfig,
 } from './types';
@@ -30,17 +32,49 @@ const MA_SOURCES = [
   'ohlc4',
 ] as const;
 
+// An unset style color marshals as the core's transparent inherit sentinel.
+const inheritColor = (v: string | number | undefined): number =>
+  (v != null ? parseColor(v) : null) ?? 0;
+
 function overlayToNumeric(o: MovingAverageOverlay) {
   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) ?? 0xff2962ff,
     width: o.width ?? 1.5,
   };
 }
 
+function rsiToSpec(cfg: RSIConfig | undefined) {
+  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: VWAPConfig | undefined) {
+  return {
+    enabled: cfg?.enabled ?? false,
+    resetOffsetMin: cfg?.resetMinutes ?? 0,
+    color: inheritColor(cfg?.color),
+    width: cfg?.width ?? -1,
+  };
+}
+
 // Bollinger defaults: blue bands / orange basis, matching the repo palette.
 const DEFAULT_BB_BAND_COLOR = 0xff2962ff;
 const DEFAULT_BB_BASIS_COLOR = 0xffff6d00;
@@ -52,7 +86,7 @@ function bollingerToSpec(cfg: BollingerBandsConfig | undefined) {
     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,
@@ -65,11 +99,51 @@ function bollingerToSpec(cfg: BollingerBandsConfig | undefined) {
       (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: MACDConfig | undefined) {
+  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,
+  };
+}
+
+// Unset style fields go down as the core's inherit sentinels (negative float,
+// transparent color) rather than as literal defaults, so the theme keys stay in
+// charge of anything the consumer didn't set.
+function volumeToSpec(cfg: VolumeConfig | undefined) {
+  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,
+  };
+}
+
 // Price-line defaults: a soft red dotted rule with a dark translucent label,
 // close in weight to the current-price indicator it sits beside.
 const DEFAULT_PRICE_LINE_COLOR = 0xffef5350;
@@ -136,10 +210,19 @@ function ensureInstalled(): void {
   installed = true;
 }
 
+/** Progress + curve of the staggered volume-bar collapse. See setVolumeCollapse. */
+export type VolumeCollapse = { t: number; easing: number };
+
 export type ChartCoreState = {
   handle: ChartHandle | null;
   /** Picture freshly rendered after the latest data/size/range push. */
   picture: SkPicture | null;
+  /**
+   * The last volume collapse handed to the core, or null before the first push.
+   * VroomChart's animation loop owns this — it lives here only so the data effect
+   * can restore it, since setVolume snaps the scalar (see below).
+   */
+  volumeCollapseRef: MutableRefObject<VolumeCollapse | null>;
 };
 
 // Owns a ChartHandle and produces an "initial" picture whenever data, size,
@@ -158,6 +241,7 @@ export function useChartCore(
   movingAverages?: MovingAverageOverlay[],
   vwap?: VWAPConfig,
   bollingerBands?: BollingerBandsConfig,
+  volume?: VolumeConfig,
   priceLines?: PriceLinesProp,
 ): ChartCoreState {
   const handleRef = useRef<ChartHandle | null>(null);
@@ -165,6 +249,7 @@ export function useChartCore(
   // every data change, and the core setter re-frames when candles are present,
   // so re-pushing would snap the view away from the user's pan/zoom.
   const defaultWidthAppliedRef = useRef(false);
+  const volumeCollapseRef = useRef<VolumeCollapse | null>(null);
   const [picture, setPicture] = useState<SkPicture | null>(null);
 
   if (!handleRef.current && size.width > 0 && size.height > 0) {
@@ -188,6 +273,7 @@ export function useChartCore(
   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) : '';
 
   useEffect(() => {
@@ -217,38 +303,28 @@ export function useChartCore(
     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) ?? 0xff00bcd4,
-      vwap?.width ?? 1.5,
-    );
+    h.setVWAP(vwapToSpec(vwap));
     h.setBollinger(bollingerToSpec(bollingerBands));
+    h.setVolume(volumeToSpec(volume));
+    // setVolume snaps the collapse scalar to its `enabled`, which would cut a
+    // toggle animation short whenever this effect re-runs (a streaming candle, a
+    // resize). Hand the in-flight value back; VroomChart's loop drives it from
+    // there.
+    const collapse = volumeCollapseRef.current;
+    if (collapse) h.setVolumeCollapse(collapse.t, collapse.easing);
     h.setPriceLines(
       priceLines?.lines.length ? priceLinesToSpec(priceLines) : EMPTY_PRICE_LINES,
     );
     // TODO(rn-parity): mirror the web `liquidity` overlay here (setLiquidity +
     // the VroomBand structs in the JSI handle) — web-only for now.
     setPicture(h.render());
-    // theme/rsi/macd/movingAverages/vwap/bollingerBands/priceLines are
+    // theme/rsi/macd/movingAverages/vwap/bollingerBands/volume/priceLines are
     // represented by their *Key deps.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, priceLinesKey]);
+  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, volumeKey, priceLinesKey]);
 
-  return { handle: handleRef.current, picture };
+  return { handle: handleRef.current, picture, volumeCollapseRef };
 }