react-native-livechart 1.0.0

package/src/math/referenceLines.ts

@@ -0,0 +1,56 @@
+import type { ReferenceLine } from "../types";
+
+/** Which of the three reference-line forms a `ReferenceLine` resolves to. */
+export type ReferenceLineForm = "line" | "value-band" | "time-band" | "none";
+
+/**
+ * Classify a `ReferenceLine` into one of its three forms, applying the
+ * documented precedence A (line) > B (value band) > C (time band).
+ */
+export function referenceLineForm(rl: ReferenceLine): ReferenceLineForm {
+  "worklet";
+  if (rl.value !== undefined) return "line";
+  if (rl.valueFrom !== undefined && rl.valueTo !== undefined) {
+    return "value-band";
+  }
+  if (rl.from !== undefined && rl.to !== undefined) return "time-band";
+  return "none";
+}
+
+/**
+ * Gather every Y value a set of reference lines should contribute to the
+ * axis-range computation. Lines flagged `excludeFromRange` are skipped, as are
+ * time bands (Form C) which constrain time, not value.
+ */
+export function collectReferenceValues(lines: ReferenceLine[]): number[] {
+  const out: number[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    const rl = lines[i];
+    if (rl.excludeFromRange) continue;
+    switch (referenceLineForm(rl)) {
+      case "line":
+        out.push(rl.value as number);
+        break;
+      case "value-band":
+        out.push(rl.valueFrom as number, rl.valueTo as number);
+        break;
+      // time-band / none contribute no Y values
+    }
+  }
+  return out;
+}
+
+/**
+ * Where a Y value sits relative to the visible plot range:
+ * `"in"` (within [min, max]), `"above"` (greater than max), or `"below"`.
+ */
+export function classifyReferenceEdge(
+  value: number,
+  min: number,
+  max: number,
+): "in" | "above" | "below" {
+  "worklet";
+  if (value > max) return "above";
+  if (value < min) return "below";
+  return "in";
+}

package/src/math/spline.ts

@@ -0,0 +1,183 @@
+import type { SkPath } from "@shopify/react-native-skia";
+import type { LiveChartPoint } from "../types";
+
+/**
+ * Reusable scratch buffers for {@link drawSpline}. Pass a persistent instance
+ * (created once per chart via `useMemo`) to avoid allocating three arrays sized
+ * to the point count on every frame — the per-frame garbage scales with the
+ * number of points (large `timeWindow`s push 1000+ points), so pooling these
+ * meaningfully cuts UI-thread GC pressure on live charts.
+ */
+export interface SplineScratch {
+  delta: number[];
+  h: number[];
+  m: number[];
+}
+
+/** Allocate an empty {@link SplineScratch} (arrays grow on demand). */
+export function makeSplineScratch(): SplineScratch {
+  return { delta: [], h: [], m: [] };
+}
+
+/**
+ * Fritsch-Carlson monotone cubic interpolation.
+ * Guarantees no overshoots — the curve never exceeds local min/max.
+ * Same approach documented in liveline for smooth live line charts (adapted code; MIT).
+ *
+ * pts is a flat number array with stride 2: [x0, y0, x1, y1, ...].
+ * Caller must moveTo the first point before calling.
+ *
+ * Pass `scratch` (see {@link makeSplineScratch}) to reuse the tangent/interval
+ * buffers across frames instead of allocating them each call. Only indices
+ * `0..n-1` are read after being written, so stale tail entries are harmless.
+ *
+ * @see https://github.com/benjitaylor/liveline
+ */
+export function drawSpline(path: SkPath, pts: number[], scratch?: SplineScratch) {
+  "worklet";
+  const n = pts.length >> 1;
+  if (n < 2) return;
+  if (n === 2) {
+    path.lineTo(pts[2], pts[3]);
+    return;
+  }
+
+  // 1. Secant slopes and x-intervals
+  const delta: number[] = scratch ? scratch.delta : new Array(n - 1);
+  const h: number[] = scratch ? scratch.h : new Array(n - 1);
+  for (let i = 0; i < n - 1; i++) {
+    const i2 = i * 2;
+    const j2 = i2 + 2;
+    h[i] = pts[j2] - pts[i2];
+    delta[i] = h[i] === 0 ? 0 : (pts[j2 + 1] - pts[i2 + 1]) / h[i];
+  }
+
+  // 2. Initial tangent estimates
+  const m: number[] = scratch ? scratch.m : new Array(n);
+  m[0] = delta[0];
+  m[n - 1] = delta[n - 2];
+  for (let i = 1; i < n - 1; i++) {
+    if (delta[i - 1] * delta[i] <= 0) {
+      m[i] = 0;
+    } else {
+      m[i] = (delta[i - 1] + delta[i]) / 2;
+    }
+  }
+
+  // 3. Fritsch-Carlson constraint: alpha^2 + beta^2 <= 9
+  for (let i = 0; i < n - 1; i++) {
+    if (delta[i] === 0) {
+      m[i] = 0;
+      m[i + 1] = 0;
+    } else {
+      const alpha = m[i] / delta[i];
+      const beta = m[i + 1] / delta[i];
+      const s2 = alpha * alpha + beta * beta;
+      if (s2 > 9) {
+        const s = 3 / Math.sqrt(s2);
+        m[i] = s * alpha * delta[i];
+        m[i + 1] = s * beta * delta[i];
+      }
+    }
+  }
+
+  // 4. Draw bezier curves
+  for (let i = 0; i < n - 1; i++) {
+    const i2 = i * 2;
+    const j2 = i2 + 2;
+    const hi = h[i];
+    path.cubicTo(
+      pts[i2] + hi / 3,
+      pts[i2 + 1] + (m[i] * hi) / 3,
+      pts[j2] - hi / 3,
+      pts[j2 + 1] - (m[i + 1] * hi) / 3,
+      pts[j2],
+      pts[j2 + 1],
+    );
+  }
+}
+
+/**
+ * Value of the Fritsch–Carlson monotone cubic — the same curve {@link drawSpline}
+ * renders — at `time`. Use this to anchor overlays (e.g. markers) exactly on the
+ * rendered line instead of on the straight chord between data points. Returns
+ * `null` for empty data; clamps to the endpoints outside the data range.
+ *
+ * The data→pixel mapping is affine, so evaluating the monotone cubic in data
+ * space and then projecting matches the pixel-space spline. Tangents use the
+ * immediate neighbors and the overshoot clamp is applied for this segment only
+ * (it does not cascade across segments as in `drawSpline`, which differs only on
+ * very steep runs where the clamp fires).
+ */
+export function splineValueAtTime(
+  points: LiveChartPoint[],
+  time: number,
+): number | null {
+  "worklet";
+  const n = points.length;
+  if (n === 0) return null;
+  if (n === 1 || time <= points[0].time) return points[0].value;
+  if (time >= points[n - 1].time) return points[n - 1].value;
+
+  // Segment [i, i+1] with points[i].time <= time < points[i+1].time.
+  let lo = 0;
+  let hi = n - 1;
+  while (hi - lo > 1) {
+    const mid = (lo + hi) >> 1;
+    if (points[mid].time <= time) lo = mid;
+    else hi = mid;
+  }
+  const i = lo;
+  const ti = points[i].time;
+  const vi = points[i].value;
+  const tj = points[i + 1].time;
+  const vj = points[i + 1].value;
+  const hSeg = tj - ti;
+  /* istanbul ignore next -- guarded by the clamps above; defensive for duplicate times */
+  if (hSeg <= 0) return vi;
+
+  const deltaI = (vj - vi) / hSeg;
+  if (n === 2) return vi + deltaI * (time - ti); // drawSpline draws a straight line for n === 2
+
+  // Tangents at the segment ends (monotone-safe averages of adjacent secants).
+  let mi: number;
+  if (i === 0) {
+    mi = deltaI;
+  } else {
+    const dPrev = (vi - points[i - 1].value) / (ti - points[i - 1].time);
+    mi = dPrev * deltaI <= 0 ? 0 : (dPrev + deltaI) / 2;
+  }
+  let mj: number;
+  if (i + 1 === n - 1) {
+    mj = deltaI;
+  } else {
+    const dNext = (points[i + 2].value - vj) / (points[i + 2].time - tj);
+    mj = deltaI * dNext <= 0 ? 0 : (deltaI + dNext) / 2;
+  }
+
+  // Fritsch–Carlson overshoot clamp (alpha² + beta² <= 9).
+  if (deltaI === 0) {
+    mi = 0;
+    mj = 0;
+  } else {
+    const alpha = mi / deltaI;
+    const beta = mj / deltaI;
+    const s2c = alpha * alpha + beta * beta;
+    if (s2c > 9) {
+      const sc = 3 / Math.sqrt(s2c);
+      mi = sc * alpha * deltaI;
+      mj = sc * beta * deltaI;
+    }
+  }
+
+  // Cubic Hermite on [i, i+1]. x is linear in the Bézier parameter (the control
+  // points are equally spaced in x), so the parameter equals (time - ti) / hSeg.
+  const s = (time - ti) / hSeg;
+  const s2 = s * s;
+  const s3 = s2 * s;
+  const h00 = 2 * s3 - 3 * s2 + 1;
+  const h10 = s3 - 2 * s2 + s;
+  const h01 = -2 * s3 + 3 * s2;
+  const h11 = s3 - s2;
+  return h00 * vi + h10 * hSeg * mi + h01 * vj + h11 * hSeg * mj;
+}

package/src/math/squiggly.ts

@@ -0,0 +1,108 @@
+import type { ChartPadding } from "../draw/line";
+
+/**
+ * Composite sine squiggly — two overlapping frequencies with a breathing
+ * amplitude envelope. Matches the original web LiveChart loading animation.
+ *
+ * amplitude = 14 * (0.4 + 0.6 * sin(0.8 * t))   // 5.6 → 22.4px breathing range
+ * y = centerY + amplitude * (sin(0.035*x + 1.2*t) + 0.45*sin(0.08*x + 2.1*t))
+ */
+export function squigglyYAt(x: number, centerY: number, t: number): number {
+  "worklet";
+  const amplitude = 14 * (0.4 + 0.6 * Math.sin(0.8 * t));
+  return (
+    centerY +
+    amplitude *
+      (Math.sin(0.035 * x + 1.2 * t) + 0.45 * Math.sin(0.08 * x + 2.1 * t))
+  );
+}
+
+/**
+ * Build a flat [x0,y0,x1,y1,...] point array for a standalone squiggly line
+ * spanning the full chart area (used in loading / empty state).
+ * Points are spaced ~4px apart for smooth curves.
+ */
+export function buildSquigglyPts(
+  canvasWidth: number,
+  canvasHeight: number,
+  padding: ChartPadding,
+  t: number,
+): number[] {
+  "worklet";
+  const leftEdge = padding.left;
+  const rightEdge = canvasWidth - padding.right;
+  const chartW = rightEdge - leftEdge;
+  if (chartW <= 0 || canvasHeight <= 0) return [];
+
+  const centerY = (canvasHeight - padding.bottom + padding.top) / 2;
+  const step = 4;
+  const count = Math.ceil(chartW / step) + 1;
+  const pts: number[] = new Array(count * 2);
+  for (let i = 0; i < count; i++) {
+    const x = leftEdge + Math.min(i * step, chartW);
+    pts[i * 2] = x;
+    pts[i * 2 + 1] = squigglyYAt(x, centerY, t);
+  }
+  return pts;
+}
+
+/**
+ * Given a real flat-pts array (from buildLinePoints), replace each Y with the
+ * squiggly Y at the same X. Used during the morph reveal.
+ */
+export function squigglifyPts(
+  flatPts: number[],
+  t: number,
+  centerY: number,
+): number[] {
+  "worklet";
+  const n = flatPts.length;
+  const out: number[] = new Array(n);
+  for (let i = 0; i < n; i += 2) {
+    out[i] = flatPts[i];
+    out[i + 1] = squigglyYAt(flatPts[i], centerY, t);
+  }
+  return out;
+}
+
+/**
+ * Smoothstep — maps t ∈ [0,1] to a smooth 0→1 curve (no clamping required
+ * when t is already in range, but clamps gracefully outside).
+ */
+export function smoothstep(t: number): number {
+  "worklet";
+  const c = Math.min(1, Math.max(0, t));
+  return c * c * (3 - 2 * c);
+}
+
+/**
+ * Blend two flat-pts arrays center-out, driven by morphT ∈ [0,1].
+ * Points near the horizontal centre of the chart reveal first; edges last.
+ *
+ * For each point, a per-point weight is computed:
+ *   distFromCentre = |x - chartCentreX| / (chartW / 2)   // 0=centre, 1=edge
+ *   weight = smoothstep((morphT - distFromCentre * 0.5) / 0.5)
+ *   blendedY = fromY + (toY - fromY) * weight
+ */
+export function blendPtsY(
+  from: number[],
+  to: number[],
+  morphT: number,
+  padding: ChartPadding,
+  canvasWidth: number,
+): number[] {
+  "worklet";
+  const n = from.length;
+  if (n === 0) return to;
+  const chartCentreX = (padding.left + canvasWidth - padding.right) / 2;
+  const halfChartW = (canvasWidth - padding.left - padding.right) / 2;
+  const out: number[] = new Array(n);
+  for (let i = 0; i < n; i += 2) {
+    out[i] = to[i]; // X always from real pts
+    const distFromCentre =
+      halfChartW > 0 ? Math.abs(from[i] - chartCentreX) / halfChartW : 0;
+    const weight = smoothstep((morphT - distFromCentre * 0.5) / 0.5);
+    out[i + 1] = from[i + 1] + (to[i + 1] - from[i + 1]) * weight;
+  }
+  return out;
+}

package/src/theme.ts

@@ -0,0 +1,231 @@
+import type { LiveChartPalette, SeriesConfig, ThemeMode } from "./types";
+
+/**
+ * Derives a full light/dark palette from one accent color — same idea as liveline’s
+ * theme system, implemented with static Tailwind-like hex literals (no CSS).
+ *
+ * @see https://github.com/benjitaylor/liveline
+ */
+
+/**
+ * Tailwind CSS v3 default palette — literal hex only (no tailwindcss dependency).
+ * Values match https://tailwindcss.com/docs/customizing-colors
+ */
+const TW = {
+  white: "#ffffff",
+  black: "#000000",
+  /** Neutral base scale (backgrounds + text). Tailwind zinc 50–950. */
+  zinc: {
+    /** zinc-50 */
+    50: "#fafafa",
+    /** zinc-100 */
+    100: "#f4f4f5",
+    /** zinc-200 */
+    200: "#e4e4e7",
+    /** zinc-300 */
+    300: "#d4d4d8",
+    /** zinc-400 */
+    400: "#a1a1aa",
+    /** zinc-500 */
+    500: "#71717a",
+    /** zinc-600 */
+    600: "#52525b",
+    /** zinc-700 */
+    700: "#3f3f46",
+    /** zinc-800 */
+    800: "#27272a",
+    /** zinc-900 */
+    900: "#18181b",
+    /** zinc-950 */
+    950: "#09090b",
+  },
+  green: {
+    /** green-500 */
+    500: "#22c55e",
+    /** green-600 */
+    600: "#16a34a",
+  },
+  red: {
+    /** red-500 */
+    500: "#ef4444",
+    /** red-600 */
+    600: "#dc2626",
+  },
+  blue: {
+    /** blue-500 */
+    500: "#3b82f6",
+  },
+  amber: {
+    /** amber-500 */
+    500: "#f59e0b",
+  },
+  violet: {
+    /** violet-500 */
+    500: "#8b5cf6",
+  },
+  pink: {
+    /** pink-500 */
+    500: "#ec4899",
+  },
+  cyan: {
+    /** cyan-500 */
+    500: "#06b6d4",
+  },
+  orange: {
+    /** orange-500 */
+    500: "#f97316",
+  },
+} as const;
+
+/** Parse a CSS color string to [r, g, b]. Supports `#rgb`, `#rrggbb`, `rgb()`, and `rgba()`. */
+export function parseColorRgb(color: string): [number, number, number] {
+  const hex = color.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    return [
+      parseInt(h.slice(0, 2), 16),
+      parseInt(h.slice(2, 4), 16),
+      parseInt(h.slice(4, 6), 16),
+    ];
+  }
+  const rgb = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (rgb) return [+rgb[1], +rgb[2], +rgb[3]];
+  return [128, 128, 128];
+}
+
+function rgba(r: number, g: number, b: number, a: number): string {
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+/**
+ * Default left-edge fade gradient stops for `dstOut` blending: same RGB as the chart
+ * background (`palette.bgRgb`), opacity 1 → 0. Matches the container `backgroundColor`.
+ */
+export function leftEdgeFadeColorsFromBgRgb(bgRgb: [number, number, number]): {
+  startColor: string;
+  endColor: string;
+} {
+  const [r, g, b] = bgRgb;
+  return {
+    startColor: rgba(r, g, b, 1),
+    endColor: rgba(r, g, b, 0),
+  };
+}
+
+function twAlpha(hex: string, a: number): string {
+  const [r, g, b] = parseColorRgb(hex);
+  return rgba(r, g, b, a);
+}
+
+/**
+ * Derive a full palette from a single accent color + theme mode.
+ * Momentum colors are always semantic green/red regardless of accent.
+ */
+export function resolveTheme(color: string, mode: ThemeMode): LiveChartPalette {
+  const [r, g, b] = parseColorRgb(color);
+  const isDark = mode === "dark";
+  const [g5r, g5g, g5b] = parseColorRgb(TW.green[500]);
+  const [g6r, g6g, g6b] = parseColorRgb(TW.green[600]);
+  const [r5r, r5g, r5b] = parseColorRgb(TW.red[500]);
+  const [r6r, r6g, r6b] = parseColorRgb(TW.red[600]);
+
+  return {
+    line: color,
+    lineWidth: 2,
+
+    fillTop: rgba(r, g, b, isDark ? 0.12 : 0.08),
+    fillBottom: rgba(r, g, b, 0),
+
+    // white/6, black/6 (Tailwind opacity on base)
+    gridLine: isDark ? twAlpha(TW.white, 0.06) : twAlpha(TW.black, 0.06),
+    gridLabel: isDark ? twAlpha(TW.white, 0.4) : twAlpha(TW.black, 0.35),
+
+    dotUp: TW.green[500],
+    dotDown: TW.red[500],
+    dotFlat: color,
+    glowUp: twAlpha(TW.green[500], 0.18),
+    glowDown: twAlpha(TW.red[500], 0.18),
+    glowFlat: rgba(r, g, b, 0.12),
+
+    badgeOuterBg: isDark
+      ? twAlpha(TW.zinc[900], 0.95)
+      : twAlpha(TW.white, 0.95),
+    badgeOuterShadow: isDark ? twAlpha(TW.black, 0.4) : twAlpha(TW.black, 0.15),
+    badgeBg: color,
+    badgeText: TW.white,
+
+    candleUp: TW.green[500],
+    candleDown: TW.red[500],
+    wickUp: isDark ? rgba(g5r, g5g, g5b, 0.7) : rgba(g6r, g6g, g6b, 0.8),
+    wickDown: isDark ? rgba(r5r, r5g, r5b, 0.7) : rgba(r6r, r6g, r6b, 0.8),
+
+    dashLine: rgba(r, g, b, 0.4),
+
+    refLine: isDark ? twAlpha(TW.white, 0.15) : twAlpha(TW.black, 0.12),
+    refLabel: isDark ? twAlpha(TW.white, 0.45) : twAlpha(TW.black, 0.4),
+
+    timeLabel: isDark ? twAlpha(TW.white, 0.35) : twAlpha(TW.black, 0.3),
+
+    crosshairLine: isDark ? twAlpha(TW.white, 0.2) : twAlpha(TW.black, 0.12),
+    // Scrim over the region ahead of the crosshair: darken on dark, brighten on
+    // light, so it always reads as a recessed wash toward the background.
+    crosshairDim: isDark ? twAlpha(TW.black, 0.12) : twAlpha(TW.white, 0.5),
+    tooltipBg: isDark ? twAlpha(TW.zinc[950], 0.95) : twAlpha(TW.white, 0.95),
+    tooltipText: isDark ? TW.zinc[200] : TW.zinc[900],
+    tooltipBorder: isDark ? twAlpha(TW.white, 0.1) : twAlpha(TW.black, 0.08),
+
+    bgRgb: isDark
+      ? (parseColorRgb(TW.zinc[950]) as [number, number, number])
+      : (parseColorRgb(TW.zinc[50]) as [number, number, number]),
+
+    labelFontSize: 11,
+    valueFontSize: 11,
+    badgeFontSize: 11,
+  };
+}
+
+/**
+ * Merge caller palette overrides on top of a derived palette. Only the keys
+ * present on `override` are replaced; everything else keeps the derived value.
+ * Returns the original palette unchanged when no override is supplied.
+ */
+export function applyPaletteOverride(
+  palette: LiveChartPalette,
+  override: Partial<LiveChartPalette> | undefined,
+): LiveChartPalette {
+  if (!override) return palette;
+  return { ...palette, ...override };
+}
+
+/**
+ * Default multi-series line colors — Tailwind 500 scale, order: blue, red, green,
+ * amber, violet, pink, cyan, orange.
+ */
+export const SERIES_COLORS = [
+  TW.blue[500],
+  TW.red[500],
+  TW.green[500],
+  TW.amber[500],
+  TW.violet[500],
+  TW.pink[500],
+  TW.cyan[500],
+  TW.orange[500],
+];
+
+/** Derive per-series palettes from series definitions. */
+export function resolveSeriesPalettes(
+  series: SeriesConfig[],
+  mode: ThemeMode,
+): Map<string, LiveChartPalette> {
+  const map = new Map<string, LiveChartPalette>();
+  for (let i = 0; i < series.length; i++) {
+    const s = series[i];
+    const color =
+      s.color != null && s.color !== ""
+        ? s.color
+        : SERIES_COLORS[i % SERIES_COLORS.length];
+    map.set(s.id, resolveTheme(color, mode));
+  }
+  return map;
+}