react-native-vroom-chart 0.2.0 → 0.5.0

package/react-native-vroom-chart.podspec

@@ -15,7 +15,7 @@ Pod::Spec.new do |s|
   s.name         = "react-native-vroom-chart"
   s.version      = package["version"]
   s.summary      = package["description"]
-  s.homepage     = "https://github.com/darionwelch/vroom"
+  s.homepage     = "https://github.com/keepitreal/vroom"
   s.license      = { :type => "MIT" }
   s.authors      = { "vroom" => "noreply@example.com" }
   s.platforms    = { :ios => "14.0" }

package/src/VroomChart.tsx

@@ -41,11 +41,14 @@ export function VroomChart(props: VroomChartProps) {
     style,
     visibleRange,
     defaultCandleWidth,
+    chartType,
+    transitionMs,
     theme,
     rsi,
     macd,
     movingAverages,
     vwap,
+    bollingerBands,
     crosshairOffset = 40,
     onCrosshair,
     onViewportChange,
@@ -71,11 +74,13 @@ export function VroomChart(props: VroomChartProps) {
     { width, height },
     visibleRange,
     defaultCandleWidth,
+    chartType,
     theme,
     rsi,
     macd,
     movingAverages,
     vwap,
+    bollingerBands,
   );
 
   // RN-Skia's recorder reads this SharedValue on the UI/render runtime, a beat
@@ -147,6 +152,72 @@ export function VroomChart(props: VroomChartProps) {
     };
   }, []);
 
+  // Candle↔line morph. When `chartType` changes we drive the core per-frame with
+  // a (collapse, fade) blend and push a fresh picture into the SV each frame — the
+  // JS side owns the eased clock (see plan). A fresh handle snaps to the target;
+  // transitionMs=0 snaps. Mirrors the web driver in react/src/useChartCore.ts.
+  const morphRaf = useRef<number | null>(null);
+  const morphFade = useRef<number | null>(null);
+  const morphHandle = useRef<typeof handle>(null);
+  useEffect(() => {
+    if (!handle) return undefined;
+    const target = chartType === 'line' ? 1 : 0;
+
+    // Fresh handle (first load / recreate): snap, don't animate.
+    if (morphHandle.current !== handle || morphFade.current == null) {
+      morphHandle.current = handle;
+      morphFade.current = target;
+      handle.setChartType(target);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      return undefined;
+    }
+    if (morphFade.current === target) return undefined;
+
+    if (morphRaf.current != null) {
+      cancelAnimationFrame(morphRaf.current);
+      morphRaf.current = null;
+    }
+    const dur = Math.max(0, transitionMs ?? 300);
+    if (dur === 0) {
+      morphFade.current = target;
+      handle.setChartType(target);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      return undefined;
+    }
+
+    const from = morphFade.current;
+    let startTs: number | null = null;
+    const step = (now: number) => {
+      if (startTs == null) startTs = now;
+      const prog = Math.min(1, (now - startTs) / dur);
+      const e = prog * prog * (3 - 2 * prog); // smoothstep ease-in-out
+      const fade = from + (target - from) * e;
+      morphFade.current = fade;
+      handle.setMorph(fade, fade);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      if (prog < 1) {
+        morphRaf.current = requestAnimationFrame(step);
+      } else {
+        morphRaf.current = null;
+        morphFade.current = target;
+        handle.setChartType(target); // lock the exact endpoint
+        const q = handle.render();
+        if (q) pictureSV.value = q;
+      }
+    };
+    morphRaf.current = requestAnimationFrame(step);
+
+    return () => {
+      if (morphRaf.current != null) {
+        cancelAnimationFrame(morphRaf.current);
+        morphRaf.current = null;
+      }
+    };
+  }, [handle, chartType, transitionMs, pictureSV]);
+
   // Classifies a touch point into the candle area vs. an axis strip. Axis
   // strips always own their gesture (scale price/time) and take priority over
   // the crosshair: an axis touch never opens, moves, or dismisses it.

package/src/index.ts

@@ -11,4 +11,6 @@ export type {
   MASource,
   MovingAverageOverlay,
   VWAPConfig,
+  BollingerBandsConfig,
+  ChartType,
 } from './types';

package/src/jsi.d.ts

@@ -23,6 +23,10 @@ export interface ChartHandle {
    * Affects initial framing only; an explicit setVisibleRange takes precedence.
    */
   setDefaultCandleWidth(px: number): void;
+  /** Render mode: 0 = candlesticks (default), 1 = line chart (close polyline). */
+  setChartType(mode: number): void;
+  /** Candle↔line morph blend: collapse folds candles to close, fade crossfades. */
+  setMorph(collapse: number, fade: number): void;
   /** Shifts the visible range by `dx`/`dy` pixels and returns a fresh picture. */
   pan(dx: number, dy: number): SkPicture | null;
   /**
@@ -138,6 +142,26 @@ export interface ChartHandle {
     color: number,
     width: number,
   ): void;
+  /**
+   * Configures the Bollinger Bands overlay (three price-pane lines + optional
+   * fill between the bands). source/basisKind mirror setOverlays' encodings;
+   * colors are packed 0xAARRGGBB; fillOpacity is 0..1.
+   */
+  setBollinger(spec: {
+    enabled: boolean;
+    period: number;
+    mult: number;
+    source: number;
+    basisKind: number;
+    upperColor: number;
+    upperWidth: number;
+    middleColor: number;
+    middleWidth: number;
+    lowerColor: number;
+    lowerWidth: number;
+    fillEnabled: boolean;
+    fillOpacity: number;
+  }): void;
   /** True while any axis-label fade is still in progress. Drives a RAF loop. */
   isAnimating(): boolean;
   render(): SkPicture | null;

package/src/theme.ts

@@ -18,6 +18,7 @@ export const COLOR_KEYS: Partial<Record<keyof VroomTheme, number>> = {
   wickBear: 13, // VROOM_COLOR_WICK_BEAR
   accentBull: 14, // VROOM_COLOR_ACCENT_BULL
   accentBear: 15, // VROOM_COLOR_ACCENT_BEAR
+  lineColor: 16, // VROOM_COLOR_LINE
 };
 
 // Maps each numeric VroomTheme field to its VroomFloatKey index.
@@ -25,6 +26,7 @@ export const FLOAT_KEYS: Partial<Record<keyof VroomTheme, number>> = {
   wickWidth: 1, // VROOM_FLOAT_WICK_WIDTH_PX
   candleRadius: 8, // VROOM_FLOAT_CANDLE_RADIUS_PX
   volumeRadius: 10, // VROOM_FLOAT_VOLUME_RADIUS_PX
+  lineWidth: 11, // VROOM_FLOAT_LINE_WIDTH_PX
 };
 
 // Maps each boolean VroomTheme field to its VroomFloatKey index (pushed as 0/1).

package/src/types.ts

@@ -14,7 +14,9 @@ export type {
   MASource,
   MovingAverageOverlay,
   VWAPConfig,
+  BollingerBandsConfig,
   MACDConfig,
+  ChartType,
 } from '@vroomchart/types';
 
 /**

package/src/useChartCore.ts

@@ -6,7 +6,9 @@ import type { ChartHandle } from './jsi.d';
 import { packCandles } from './packCandles';
 import { applyTheme, parseColor } from './theme';
 import type {
+  BollingerBandsConfig,
   Candle,
+  ChartType,
   MACDConfig,
   MovingAverageOverlay,
   RSIConfig,
@@ -37,6 +39,35 @@ function overlayToNumeric(o: MovingAverageOverlay) {
   };
 }
 
+// Bollinger defaults: blue bands / orange basis, matching the repo palette.
+const DEFAULT_BB_BAND_COLOR = 0xff2962ff;
+const DEFAULT_BB_BASIS_COLOR = 0xffff6d00;
+
+function bollingerToSpec(cfg: BollingerBandsConfig | undefined) {
+  const srcIdx = cfg?.source ? MA_SOURCES.indexOf(cfg.source) : 0;
+  return {
+    enabled: cfg?.enabled ?? false,
+    period: cfg?.period ?? 20,
+    mult: cfg?.stdDev ?? 2,
+    source: srcIdx < 0 ? 0 : srcIdx,
+    basisKind: cfg?.basis === '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,
+    fillOpacity: cfg?.fillOpacity ?? 0.1,
+  };
+}
+
 let installed = false;
 function ensureInstalled(): void {
   if (installed) return;
@@ -63,11 +94,13 @@ export function useChartCore(
   size: { width: number; height: number; pxRatio?: number },
   visibleRange?: VisibleRange,
   defaultCandleWidth?: number,
+  chartType?: ChartType,
   theme?: VroomTheme,
   rsi?: RSIConfig,
   macd?: MACDConfig,
   movingAverages?: MovingAverageOverlay[],
   vwap?: VWAPConfig,
+  bollingerBands?: BollingerBandsConfig,
 ): ChartCoreState {
   const handleRef = useRef<ChartHandle | null>(null);
   // Push setDefaultCandleWidth only once (first load): setCandles re-runs on
@@ -96,6 +129,7 @@ export function useChartCore(
   const macdKey = macd ? JSON.stringify(macd) : '';
   const maKey = movingAverages ? JSON.stringify(movingAverages) : '';
   const vwapKey = vwap ? JSON.stringify(vwap) : '';
+  const bollingerKey = bollingerBands ? JSON.stringify(bollingerBands) : '';
 
   useEffect(() => {
     const h = handleRef.current;
@@ -119,6 +153,8 @@ export function useChartCore(
     if (explicit) {
       h.setVisibleRange(startMs, endMs);
     }
+    // chartType / the candle↔line morph is driven separately (VroomChart owns the
+    // per-frame animation loop so it can update the picture SharedValue directly).
     if (theme) {
       applyTheme(h, theme);
     }
@@ -143,12 +179,14 @@ export function useChartCore(
       (vwap?.color != null ? parseColor(vwap.color) : null) ?? 0xff00bcd4,
       vwap?.width ?? 1.5,
     );
+    h.setBollinger(bollingerToSpec(bollingerBands));
     // 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 are represented by their *Key deps.
+    // theme/rsi/macd/movingAverages/vwap/bollingerBands 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]);
+  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey]);
 
   return { handle: handleRef.current, picture };
 }