react-native-vroom-chart 0.4.0 → 0.6.0

package/src/VroomChart.tsx

@@ -48,9 +48,15 @@ export function VroomChart(props: VroomChartProps) {
     macd,
     movingAverages,
     vwap,
+    bollingerBands,
     crosshairOffset = 40,
     onCrosshair,
     onViewportChange,
+    priceLines,
+    priceLinesStyle,
+    onPriceLineDrag,
+    onPriceLineDragEnd,
+    onPriceLineClose,
   } = props;
 
   // Fill the parent by default: measure via onLayout. Explicit width/height
@@ -68,6 +74,20 @@ export function VroomChart(props: VroomChartProps) {
     );
   }, []);
 
+  // The close button is callback-gated, so whether a handler exists is part of
+  // what gets rendered.
+  const priceLinesProp = useMemo(
+    () =>
+      priceLines
+        ? {
+            lines: priceLines,
+            style: priceLinesStyle,
+            hasCloseHandler: onPriceLineClose != null,
+          }
+        : undefined,
+    [priceLines, priceLinesStyle, onPriceLineClose],
+  );
+
   const { handle, picture } = useChartCore(
     candles,
     { width, height },
@@ -79,6 +99,8 @@ export function VroomChart(props: VroomChartProps) {
     macd,
     movingAverages,
     vwap,
+    bollingerBands,
+    priceLinesProp,
   );
 
   // RN-Skia's recorder reads this SharedValue on the UI/render runtime, a beat
@@ -236,13 +258,31 @@ export function VroomChart(props: VroomChartProps) {
     [handle, width, height],
   );
 
+  // Hit-tests the price lines at a touch point, resolving the core's index back
+  // to the line it belongs to. Null when nothing was hit.
+  const hitPriceLine = useCallback(
+    (x: number, y: number) => {
+      if (!handle || !priceLines?.length) return null;
+      const hit = handle.hitTestPriceLine(x, y);
+      const line = hit ? priceLines[hit.index] : undefined;
+      return hit && line ? { index: hit.index, part: hit.part, line } : null;
+    },
+    [handle, priceLines],
+  );
+
+  // A price line being dragged vertically: its core index, its id, and the last
+  // previewed price (the payload for the drop).
+  const priceDrag = useRef<{ index: number; id: string; price: number } | null>(
+    null,
+  );
+
   // Pan routes to different C++ mutators depending on where it started: the
   // candle area (chart scroll / crosshair move), the y-axis strip (price
-  // scale), the x-axis strip (time scale), or the indicator pane (horizontal
-  // scroll only). We classify on onStart.
-  const panMode = useRef<'chart' | 'price-axis' | 'time-axis' | 'indicator'>(
-    'chart',
-  );
+  // scale), the x-axis strip (time scale), the indicator pane (horizontal
+  // scroll only), or a draggable price line. We classify on onStart.
+  const panMode = useRef<
+    'chart' | 'price-axis' | 'time-axis' | 'indicator' | 'price-line'
+  >('chart');
 
   const pan = Gesture.Pan()
     .runOnJS(true)
@@ -252,6 +292,20 @@ export function VroomChart(props: VroomChartProps) {
       // Always classify — an axis drag controls the axis even while the
       // crosshair is up. Only a chart-area drag interacts with the crosshair.
       panMode.current = hitAxis(e.x, e.y);
+      // A draggable price line takes the drag over from the chart. Seeding the
+      // preview at the committed price puts the label in drag styling before the
+      // first move, so the grab registers immediately.
+      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;
@@ -264,6 +318,16 @@ export function VroomChart(props: VroomChartProps) {
         // Drag in an indicator pane scrolls the candles horizontally only —
         // no vertical price slide (the pane's scale is fixed).
         next = handle.pan(e.changeX, 0);
+      } else if (panMode.current === 'price-line') {
+        // Preview the price under the finger; nothing is committed until the drop.
+        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) {
         // Chart area + crosshair up → the drag moves the crosshair instead of
         // scrolling. Vertical line tracks the finger x; the dot/horizontal line
@@ -292,6 +356,18 @@ export function VroomChart(props: VroomChartProps) {
     })
     .onEnd((e) => {
       if (!handle) return;
+      // Price-line drop. The preview always clears here: the line is a controlled
+      // prop, so it only really moves once the host restates it — which means a
+      // rejected (or ignored) move reverts on its own.
+      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;
+      }
       // A chart-area drag with the crosshair up just moved the crosshair —
       // nothing about the viewport changed, and no momentum.
       if (panMode.current === 'chart' && crosshairActive.current) return;
@@ -404,6 +480,9 @@ export function VroomChart(props: VroomChartProps) {
       if (!handle) return;
       // A long press on an axis strip controls the axis, never the crosshair.
       if (hitAxis(e.x, e.y) !== 'chart') return;
+      // A press on a price line belongs to that line — dragging it or tapping its
+      // close button — so it must not raise the crosshair over the top.
+      if (hitPriceLine(e.x, e.y)) return;
       cancelDecay();
       crosshairActive.current = true;
       const ch = handle.setCrosshair(e.x, e.y - crosshairOffset);
@@ -419,12 +498,20 @@ export function VroomChart(props: VroomChartProps) {
       });
     });
 
-  // A tap dismisses the crosshair while it's up; otherwise it's a no-op (so it
-  // never interferes with normal pan/pinch).
+  // A tap activates a price line's close button, and otherwise dismisses the
+  // crosshair while it's up. Any other tap is a no-op, so it never interferes
+  // with normal pan/pinch.
   const tap = Gesture.Tap()
     .runOnJS(true)
     .onStart((e) => {
-      if (!handle || !crosshairActive.current) return;
+      if (!handle) return;
+      // The close button is a tap target whether or not the crosshair is up.
+      const pl = hitPriceLine(e.x, e.y);
+      if (pl && pl.part === 1) {
+        onPriceLineClose?.(pl.line.id);
+        return;
+      }
+      if (!crosshairActive.current) return;
       // A tap on an axis strip controls the axis, never dismisses the crosshair.
       if (hitAxis(e.x, e.y) !== 'chart') return;
       crosshairActive.current = false;

package/src/index.ts

@@ -11,5 +11,8 @@ export type {
   MASource,
   MovingAverageOverlay,
   VWAPConfig,
+  BollingerBandsConfig,
   ChartType,
+  PriceLine,
+  PriceLinesStyle,
 } from './types';

package/src/jsi.d.ts

@@ -142,6 +142,74 @@ 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;
+  /**
+   * The continuous data coordinate at pixel (x, y) — not snapped to a candle
+   * slot. Null when there are no candles or the viewport is degenerate. Cheap to
+   * call at gesture rate (no rendering).
+   */
+  coordAt(x: number, y: number): { timeMs: number; price: number } | null;
+  /**
+   * Replaces the full set of price status lines (plus their shared style).
+   * lineStyle: 0=solid,1=dotted,2=dashed; color/bodyBg are packed 0xAARRGGBB;
+   * flags is a bitmask (1=draggable, 2=closable, 4=axis label, 8=extend left);
+   * align: 0=left,1=center,2=right. Pass an empty `lines` array to clear.
+   */
+  setPriceLines(spec: {
+    lines: {
+      price: number;
+      color: number;
+      width: number;
+      lineStyle: number;
+      text: string;
+      quantity: string;
+      flags: number;
+    }[];
+    bodyBg: number;
+    fontSizePx: number;
+    lineLengthFrac: number;
+    align: number;
+    hoverBoost: number;
+  }): void;
+  /**
+   * Hit-tests pixel (x, y) against the price lines. `part` is 0 for the line or
+   * its label body (the drag target) and 1 for the close button; close buttons
+   * win over lines and the nearest in y wins among several candidates. Only
+   * draggable lines report part 0 and only closable lines report part 1. Cheap
+   * to call at gesture rate (no rendering).
+   */
+  hitTestPriceLine(x: number, y: number): { index: number; part: number } | null;
+  /**
+   * Marks a price line's segment as hovered so it renders highlighted; -1 clears.
+   * `part` matches hitTestPriceLine. Touch has no hover state, so this is here
+   * for pointer devices and web parity.
+   */
+  setPriceLineHover(index: number, part: number): void;
+  /**
+   * Drives the live drag preview: the line, its label and its badge render at
+   * `price` with a ghost at the committed one. Pass -1 to end the preview. The
+   * committed price is untouched — restate setPriceLines to apply the move.
+   */
+  setPriceLineDrag(index: number, price: number): void;
   /** True while any axis-label fade is still in progress. Drives a RAF loop. */
   isAnimating(): boolean;
   render(): SkPicture | null;

package/src/types.ts

@@ -14,8 +14,11 @@ export type {
   MASource,
   MovingAverageOverlay,
   VWAPConfig,
+  BollingerBandsConfig,
   MACDConfig,
   ChartType,
+  PriceLine,
+  PriceLinesStyle,
 } from '@vroomchart/types';
 
 /**

package/src/useChartCore.ts

@@ -6,10 +6,13 @@ import type { ChartHandle } from './jsi.d';
 import { packCandles } from './packCandles';
 import { applyTheme, parseColor } from './theme';
 import type {
+  BollingerBandsConfig,
   Candle,
   ChartType,
   MACDConfig,
   MovingAverageOverlay,
+  PriceLine,
+  PriceLinesStyle,
   RSIConfig,
   VisibleRange,
   VroomTheme,
@@ -38,6 +41,90 @@ 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,
+  };
+}
+
+// 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;
+const DEFAULT_PRICE_LINE_BODY_BG = 0xd91c2128;
+const DEFAULT_PRICE_LINE_HOVER_BOOST = 1.25;
+
+const LINE_STYLES = { solid: 0, dotted: 1, dashed: 2 } as const;
+
+// Mirrors VroomPriceLineFlags in packages/core/include/vroom/vroom_chart.h.
+const PRICE_LINE_DRAGGABLE = 1 << 0;
+const PRICE_LINE_CLOSABLE = 1 << 1;
+const PRICE_LINE_AXIS_LABEL = 1 << 2;
+const PRICE_LINE_EXTEND_LEFT = 1 << 3;
+
+/** The price lines + their shared style, as the chart's props express them. */
+export type PriceLinesProp = {
+  lines: PriceLine[];
+  style?: PriceLinesStyle;
+  /**
+   * Whether the host supplied a close handler. The close button is
+   * callback-gated, so with nothing for it to do it isn't drawn at all.
+   */
+  hasCloseHandler: boolean;
+};
+
+function priceLinesToSpec(cfg: PriceLinesProp) {
+  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,
+  };
+}
+
+// Cleared overlay: no lines (the style values are irrelevant, but the spec shape
+// requires them).
+const EMPTY_PRICE_LINES = priceLinesToSpec({ lines: [], hasCloseHandler: false });
+
 let installed = false;
 function ensureInstalled(): void {
   if (installed) return;
@@ -70,6 +157,8 @@ export function useChartCore(
   macd?: MACDConfig,
   movingAverages?: MovingAverageOverlay[],
   vwap?: VWAPConfig,
+  bollingerBands?: BollingerBandsConfig,
+  priceLines?: PriceLinesProp,
 ): ChartCoreState {
   const handleRef = useRef<ChartHandle | null>(null);
   // Push setDefaultCandleWidth only once (first load): setCandles re-runs on
@@ -98,6 +187,8 @@ 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) : '';
+  const priceLinesKey = priceLines ? JSON.stringify(priceLines) : '';
 
   useEffect(() => {
     const h = handleRef.current;
@@ -147,12 +238,17 @@ export function useChartCore(
       (vwap?.color != null ? parseColor(vwap.color) : null) ?? 0xff00bcd4,
       vwap?.width ?? 1.5,
     );
+    h.setBollinger(bollingerToSpec(bollingerBands));
+    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 are represented by their *Key deps.
+    // theme/rsi/macd/movingAverages/vwap/bollingerBands/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]);
+  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, priceLinesKey]);
 
   return { handle: handleRef.current, picture };
 }