react-native-livechart 1.0.0

package/src/components/MultiSeriesValueLines.tsx

@@ -0,0 +1,115 @@
+import {
+  DashPathEffect,
+  Group,
+  Path,
+  Skia,
+  type SkPath,
+} from "@shopify/react-native-skia";
+
+import { useRef } from "react";
+import { useDerivedValue } from "react-native-reanimated";
+import { MAX_MULTI_SERIES } from "../constants";
+import type { ChartPadding } from "../draw/line";
+import type { ResolvedValueLineConfig } from "../core/resolveConfig";
+import type { MultiEngineState } from "../core/useLiveChartEngine";
+
+function SeriesValueLineAtIndex({
+  index,
+  engine,
+  padding,
+  color,
+  config,
+}: {
+  index: number;
+  engine: MultiEngineState;
+  padding: ChartPadding;
+  color: string;
+  config: ResolvedValueLineConfig;
+}) {
+  const cacheRef = useRef<{
+    a: SkPath;
+    b: SkPath;
+    tick: boolean;
+  } | null>(null);
+  if (cacheRef.current === null) {
+    cacheRef.current = {
+      a: Skia.Path.Make(),
+      b: Skia.Path.Make(),
+      tick: false,
+    };
+  }
+
+  const path = useDerivedValue(() => {
+    const cache = cacheRef.current!;
+    cache.tick = !cache.tick;
+    const p = cache.tick ? cache.a : cache.b;
+    p.reset();
+    const h = engine.canvasHeight.get();
+    if (h === 0) return p;
+    const s = engine.series.get();
+    const displays = engine.displaySeriesValues.get();
+    if (index >= s.length) return p;
+
+    const chartH = h - padding.top - padding.bottom;
+    const dMin = engine.displayMin.get();
+    const dMax = engine.displayMax.get();
+    const valRange = dMax - dMin;
+    const v = displays[index] ?? s[index].value;
+    const y =
+      valRange === 0
+        ? padding.top + chartH / 2
+        : padding.top + ((dMax - v) / valRange) * chartH;
+
+    if (y < 0) return p;
+    p.moveTo(padding.left, y);
+    p.lineTo(engine.canvasWidth.get() - padding.right, y);
+    return p;
+  });
+
+  const opacity = useDerivedValue(() => {
+    const s = engine.series.get();
+    const op = engine.seriesOpacities.get();
+    if (index >= s.length || index >= op.length) return 0;
+    return (op[index] ?? 0) * 0.4;
+  });
+
+  return (
+    <Group opacity={opacity}>
+      <Path
+        path={path}
+        style="stroke"
+        strokeWidth={config.strokeWidth}
+        color={config.color ?? color}
+      >
+        <DashPathEffect intervals={config.intervals} />
+      </Path>
+    </Group>
+  );
+}
+
+export function MultiSeriesValueLines({
+  engine,
+  padding,
+  colors,
+  config,
+}: {
+  engine: MultiEngineState;
+  padding: ChartPadding;
+  colors: string[];
+  config: ResolvedValueLineConfig;
+}) {
+  return (
+    <Group>
+      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+        <SeriesValueLineAtIndex
+          key={i}
+          index={i}
+          engine={engine}
+          padding={padding}
+          color={colors[i] ?? "#ffffff"}
+          config={config}
+        />
+      ))}
+    </Group>
+  );
+}

package/src/components/ReferenceLineOverlay.tsx

@@ -0,0 +1,317 @@
+import {
+  DashPathEffect,
+  Group,
+  Path,
+  RoundedRect,
+  Skia,
+  Text as SkiaText,
+  type SkFont,
+  type SkPath,
+} from "@shopify/react-native-skia";
+import { useRef } from "react";
+import { useDerivedValue } from "react-native-reanimated";
+
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+import { useReferenceLine } from "../hooks/useReferenceLine";
+import { measureFontTextWidth } from "../lib/measureFontTextWidth";
+import { referenceLineForm } from "../math/referenceLines";
+import type { LiveChartPalette, ReferenceLine } from "../types";
+
+/** Translucent fill alpha for value / time bands. */
+const BAND_FILL_OPACITY = 0.16;
+
+/** Padding inside the off-axis badge pill, in px. */
+const OFF_AXIS_PILL_PAD_X = 6;
+const OFF_AXIS_PILL_PAD_Y = 3;
+const OFF_AXIS_PILL_RADIUS = 5;
+
+/**
+ * Renders one reference line or band into the chart canvas. Handles all three
+ * `ReferenceLine` forms (horizontal line, horizontal value band, vertical time
+ * band) plus the off-axis badge for an off-screen Form-A value. Self-contained
+ * so callers can `.map()` over a variable-length `referenceLines` array.
+ */
+export function ReferenceLineOverlay({
+  engine,
+  padding,
+  line,
+  palette,
+  formatValue,
+  font,
+}: {
+  engine: ChartEngineLayout;
+  padding: ChartPadding;
+  line: ReferenceLine;
+  palette: LiveChartPalette;
+  formatValue: (v: number) => string;
+  font: SkFont;
+}) {
+  const form = referenceLineForm(line);
+  const isBand = form === "value-band" || form === "time-band";
+  const layout = useReferenceLine(engine, padding, line, formatValue, font);
+
+  const color = line.color ?? palette.refLine;
+  const labelColor = line.labelColor ?? line.color ?? palette.refLabel;
+  const strokeWidth = line.strokeWidth ?? 1;
+  const intervals = line.intervals ?? [4, 4];
+
+  // Band fill + optional dashed border (border only when strokeWidth is set).
+  const bandFillOpacity = line.fillOpacity ?? BAND_FILL_OPACITY;
+  const hasBandBorder = isBand && line.strokeWidth !== undefined;
+
+  // Off-axis target pill styling.
+  const badgeBackground = line.badgeBackground ?? palette.tooltipBg;
+  const badgeBorderColor = line.badgeBorderColor ?? color;
+  const badgeRadius = line.badgeRadius ?? OFF_AXIS_PILL_RADIUS;
+
+  const cacheRef = useRef<{
+    lineA: SkPath;
+    lineB: SkPath;
+    lineT: boolean;
+    bandA: SkPath;
+    bandB: SkPath;
+    bandT: boolean;
+    borderA: SkPath;
+    borderB: SkPath;
+    borderT: boolean;
+    offA: SkPath;
+    offB: SkPath;
+    offT: boolean;
+    chevA: SkPath;
+    chevB: SkPath;
+    chevT: boolean;
+  } | null>(null);
+  if (cacheRef.current === null) {
+    cacheRef.current = {
+      lineA: Skia.Path.Make(),
+      lineB: Skia.Path.Make(),
+      lineT: false,
+      bandA: Skia.Path.Make(),
+      bandB: Skia.Path.Make(),
+      bandT: false,
+      borderA: Skia.Path.Make(),
+      borderB: Skia.Path.Make(),
+      borderT: false,
+      offA: Skia.Path.Make(),
+      offB: Skia.Path.Make(),
+      offT: false,
+      chevA: Skia.Path.Make(),
+      chevB: Skia.Path.Make(),
+      chevT: false,
+    };
+  }
+
+  const linePath = useDerivedValue(() => {
+    const cache = cacheRef.current!;
+    cache.lineT = !cache.lineT;
+    const p = cache.lineT ? cache.lineA : cache.lineB;
+    p.reset();
+    const l = layout.get();
+    if (!l.visible || l.offAxis || isBand) return p;
+    p.moveTo(l.x1, l.y);
+    p.lineTo(l.x2, l.y);
+    return p;
+  });
+
+  const bandPath = useDerivedValue(() => {
+    const cache = cacheRef.current!;
+    cache.bandT = !cache.bandT;
+    const p = cache.bandT ? cache.bandA : cache.bandB;
+    p.reset();
+    const l = layout.get();
+    if (!l.visible || !isBand) return p;
+    p.moveTo(l.x1, l.y);
+    p.lineTo(l.x2, l.y);
+    p.lineTo(l.x2, l.yBottom);
+    p.lineTo(l.x1, l.yBottom);
+    p.close();
+    return p;
+  });
+
+  const bandBorderPath = useDerivedValue(() => {
+    const cache = cacheRef.current!;
+    cache.borderT = !cache.borderT;
+    const p = cache.borderT ? cache.borderA : cache.borderB;
+    p.reset();
+    const l = layout.get();
+    if (!l.visible || !hasBandBorder) return p;
+    if (form === "time-band") {
+      // Vertical edges at the band's left / right.
+      p.moveTo(l.x1, l.y);
+      p.lineTo(l.x1, l.yBottom);
+      p.moveTo(l.x2, l.y);
+      p.lineTo(l.x2, l.yBottom);
+    } else {
+      // Horizontal edges at the band's top / bottom.
+      p.moveTo(l.x1, l.y);
+      p.lineTo(l.x2, l.y);
+      p.moveTo(l.x1, l.yBottom);
+      p.lineTo(l.x2, l.yBottom);
+    }
+    return p;
+  });
+
+  const offLinePath = useDerivedValue(() => {
+    const cache = cacheRef.current!;
+    cache.offT = !cache.offT;
+    const p = cache.offT ? cache.offA : cache.offB;
+    p.reset();
+    const l = layout.get();
+    if (!l.visible || !l.offAxis) return p;
+    // Start the connector just past the badge pill's right edge so the dashed
+    // line runs out to the chart edge rather than behind the badge.
+    const pillRight =
+      l.labelX + measureFontTextWidth(font, l.label) + OFF_AXIS_PILL_PAD_X;
+    const start = pillRight + 4;
+    if (start >= l.x2) return p;
+    p.moveTo(start, l.y);
+    p.lineTo(l.x2, l.y);
+    return p;
+  });
+
+  const chevronPath = useDerivedValue(() => {
+    const cache = cacheRef.current!;
+    cache.chevT = !cache.chevT;
+    const p = cache.chevT ? cache.chevA : cache.chevB;
+    p.reset();
+    const l = layout.get();
+    if (!l.visible || !l.offAxis) return p;
+    const cx = l.x1 + 6;
+    const cy = l.y;
+    const s = 4;
+    if (l.chevronUp) {
+      p.moveTo(cx - s, cy + s);
+      p.lineTo(cx, cy - s);
+      p.lineTo(cx + s, cy + s);
+    } else {
+      p.moveTo(cx - s, cy - s);
+      p.lineTo(cx, cy + s);
+      p.lineTo(cx + s, cy - s);
+    }
+    return p;
+  });
+
+  const lineOpacity = useDerivedValue(() =>
+    layout.get().visible && !layout.get().offAxis && !isBand ? 1 : 0,
+  );
+  const bandOpacity = useDerivedValue(() =>
+    layout.get().visible && isBand ? bandFillOpacity : 0,
+  );
+  const bandBorderOpacity = useDerivedValue(() =>
+    layout.get().visible && hasBandBorder ? 1 : 0,
+  );
+  const offOpacity = useDerivedValue(() =>
+    layout.get().visible && layout.get().offAxis ? 1 : 0,
+  );
+  const labelOpacity = useDerivedValue(() => (layout.get().visible ? 1 : 0));
+
+  const labelX = useDerivedValue(() => layout.get().labelX);
+  const labelY = useDerivedValue(() => layout.get().labelY);
+  const labelText = useDerivedValue(() => layout.get().label);
+
+  // Font metrics depend only on the (stable) font, so read them once instead of
+  // on every frame inside the pill worklets (`getMetrics` allocates + crosses
+  // JSI). The off-axis pill's ascent offset and height are then plain constants.
+  const { ascent: fontAscent, height: pillH } = (() => {
+    const fm = font.getMetrics();
+    return {
+      ascent: fm.ascent,
+      height: fm.descent - fm.ascent + OFF_AXIS_PILL_PAD_Y * 2,
+    };
+  })();
+
+  // Off-axis badge pill — a rounded background behind the chevron + label.
+  const pillX = useDerivedValue(() => layout.get().x1 + 2);
+  const pillY = useDerivedValue(
+    () => layout.get().labelY + fontAscent - OFF_AXIS_PILL_PAD_Y,
+  );
+  const pillW = useDerivedValue(() => {
+    const l = layout.get();
+    const textW = measureFontTextWidth(font, l.label);
+    return l.labelX + textW + OFF_AXIS_PILL_PAD_X - (l.x1 + 2);
+  });
+
+  return (
+    <Group>
+      {isBand && (
+        <Group opacity={bandOpacity}>
+          <Path path={bandPath} style="fill" color={color} />
+        </Group>
+      )}
+
+      {hasBandBorder && (
+        <Group opacity={bandBorderOpacity}>
+          <Path
+            path={bandBorderPath}
+            style="stroke"
+            strokeWidth={strokeWidth}
+            color={color}
+          >
+            <DashPathEffect intervals={intervals} />
+          </Path>
+        </Group>
+      )}
+
+      {!isBand && (
+        <Group opacity={lineOpacity}>
+          <Path
+            path={linePath}
+            style="stroke"
+            strokeWidth={strokeWidth}
+            color={color}
+          >
+            <DashPathEffect intervals={intervals} />
+          </Path>
+        </Group>
+      )}
+
+      <Group opacity={offOpacity}>
+        <Path
+          path={offLinePath}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          color={color}
+        >
+          <DashPathEffect intervals={intervals} />
+        </Path>
+        <RoundedRect
+          x={pillX}
+          y={pillY}
+          width={pillW}
+          height={pillH}
+          r={badgeRadius}
+          color={badgeBackground}
+        />
+        <RoundedRect
+          x={pillX}
+          y={pillY}
+          width={pillW}
+          height={pillH}
+          r={badgeRadius}
+          color={badgeBorderColor}
+          style="stroke"
+          strokeWidth={1}
+        />
+        <Path
+          path={chevronPath}
+          style="stroke"
+          strokeWidth={1.5}
+          color={color}
+          strokeCap="round"
+          strokeJoin="round"
+        />
+      </Group>
+
+      <Group opacity={labelOpacity}>
+        <SkiaText
+          x={labelX}
+          y={labelY}
+          text={labelText}
+          font={font}
+          color={labelColor}
+        />
+      </Group>
+    </Group>
+  );
+}

package/src/components/SeriesToggleChips.tsx

@@ -0,0 +1,201 @@
+import { useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { useAnimatedReaction, type SharedValue } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { MONO_FONT_FAMILY } from "../lib/monoFontFamily";
+import type { ResolvedLegendConfig } from "../core/resolveConfig";
+import type { LiveChartPalette, SeriesConfig } from "../types";
+import { seriesMetaSig } from "./seriesMetaSig";
+
+export interface SeriesToggleChipsProps {
+  series: SharedValue<SeriesConfig[]>;
+  legend: ResolvedLegendConfig;
+  /** Chart palette, used to derive theme-aware default chip colors. */
+  palette?: LiveChartPalette;
+  onSeriesToggle?: (id: string, visible: boolean) => void;
+}
+
+/**
+ * Neutral, readable default chip colors derived from the chart background
+ * luminance, so the legend stays legible on both light and dark themes. Each is
+ * only a fallback — matching `legend.style` overrides win.
+ */
+function legendColorDefaults(palette: LiveChartPalette | undefined) {
+  const bg = palette?.bgRgb;
+  const isLight = bg
+    ? (0.299 * bg[0] + 0.587 * bg[1] + 0.114 * bg[2]) / 255 > 0.5
+    : false;
+  return isLight
+    ? {
+        activeBackground: "rgba(0,0,0,0.06)",
+        hiddenBackground: "rgba(0,0,0,0.03)",
+        activeColor: "rgba(0,0,0,0.85)",
+        hiddenColor: "rgba(0,0,0,0.4)",
+      }
+    : {
+        activeBackground: "rgba(255,255,255,0.12)",
+        hiddenBackground: "rgba(255,255,255,0.05)",
+        activeColor: "rgba(255,255,255,0.92)",
+        hiddenColor: "rgba(255,255,255,0.45)",
+      };
+}
+
+/**
+ * Mirrors `series` into React state when id/label/color/visibility changes (not on every data tick).
+ */
+export function SeriesToggleChips({
+  series,
+  legend,
+  palette,
+  onSeriesToggle,
+}: SeriesToggleChipsProps) {
+  // Seed from the current series at mount; the reaction below keeps it in sync.
+  const [snapshot, setSnapshot] = useState<SeriesConfig[]>(() =>
+    series.get().slice(),
+  );
+
+  // Read the `series` prop from closure rather than a SharedValue passed
+  // through `scheduleOnRN`: the handle serialized across the worklet→JS
+  // boundary exposes the native `.value` accessor but NOT the `.get()` method,
+  // so calling `.get()` on it throws ("sv.get is not a function").
+  const pullSnapshot = () => {
+    setSnapshot(series.get().slice());
+  };
+
+  useAnimatedReaction(
+    () => seriesMetaSig(series.get()),
+    /* istanbul ignore next -- Reanimated reaction; snapshot seeded at mount, pulled here on change */
+    (sig, prev) => {
+      if (sig !== prev) {
+        scheduleOnRN(pullSnapshot);
+      }
+    },
+    [series, pullSnapshot],
+  );
+
+  if (!legend.visible) return null;
+
+  const toggle = (id: string) => {
+    const arr = series.get().slice();
+    const idx = arr.findIndex((s) => s.id === id);
+    /* istanbul ignore next -- defensive; chips only call with known ids */
+    if (idx < 0) return;
+    const wasVisible = arr[idx].visible !== false;
+    const nextVisible = !wasVisible;
+    const next = arr.map((s, i) =>
+      i === idx ? { ...s, visible: nextVisible } : s,
+    );
+    series.set(next);
+    setSnapshot(next);
+    onSeriesToggle?.(id, nextVisible);
+  };
+
+  const compact = legend.compact;
+  const st = legend.style;
+  const fallback = legendColorDefaults(palette);
+
+  return (
+    <View style={[styles.row, compact && styles.rowCompact]}>
+      {snapshot.map((s) => {
+        const on = s.visible !== false;
+        const label = s.label ?? s.id;
+        const swatchSize = st?.dotSize;
+        const chipBg = on
+          ? (st?.activeBackground ?? fallback.activeBackground)
+          : (st?.hiddenBackground ?? fallback.hiddenBackground);
+        const textColor = on
+          ? (st?.activeColor ?? fallback.activeColor)
+          : (st?.hiddenColor ?? fallback.hiddenColor);
+        return (
+          <Pressable
+            key={s.id}
+            onPress={() => toggle(s.id)}
+            style={[
+              styles.chip,
+              compact && styles.chipCompact,
+              st?.borderRadius !== undefined && { borderRadius: st.borderRadius },
+              { backgroundColor: chipBg },
+            ]}
+          >
+            <View
+              style={[
+                styles.swatch,
+                { backgroundColor: s.color ?? "#888" },
+                swatchSize !== undefined && {
+                  width: swatchSize,
+                  height: swatchSize,
+                  borderRadius: swatchSize / 2,
+                },
+              ]}
+            />
+            <Text
+              style={[
+                styles.chipText,
+                compact && styles.chipTextCompact,
+                s.kind === "derived" && styles.chipTextDerived,
+                st?.fontSize !== undefined && { fontSize: st.fontSize },
+                { color: textColor },
+              ]}
+              numberOfLines={1}
+            >
+              {label}
+              {s.valueLabel ? (
+                <Text style={styles.chipValue}> {s.valueLabel}</Text>
+              ) : null}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    marginBottom: 8,
+    paddingHorizontal: 4,
+  },
+  rowCompact: {
+    gap: 4,
+    marginBottom: 4,
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    maxWidth: "48%",
+  },
+  chipCompact: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    gap: 4,
+    borderRadius: 6,
+    maxWidth: "32%",
+  },
+  swatch: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  chipText: {
+    flexShrink: 1,
+    fontSize: 13,
+    fontFamily: MONO_FONT_FAMILY,
+  },
+  chipTextCompact: {
+    fontSize: 11,
+  },
+  chipTextDerived: {
+    fontStyle: "italic",
+    opacity: 0.85,
+  },
+  chipValue: {
+    fontWeight: "700",
+  },
+});