react-native-vroom-chart 0.1.1 → 0.1.3

package/cpp/_core_src/drawings.cpp

@@ -0,0 +1,108 @@
+#include "drawings.h"
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+#include "include/core/SkCanvas.h"
+#include "include/core/SkColor.h"
+#include "include/core/SkPaint.h"
+#include "include/core/SkPoint.h"
+#include "include/core/SkRect.h"
+#pragma clang diagnostic pop
+
+#include "chart.h"
+
+namespace vroom::drawings {
+
+namespace {
+// Node-dot styling (fixed for v1, not themed): a 4px black dot with a 2px blue
+// ring around it. kNodeFillRadius is the black core; the blue stroke is centered
+// at kNodeRingRadius so it sits just outside the core.
+constexpr SkColor kNodeFill = 0xff000000;       // black core
+constexpr SkColor kNodeBorder = 0xff2962ff;     // blue ring
+constexpr float   kNodeFillRadius = 2.f;        // 4px diameter
+constexpr float   kNodeBorderWidth = 2.f;
+constexpr float   kNodeRingRadius = 3.f;        // ring centered outside the core
+
+// Maps a data-space point to pixels in the price pane.
+SkPoint to_px(const VroomChart& chart, const Layout& lay, const PriceBounds& bounds,
+              int64_t window_ms, const VroomDrawPoint& p) {
+    const float x = vroom::x_at_time(lay, chart.visible_start_ms, window_ms, p.time_ms);
+    const float y = vroom::price_to_y(lay, bounds, p.price);
+    return SkPoint{x, y};
+}
+
+void draw_node(SkCanvas* canvas, SkPoint pt) {
+    SkPaint fill;
+    fill.setAntiAlias(true);
+    fill.setColor(kNodeFill);
+    canvas->drawCircle(pt.fX, pt.fY, kNodeFillRadius, fill);
+
+    SkPaint border;
+    border.setAntiAlias(true);
+    border.setColor(kNodeBorder);
+    border.setStyle(SkPaint::kStroke_Style);
+    border.setStrokeWidth(kNodeBorderWidth);
+    canvas->drawCircle(pt.fX, pt.fY, kNodeRingRadius, border);
+}
+}  // namespace
+
+void draw(SkCanvas* canvas,
+          const VroomChart& chart,
+          const Layout& lay,
+          const PriceBounds& bounds,
+          float candle_right,
+          float candle_area_h) {
+    if (!canvas || candle_right <= 0.f || candle_area_h <= 0.f) return;
+    const int64_t window_ms = chart.visible_end_ms - chart.visible_start_ms;
+    if (window_ms <= 0) return;
+
+    const SkRect clip = SkRect::MakeLTRB(0.f, 0.f, candle_right, candle_area_h);
+
+    // 1. Committed line segments, clipped to the candle area.
+    if (!chart.drawings.empty()) {
+        canvas->save();
+        canvas->clipRect(clip);
+        for (const VroomDrawing& d : chart.drawings) {
+            const SkPoint a = to_px(chart, lay, bounds, window_ms, d.a);
+            const SkPoint b = to_px(chart, lay, bounds, window_ms, d.b);
+            SkPaint line;
+            line.setAntiAlias(true);
+            line.setColor(static_cast<SkColor>(d.color));
+            line.setStyle(SkPaint::kStroke_Style);
+            line.setStrokeWidth(d.width > 0.f ? d.width : 2.f);
+            canvas->drawLine(a, b, line);
+        }
+        canvas->restore();
+    }
+
+    if (!chart.draft_active) return;
+
+    const SkPoint a = to_px(chart, lay, bounds, window_ms, chart.draft_a);
+    const bool has_b = chart.draft_has_b;
+    const SkPoint b =
+        has_b ? to_px(chart, lay, bounds, window_ms, chart.draft_b) : a;
+
+    // 2. Guideline preview (A->B), clipped to the candle area. Only while the
+    //    second point is still being placed (draft_guide); once committed, the
+    //    solid segment comes from chart.drawings instead.
+    if (chart.draft_guide && has_b) {
+        canvas->save();
+        canvas->clipRect(clip);
+        SkPaint guide;
+        guide.setAntiAlias(true);
+        guide.setColor(static_cast<SkColor>(chart.draft_color));
+        guide.setStyle(SkPaint::kStroke_Style);
+        guide.setStrokeWidth(chart.draft_width > 0.f ? chart.draft_width : 2.f);
+        canvas->drawLine(a, b, guide);
+        canvas->restore();
+    }
+
+    // 3. Node dots on top (not clipped, so an edge dot still renders fully).
+    //    While guiding (placing the second point) only the anchor dot shows; the
+    //    moving end is conveyed by the guideline. Once selected (committed) both
+    //    endpoints show dots.
+    draw_node(canvas, a);
+    if (has_b && !chart.draft_guide) draw_node(canvas, b);
+}
+
+}  // namespace vroom::drawings

package/cpp/_core_src/drawings.h

@@ -0,0 +1,34 @@
+// Drawing annotations — user-placed line tools rendered on the price pane.
+//
+// Two kinds of geometry are drawn here:
+//   * Committed lines (chart.drawings) — two-point trendlines anchored in data
+//     space, so they stay glued to the candles as the user pans/zooms.
+//   * The transient "draft" (chart.draft_*) — the in-progress node dots and the
+//     live guideline shown while the user is placing a line.
+//
+// Like ma_overlay / crosshair this is its own module so the chart orchestrator
+// stays thin. Drawn after the overlays and before the axis backgrounds.
+
+#pragma once
+
+#include "viewport.h"
+#include "vroom/vroom_chart.h"
+
+class SkCanvas;
+struct VroomChart;
+
+namespace vroom::drawings {
+
+// Draws the committed line drawings and the in-progress draft. `candle_right` is
+// the x of the y-axis strip and `candle_area_h` the price-pane bottom; geometry
+// is clipped to that rectangle so lines never bleed into the axis strips or the
+// indicator panes below. Node dots are exempt from the clip so a dot placed at
+// the very edge still renders fully.
+void draw(SkCanvas* canvas,
+          const VroomChart& chart,
+          const vroom::Layout& lay,
+          const vroom::PriceBounds& bounds,
+          float candle_right,
+          float candle_area_h);
+
+}  // namespace vroom::drawings

package/cpp/_core_src/labels.cpp

@@ -318,7 +318,7 @@ void recompute_axis_width(VroomChart& chart) {
         return;
     }
     double hi, lo;
-    if (chart.price_bounds_initialized) {
+    if (chart.price_bounds_manual) {
         hi = chart.price_bounds.max;
         lo = chart.price_bounds.min;
     } else if (!chart.candles.empty()) {

package/cpp/_core_src/macd_pane.cpp

@@ -52,7 +52,10 @@ void draw(SkCanvas* canvas,
     if (band_h <= 0.f) return;
 
     const float mid = (pane_top + pane_bottom) * 0.5f;
-    const float half = band_h * 0.5f * kPadFrac;
+    // User y-zoom scales the amplitude about the zero line (mid). 1.0 = the
+    // default auto-fit; >1 zooms in, <1 zooms out.
+    const float half =
+        band_h * 0.5f * kPadFrac * static_cast<float>(chart.macd_y_scale);
 
     // Auto-scale symmetric about zero across all visible finite values.
     double scale = 0.0;
@@ -100,8 +103,8 @@ void draw(SkCanvas* canvas,
             vroom::candle_body_width(lay, window_ms, candle_duration_ms);
         const float half_body = body_w * 0.5f;
         const float zero_y = y_for(0.0);
-        const SkColor bull = chart.theme.colors[VROOM_COLOR_BULL];
-        const SkColor bear = chart.theme.colors[VROOM_COLOR_BEAR];
+        const SkColor bull = chart.theme.colors[VROOM_COLOR_ACCENT_BULL];
+        const SkColor bear = chart.theme.colors[VROOM_COLOR_ACCENT_BEAR];
         for (std::size_t i = 0; i < n; ++i) {
             const double h = hist_visible[i];
             if (!std::isfinite(h)) continue;

package/cpp/_core_src/price_indicator.cpp

@@ -43,7 +43,7 @@ void draw(SkCanvas* canvas,
     const ::VroomCandle& last = chart.candles.back();
     const bool bull = last.close >= last.open;
     const SkColor color =
-        chart.theme.colors[bull ? VROOM_COLOR_BULL : VROOM_COLOR_BEAR];
+        chart.theme.colors[bull ? VROOM_COLOR_ACCENT_BULL : VROOM_COLOR_ACCENT_BEAR];
 
     const float y = vroom::price_to_y(lay, bounds, last.close);
     if (y < 0.f || y > candle_area_h) return;  // price scrolled off-range

package/cpp/_core_src/rsi_pane.cpp

@@ -50,8 +50,13 @@ void draw(SkCanvas* canvas,
     const float band_h = pane_bottom - pane_top;
     if (band_h <= 0.f) return;
 
+    // Map 0..100 about the pane center so the user y-zoom scales symmetrically
+    // around 50. z == 1 reproduces the default fit (0 -> pane_bottom, 100 ->
+    // pane_top); z > 1 zooms in (taller), z < 1 zooms out (flatter).
+    const float center_y = (pane_top + pane_bottom) * 0.5f;
+    const float z = static_cast<float>(chart.rsi_y_scale);
     auto y_for = [&](double v) -> float {
-        return pane_bottom - static_cast<float>(v / 100.0) * band_h;
+        return center_y - static_cast<float>((v - 50.0) / 100.0) * band_h * z;
     };
 
     // Mask the band with the background so candles/volume that overflow below

package/cpp/_core_src/theme.cpp

@@ -16,6 +16,12 @@ constexpr uint32_t kDefaultColors[VROOM_COLOR_COUNT_] = {
     0xff161b22,  // TOOLTIP_BG
     0xffc9d1d9,  // TOOLTIP_TEXT
     0xff3e4855,  // CROSSHAIR_TARGET — CROSSHAIR lightened 30% (prior derived ring)
+    0x00000000,  // BORDER_BULL — transparent sentinel: inherit BULL fill
+    0x00000000,  // BORDER_BEAR — transparent sentinel: inherit BEAR fill
+    0x00000000,  // WICK_BULL   — transparent sentinel: inherit BULL fill
+    0x00000000,  // WICK_BEAR   — transparent sentinel: inherit BEAR fill
+    0xff26a69a,  // ACCENT_BULL — classic teal-green (price indicator, volume, MACD)
+    0xffef5350,  // ACCENT_BEAR — classic red
 };
 
 constexpr float kDefaultFloats[VROOM_FLOAT_COUNT_] = {

package/cpp/_core_src/viewport.cpp

@@ -35,6 +35,31 @@ float candle_center_x(const Layout& layout,
     return static_cast<float>(static_cast<double>(usable) * frac);
 }
 
+int64_t time_at_x(const Layout& layout,
+                  int64_t visible_start_ms,
+                  int64_t window_ms,
+                  float x_px) {
+    const float usable =
+        layout.width_px - layout.y_axis_width_px - layout.right_padding_px;
+    if (usable <= 0.f || window_ms <= 0) return visible_start_ms;
+    const double frac = static_cast<double>(x_px) / static_cast<double>(usable);
+    return visible_start_ms +
+           static_cast<int64_t>(std::llround(frac * static_cast<double>(window_ms)));
+}
+
+float x_at_time(const Layout& layout,
+                int64_t visible_start_ms,
+                int64_t window_ms,
+                int64_t time_ms) {
+    if (window_ms <= 0) return 0.f;
+    const float usable =
+        layout.width_px - layout.y_axis_width_px - layout.right_padding_px;
+    const double frac =
+        static_cast<double>(time_ms - visible_start_ms) /
+        static_cast<double>(window_ms);
+    return static_cast<float>(static_cast<double>(usable) * frac);
+}
+
 size_t snap_index_to_candle(const Layout& layout,
                             const ::VroomCandle* candles,
                             size_t count,
@@ -180,6 +205,14 @@ PriceBounds price_bounds(const ::VroomCandle* candles, size_t count) {
     return b;
 }
 
+PriceBounds auto_price_bounds(const ::VroomCandle* candles, size_t count) {
+    PriceBounds b = price_bounds(candles, count);
+    if (count == 0) return b;
+    const double mid = (b.min + b.max) * 0.5;
+    const double half = (b.max - b.min) * 0.5 * kAutoYZoom;
+    return {mid - half, mid + half};
+}
+
 float price_to_y(const Layout& layout,
                  const PriceBounds& bounds,
                  double price) {

package/cpp/_core_src/viewport.h

@@ -113,9 +113,33 @@ float snap_x_to_candle(const Layout& layout,
                        int64_t window_ms,
                        float x_px);
 
+// Free (non-snapped, non-candle-centered) mapping between time and pixel x,
+// used for drawing-tool endpoints that can sit anywhere — not just on a candle
+// slot. `x_at_time` is the exact inverse of `time_at_x`:
+//   frac = (time - start) / window;  x = usable * frac
+// where `usable` is the candle area width (width - y-axis - right padding).
+// Returns 0 / visible_start_ms respectively for a degenerate window/usable.
+int64_t time_at_x(const Layout& layout,
+                  int64_t visible_start_ms,
+                  int64_t window_ms,
+                  float x_px);
+float x_at_time(const Layout& layout,
+                int64_t visible_start_ms,
+                int64_t window_ms,
+                int64_t time_ms);
+
 // Min/max of (low..high) across the given range.
 PriceBounds price_bounds(const ::VroomCandle* candles, size_t count);
 
+// Widening applied to auto-fit price bounds so candles keep some headroom
+// instead of touching the pane edges. 1.0 = snug; larger = wider.
+constexpr double kAutoYZoom = 1.5;
+
+// price_bounds() widened about its midpoint by kAutoYZoom. This is the y-range
+// used whenever the price scale is in auto (follow-the-data) mode. Returns the
+// {0, 1} sentinel when count == 0 (callers keep their previous bounds).
+PriceBounds auto_price_bounds(const ::VroomCandle* candles, size_t count);
+
 // Map a price to y in pixels. y=0 is top of the chart.
 float price_to_y(const Layout& layout, const PriceBounds& bounds, double price);
 

package/cpp/_core_src/volume.cpp

@@ -43,12 +43,12 @@ void draw(SkCanvas* canvas,
     const float opacity = theme.floats[VROOM_FLOAT_VOLUME_OPACITY];
     SkPaint bull_paint;
     bull_paint.setAntiAlias(true);
-    bull_paint.setColor(theme.colors[VROOM_COLOR_BULL]);
+    bull_paint.setColor(theme.colors[VROOM_COLOR_ACCENT_BULL]);
     bull_paint.setAlphaf(opacity);
 
     SkPaint bear_paint;
     bear_paint.setAntiAlias(true);
-    bear_paint.setColor(theme.colors[VROOM_COLOR_BEAR]);
+    bear_paint.setColor(theme.colors[VROOM_COLOR_ACCENT_BEAR]);
     bear_paint.setAlphaf(opacity);
 
     for (std::size_t i = 0; i < n; ++i) {

package/lib/index.d.mts

@@ -52,10 +52,22 @@ type VroomColor = string | number;
 type VroomTheme = {
     /** Chart + axis-strip background. */
     background?: VroomColor;
-    /** Up candles (also bull wicks, bull volume bars, rising price indicator). */
+    /** Up candle body fill. Wick and border default to this unless overridden. */
     bull?: VroomColor;
-    /** Down candles (also bear wicks, bear volume bars, falling price indicator). */
+    /** Down candle body fill. Wick and border default to this unless overridden. */
     bear?: VroomColor;
+    /** Generic up color for the price indicator, volume bars, and MACD histogram. Defaults to teal-green; independent of `bull`. */
+    accentBull?: VroomColor;
+    /** Generic down color for the price indicator, volume bars, and MACD histogram. Defaults to red; independent of `bear`. */
+    accentBear?: VroomColor;
+    /** Up candle body 1px border. Defaults to the bull fill color. */
+    borderBull?: VroomColor;
+    /** Down candle body 1px border. Defaults to the bear fill color. */
+    borderBear?: VroomColor;
+    /** Up candle wick color. Defaults to the bull fill color. */
+    wickBull?: VroomColor;
+    /** Down candle wick color. Defaults to the bear fill color. */
+    wickBear?: VroomColor;
     /** Gridlines. */
     grid?: VroomColor;
     /** Axis label text (price + time). */
@@ -72,6 +84,38 @@ type VisibleRange = {
     /** Window end (inclusive), Unix epoch milliseconds. */
     endMs: number;
 };
+/**
+ * Chart interaction mode.
+ *   'pan'  — default: drag to pan, pinch/wheel to zoom, hover/long-press crosshair.
+ *   'draw' — left-clicks place drawing points; panning/zooming are suppressed.
+ */
+type ChartMode = 'pan' | 'draw';
+/** Active drawing tool while in `draw` mode. `null` draws nothing. */
+type DrawTool = null | 'line';
+/** A drawing anchor in data space, so it stays glued to the candles on pan/zoom. */
+type DrawPoint = {
+    /** Anchor time as Unix epoch milliseconds (not snapped to a candle slot). */
+    timeMs: number;
+    /** Anchor price. */
+    price: number;
+};
+/**
+ * A committed drawing. Pass an array of these via the `drawings` prop to render
+ * persisted annotations; the chart appends a new one (via `onDrawingComplete`)
+ * each time the user finishes drawing. For now only the `'line'` (two-point
+ * trendline) type exists.
+ */
+type Drawing = {
+    /** Stable unique id (the chart generates one for drawings it creates). */
+    id: string;
+    type: 'line';
+    /** The two endpoints, in data space. */
+    points: [DrawPoint, DrawPoint];
+    /** Line color (hex string or packed ARGB number). Default solid blue. */
+    color?: VroomColor;
+    /** Stroke width in px. Default 2. */
+    width?: number;
+};
 /** RSI indicator config. Rendered in a pane below the candles when enabled. */
 type RSIConfig = {
     enabled?: boolean;
@@ -135,6 +179,14 @@ type MACDConfig = {
 type VroomChartCoreProps = {
     /** OHLCV bars to render. The only required prop. */
     candles: Candle[];
+    /**
+     * Identity of the data series (e.g. "BTC-USD"). When it changes between
+     * renders the chart resets to the default view (most recent candles + price
+     * auto-fit), regardless of what the data heuristics conclude — the escape
+     * hatch for ambiguous switches like two assets trading at similar prices.
+     * Omit to rely on automatic detection from the candle data alone.
+     */
+    seriesKey?: string;
     /**
      * Explicit size overrides in logical px. When omitted, the chart fills its
      * parent (measured at runtime). Prefer layout-driven sizing via the
@@ -159,6 +211,27 @@ type VroomChartCoreProps = {
      * touch x. Default 40.
      */
     crosshairOffset?: number;
+    /**
+     * Interaction mode. Default `'pan'`. Set to `'draw'` (with a `tool`) to let
+     * the user place drawing points; panning/zooming are suppressed while drawing.
+     */
+    mode?: ChartMode;
+    /** Active drawing tool while in `draw` mode. Default `null` (draws nothing). */
+    tool?: DrawTool;
+    /**
+     * Committed drawings to render, anchored to data so they track the candles on
+     * pan/zoom. This is a controlled prop: append the value the chart hands you in
+     * `onDrawingComplete` to persist it.
+     */
+    drawings?: Drawing[];
+    /** Fired with the finished drawing when the user completes one. */
+    onDrawingComplete?: (drawing: Drawing) => void;
+    /**
+     * Fired when the chart wants the mode changed — e.g. it requests `'pan'` after
+     * the user clicks away from a just-drawn line. Since `mode` is controlled, the
+     * host should apply the requested mode.
+     */
+    onModeChange?: (mode: ChartMode) => void;
     onCrosshair?: (e: CrosshairEvent) => void;
     onViewportChange?: (startMs: number, endMs: number) => void;
 };

package/lib/index.d.ts

@@ -52,10 +52,22 @@ type VroomColor = string | number;
 type VroomTheme = {
     /** Chart + axis-strip background. */
     background?: VroomColor;
-    /** Up candles (also bull wicks, bull volume bars, rising price indicator). */
+    /** Up candle body fill. Wick and border default to this unless overridden. */
     bull?: VroomColor;
-    /** Down candles (also bear wicks, bear volume bars, falling price indicator). */
+    /** Down candle body fill. Wick and border default to this unless overridden. */
     bear?: VroomColor;
+    /** Generic up color for the price indicator, volume bars, and MACD histogram. Defaults to teal-green; independent of `bull`. */
+    accentBull?: VroomColor;
+    /** Generic down color for the price indicator, volume bars, and MACD histogram. Defaults to red; independent of `bear`. */
+    accentBear?: VroomColor;
+    /** Up candle body 1px border. Defaults to the bull fill color. */
+    borderBull?: VroomColor;
+    /** Down candle body 1px border. Defaults to the bear fill color. */
+    borderBear?: VroomColor;
+    /** Up candle wick color. Defaults to the bull fill color. */
+    wickBull?: VroomColor;
+    /** Down candle wick color. Defaults to the bear fill color. */
+    wickBear?: VroomColor;
     /** Gridlines. */
     grid?: VroomColor;
     /** Axis label text (price + time). */
@@ -72,6 +84,38 @@ type VisibleRange = {
     /** Window end (inclusive), Unix epoch milliseconds. */
     endMs: number;
 };
+/**
+ * Chart interaction mode.
+ *   'pan'  — default: drag to pan, pinch/wheel to zoom, hover/long-press crosshair.
+ *   'draw' — left-clicks place drawing points; panning/zooming are suppressed.
+ */
+type ChartMode = 'pan' | 'draw';
+/** Active drawing tool while in `draw` mode. `null` draws nothing. */
+type DrawTool = null | 'line';
+/** A drawing anchor in data space, so it stays glued to the candles on pan/zoom. */
+type DrawPoint = {
+    /** Anchor time as Unix epoch milliseconds (not snapped to a candle slot). */
+    timeMs: number;
+    /** Anchor price. */
+    price: number;
+};
+/**
+ * A committed drawing. Pass an array of these via the `drawings` prop to render
+ * persisted annotations; the chart appends a new one (via `onDrawingComplete`)
+ * each time the user finishes drawing. For now only the `'line'` (two-point
+ * trendline) type exists.
+ */
+type Drawing = {
+    /** Stable unique id (the chart generates one for drawings it creates). */
+    id: string;
+    type: 'line';
+    /** The two endpoints, in data space. */
+    points: [DrawPoint, DrawPoint];
+    /** Line color (hex string or packed ARGB number). Default solid blue. */
+    color?: VroomColor;
+    /** Stroke width in px. Default 2. */
+    width?: number;
+};
 /** RSI indicator config. Rendered in a pane below the candles when enabled. */
 type RSIConfig = {
     enabled?: boolean;
@@ -135,6 +179,14 @@ type MACDConfig = {
 type VroomChartCoreProps = {
     /** OHLCV bars to render. The only required prop. */
     candles: Candle[];
+    /**
+     * Identity of the data series (e.g. "BTC-USD"). When it changes between
+     * renders the chart resets to the default view (most recent candles + price
+     * auto-fit), regardless of what the data heuristics conclude — the escape
+     * hatch for ambiguous switches like two assets trading at similar prices.
+     * Omit to rely on automatic detection from the candle data alone.
+     */
+    seriesKey?: string;
     /**
      * Explicit size overrides in logical px. When omitted, the chart fills its
      * parent (measured at runtime). Prefer layout-driven sizing via the
@@ -159,6 +211,27 @@ type VroomChartCoreProps = {
      * touch x. Default 40.
      */
     crosshairOffset?: number;
+    /**
+     * Interaction mode. Default `'pan'`. Set to `'draw'` (with a `tool`) to let
+     * the user place drawing points; panning/zooming are suppressed while drawing.
+     */
+    mode?: ChartMode;
+    /** Active drawing tool while in `draw` mode. Default `null` (draws nothing). */
+    tool?: DrawTool;
+    /**
+     * Committed drawings to render, anchored to data so they track the candles on
+     * pan/zoom. This is a controlled prop: append the value the chart hands you in
+     * `onDrawingComplete` to persist it.
+     */
+    drawings?: Drawing[];
+    /** Fired with the finished drawing when the user completes one. */
+    onDrawingComplete?: (drawing: Drawing) => void;
+    /**
+     * Fired when the chart wants the mode changed — e.g. it requests `'pan'` after
+     * the user clicks away from a just-drawn line. Since `mode` is controlled, the
+     * host should apply the requested mode.
+     */
+    onModeChange?: (mode: ChartMode) => void;
     onCrosshair?: (e: CrosshairEvent) => void;
     onViewportChange?: (startMs: number, endMs: number) => void;
 };

package/lib/index.js

@@ -80,8 +80,20 @@ var COLOR_KEYS = {
   // VROOM_COLOR_AXIS_TEXT
   crosshair: 6,
   // VROOM_COLOR_CROSSHAIR
-  crosshairTarget: 9
+  crosshairTarget: 9,
   // VROOM_COLOR_CROSSHAIR_TARGET
+  borderBull: 10,
+  // VROOM_COLOR_BORDER_BULL
+  borderBear: 11,
+  // VROOM_COLOR_BORDER_BEAR
+  wickBull: 12,
+  // VROOM_COLOR_WICK_BULL
+  wickBear: 13,
+  // VROOM_COLOR_WICK_BEAR
+  accentBull: 14,
+  // VROOM_COLOR_ACCENT_BULL
+  accentBear: 15
+  // VROOM_COLOR_ACCENT_BEAR
 };
 function parseColor(value) {
   if (typeof value === "number") {