react-native-livechart 4.20.0 → 4.21.1

package/src/components/CrosshairOverlay.tsx

@@ -17,41 +17,7 @@ import type { ResolvedSelectionDotConfig } from "../core/resolveConfig";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import { SelectionDotSlot } from "./SelectionDot";
 
-export function CrosshairOverlay({
-  scrubX,
-  crosshairOpacity,
-  tooltipLayout,
-  engine,
-  padding,
-  palette,
-  font,
-  showTooltip = true,
-  children,
-  renderTooltip,
-  lineTop,
-  showLine = true,
-  selectionDot,
-  selectionY,
-  scrubActive,
-  selectionColor,
-  dimOpacity = 0.3,
-  liveDotExtent = 0,
-  crosshairLineColor,
-  crosshairStrokeWidth = 1,
-  crosshairOvershoot = 0,
-  crosshairFade = true,
-  crosshairFadeDistance = 4,
-  crosshairLineCap,
-  crosshairDash,
-  crosshairDimColor,
-  tooltipBackground,
-  tooltipColor,
-  tooltipBorderColor,
-  tooltipBorderRadius = 5,
-  tooltipShowValue = true,
-  tooltipShowTime = true,
-  opaqueCanvas = false,
-}: {
+type CrosshairOverlayProps = {
   scrubX: SharedValue<number>;
   crosshairOpacity: SharedValue<number>;
   tooltipLayout: SharedValue<TooltipLayout>;
@@ -116,32 +82,62 @@ export function CrosshairOverlay({
   tooltipShowTime?: boolean;
   /** Paint the owned background instead of erasing destination alpha. */
   opaqueCanvas?: boolean;
-}) {
+};
+
+export function CrosshairOverlay({
+  scrubX,
+  crosshairOpacity,
+  tooltipLayout,
+  engine,
+  padding,
+  palette,
+  font,
+  showTooltip = true,
+  children,
+  renderTooltip,
+  lineTop,
+  showLine = true,
+  selectionDot,
+  selectionY,
+  scrubActive,
+  selectionColor,
+  dimOpacity = 0.3,
+  liveDotExtent = 0,
+  crosshairLineColor,
+  crosshairStrokeWidth = 1,
+  crosshairOvershoot = 0,
+  crosshairFade = true,
+  crosshairFadeDistance = 4,
+  crosshairLineCap,
+  crosshairDash,
+  crosshairDimColor,
+  tooltipBackground,
+  tooltipColor,
+  tooltipBorderColor,
+  tooltipBorderRadius = 5,
+  tooltipShowValue = true,
+  tooltipShowTime = true,
+  opaqueCanvas = false,
+}: CrosshairOverlayProps) {
   // Explicit dependency arrays: with React Compiler enabled, Reanimated's
   // auto-detected worklet dependencies can change array size between renders
   // (e.g. when `liveDotExtent` flips 0 → the live-dot extent), which trips
   // React's "final argument changed size between renders" error. Listing the
   // captured plain values keeps the dependency array a constant size. SharedValue
   // reads stay reactive regardless of this list.
-  const p1 = useDerivedValue(
-    () => {
-      // A top-pinned custom tooltip pushes the line's start down to its measured
-      // bottom (lineTop) so the line stops at the label; -1 → no top tooltip.
-      const lt = lineTop?.value ?? -1;
-      return {
-        x: scrubX.value,
-        y: lt >= 0 ? lt : padding.top - crosshairOvershoot,
-      };
-    },
-    [scrubX, padding.top, lineTop, crosshairOvershoot],
-  );
+  const p1 = useDerivedValue(() => {
+    // A top-pinned custom tooltip pushes the line's start down to its measured
+    // bottom (lineTop) so the line stops at the label; -1 → no top tooltip.
+    const lt = lineTop?.value ?? -1;
+    return {
+      x: scrubX.value,
+      y: lt >= 0 ? lt : padding.top - crosshairOvershoot,
+    };
+  }, [scrubX, padding.top, lineTop, crosshairOvershoot]);
   const p2 = useDerivedValue(
     () => ({
       x: scrubX.value,
-      y:
-        engine.canvasHeight.value -
-        padding.bottom +
-        crosshairOvershoot,
+      y: engine.canvasHeight.value - padding.bottom + crosshairOvershoot,
     }),
     [scrubX, engine.canvasHeight, padding.bottom, crosshairOvershoot],
   );
@@ -197,111 +193,362 @@ export function CrosshairOverlay({
 
   return (
     <>
-      {crosshairDimColor !== undefined ? (
-        // Legacy: solid colored mask painted over the chart (opt-in).
-        <Group opacity={crosshairOpacity}>
-          <Rect
-            x={scrubX}
-            y={padding.top}
-            width={dimWidth}
-            height={dimHeight}
-            color={crosshairDimColor}
-          />
-        </Group>
-      ) : dimOpacity < 1 && opaqueCanvas ? (
+      <CrosshairDimLayer
+        scrubX={scrubX}
+        paddingTop={padding.top}
+        dimWidth={dimWidth}
+        dimHeight={dimHeight}
+        crosshairOpacity={crosshairOpacity}
+        crosshairDimColor={crosshairDimColor}
+        dimOpacity={dimOpacity}
+        opaqueCanvas={opaqueCanvas}
+        backgroundColor={backgroundColor}
+        opaqueDimOpacity={opaqueDimOpacity}
+        dimErase={dimErase}
+      />
+      <CrosshairVisibleLayer
+        opacity={visibleOpacity}
+        p1={p1}
+        p2={p2}
+        palette={palette}
+        showLine={showLine}
+        crosshairLineColor={crosshairLineColor}
+        crosshairStrokeWidth={crosshairStrokeWidth}
+        crosshairLineCap={crosshairLineCap}
+        crosshairDash={crosshairDash}
+        selectionDot={selectionDot}
+        scrubX={scrubX}
+        selectionY={selectionY}
+        scrubActive={scrubActive}
+        selectionColor={selectionColor}
+        showTooltip={showTooltip}
+        tipX={tipX}
+        tipY={tipY}
+        tipW={tipW}
+        tipH={tipH}
+        tooltipBorderRadius={tooltipBorderRadius}
+        tooltipBackground={tooltipBackground}
+        tooltipBorderColor={tooltipBorderColor}
+        renderTooltip={renderTooltip}
+        tooltipShowValue={tooltipShowValue}
+        effectiveTooltipShowTime={effectiveTooltipShowTime}
+        valueTextX={valueTextX}
+        timeTextX={timeTextX}
+        line1Y={line1Y}
+        line2Y={line2Y}
+        valueStr={valueStr}
+        timeStr={timeStr}
+        font={font}
+        tooltipColor={tooltipColor}
+      >
+        {children}
+      </CrosshairVisibleLayer>
+    </>
+  );
+}
+
+function CrosshairDimLayer({
+  scrubX,
+  paddingTop,
+  dimWidth,
+  dimHeight,
+  crosshairOpacity,
+  crosshairDimColor,
+  dimOpacity,
+  opaqueCanvas,
+  backgroundColor,
+  opaqueDimOpacity,
+  dimErase,
+}: {
+  scrubX: SharedValue<number>;
+  paddingTop: number;
+  dimWidth: SharedValue<number>;
+  dimHeight: SharedValue<number>;
+  crosshairOpacity: SharedValue<number>;
+  crosshairDimColor?: string;
+  dimOpacity: number;
+  opaqueCanvas: boolean;
+  backgroundColor: string;
+  opaqueDimOpacity: SharedValue<number>;
+  dimErase: SharedValue<string>;
+}) {
+  if (crosshairDimColor !== undefined) {
+    return (
+      <Group opacity={crosshairOpacity}>
         <Rect
           x={scrubX}
-          y={padding.top}
+          y={paddingTop}
           width={dimWidth}
           height={dimHeight}
-          color={backgroundColor}
-          opacity={opaqueDimOpacity}
+          color={crosshairDimColor}
         />
-      ) : dimOpacity < 1 ? (
-        // Erase the trailing content's alpha so it fades to the real background
-        // (works on any background color, unlike a colored mask).
-        <Group blendMode="dstOut">
-          <Rect
-            x={scrubX}
-            y={padding.top}
-            width={dimWidth}
-            height={dimHeight}
-            color={dimErase}
-          />
-        </Group>
-      ) : null}
+      </Group>
+    );
+  }
+  if (dimOpacity >= 1) return null;
+  if (opaqueCanvas) {
+    return (
+      <Rect
+        x={scrubX}
+        y={paddingTop}
+        width={dimWidth}
+        height={dimHeight}
+        color={backgroundColor}
+        opacity={opaqueDimOpacity}
+      />
+    );
+  }
+  return (
+    <Group blendMode="dstOut">
+      <Rect
+        x={scrubX}
+        y={paddingTop}
+        width={dimWidth}
+        height={dimHeight}
+        color={dimErase}
+      />
+    </Group>
+  );
+}
 
-      <Group opacity={visibleOpacity}>
-        {showLine ? (
-          <Line
-            p1={p1}
-            p2={p2}
-            color={crosshairLineColor ?? palette.crosshairLine}
-            strokeWidth={crosshairStrokeWidth}
-            strokeCap={crosshairLineCap}
-          >
-            {crosshairDash ? <DashPathEffect intervals={crosshairDash} /> : null}
-          </Line>
-        ) : null}
+function CrosshairVisibleLayer({
+  opacity,
+  p1,
+  p2,
+  palette,
+  showLine,
+  crosshairLineColor,
+  crosshairStrokeWidth,
+  crosshairLineCap,
+  crosshairDash,
+  selectionDot,
+  scrubX,
+  selectionY,
+  scrubActive,
+  selectionColor,
+  showTooltip,
+  tipX,
+  tipY,
+  tipW,
+  tipH,
+  tooltipBorderRadius,
+  tooltipBackground,
+  tooltipBorderColor,
+  children,
+  renderTooltip,
+  tooltipShowValue,
+  effectiveTooltipShowTime,
+  valueTextX,
+  timeTextX,
+  line1Y,
+  line2Y,
+  valueStr,
+  timeStr,
+  font,
+  tooltipColor,
+}: {
+  opacity: SharedValue<number>;
+  p1: SharedValue<{ x: number; y: number }>;
+  p2: SharedValue<{ x: number; y: number }>;
+  palette: LiveChartPalette;
+  showLine: boolean;
+  crosshairLineColor?: string;
+  crosshairStrokeWidth: number;
+  crosshairLineCap?: "butt" | "round" | "square";
+  crosshairDash?: number[];
+  selectionDot?: ResolvedSelectionDotConfig | null;
+  scrubX: SharedValue<number>;
+  selectionY?: SharedValue<number>;
+  scrubActive: SharedValue<number> | SharedValue<boolean>;
+  selectionColor?: string;
+  showTooltip: boolean;
+  tipX: SharedValue<number>;
+  tipY: SharedValue<number>;
+  tipW: SharedValue<number>;
+  tipH: SharedValue<number>;
+  tooltipBorderRadius: number;
+  tooltipBackground?: string;
+  tooltipBorderColor?: string;
+  children?: ReactNode;
+  renderTooltip?: () => ReactNode;
+  tooltipShowValue: boolean;
+  effectiveTooltipShowTime: boolean;
+  valueTextX: SharedValue<number>;
+  timeTextX: SharedValue<number>;
+  line1Y: SharedValue<number>;
+  line2Y: SharedValue<number>;
+  valueStr: SharedValue<string>;
+  timeStr: SharedValue<string>;
+  font: SkFont;
+  tooltipColor?: string;
+}) {
+  return (
+    <Group opacity={opacity}>
+      <CrosshairLine
+        show={showLine}
+        p1={p1}
+        p2={p2}
+        color={crosshairLineColor ?? palette.crosshairLine}
+        strokeWidth={crosshairStrokeWidth}
+        strokeCap={crosshairLineCap}
+        dash={crosshairDash}
+      />
+      <SelectionDotSlot
+        config={selectionDot}
+        x={scrubX}
+        y={selectionY}
+        active={scrubActive}
+        opacity={opacity}
+        color={selectionColor ?? palette.line}
+      />
+      <CrosshairTooltip
+        show={showTooltip}
+        tipX={tipX}
+        tipY={tipY}
+        tipW={tipW}
+        tipH={tipH}
+        borderRadius={tooltipBorderRadius}
+        background={tooltipBackground ?? palette.tooltipBg}
+        borderColor={tooltipBorderColor ?? palette.tooltipBorder}
+        renderTooltip={renderTooltip}
+        showValue={tooltipShowValue}
+        showTime={effectiveTooltipShowTime}
+        valueTextX={valueTextX}
+        timeTextX={timeTextX}
+        line1Y={line1Y}
+        line2Y={line2Y}
+        valueStr={valueStr}
+        timeStr={timeStr}
+        font={font}
+        valueColor={tooltipColor ?? palette.tooltipText}
+        timeColor={palette.gridLabel}
+      >
+        {children}
+      </CrosshairTooltip>
+    </Group>
+  );
+}
 
-        {/* Selection dot at the scrub intersection. `null` hides it; a custom
-            component renders the consumer's dot; otherwise the built-in dot. */}
-        <SelectionDotSlot
-          config={selectionDot}
-          x={scrubX}
-          y={selectionY}
-          active={scrubActive}
-          opacity={visibleOpacity}
-          color={selectionColor ?? palette.line}
-        />
+function CrosshairLine({
+  show,
+  p1,
+  p2,
+  color,
+  strokeWidth,
+  strokeCap,
+  dash,
+}: {
+  show: boolean;
+  p1: SharedValue<{ x: number; y: number }>;
+  p2: SharedValue<{ x: number; y: number }>;
+  color: string;
+  strokeWidth: number;
+  strokeCap?: "butt" | "round" | "square";
+  dash?: number[];
+}) {
+  if (!show) return null;
+  return (
+    <Line
+      p1={p1}
+      p2={p2}
+      color={color}
+      strokeWidth={strokeWidth}
+      strokeCap={strokeCap}
+    >
+      {dash ? <DashPathEffect intervals={dash} /> : null}
+    </Line>
+  );
+}
 
-        {showTooltip && (
-          <>
-            <RoundedRect
-              x={tipX}
-              y={tipY}
-              width={tipW}
-              height={tipH}
-              r={tooltipBorderRadius}
-              color={tooltipBackground ?? palette.tooltipBg}
+function CrosshairTooltip({
+  show,
+  tipX,
+  tipY,
+  tipW,
+  tipH,
+  borderRadius,
+  background,
+  borderColor,
+  children,
+  renderTooltip,
+  showValue,
+  showTime,
+  valueTextX,
+  timeTextX,
+  line1Y,
+  line2Y,
+  valueStr,
+  timeStr,
+  font,
+  valueColor,
+  timeColor,
+}: {
+  show: boolean;
+  tipX: SharedValue<number>;
+  tipY: SharedValue<number>;
+  tipW: SharedValue<number>;
+  tipH: SharedValue<number>;
+  borderRadius: number;
+  background: string;
+  borderColor: string;
+  children?: ReactNode;
+  renderTooltip?: () => ReactNode;
+  showValue: boolean;
+  showTime: boolean;
+  valueTextX: SharedValue<number>;
+  timeTextX: SharedValue<number>;
+  line1Y: SharedValue<number>;
+  line2Y: SharedValue<number>;
+  valueStr: SharedValue<string>;
+  timeStr: SharedValue<string>;
+  font: SkFont;
+  valueColor: string;
+  timeColor: string;
+}) {
+  if (!show) return null;
+  const body = children ?? renderTooltip?.();
+  return (
+    <>
+      <RoundedRect
+        x={tipX}
+        y={tipY}
+        width={tipW}
+        height={tipH}
+        r={borderRadius}
+        color={background}
+      />
+      <RoundedRect
+        x={tipX}
+        y={tipY}
+        width={tipW}
+        height={tipH}
+        r={borderRadius}
+        color={borderColor}
+        style="stroke"
+        strokeWidth={1}
+      />
+      {body ?? (
+        <Group>
+          {showValue ? (
+            <SkiaText
+              x={valueTextX}
+              y={line1Y}
+              text={valueStr}
+              font={font}
+              color={valueColor}
             />
-
-            <RoundedRect
-              x={tipX}
-              y={tipY}
-              width={tipW}
-              height={tipH}
-              r={tooltipBorderRadius}
-              color={tooltipBorderColor ?? palette.tooltipBorder}
-              style="stroke"
-              strokeWidth={1}
+          ) : null}
+          {showTime ? (
+            <SkiaText
+              x={timeTextX}
+              y={showValue ? line2Y : line1Y}
+              text={timeStr}
+              font={font}
+              color={timeColor}
             />
-
-            {children ?? renderTooltip?.() ?? (
-              <Group>
-                {tooltipShowValue && (
-                  <SkiaText
-                    x={valueTextX}
-                    y={line1Y}
-                    text={valueStr}
-                    font={font}
-                    color={tooltipColor ?? palette.tooltipText}
-                  />
-                )}
-                {effectiveTooltipShowTime && (
-                  <SkiaText
-                    x={timeTextX}
-                    y={tooltipShowValue ? line2Y : line1Y}
-                    text={timeStr}
-                    font={font}
-                    color={palette.gridLabel}
-                  />
-                )}
-              </Group>
-            )}
-          </>
-        )}
-      </Group>
+          ) : null}
+        </Group>
+      )}
     </>
   );
 }

package/src/components/CustomMarkerOverlay.tsx

@@ -30,6 +30,14 @@ import type {
 /** Live group flags surfaced to `renderMarker` (mirrored to JS on change). */
 type GroupState = Record<string, { isGrouped: boolean; groupCount: number }>;
 
+function markerIdSet(key: string): Record<string, true> {
+  const ids: Record<string, true> = {};
+  for (const id of key.split("\x1f")) {
+    if (id) ids[id] = true;
+  }
+  return ids;
+}
+
 /**
  * One custom-rendered marker: a React Native element floated over the canvas and
  * pinned to the marker's live clustered `(x, y)` position. It reads its slot out
@@ -168,12 +176,7 @@ export function CustomMarkerOverlay({
 
   // Stable id-set of customized markers (used by the UI-thread map below).
   const customKey = custom.map((c) => c.marker.id).join("\x1f");
-  const customIds = useMemo<Record<string, true>>(() => {
-    const o: Record<string, true> = {};
-    for (const c of custom) o[c.marker.id] = true;
-    return o;
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- recomputed when the id set (customKey) changes
-  }, [customKey]);
+  const customIds = useMemo(() => markerIdSet(customKey), [customKey]);
 
   // One project+cluster over ALL markers each frame, exposed as an id→position map
   // for just the custom markers (so views read their own slot by id). Reuses a

package/src/components/CustomThresholdBadgeOverlay.tsx

@@ -0,0 +1,74 @@
+import { StyleSheet, View, type LayoutChangeEvent } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from "react-native-reanimated";
+
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+
+/** Inset from the anchored edge, matching the built-in threshold badge. */
+const EDGE_INSET = 2;
+
+/**
+ * React Native overlay for a custom threshold badge. The chart owns the
+ * position, measuring the returned element and pinning its vertical center to
+ * the live threshold Y on the UI thread. The consumer owns only its contents and
+ * chrome.
+ */
+export function CustomThresholdBadgeOverlay({
+  element,
+  engine,
+  padding,
+  y,
+  visible,
+  position,
+}: {
+  element: React.ReactElement;
+  engine: ChartEngineLayout;
+  padding: ChartPadding;
+  y: SharedValue<number>;
+  visible: SharedValue<boolean>;
+  position: "left" | "right";
+}) {
+  const size = useSharedValue({ width: 0, height: 0 });
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    size.set({ width, height });
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const canvasWidth = engine.canvasWidth.get();
+    const yy = y.get();
+    const measured = size.get();
+    const show = visible.get() && canvasWidth > 0 && Number.isFinite(yy);
+    const translateX =
+      position === "right"
+        ? canvasWidth - padding.right - EDGE_INSET - measured.width
+        : EDGE_INSET;
+    return {
+      opacity: show ? 1 : 0,
+      transform: [
+        { translateX },
+        { translateY: yy - measured.height / 2 },
+      ],
+    };
+  });
+
+  return (
+    <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+      <Animated.View
+        pointerEvents="box-none"
+        onLayout={onLayout}
+        style={[styles.anchor, animatedStyle]}
+      >
+        {element}
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  anchor: { position: "absolute", top: 0, left: 0 },
+});