react-native-livechart 1.0.0

package/src/components/LiveChartTransition.tsx

@@ -0,0 +1,135 @@
+import {
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  useEffect,
+  useReducer,
+  useRef,
+} from "react";
+import { StyleSheet, View, type ViewStyle } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+export interface LiveChartTransitionProps {
+  /** Key of the active child to show. Must match a child's `key`. */
+  active: string;
+  /** Chart elements, each with a unique `key`. */
+  children: ReactNode;
+  /** Cross-fade duration in ms. Default `300`. */
+  duration?: number;
+  /**
+   * Keep every child mounted for the lifetime of the transition (only the
+   * opacity animates). Each chart's engine then settles its y-range once, up
+   * front, so switching is a pure cross-fade with no reveal/range re-animation.
+   * Costs more (all engines run continuously). Default `false` (mount the
+   * active child + unmount the outgoing one after the fade).
+   */
+  keepMounted?: boolean;
+  /** Container style. */
+  style?: ViewStyle;
+}
+
+function FadeLayer({
+  visible,
+  duration,
+  children,
+}: {
+  visible: boolean;
+  duration: number;
+  children: ReactNode;
+}) {
+  const opacity = useSharedValue(visible ? 1 : 0);
+  useEffect(() => {
+    opacity.set(withTiming(visible ? 1 : 0, { duration }));
+  }, [visible, duration, opacity]);
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.get() }));
+  return (
+    <Animated.View
+      pointerEvents={visible ? "auto" : "none"}
+      style={[StyleSheet.absoluteFill, animatedStyle]}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+type MountedAction =
+  | { type: "mount"; key: string }
+  | { type: "unmount"; key: string };
+
+/** Tracks which child keys are currently mounted during a cross-fade. */
+function mountedReducer(
+  mounted: Set<string>,
+  action: MountedAction,
+): Set<string> {
+  switch (action.type) {
+    case "mount":
+      if (mounted.has(action.key)) return mounted;
+      return new Set(mounted).add(action.key);
+    case "unmount": {
+      if (!mounted.has(action.key)) return mounted;
+      const next = new Set(mounted);
+      next.delete(action.key);
+      return next;
+    }
+  }
+}
+
+/**
+ * Cross-fades between chart instances by `key` (e.g. line ↔ candle). Mounts the
+ * active child plus any outgoing child still fading out; unmounts the outgoing
+ * child once the fade completes. RN/Reanimated analogue of liveline's
+ * `LivelineTransition`.
+ */
+export function LiveChartTransition({
+  active,
+  children,
+  duration = 300,
+  keepMounted = false,
+  style,
+}: LiveChartTransitionProps) {
+  // Use the raw children (not Children.toArray, which rewrites keys to ".$key").
+  const childArray = (
+    Array.isArray(children) ? children : [children]
+  ).filter(isValidElement) as ReactElement[];
+
+  const [mounted, dispatch] = useReducer(
+    mountedReducer,
+    active,
+    (initial) => new Set([initial]),
+  );
+  const prevRef = useRef(active);
+
+  useEffect(() => {
+    if (keepMounted) return;
+    if (active === prevRef.current) return;
+    const outgoing = prevRef.current;
+    prevRef.current = active;
+    dispatch({ type: "mount", key: active });
+    const timer = setTimeout(() => {
+      dispatch({ type: "unmount", key: outgoing });
+    }, duration + 50);
+    return () => clearTimeout(timer);
+  }, [active, duration, keepMounted]);
+
+  return (
+    <View style={[styles.root, style]}>
+      {childArray.map((child) => {
+        const key = String(child.key ?? "");
+        if (!keepMounted && !mounted.has(key)) return null;
+        return (
+          <FadeLayer key={key} visible={key === active} duration={duration}>
+            {child}
+          </FadeLayer>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, position: "relative" },
+});

package/src/components/LoadingOverlay.tsx

@@ -0,0 +1,301 @@
+import {
+  Group,
+  LinearGradient,
+  Path,
+  Rect,
+  RoundedRect,
+  Skia,
+  Text as SkiaText,
+  vec,
+  type SkFont,
+  type SkPath,
+} from "@shopify/react-native-skia";
+import { useRef } from "react";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+import {
+  BADGE_DOT_GAP,
+  EMPTY_GAP_FADE_WIDTH,
+  EMPTY_STATE_LABEL_ALPHA,
+  EMPTY_TEXT_GAP_PAD,
+} from "../constants";
+import {
+  badgeTailAndCap,
+  gutterCenteredTextLeftX,
+  pillTextLeftX,
+  type ChartPadding,
+} from "../draw/line";
+import { drawSpline } from "../math/spline";
+import { buildSquigglyPts } from "../math/squiggly";
+import type { LiveChartPalette } from "../types";
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+
+const PLACEHOLDER_LABEL_COUNT = 4;
+const RECT_W = 16;
+const RECT_H = 4;
+const RECT_R = 4;
+const RECT_SPACING = 32;
+
+function buildSplineInto(path: ReturnType<typeof Skia.Path.Make>, pts: number[]) {
+  "worklet";
+  path.reset();
+  const n = pts.length >> 1;
+  if (n < 2) return path;
+  path.moveTo(pts[0], pts[1]);
+  drawSpline(path, pts);
+  return path;
+}
+
+export function LoadingOverlay({
+  engine,
+  padding,
+  palette,
+  font,
+  morphT,
+  isLoading,
+  isEmpty,
+  emptyText,
+  strokeWidth,
+  badge = false,
+  badgeTail = true,
+}: {
+  engine: ChartEngineLayout;
+  padding: ChartPadding;
+  palette: LiveChartPalette;
+  font: SkFont;
+  morphT: SharedValue<number>;
+  isLoading: SharedValue<boolean>;
+  /** Derived or shared; only `.value` is read on the UI thread. */
+  isEmpty: SharedValue<boolean> | { value: boolean };
+  emptyText: string;
+  strokeWidth: number;
+  /** Mirror the badge prop so labels align with GridOverlay's label positions. */
+  badge?: boolean;
+  /** Whether the badge tail spike is shown; affects the left inset used for skeleton alignment. */
+  badgeTail?: boolean;
+}) {
+  // Same left-inset formula as GridOverlay (only used when badge=true)
+  const leftInset = BADGE_DOT_GAP + badgeTailAndCap(font.getSize(), badgeTail);
+
+  // Ping-pong persistent paths — avoid allocating a JSI-backed SkPath per frame
+  // while the squiggly loading/empty-state animation is running.
+  const squigglyCacheRef = useRef<{
+    a: SkPath;
+    b: SkPath;
+    tick: boolean;
+  } | null>(null);
+  if (squigglyCacheRef.current === null) {
+    squigglyCacheRef.current = {
+      a: Skia.Path.Make(),
+      b: Skia.Path.Make(),
+      tick: false,
+    };
+  }
+
+  // Squiggly path — animated each frame via timestamp
+  const squigglyPath = useDerivedValue(() => {
+    const squigglyCache = squigglyCacheRef.current!;
+    squigglyCache.tick = !squigglyCache.tick;
+    const path = squigglyCache.tick ? squigglyCache.a : squigglyCache.b;
+    if (!isLoading.get() && !isEmpty.value && morphT.get() >= 1) {
+      path.reset();
+      return path;
+    }
+    const pts = buildSquigglyPts(
+      engine.canvasWidth.get(),
+      engine.canvasHeight.get(),
+      padding,
+      engine.timestamp.get(),
+    );
+    return buildSplineInto(path, pts);
+  });
+
+  // Fades out quickly as the reveal animation begins (first 33% of morphT)
+  const groupOpacity = useDerivedValue(() => {
+    if (!isLoading.get() && !isEmpty.value) {
+      return Math.max(0, 1 - morphT.get() * 3);
+    }
+    return 1;
+  });
+
+  // Placeholder Y-axis rects: skeleton pills centred in the right gutter
+  const labelLayout = useDerivedValue(() => {
+    const w = engine.canvasWidth.get();
+    const h = engine.canvasHeight.get();
+    if (w === 0 || h === 0) {
+      return { x: -200, ys: [0, 0, 0, 0] as [number, number, number, number] };
+    }
+    const chartH = h - padding.top - padding.bottom;
+    // Mirror GridOverlay: pillTextLeftX when badge is on, gutterCenteredTextLeftX otherwise
+    const x = badge
+      ? pillTextLeftX(w, padding.right, leftInset, RECT_W)
+      : gutterCenteredTextLeftX(w, padding.right, RECT_W);
+    // Centre the group of rects around the chart's vertical midpoint
+    const groupH = (PLACEHOLDER_LABEL_COUNT - 1) * RECT_SPACING;
+    const groupStartCY = padding.top + chartH / 2 - groupH / 2;
+    const ys: [number, number, number, number] = [0, 0, 0, 0];
+    for (let i = 0; i < PLACEHOLDER_LABEL_COUNT; i++) {
+      const rowCenterY = groupStartCY + i * RECT_SPACING;
+      ys[i] = rowCenterY - RECT_H / 2; // top of rect so center lands on rowCenterY
+    }
+    return { x, ys };
+  });
+
+  // X and Y positions for the placeholder rects
+  const lx = useDerivedValue(() => labelLayout.get().x);
+  const ly0 = useDerivedValue(() => labelLayout.get().ys[0]);
+  const ly1 = useDerivedValue(() => labelLayout.get().ys[1]);
+  const ly2 = useDerivedValue(() => labelLayout.get().ys[2]);
+  const ly3 = useDerivedValue(() => labelLayout.get().ys[3]);
+
+  // Empty-state text + gradient gap
+  const emptyGapLayout = useDerivedValue(() => {
+    const w = engine.canvasWidth.get();
+    const h = engine.canvasHeight.get();
+    if (w === 0 || h === 0) {
+      return {
+        gapLeft: 0,
+        gapRight: 0,
+        centerY: 0,
+        eraseH: 0,
+        fadeW: EMPTY_GAP_FADE_WIDTH,
+        textX: 0,
+        textY: 0,
+        textW: 0,
+        showGap: 0,
+      };
+    }
+    const chartH = h - padding.top - padding.bottom;
+    const centerY = padding.top + chartH / 2;
+    const chartCentreX = (padding.left + w - padding.right) / 2;
+    const textW = font.measureText(emptyText).width;
+    const gapHalf = textW / 2 + EMPTY_TEXT_GAP_PAD;
+    const fadeW = EMPTY_GAP_FADE_WIDTH;
+    const gapLeft = chartCentreX - gapHalf - fadeW;
+    const gapRight = chartCentreX + gapHalf + fadeW;
+    const eraseH = Math.max(56, chartH * 0.28) + strokeWidth;
+    const fm = font.getMetrics();
+    const textX = chartCentreX - textW / 2;
+    const textY = centerY - (fm.ascent + fm.descent) / 2;
+    return {
+      gapLeft,
+      gapRight,
+      centerY,
+      eraseH,
+      fadeW,
+      textX,
+      textY,
+      textW,
+      showGap: isEmpty.value ? 1 : 0,
+    };
+  });
+
+  const gapLeft = useDerivedValue(() => emptyGapLayout.get().gapLeft);
+  const gapTop = useDerivedValue(
+    () => emptyGapLayout.get().centerY - emptyGapLayout.get().eraseH / 2,
+  );
+  const gapWidth = useDerivedValue(
+    () => emptyGapLayout.get().gapRight - emptyGapLayout.get().gapLeft,
+  );
+  const gapHeight = useDerivedValue(() => emptyGapLayout.get().eraseH);
+  const emptyTextX = useDerivedValue(() => emptyGapLayout.get().textX);
+  const emptyTextY = useDerivedValue(() => emptyGapLayout.get().textY);
+  const showGapGroup = useDerivedValue(() => emptyGapLayout.get().showGap);
+
+  const gapGradientPositions = useDerivedValue(() => {
+    const L = emptyGapLayout.get().gapRight - emptyGapLayout.get().gapLeft;
+    const fw = emptyGapLayout.get().fadeW;
+    if (L <= 0) return [0, 0, 1, 1] as number[];
+    const t1 = Math.min(fw / L, 0.49);
+    const t2 = Math.max(1 - fw / L, 0.51);
+    return [0, t1, t2, 1];
+  });
+
+  const gapGradEnd = useDerivedValue(() =>
+    vec(
+      Math.max(1, emptyGapLayout.get().gapRight - emptyGapLayout.get().gapLeft),
+      0,
+    ),
+  );
+
+  const emptyLabelText = useDerivedValue(() =>
+    isEmpty.value ? emptyText : "",
+  );
+  const emptyLabelOpacity = useDerivedValue(() =>
+    isEmpty.value ? EMPTY_STATE_LABEL_ALPHA : 0,
+  );
+
+  return (
+    <Group opacity={groupOpacity}>
+      {/* Squiggly loading line */}
+      <Path
+        path={squigglyPath}
+        style="stroke"
+        strokeWidth={strokeWidth}
+        color={palette.gridLine}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+
+      {/* Erase a soft horizontal band through the squiggle for the label (dstOut) */}
+      <Group opacity={showGapGroup} blendMode="dstOut">
+        <Rect x={gapLeft} y={gapTop} width={gapWidth} height={gapHeight}>
+          <LinearGradient
+            start={vec(0, 0)}
+            end={gapGradEnd}
+            colors={[
+              "rgba(0,0,0,0)",
+              "rgba(0,0,0,1)",
+              "rgba(0,0,0,1)",
+              "rgba(0,0,0,0)",
+            ]}
+            positions={gapGradientPositions}
+          />
+        </Rect>
+      </Group>
+
+      {/* Skeleton Y-axis label placeholders */}
+      <RoundedRect
+        x={lx}
+        y={ly0}
+        width={RECT_W}
+        height={RECT_H}
+        r={RECT_R}
+        color={palette.gridLine}
+      />
+      <RoundedRect
+        x={lx}
+        y={ly1}
+        width={RECT_W}
+        height={RECT_H}
+        r={RECT_R}
+        color={palette.gridLine}
+      />
+      <RoundedRect
+        x={lx}
+        y={ly2}
+        width={RECT_W}
+        height={RECT_H}
+        r={RECT_R}
+        color={palette.gridLine}
+      />
+      <RoundedRect
+        x={lx}
+        y={ly3}
+        width={RECT_W}
+        height={RECT_H}
+        r={RECT_R}
+        color={palette.gridLine}
+      />
+
+      {/* Empty state label */}
+      <SkiaText
+        x={emptyTextX}
+        y={emptyTextY}
+        text={emptyLabelText}
+        font={font}
+        color={palette.gridLabel}
+        opacity={emptyLabelOpacity}
+      />
+    </Group>
+  );
+}