react-native-livechart 1.1.0 → 2.0.0

package/src/draw/markerAtlas.ts

@@ -0,0 +1,304 @@
+import {
+  Skia,
+  PaintStyle,
+  StrokeCap,
+  StrokeJoin,
+  drawAsImageFromPicture,
+  type SkCanvas,
+  type SkFont,
+  type SkImage,
+  type SkPaint,
+  type SkRect,
+} from "@shopify/react-native-skia";
+import type { LiveChartPalette, Marker, MarkerKind } from "../types";
+
+/** Default icon box (px) when `marker.size` is unset. */
+export const DEFAULT_ICON_SIZE = 16;
+/** Circular badge padding around the icon glyph + background ring width. */
+const PILL_PAD = 2;
+const PILL_BORDER = 2;
+const PILL_TEXT_COLOR = "#ffffff";
+/** Anti-alias breathing room baked around every cell so sprites don't clip. */
+const CELL_MARGIN = 2;
+
+/** Default glyph color per kind when `marker.color` is unset. */
+export function defaultMarkerColor(
+  kind: MarkerKind,
+  palette: LiveChartPalette,
+): string {
+  switch (kind) {
+    case "trade":
+      return palette.line;
+    case "boost":
+      return palette.refLine;
+    case "graduation":
+      return palette.dotUp;
+    case "winner":
+      return palette.dotUp;
+    case "clawback":
+      return palette.refLabel;
+  }
+}
+
+/**
+ * Axis-anchored kinds whose geometry depends on the chart's baseline (a
+ * variable-length stem, or a box pinned to the axis) and therefore cannot be a
+ * fixed-size sprite. These fall back to a self-projecting glyph component.
+ *
+ * Only applies when the marker has no `icon`/`image` override — those take
+ * precedence and render as ordinary centered stamps via the atlas.
+ */
+export function isConnectorMarker(m: Marker): boolean {
+  "worklet";
+  return (
+    !m.image &&
+    !m.icon &&
+    (m.kind === "graduation" || m.kind === "clawback")
+  );
+}
+
+/**
+ * Stable key for a marker's *visual appearance* (excludes position/anchor).
+ * Two markers with the same signature share one atlas cell. Called both on the
+ * JS thread (to build the atlas) and inside the per-frame worklet (to look a
+ * marker's cell up), so it must stay worklet-safe and primitive-only.
+ */
+export function markerAppearanceSig(m: Marker): string {
+  "worklet";
+  if (m.image) return `img\x1f${m.id}\x1f${m.size ?? DEFAULT_ICON_SIZE}`;
+  const size = m.size ?? "";
+  if (m.icon)
+    return `ic\x1f${m.icon}\x1f${m.pill ? 1 : 0}\x1f${m.color ?? ""}\x1f${size}`;
+  return `k\x1f${m.kind}\x1f${m.color ?? ""}\x1f${size}`;
+}
+
+/** One packed glyph in the atlas image: its source rect + box size. */
+export interface AtlasCell {
+  rect: SkRect;
+  w: number;
+  h: number;
+}
+
+export interface MarkerAtlas {
+  /** Packed glyph texture, or null when there are no atlas-rendered markers. */
+  image: SkImage | null;
+  /** appearance-signature → cell. */
+  cells: Record<string, AtlasCell>;
+}
+
+const EMPTY_ATLAS: MarkerAtlas = { image: null, cells: {} };
+
+function fillPaint(color: string): SkPaint {
+  const p = Skia.Paint();
+  p.setAntiAlias(true);
+  p.setColor(Skia.Color(color));
+  p.setStyle(PaintStyle.Fill);
+  return p;
+}
+
+function strokePaint(color: string, width: number, round = false): SkPaint {
+  const p = Skia.Paint();
+  p.setAntiAlias(true);
+  p.setColor(Skia.Color(color));
+  p.setStyle(PaintStyle.Stroke);
+  p.setStrokeWidth(width);
+  if (round) {
+    p.setStrokeCap(StrokeCap.Round);
+    p.setStrokeJoin(StrokeJoin.Round);
+  }
+  return p;
+}
+
+interface CellSpec {
+  w: number;
+  h: number;
+  /** Draw the glyph centered at (cx, cy) in the recording canvas. */
+  draw: (canvas: SkCanvas, cx: number, cy: number) => void;
+}
+
+/**
+ * Geometry + draw routine for one marker appearance. Mirrors the per-glyph
+ * rendering the old `MarkerGlyph` did inline, so the atlas is pixel-equivalent.
+ */
+function cellSpec(m: Marker, palette: LiveChartPalette, font: SkFont): CellSpec {
+  const color = m.color ?? defaultMarkerColor(m.kind, palette);
+  const m2 = CELL_MARGIN * 2;
+
+  if (m.image) {
+    const img = m.image;
+    const size = m.size ?? DEFAULT_ICON_SIZE;
+    const imgPaint = Skia.Paint();
+    imgPaint.setAntiAlias(true);
+    return {
+      w: size + m2,
+      h: size + m2,
+      draw: (canvas, cx, cy) => {
+        const iw = img.width();
+        const ih = img.height();
+        // `contain` fit: scale to fit the box without distorting aspect.
+        const scale = iw > 0 && ih > 0 ? Math.min(size / iw, size / ih) : 1;
+        const dw = iw * scale;
+        const dh = ih * scale;
+        canvas.drawImageRect(
+          img,
+          Skia.XYWHRect(0, 0, iw, ih),
+          Skia.XYWHRect(cx - dw / 2, cy - dh / 2, dw, dh),
+          imgPaint,
+        );
+      },
+    };
+  }
+
+  if (m.icon) {
+    const icon = m.icon;
+    const b = font.measureText(icon);
+    // Center the glyph on its measured bounds (tighter than ascent/descent).
+    const iconDX = b.x + b.width / 2;
+    const iconDY = b.y + b.height / 2;
+
+    if (m.pill) {
+      const bgColor = `rgb(${palette.bgRgb[0]}, ${palette.bgRgb[1]}, ${palette.bgRgb[2]})`;
+      const pillR = Math.max(b.width, b.height) / 2 + PILL_PAD;
+      const ringR = pillR + PILL_BORDER;
+      const box = Math.ceil(2 * ringR) + m2;
+      return {
+        w: box,
+        h: box,
+        draw: (canvas, cx, cy) => {
+          canvas.drawCircle(cx, cy, ringR, fillPaint(bgColor));
+          canvas.drawCircle(cx, cy, pillR, fillPaint(color));
+          canvas.drawText(
+            icon,
+            cx - iconDX,
+            cy - iconDY,
+            fillPaint(PILL_TEXT_COLOR),
+            font,
+          );
+        },
+      };
+    }
+
+    return {
+      w: Math.ceil(Math.max(b.width, 1)) + m2,
+      h: Math.ceil(Math.max(b.height, 1)) + m2,
+      draw: (canvas, cx, cy) => {
+        canvas.drawText(icon, cx - iconDX, cy - iconDY, fillPaint(color), font);
+      },
+    };
+  }
+
+  if (m.kind === "trade") {
+    const box = 2 * (5 + 1) + m2; // ring r=5 stroked w=2
+    return {
+      w: box,
+      h: box,
+      draw: (canvas, cx, cy) => {
+        canvas.drawCircle(cx, cy, 5, strokePaint(color, 2));
+        canvas.drawCircle(cx, cy, 2, fillPaint(color));
+      },
+    };
+  }
+
+  if (m.kind === "winner") {
+    const outer = 7;
+    const inner = 3;
+    const box = 2 * outer + m2;
+    return {
+      w: box,
+      h: box,
+      draw: (canvas, cx, cy) => {
+        const p = Skia.Path.Make();
+        for (let k = 0; k < 10; k++) {
+          const ang = -Math.PI / 2 + (k * Math.PI) / 5;
+          const rad = k % 2 === 0 ? outer : inner;
+          const px = cx + rad * Math.cos(ang);
+          const py = cy + rad * Math.sin(ang);
+          if (k === 0) p.moveTo(px, py);
+          else p.lineTo(px, py);
+        }
+        p.close();
+        canvas.drawPath(p, fillPaint(color));
+      },
+    };
+  }
+
+  if (m.kind === "boost") {
+    const L = 6;
+    const box = 2 * L + m2;
+    return {
+      w: box,
+      h: box,
+      draw: (canvas, cx, cy) => {
+        const p = Skia.Path.Make();
+        for (let k = 0; k < 4; k++) {
+          const ang = (k * Math.PI) / 4;
+          const dx = L * Math.cos(ang);
+          const dy = L * Math.sin(ang);
+          p.moveTo(cx - dx, cy - dy);
+          p.lineTo(cx + dx, cy + dy);
+        }
+        canvas.drawPath(p, strokePaint(color, 1.5, true));
+      },
+    };
+  }
+
+  // Connector kinds are handled outside the atlas; this is a defensive dot.
+  const box = 6 + m2;
+  return {
+    w: box,
+    h: box,
+    draw: (canvas, cx, cy) => canvas.drawCircle(cx, cy, 3, fillPaint(color)),
+  };
+}
+
+/**
+ * Rasterize every distinct marker appearance into a single packed atlas image,
+ * once per appearance-set change (NOT per frame). The per-frame worklet then
+ * blits these cells via one `drawAtlas` call.
+ *
+ * Connector kinds (see `isConnectorMarker`) are skipped — they render via a
+ * self-projecting fallback component.
+ */
+export function buildMarkerAtlas(
+  markers: Marker[],
+  palette: LiveChartPalette,
+  font: SkFont,
+): MarkerAtlas {
+  const seen = new Set<string>();
+  const specs: { sig: string; spec: CellSpec }[] = [];
+  for (let i = 0; i < markers.length; i++) {
+    const m = markers[i];
+    if (isConnectorMarker(m)) continue;
+    const sig = markerAppearanceSig(m);
+    if (seen.has(sig)) continue;
+    seen.add(sig);
+    specs.push({ sig, spec: cellSpec(m, palette, font) });
+  }
+  if (specs.length === 0) return EMPTY_ATLAS;
+
+  let totalW = 0;
+  let maxH = 0;
+  for (let i = 0; i < specs.length; i++) {
+    totalW += specs[i].spec.w;
+    if (specs[i].spec.h > maxH) maxH = specs[i].spec.h;
+  }
+  const W = Math.max(1, Math.ceil(totalW));
+  const H = Math.max(1, Math.ceil(maxH));
+
+  const recorder = Skia.PictureRecorder();
+  const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, W, H));
+  const cells: Record<string, AtlasCell> = {};
+  let x = 0;
+  for (let i = 0; i < specs.length; i++) {
+    const { sig, spec } = specs[i];
+    canvas.save();
+    canvas.translate(x, 0);
+    spec.draw(canvas, spec.w / 2, H / 2);
+    canvas.restore();
+    cells[sig] = { rect: Skia.XYWHRect(x, 0, spec.w, H), w: spec.w, h: H };
+    x += spec.w;
+  }
+  const picture = recorder.finishRecordingAsPicture();
+  const image = drawAsImageFromPicture(picture, { width: W, height: H });
+  return { image, cells };
+}

package/src/hooks/resolveChartLayout.ts

@@ -9,7 +9,7 @@ import {
   resolvePadding,
   type ChartPadding,
 } from "../draw/line";
-import type { ChartInsets, LiveChartPalette } from "../types";
+import type { BadgeMetrics, ChartInsets, LiveChartPalette } from "../types";
 
 export interface ChartLayoutConfig {
   palette: LiveChartPalette;
@@ -17,6 +17,8 @@ export interface ChartLayoutConfig {
   insetsOverride?: ChartInsets;
   yAxis: boolean;
   badge: boolean;
+  /** Badge pill geometry tokens. Omit for built-in defaults. */
+  badgeMetrics?: BadgeMetrics;
   /**
    * When true (default if omitted and `badge` is true), reserve the wide right gutter for the badge.
    * Set false when the badge is anchored left of the live dot (`position: "left"`).
@@ -79,6 +81,7 @@ export function resolveChartLayout(
           config.font.getSize(),
           measuredYAxisLabelWidth,
           showTail,
+          config.badgeMetrics,
         )
       : config.multiSeriesValueLabel && config.yAxis
         ? Math.max(
@@ -91,7 +94,12 @@ export function resolveChartLayout(
             ? Math.max(measuredYAxisLabelWidth + 16 + dotR * 2, 44)
             : resolveAutoRight(false, false);
   } else {
-    rightPad = resolveAutoRight(config.yAxis, badgeUsesRightGutter, showTail);
+    rightPad = resolveAutoRight(
+      config.yAxis,
+      badgeUsesRightGutter,
+      showTail,
+      config.badgeMetrics,
+    );
   }
 
   if (config.pulse && config.yAxis && config.insetsOverride?.right == null) {
@@ -121,6 +129,7 @@ export function resolveChartLayout(
     false,
     xAxis,
     showTail,
+    config.badgeMetrics,
   );
 
   let padding: ChartPadding = { ...base, right: rightPad, left: leftPad };

package/src/hooks/useBadge.ts

@@ -6,11 +6,8 @@ import {
   type SharedValue,
 } from "react-native-reanimated";
 import {
-  BADGE_DOT_GAP,
-  BADGE_MARGIN_RIGHT,
-  BADGE_PILL_PAD_X,
-  BADGE_PILL_PAD_Y,
-  BADGE_TAIL_LEN,
+  BADGE_METRICS_DEFAULTS,
+  MOTION_METRICS_DEFAULTS,
   MS_PER_FRAME_60FPS,
 } from "../constants";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
@@ -22,9 +19,12 @@ import {
 } from "../draw/line";
 import { hexToRgb, lerpColor } from "../math/color";
 import { lerp } from "../math/lerp";
-import type { BadgeVariant, LiveChartPalette, Momentum } from "../types";
-
-const TAIL_SPREAD = 2.5;
+import type {
+  BadgeMetrics,
+  BadgeVariant,
+  LiveChartPalette,
+  Momentum,
+} from "../types";
 
 export function useBadge(
   engine: ChartEngineWithLiveValue,
@@ -37,6 +37,8 @@ export function useBadge(
   momentum?: SharedValue<Momentum>,
   position: "right" | "left" = "right",
   background?: string,
+  badgeMetrics: BadgeMetrics = BADGE_METRICS_DEFAULTS,
+  badgeColorSpeed: number = MOTION_METRICS_DEFAULTS.badgeColorSpeed,
 ) {
   const colorR = useSharedValue(0);
   const colorG = useSharedValue(0);
@@ -93,7 +95,7 @@ export function useBadge(
     const text = formatValue(engine.displayValue.get());
     const textW = measureFontTextWidth(font, text);
 
-    const pillH = font.getSize() + BADGE_PILL_PAD_Y * 2;
+    const pillH = font.getSize() + badgeMetrics.padY * 2;
     const r = pillH / 2;
     const badgeY = dotY - pillH / 2;
     let textX: number;
@@ -101,9 +103,9 @@ export function useBadge(
     if (position === "left") {
       // Pill to the left of the live dot; no tail (`showTail` applies to right gutter only).
       const dotXPos = w - padding.right;
-      const pillW = 2 * BADGE_PILL_PAD_X + textW;
-      const bodyRight = dotXPos - BADGE_DOT_GAP;
-      const bodyLeft = Math.max(BADGE_MARGIN_RIGHT, bodyRight - pillW);
+      const pillW = 2 * badgeMetrics.padX + textW;
+      const bodyRight = dotXPos - badgeMetrics.dotGap;
+      const bodyLeft = Math.max(badgeMetrics.marginEdge, bodyRight - pillW);
       const pillBodyW = bodyRight - bodyLeft;
       textX = (bodyLeft + bodyRight - textW) / 2;
       path.addRRect({
@@ -113,15 +115,21 @@ export function useBadge(
       });
     } else {
       // Right-gutter badge (default): asymmetric layout with optional tail.
-      const tl = badgeTailAndCap(font.getSize(), showTail);
-      const bodyLeft = w - padding.right + BADGE_DOT_GAP + tl;
-      const bodyRight = w - BADGE_MARGIN_RIGHT;
+      const tl = badgeTailAndCap(font.getSize(), showTail, badgeMetrics);
+      const bodyLeft = w - padding.right + badgeMetrics.dotGap + tl;
+      const bodyRight = w - badgeMetrics.marginEdge;
       const pillW = bodyRight - bodyLeft;
       // Text centered in pill body — same formula used by GridOverlay.
-      textX = pillTextLeftX(w, padding.right, BADGE_DOT_GAP + tl, textW);
+      textX = pillTextLeftX(
+        w,
+        padding.right,
+        badgeMetrics.dotGap + tl,
+        textW,
+        badgeMetrics,
+      );
 
       if (showTail) {
-        const badgeX = w - padding.right + BADGE_DOT_GAP;
+        const badgeX = w - padding.right + badgeMetrics.dotGap;
         const cx = tl + pillW - r;
 
         path.moveTo(badgeX + tl, badgeY);
@@ -134,17 +142,17 @@ export function useBadge(
         );
         path.lineTo(badgeX + tl, badgeY + pillH);
         path.cubicTo(
-          badgeX + BADGE_TAIL_LEN + 2,
+          badgeX + badgeMetrics.tailLength + 2,
           badgeY + pillH,
           badgeX + 3,
-          badgeY + r + TAIL_SPREAD,
+          badgeY + r + badgeMetrics.tailSpread,
           badgeX,
           badgeY + r,
         );
         path.cubicTo(
           badgeX + 3,
-          badgeY + r - TAIL_SPREAD,
-          badgeX + BADGE_TAIL_LEN + 2,
+          badgeY + r - badgeMetrics.tailSpread,
+          badgeX + badgeMetrics.tailLength + 2,
           badgeY,
           badgeX + tl,
           badgeY,
@@ -170,9 +178,15 @@ export function useBadge(
     } else if (momentum) {
       const m = momentum.get();
       const targetRgb = m === "up" ? upRgb : m === "down" ? downRgb : accentRgb;
-      colorR.set(lerp(colorR.get(), targetRgb[0], 0.08, MS_PER_FRAME_60FPS));
-      colorG.set(lerp(colorG.get(), targetRgb[1], 0.08, MS_PER_FRAME_60FPS));
-      colorB.set(lerp(colorB.get(), targetRgb[2], 0.08, MS_PER_FRAME_60FPS));
+      colorR.set(
+        lerp(colorR.get(), targetRgb[0], badgeColorSpeed, MS_PER_FRAME_60FPS),
+      );
+      colorG.set(
+        lerp(colorG.get(), targetRgb[1], badgeColorSpeed, MS_PER_FRAME_60FPS),
+      );
+      colorB.set(
+        lerp(colorB.get(), targetRgb[2], badgeColorSpeed, MS_PER_FRAME_60FPS),
+      );
       bgColor = lerpColor(
         [colorR.get(), colorG.get(), colorB.get()],
         [colorR.get(), colorG.get(), colorB.get()],

package/src/hooks/useCandlePaths.ts

@@ -6,12 +6,12 @@ import {
   useSharedValue,
   type SharedValue,
 } from "react-native-reanimated";
-import { MS_PER_FRAME_60FPS } from "../constants";
+import { CANDLE_METRICS_DEFAULTS, MS_PER_FRAME_60FPS } from "../constants";
 import type { SingleEngineState } from "../core/useLiveChartEngine";
 import { buildCandleGeometry } from "../draw/candle";
 import type { ChartPadding } from "../draw/line";
 import { lerp } from "../math/lerp";
-import type { CandlePoint } from "../types";
+import type { CandleMetrics, CandlePoint } from "../types";
 
 const CANDLE_WIDTH_LERP_SPEED = 0.08;
 
@@ -29,6 +29,7 @@ export function useCandlePaths(
   liveCandle: SharedValue<CandlePoint | null> | undefined,
   candleWidthSecs: number,
   active: boolean,
+  candleMetrics: CandleMetrics = CANDLE_METRICS_DEFAULTS,
 ) {
   const targetCandleWidth = useDerivedValue(() => candleWidthSecs);
   const displayCandleWidth = useSharedValue(candleWidthSecs);
@@ -92,6 +93,7 @@ export function useCandlePaths(
       engine.displayMin.value,
       engine.displayMax.value,
       displayCandleWidth.get(),
+      candleMetrics,
     );
   });
 

package/src/hooks/useYAxis.ts

@@ -1,10 +1,11 @@
 import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 
 import type { SkFont } from "@shopify/react-native-skia";
-import { MS_PER_FRAME_60FPS } from "../constants";
+import { GRID_METRICS_DEFAULTS, MS_PER_FRAME_60FPS } from "../constants";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import { computeGridEntries } from "../draw/grid";
 import type { ChartPadding } from "../draw/line";
+import type { GridMetrics } from "../types";
 
 /**
  * Compute Y-axis grid entries (values + labels) with animated fade-in/out.
@@ -17,6 +18,7 @@ export function useYAxis(
   formatValue: (v: number) => string,
   font: SkFont,
   minGap = 36,
+  gridMetrics: GridMetrics = GRID_METRICS_DEFAULTS,
 ) {
   const prevInterval = useSharedValue(0);
   const labelAlphas = useSharedValue<Record<number, number>>({});
@@ -36,6 +38,7 @@ export function useYAxis(
       formatValue,
       dt,
       minGap,
+      gridMetrics,
     );
 
     prevInterval.set(result.interval);

package/src/index.ts

@@ -29,20 +29,26 @@ export { useTradeStream } from "./hooks/useTradeStream";
 
 export type {
   BadgeConfig,
+  BadgeMetrics,
   BadgeVariant,
+  CandleMetrics,
   CandlePoint,
   ChartInsets,
   DegenOptions,
   DegenShakePayload,
+  EmptyStateMetrics,
   FontConfig,
   FontWeight,
   GradientConfig,
+  GridMetrics,
   GridStyleConfig,
   LeftEdgeFadeConfig,
   LegendConfig,
   LegendStyle,
   LineConfig,
   LiveChartCoreProps,
+  LiveChartMetrics,
+  LiveChartMetricsOverride,
   LiveChartPalette,
   LiveChartPoint,
   LiveChartProps,
@@ -52,6 +58,7 @@ export type {
   MarkerKind,
   Momentum,
   MomentumConfig,
+  MotionMetrics,
   MultiSeriesDotConfig,
   PulseConfig,
   ReferenceLine,