react-native-livechart 1.0.0

package/src/core/liveChartEngineTick.ts

@@ -0,0 +1,185 @@
+import type { CandlePoint, LiveChartPoint } from "../types";
+
+import { ADAPTIVE_SPEED_BOOST } from "../constants";
+import { lerp } from "../math/lerp";
+
+export interface EngineTickMutable {
+  displayValue: number;
+  displayMin: number;
+  displayMax: number;
+  displayWindow: number;
+  timestamp: number;
+}
+
+export interface EngineTickInput {
+  dt: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  timeWindow: number;
+  smoothing: number;
+  exaggerate: boolean;
+  referenceValue: number | undefined;
+  /** Additional reference values (lines + bands) folded into the Y range. */
+  referenceValues?: number[];
+  /** Clamp the computed lower bound at 0. */
+  nonNegative?: boolean;
+  /** Hard cap for the computed upper bound. */
+  maxValue?: number;
+  targetValue: number;
+  points: LiveChartPoint[];
+  /** Seconds since Unix epoch; defaults to `Date.now() / 1000` */
+  nowSeconds?: number;
+  /** Override the engine's "now" (unix seconds) — e.g. fill historical data edge-to-edge. */
+  nowOverride?: number;
+  /** Right-edge buffer as a fraction of the time window (pushes the live edge past "now"). */
+  windowBuffer?: number;
+  /** When true, freeze the viewport timestamp and skip displayWindow lerp */
+  paused?: boolean;
+  /** Chart mode — `"candle"` uses OHLC bars for Y range instead of line points. */
+  mode?: "line" | "candle";
+  /** Committed OHLC bars (sorted by time). Used when mode is `"candle"`. */
+  candles?: CandlePoint[];
+  /** In-progress candle. Included in Y range when mode is `"candle"`. */
+  liveCandle?: CandlePoint | null;
+}
+
+/**
+ * One frame of the live chart engine (mirrors `useLiveChartEngine` worklet body).
+ * Mutates `state` in place for testability and reuse from the hook.
+ */
+export function tickLiveChartEngineFrame(
+  state: EngineTickMutable,
+  input: EngineTickInput,
+): void {
+  "worklet";
+  const baseNow = input.nowOverride ?? input.nowSeconds ?? Date.now() / 1000;
+  if (!input.paused) {
+    state.timestamp = baseNow + (input.windowBuffer ?? 0) * input.timeWindow;
+  }
+
+  if (input.canvasWidth === 0 || input.canvasHeight === 0) return;
+
+  const speed = input.smoothing;
+  let target = input.targetValue;
+  if (input.mode === "candle" && input.liveCandle) {
+    target = input.liveCandle.close;
+  }
+
+  const range = state.displayMax - state.displayMin;
+  const gapRatio =
+    range > 0 ? Math.min(Math.abs(target - state.displayValue) / range, 1) : 0;
+  const adaptiveSpeed = speed + (1 - gapRatio) * ADAPTIVE_SPEED_BOOST;
+
+  state.displayValue = lerp(
+    state.displayValue,
+    target,
+    adaptiveSpeed,
+    input.dt,
+  );
+
+  state.displayWindow = lerp(
+    state.displayWindow,
+    input.timeWindow,
+    speed,
+    input.dt,
+  );
+
+  const winStart = state.timestamp - state.displayWindow;
+
+  let tMin = Infinity;
+  let tMax = -Infinity;
+
+  if (input.mode === "candle") {
+    const candles = input.candles;
+    if (candles && candles.length > 0) {
+      let lo = 0;
+      let hi = candles.length;
+      while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (candles[mid].time < winStart) lo = mid + 1;
+        else hi = mid;
+      }
+      for (let i = lo; i < candles.length; i++) {
+        if (candles[i].time > state.timestamp) break;
+        /* istanbul ignore next -- trivial min/max */
+        if (candles[i].low < tMin) tMin = candles[i].low;
+        /* istanbul ignore next -- trivial min/max */
+        if (candles[i].high > tMax) tMax = candles[i].high;
+      }
+    }
+    const lc = input.liveCandle;
+    if (lc) {
+      /* istanbul ignore next -- trivial min/max */
+      if (lc.low < tMin) tMin = lc.low;
+      /* istanbul ignore next -- trivial min/max */
+      if (lc.high > tMax) tMax = lc.high;
+    }
+  } else {
+    const points = input.points;
+    let lo = 0;
+    let hi = points.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (points[mid].time < winStart) lo = mid + 1;
+      else hi = mid;
+    }
+    for (let i = lo; i < points.length; i++) {
+      const v = points[i].value;
+      if (v < tMin) tMin = v;
+      if (v > tMax) tMax = v;
+    }
+  }
+
+  const cv = state.displayValue;
+  if (cv < tMin) tMin = cv;
+  if (cv > tMax) tMax = cv;
+
+  const ref = input.referenceValue;
+  if (ref !== undefined) {
+    if (ref < tMin) tMin = ref;
+    if (ref > tMax) tMax = ref;
+  }
+
+  const refs = input.referenceValues;
+  if (refs !== undefined) {
+    for (let i = 0; i < refs.length; i++) {
+      const rv = refs[i];
+      if (rv < tMin) tMin = rv;
+      if (rv > tMax) tMax = rv;
+    }
+  }
+
+  const isExaggerate = input.exaggerate;
+  if (tMin !== Infinity && tMax !== -Infinity) {
+    const rawRange = tMax - tMin;
+    const marginFactor = isExaggerate ? 0.01 : 0.12;
+    const minRange =
+      rawRange * (isExaggerate ? 0.02 : 0.1) || (isExaggerate ? 0.04 : 0.4);
+
+    if (rawRange < minRange) {
+      const mid = (tMin + tMax) / 2;
+      tMin = mid - minRange / 2;
+      tMax = mid + minRange / 2;
+    } else {
+      const margin = rawRange * marginFactor;
+      tMin -= margin;
+      tMax += margin;
+    }
+
+    if (input.nonNegative && tMin < 0) tMin = 0;
+    const maxV = input.maxValue;
+    if (maxV !== undefined && tMax > maxV) tMax = maxV;
+
+    if (tMin < state.displayMin) {
+      state.displayMin = tMin;
+    } else {
+      state.displayMin = lerp(state.displayMin, tMin, speed, input.dt);
+    }
+
+    if (tMax > state.displayMax) {
+      state.displayMax = tMax;
+    } else {
+      state.displayMax = lerp(state.displayMax, tMax, speed, input.dt);
+    }
+  }
+}

package/src/core/liveChartSeriesEngineTick.ts

@@ -0,0 +1,163 @@
+import { ADAPTIVE_SPEED_BOOST } from "../constants";
+import { lerp } from "../math/lerp";
+import type { SeriesConfig } from "../types";
+
+export interface MultiEngineTickMutable {
+  displayMin: number;
+  displayMax: number;
+  displayWindow: number;
+  timestamp: number;
+  displayValues: number[];
+  opacities: number[];
+}
+
+export interface MultiEngineTickInput {
+  dt: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  timeWindow: number;
+  smoothing: number;
+  exaggerate: boolean;
+  referenceValue: number | undefined;
+  /** Additional reference values (lines + bands) folded into the Y range. */
+  referenceValues?: number[];
+  /** Clamp the computed lower bound at 0. */
+  nonNegative?: boolean;
+  /** Hard cap for the computed upper bound. */
+  maxValue?: number;
+  series: SeriesConfig[];
+  nowSeconds?: number;
+  /** Override the engine's "now" (unix seconds). */
+  nowOverride?: number;
+  /** Right-edge buffer as a fraction of the time window. */
+  windowBuffer?: number;
+  paused?: boolean;
+}
+
+/**
+ * Multi-series frame tick: lerps per-series tips and visibility opacities,
+ * combines Y-range over visible series (same margin rules as single-series).
+ * Used by `useLiveChartSeriesEngine`.
+ */
+export function tickLiveChartSeriesEngineFrame(
+  state: MultiEngineTickMutable,
+  input: MultiEngineTickInput,
+): void {
+  "worklet";
+  const baseNow = input.nowOverride ?? input.nowSeconds ?? Date.now() / 1000;
+  if (!input.paused) {
+    state.timestamp = baseNow + (input.windowBuffer ?? 0) * input.timeWindow;
+  }
+
+  if (input.canvasWidth === 0 || input.canvasHeight === 0) return;
+
+  const speed = input.smoothing;
+  const series = input.series;
+  const n = series.length;
+
+  while (state.displayValues.length < n) {
+    const i = state.displayValues.length;
+    state.displayValues.push(series[i].value);
+    state.opacities.push(series[i].visible !== false ? 1 : 0);
+  }
+  if (state.displayValues.length > n) {
+    state.displayValues.length = n;
+    state.opacities.length = n;
+  }
+
+  state.displayWindow = lerp(
+    state.displayWindow,
+    input.timeWindow,
+    speed,
+    input.dt,
+  );
+
+  const winStart = state.timestamp - state.displayWindow;
+  const range = state.displayMax - state.displayMin;
+
+  for (let i = 0; i < n; i++) {
+    const target = series[i].value;
+    const cur = state.displayValues[i];
+    const gapRatio =
+      range > 0 ? Math.min(Math.abs(target - cur) / range, 1) : 0;
+    const adaptiveSpeed = speed + (1 - gapRatio) * ADAPTIVE_SPEED_BOOST;
+    state.displayValues[i] = lerp(cur, target, adaptiveSpeed, input.dt);
+
+    const targetOp = series[i].visible !== false ? 1 : 0;
+    state.opacities[i] = lerp(state.opacities[i], targetOp, speed, input.dt);
+  }
+
+  let tMin = Infinity;
+  let tMax = -Infinity;
+
+  for (let i = 0; i < n; i++) {
+    if (series[i].visible === false) continue;
+    const points = series[i].data;
+    let lo = 0;
+    let hi = points.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (points[mid].time < winStart) lo = mid + 1;
+      else hi = mid;
+    }
+    for (let j = lo; j < points.length; j++) {
+      const v = points[j].value;
+      /* istanbul ignore next -- trivial min/max */
+      if (v < tMin) tMin = v;
+      /* istanbul ignore next -- trivial min/max */
+      if (v > tMax) tMax = v;
+    }
+    const cv = state.displayValues[i];
+    if (cv < tMin) tMin = cv;
+    if (cv > tMax) tMax = cv;
+  }
+
+  const ref = input.referenceValue;
+  if (ref !== undefined) {
+    if (ref < tMin) tMin = ref;
+    if (ref > tMax) tMax = ref;
+  }
+
+  const refs = input.referenceValues;
+  if (refs !== undefined) {
+    for (let i = 0; i < refs.length; i++) {
+      const rv = refs[i];
+      if (rv < tMin) tMin = rv;
+      if (rv > tMax) tMax = rv;
+    }
+  }
+
+  const isExaggerate = input.exaggerate;
+  if (tMin !== Infinity && tMax !== -Infinity) {
+    const rawRange = tMax - tMin;
+    const marginFactor = isExaggerate ? 0.01 : 0.12;
+    const minRange =
+      rawRange * (isExaggerate ? 0.02 : 0.1) || (isExaggerate ? 0.04 : 0.4);
+
+    if (rawRange < minRange) {
+      const mid = (tMin + tMax) / 2;
+      tMin = mid - minRange / 2;
+      tMax = mid + minRange / 2;
+    } else {
+      const margin = rawRange * marginFactor;
+      tMin -= margin;
+      tMax += margin;
+    }
+
+    if (input.nonNegative && tMin < 0) tMin = 0;
+    const maxV = input.maxValue;
+    if (maxV !== undefined && tMax > maxV) tMax = maxV;
+
+    if (tMin < state.displayMin) {
+      state.displayMin = tMin;
+    } else {
+      state.displayMin = lerp(state.displayMin, tMin, speed, input.dt);
+    }
+
+    if (tMax > state.displayMax) {
+      state.displayMax = tMax;
+    } else {
+      state.displayMax = lerp(state.displayMax, tMax, speed, input.dt);
+    }
+  }
+}

package/src/core/multiSeriesLayout.ts

@@ -0,0 +1,80 @@
+import { MAX_MULTI_SERIES } from "../constants";
+import { SERIES_COLORS } from "../theme";
+import type { SeriesConfig } from "../types";
+
+/** Stable signature when series id/color change (not every data tick). */
+export function lineColorsSignatureFromArray(arr: SeriesConfig[]): string {
+  "worklet";
+  // U+001F (unit separator) and U+001E (record separator) are ASCII control
+  // chars that will never appear in series IDs or color strings.
+  // No Array#map — iterator callbacks are not worklets on the UI runtime.
+  let out = "";
+  for (let i = 0; i < arr.length; i++) {
+    if (i > 0) out += "\x1e";
+    const x = arr[i];
+    out += `${x.id}\x1f${x.color ?? ""}`;
+  }
+  return out;
+}
+
+/** Per-slot stroke colors for chips + Skia (empty slots → white). */
+export function resolveMultiSeriesLineColorsSnapshot(
+  arr: SeriesConfig[],
+  maxSlots = MAX_MULTI_SERIES,
+): string[] {
+  return Array.from({ length: maxSlots }, (_, i) =>
+    i < arr.length
+      ? (arr[i].color ?? SERIES_COLORS[i % SERIES_COLORS.length])
+      : "#ffffff",
+  );
+}
+
+/** Per-series visual stroke style resolved for one render slot. */
+export interface SeriesLineStyle {
+  /** Per-series stroke width override, or `undefined` to use the chart default. */
+  strokeWidth: number | undefined;
+  dashed: boolean;
+  intervals: [number, number];
+  glow: boolean;
+}
+
+const DEFAULT_LINE_STYLE: SeriesLineStyle = {
+  strokeWidth: undefined,
+  dashed: false,
+  intervals: [6, 4],
+  glow: false,
+};
+
+/**
+ * Stable signature over the per-series style fields (style / intervals /
+ * strokeWidth / glow), so a snapshot re-sync fires when styling changes but not
+ * on every data tick.
+ */
+export function lineStyleSignatureFromArray(arr: SeriesConfig[]): string {
+  "worklet";
+  let out = "";
+  for (let i = 0; i < arr.length; i++) {
+    if (i > 0) out += "\x1e";
+    const x = arr[i];
+    const iv = x.intervals ? `${x.intervals[0]},${x.intervals[1]}` : "";
+    out += `${x.id}\x1f${x.style ?? ""}\x1f${x.strokeWidth ?? ""}\x1f${x.glow ? 1 : 0}\x1f${iv}`;
+  }
+  return out;
+}
+
+/** Per-slot resolved stroke style for Skia (empty slots → defaults). */
+export function resolveMultiSeriesLineStylesSnapshot(
+  arr: SeriesConfig[],
+  maxSlots = MAX_MULTI_SERIES,
+): SeriesLineStyle[] {
+  return Array.from({ length: maxSlots }, (_, i) => {
+    const s = arr[i];
+    if (!s) return DEFAULT_LINE_STYLE;
+    return {
+      strokeWidth: s.strokeWidth,
+      dashed: s.style === "dashed",
+      intervals: s.intervals ?? DEFAULT_LINE_STYLE.intervals,
+      glow: s.glow ?? false,
+    };
+  });
+}