react-native-vroom-chart 0.5.0 → 0.6.0

package/src/jsi.d.ts

@@ -162,6 +162,54 @@ export interface ChartHandle {
     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

@@ -17,6 +17,8 @@ export type {
   BollingerBandsConfig,
   MACDConfig,
   ChartType,
+  PriceLine,
+  PriceLinesStyle,
 } from '@vroomchart/types';
 
 /**

package/src/useChartCore.ts

@@ -11,6 +11,8 @@ import type {
   ChartType,
   MACDConfig,
   MovingAverageOverlay,
+  PriceLine,
+  PriceLinesStyle,
   RSIConfig,
   VisibleRange,
   VroomTheme,
@@ -68,6 +70,61 @@ function bollingerToSpec(cfg: BollingerBandsConfig | undefined) {
   };
 }
 
+// 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;
@@ -101,6 +158,7 @@ export function useChartCore(
   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
@@ -130,6 +188,7 @@ export function useChartCore(
   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;
@@ -180,13 +239,16 @@ export function useChartCore(
       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/bollingerBands 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, bollingerKey]);
+  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, priceLinesKey]);
 
   return { handle: handleRef.current, picture };
 }