react-native-vroom-chart 0.1.0

package/cpp/_core_src/volume.h

@@ -0,0 +1,34 @@
+// Volume bars — one bottom-anchored bar per candle, centered on the candle and
+// matching its body width, growing upward with the candle's volume. Drawn under
+// the candles (candles z-above). Its own module alongside candles / labels so
+// the chart orchestrator stays thin.
+
+#pragma once
+
+#include <cstddef>
+#include <cstdint>
+
+#include "vroom/vroom_chart.h"
+
+class SkCanvas;
+
+namespace vroom {
+struct Layout;
+struct Theme;
+}  // namespace vroom
+
+namespace vroom::volume {
+
+// Draws a volume bar for each candle in [visible, visible + n). Bars share the
+// candles' x/width (via candle_center_x / candle_body_width) so they scroll and
+// resize with the candles. Heights auto-fit to the max volume in the slice.
+void draw(SkCanvas* canvas,
+          const ::VroomCandle* visible,
+          std::size_t n,
+          const Layout& lay,
+          const Theme& theme,
+          int64_t window_ms,
+          int64_t visible_start_ms,
+          int64_t candle_duration_ms);
+
+}  // namespace vroom::volume

package/cpp/_core_src/vwap.cpp

@@ -0,0 +1,51 @@
+#include "vwap.h"
+
+#include <cmath>  // std::nan
+#include <cstdint>
+
+namespace vroom::vwap {
+
+namespace {
+constexpr int64_t kDayMs = 86'400'000;
+
+// Floor division (rounds toward -inf), so a candle before the shifted day start
+// buckets into the previous session rather than truncating toward zero.
+int64_t floor_div(int64_t a, int64_t b) {
+    int64_t q = a / b;
+    int64_t r = a % b;
+    if (r != 0 && ((r < 0) != (b < 0))) --q;
+    return q;
+}
+}  // namespace
+
+void compute(const ::VroomCandle* candles, std::size_t n, int reset_offset_min,
+             std::vector<double>& vwap_out,
+             std::vector<unsigned char>& break_out) {
+    vwap_out.assign(n, std::nan(""));
+    break_out.assign(n, 0);
+    if (!candles) return;
+
+    const int64_t offset_ms = static_cast<int64_t>(reset_offset_min) * 60'000;
+    double cum_pv = 0.0;
+    double cum_v = 0.0;
+    int64_t prev_key = 0;
+    bool have_prev = false;
+
+    for (std::size_t i = 0; i < n; ++i) {
+        const int64_t key = floor_div(candles[i].time_ms - offset_ms, kDayMs);
+        if (!have_prev || key != prev_key) {
+            cum_pv = 0.0;
+            cum_v = 0.0;
+            if (have_prev) break_out[i] = 1;  // new session (not the first)
+            have_prev = true;
+            prev_key = key;
+        }
+        const double typical =
+            (candles[i].high + candles[i].low + candles[i].close) / 3.0;
+        cum_pv += typical * candles[i].volume;
+        cum_v += candles[i].volume;
+        if (cum_v > 0.0) vwap_out[i] = cum_pv / cum_v;
+    }
+}
+
+}  // namespace vroom::vwap

package/cpp/_core_src/vwap.h

@@ -0,0 +1,27 @@
+// VWAP (Volume-Weighted Average Price) — pure, no Skia, so it builds into the
+// unit-test target. Session anchor only: cumulative sums reset each UTC day
+// shifted by a configurable offset.
+//
+//   VWAP = sum(typical*volume) / sum(volume)   over the current session
+//   typical = (high + low + close) / 3   (hlc3)
+
+#pragma once
+
+#include <cstddef>
+#include <vector>
+
+#include "vroom/vroom_chart.h"  // ::VroomCandle
+
+namespace vroom::vwap {
+
+// Computes session VWAP over [candles, candles+n). The session boundary is the
+// UTC day shifted by `reset_offset_min` minutes (e.g. 60 -> sessions start at
+// 01:00 UTC). Fills:
+//   vwap_out  (resized to n): VWAP at candle i, NaN where cumulative volume is 0
+//   break_out (resized to n): 1 at the first candle of each new session after
+//             the first (so the renderer lifts the pen across resets), else 0.
+void compute(const ::VroomCandle* candles, std::size_t n, int reset_offset_min,
+             std::vector<double>& vwap_out,
+             std::vector<unsigned char>& break_out);
+
+}  // namespace vroom::vwap

package/ios/README.md

@@ -0,0 +1,7 @@
+# iOS shim (placeholder)
+
+When native is wired up, this directory will hold the Objective-C++ view
+and module that host the chart and forward gestures into the C++ core.
+
+The accompanying `react-native-vroom-chart.podspec` at the package root will
+build `cpp/` + `ios/` + the linked `@vroomchart/core` static library.

package/ios/VroomChartModule.h

@@ -0,0 +1,11 @@
+#import <Foundation/Foundation.h>
+#import <React/RCTBridgeModule.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <VroomChartSpec/VroomChartSpec.h>
+@interface VroomChartModule : NSObject <NativeVroomChartSpec>
+#else
+@interface VroomChartModule : NSObject <RCTBridgeModule>
+#endif
+
+@end

package/ios/VroomChartModule.mm

@@ -0,0 +1,44 @@
+#import "VroomChartModule.h"
+
+#import <React/RCTBridge+Private.h>
+#import <ReactCommon/CallInvoker.h>
+#import <jsi/jsi.h>
+
+#include "VroomJsiInstaller.h"
+
+using namespace facebook;
+
+@implementation VroomChartModule
+
+RCT_EXPORT_MODULE(VroomChartModule)
+
+// Called from JS via NativeVroomChart.install(). Grabs the JSI runtime from the
+// bridge and asks the C++ installer to expose global.VroomChartJSI.
+//
+// The TurboModule version (new arch) and the legacy version both end up here.
+- (NSNumber *)install
+{
+  RCTBridge *bridge = [RCTBridge currentBridge];
+  RCTCxxBridge *cxxBridge = (RCTCxxBridge *)bridge;
+  if (cxxBridge == nil) {
+    return @NO;
+  }
+
+  jsi::Runtime *runtime = (jsi::Runtime *)cxxBridge.runtime;
+  if (runtime == nullptr) {
+    return @NO;
+  }
+
+  vroom::installJsi(*runtime);
+  return @YES;
+}
+
+#ifdef RCT_NEW_ARCH_ENABLED
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeVroomChartSpecJSI>(params);
+}
+#endif
+
+@end

package/lib/index.d.mts

@@ -0,0 +1,185 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+/** A single OHLCV bar. `candles` is an array of these. */
+type Candle = {
+    /** Bar open time as Unix epoch milliseconds. */
+    timeMs: number;
+    /** Opening price. */
+    open: number;
+    /** Highest price during the bar. */
+    high: number;
+    /** Lowest price during the bar. */
+    low: number;
+    /** Closing price. */
+    close: number;
+    /** Traded volume during the bar. */
+    volume: number;
+};
+/** Payload passed to `onCrosshair` as the crosshair shows, moves, or hides. */
+type CrosshairEvent = {
+    /** True while the crosshair is showing; false when it's dismissed. */
+    active: boolean;
+    /** OHLCV of the candle under the crosshair, or null when inactive. */
+    candle: Candle | null;
+    /**
+     * Why this event fired — lets the host react differently (e.g. haptics):
+     *   'show' — long-press activated the crosshair
+     *   'move' — the crosshair snapped to a *different* candle (one per candle
+     *            crossed; not per drag frame)
+     *   'hide' — the crosshair was dismissed
+     * The library never plays haptics itself; the host decides.
+     */
+    reason: 'show' | 'move' | 'hide';
+};
+/**
+ * A color value: a hex string (`'#0d1117'`, or 8-digit `'#aarrggbb'`) or a
+ * packed ARGB number. In `VroomTheme` every field is optional — omitted colors
+ * keep the library default.
+ */
+type VroomColor = string | number;
+/** Color overrides for the chart, passed via the `theme` prop. */
+type VroomTheme = {
+    /** Chart + axis-strip background. */
+    background?: VroomColor;
+    /** Up candles (also bull wicks, bull volume bars, rising price indicator). */
+    bull?: VroomColor;
+    /** Down candles (also bear wicks, bear volume bars, falling price indicator). */
+    bear?: VroomColor;
+    /** Gridlines. */
+    grid?: VroomColor;
+    /** Axis label text (price + time). */
+    axisText?: VroomColor;
+    /** Crosshair dashed lines. */
+    crosshair?: VroomColor;
+    /** Crosshair target — the hollow ring/dot at the intersection. */
+    crosshairTarget?: VroomColor;
+};
+/** A time window over the candle data, as Unix epoch milliseconds. */
+type VisibleRange = {
+    /** Window start (inclusive), Unix epoch milliseconds. */
+    startMs: number;
+    /** Window end (inclusive), Unix epoch milliseconds. */
+    endMs: number;
+};
+/** RSI indicator config. Rendered in a pane below the candles when enabled. */
+type RSIConfig = {
+    enabled?: boolean;
+    /** Lookback period in candle counts. Default 14, clamped to >= 2. */
+    period?: number;
+    /** Overbought band level (0..100). Default 70. */
+    upperBand?: number;
+    /** Oversold band level (0..100). Default 30. */
+    lowerBand?: number;
+    /** Show the RSI-based moving-average trendline. Default true. */
+    maEnabled?: boolean;
+    /** Trendline (MA of RSI) length. Default 14, clamped to >= 1. */
+    maPeriod?: number;
+};
+/** Price source for a moving average. */
+type MASource = 'close' | 'open' | 'high' | 'low' | 'hl2' | 'hlc3' | 'ohlc4';
+/**
+ * A moving-average overlay line drawn on the price pane. Provide an array of
+ * these via `movingAverages` to render a ribbon of SMA/EMA lines.
+ */
+type MovingAverageOverlay = {
+    /** 'sma' (simple) or 'ema' (exponential). */
+    kind: 'sma' | 'ema';
+    /** Lookback in candles. */
+    length: number;
+    /** Price source. Default 'close'. */
+    source?: MASource;
+    /** Line color (hex string or packed ARGB number). */
+    color?: string | number;
+    /** Stroke width in px. Default 1.5. */
+    width?: number;
+};
+/**
+ * VWAP overlay config (session anchor). Drawn as a single line on the price
+ * pane, resetting each session.
+ */
+type VWAPConfig = {
+    enabled?: boolean;
+    /** Session reset offset from UTC midnight, in minutes (default 0). */
+    resetMinutes?: number;
+    /** Line color (hex string or packed ARGB number). */
+    color?: string | number;
+    /** Stroke width in px. Default 1.5. */
+    width?: number;
+};
+/** MACD indicator config. Rendered in its own pane below the candles. */
+type MACDConfig = {
+    enabled?: boolean;
+    /** Fast EMA length. Default 12. */
+    fast?: number;
+    /** Slow EMA length (forced > fast). Default 26. */
+    slow?: number;
+    /** Signal-line EMA length. Default 9. */
+    signal?: number;
+};
+/**
+ * Platform-agnostic props shared by every vroom chart component. Each platform
+ * extends this with its own `style` typing (and any platform-only props) to
+ * form its public `VroomChartProps`.
+ */
+type VroomChartCoreProps = {
+    /** OHLCV bars to render. The only required prop. */
+    candles: Candle[];
+    /**
+     * Explicit size overrides in logical px. When omitted, the chart fills its
+     * parent (measured at runtime). Prefer layout-driven sizing via the
+     * platform's `style` (flex / aspect-ratio / absolute fill) over hard-coding.
+     */
+    width?: number;
+    height?: number;
+    /** Time window to render. Omit (or both 0) to show every candle. */
+    visibleRange?: VisibleRange;
+    theme?: VroomTheme;
+    /** RSI indicator (pane below the candles). Omit/disable to hide it. */
+    rsi?: RSIConfig;
+    /** MACD indicator (its own pane below the candles). Omit/disable to hide it. */
+    macd?: MACDConfig;
+    /** Moving-average overlay lines (SMA/EMA) drawn on the price pane. */
+    movingAverages?: MovingAverageOverlay[];
+    /** VWAP overlay (session anchor, configurable reset). */
+    vwap?: VWAPConfig;
+    /**
+     * Pixels the crosshair dot / horizontal line sit *above* the touch point so
+     * they aren't hidden under the thumb. The vertical line stays centered on the
+     * touch x. Default 40.
+     */
+    crosshairOffset?: number;
+    onCrosshair?: (e: CrosshairEvent) => void;
+    onViewportChange?: (startMs: number, endMs: number) => void;
+};
+
+/**
+ * Props for the {@link VroomChart} component. The cross-platform props come
+ * from {@link VroomChartCoreProps}; `style` is the React Native flavor.
+ */
+type VroomChartProps = VroomChartCoreProps & {
+    /** Style for the chart's root view. Defaults to filling the parent. */
+    style?: StyleProp<ViewStyle>;
+};
+
+// Ambient declaration for the JSI HostObject installed by VroomChartModule.
+
+
+
+declare global {
+  // eslint-disable-next-line no-var
+  var VroomChartJSI: VroomChartJSI | undefined;
+}
+
+/**
+ * Skia-rendered candlestick chart. Pass OHLCV `candles` and size it via `style`
+ * (it fills its parent by default). Pan to scroll, pinch to zoom, drag the
+ * price/time axes to rescale, and long-press for the crosshair. Optional
+ * indicators (`rsi`, `macd`, `movingAverages`, `vwap`), colors (`theme`), and
+ * events (`onCrosshair`, `onViewportChange`) are configured through props.
+ *
+ * @see {@link VroomChartProps} for the full prop reference.
+ */
+declare function VroomChart(props: VroomChartProps): React.JSX.Element;
+
+export { type Candle, type CrosshairEvent, type MACDConfig, type MASource, type MovingAverageOverlay, type RSIConfig, type VWAPConfig, type VisibleRange, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme };

package/lib/index.d.ts

@@ -0,0 +1,185 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+/** A single OHLCV bar. `candles` is an array of these. */
+type Candle = {
+    /** Bar open time as Unix epoch milliseconds. */
+    timeMs: number;
+    /** Opening price. */
+    open: number;
+    /** Highest price during the bar. */
+    high: number;
+    /** Lowest price during the bar. */
+    low: number;
+    /** Closing price. */
+    close: number;
+    /** Traded volume during the bar. */
+    volume: number;
+};
+/** Payload passed to `onCrosshair` as the crosshair shows, moves, or hides. */
+type CrosshairEvent = {
+    /** True while the crosshair is showing; false when it's dismissed. */
+    active: boolean;
+    /** OHLCV of the candle under the crosshair, or null when inactive. */
+    candle: Candle | null;
+    /**
+     * Why this event fired — lets the host react differently (e.g. haptics):
+     *   'show' — long-press activated the crosshair
+     *   'move' — the crosshair snapped to a *different* candle (one per candle
+     *            crossed; not per drag frame)
+     *   'hide' — the crosshair was dismissed
+     * The library never plays haptics itself; the host decides.
+     */
+    reason: 'show' | 'move' | 'hide';
+};
+/**
+ * A color value: a hex string (`'#0d1117'`, or 8-digit `'#aarrggbb'`) or a
+ * packed ARGB number. In `VroomTheme` every field is optional — omitted colors
+ * keep the library default.
+ */
+type VroomColor = string | number;
+/** Color overrides for the chart, passed via the `theme` prop. */
+type VroomTheme = {
+    /** Chart + axis-strip background. */
+    background?: VroomColor;
+    /** Up candles (also bull wicks, bull volume bars, rising price indicator). */
+    bull?: VroomColor;
+    /** Down candles (also bear wicks, bear volume bars, falling price indicator). */
+    bear?: VroomColor;
+    /** Gridlines. */
+    grid?: VroomColor;
+    /** Axis label text (price + time). */
+    axisText?: VroomColor;
+    /** Crosshair dashed lines. */
+    crosshair?: VroomColor;
+    /** Crosshair target — the hollow ring/dot at the intersection. */
+    crosshairTarget?: VroomColor;
+};
+/** A time window over the candle data, as Unix epoch milliseconds. */
+type VisibleRange = {
+    /** Window start (inclusive), Unix epoch milliseconds. */
+    startMs: number;
+    /** Window end (inclusive), Unix epoch milliseconds. */
+    endMs: number;
+};
+/** RSI indicator config. Rendered in a pane below the candles when enabled. */
+type RSIConfig = {
+    enabled?: boolean;
+    /** Lookback period in candle counts. Default 14, clamped to >= 2. */
+    period?: number;
+    /** Overbought band level (0..100). Default 70. */
+    upperBand?: number;
+    /** Oversold band level (0..100). Default 30. */
+    lowerBand?: number;
+    /** Show the RSI-based moving-average trendline. Default true. */
+    maEnabled?: boolean;
+    /** Trendline (MA of RSI) length. Default 14, clamped to >= 1. */
+    maPeriod?: number;
+};
+/** Price source for a moving average. */
+type MASource = 'close' | 'open' | 'high' | 'low' | 'hl2' | 'hlc3' | 'ohlc4';
+/**
+ * A moving-average overlay line drawn on the price pane. Provide an array of
+ * these via `movingAverages` to render a ribbon of SMA/EMA lines.
+ */
+type MovingAverageOverlay = {
+    /** 'sma' (simple) or 'ema' (exponential). */
+    kind: 'sma' | 'ema';
+    /** Lookback in candles. */
+    length: number;
+    /** Price source. Default 'close'. */
+    source?: MASource;
+    /** Line color (hex string or packed ARGB number). */
+    color?: string | number;
+    /** Stroke width in px. Default 1.5. */
+    width?: number;
+};
+/**
+ * VWAP overlay config (session anchor). Drawn as a single line on the price
+ * pane, resetting each session.
+ */
+type VWAPConfig = {
+    enabled?: boolean;
+    /** Session reset offset from UTC midnight, in minutes (default 0). */
+    resetMinutes?: number;
+    /** Line color (hex string or packed ARGB number). */
+    color?: string | number;
+    /** Stroke width in px. Default 1.5. */
+    width?: number;
+};
+/** MACD indicator config. Rendered in its own pane below the candles. */
+type MACDConfig = {
+    enabled?: boolean;
+    /** Fast EMA length. Default 12. */
+    fast?: number;
+    /** Slow EMA length (forced > fast). Default 26. */
+    slow?: number;
+    /** Signal-line EMA length. Default 9. */
+    signal?: number;
+};
+/**
+ * Platform-agnostic props shared by every vroom chart component. Each platform
+ * extends this with its own `style` typing (and any platform-only props) to
+ * form its public `VroomChartProps`.
+ */
+type VroomChartCoreProps = {
+    /** OHLCV bars to render. The only required prop. */
+    candles: Candle[];
+    /**
+     * Explicit size overrides in logical px. When omitted, the chart fills its
+     * parent (measured at runtime). Prefer layout-driven sizing via the
+     * platform's `style` (flex / aspect-ratio / absolute fill) over hard-coding.
+     */
+    width?: number;
+    height?: number;
+    /** Time window to render. Omit (or both 0) to show every candle. */
+    visibleRange?: VisibleRange;
+    theme?: VroomTheme;
+    /** RSI indicator (pane below the candles). Omit/disable to hide it. */
+    rsi?: RSIConfig;
+    /** MACD indicator (its own pane below the candles). Omit/disable to hide it. */
+    macd?: MACDConfig;
+    /** Moving-average overlay lines (SMA/EMA) drawn on the price pane. */
+    movingAverages?: MovingAverageOverlay[];
+    /** VWAP overlay (session anchor, configurable reset). */
+    vwap?: VWAPConfig;
+    /**
+     * Pixels the crosshair dot / horizontal line sit *above* the touch point so
+     * they aren't hidden under the thumb. The vertical line stays centered on the
+     * touch x. Default 40.
+     */
+    crosshairOffset?: number;
+    onCrosshair?: (e: CrosshairEvent) => void;
+    onViewportChange?: (startMs: number, endMs: number) => void;
+};
+
+/**
+ * Props for the {@link VroomChart} component. The cross-platform props come
+ * from {@link VroomChartCoreProps}; `style` is the React Native flavor.
+ */
+type VroomChartProps = VroomChartCoreProps & {
+    /** Style for the chart's root view. Defaults to filling the parent. */
+    style?: StyleProp<ViewStyle>;
+};
+
+// Ambient declaration for the JSI HostObject installed by VroomChartModule.
+
+
+
+declare global {
+  // eslint-disable-next-line no-var
+  var VroomChartJSI: VroomChartJSI | undefined;
+}
+
+/**
+ * Skia-rendered candlestick chart. Pass OHLCV `candles` and size it via `style`
+ * (it fills its parent by default). Pan to scroll, pinch to zoom, drag the
+ * price/time axes to rescale, and long-press for the crosshair. Optional
+ * indicators (`rsi`, `macd`, `movingAverages`, `vwap`), colors (`theme`), and
+ * events (`onCrosshair`, `onViewportChange`) are configured through props.
+ *
+ * @see {@link VroomChartProps} for the full prop reference.
+ */
+declare function VroomChart(props: VroomChartProps): React.JSX.Element;
+
+export { type Candle, type CrosshairEvent, type MACDConfig, type MASource, type MovingAverageOverlay, type RSIConfig, type VWAPConfig, type VisibleRange, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme };