react-native-livechart 4.10.0 → 4.12.0

package/src/components/MultiSeriesDots.tsx

@@ -1,7 +1,6 @@
 import { Circle, Group } from "@shopify/react-native-skia";
 
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
-import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type {
   ResolvedDotRingConfig,
@@ -118,6 +117,7 @@ export function MultiSeriesDots({
   color,
   pulse,
   viewEnd,
+  seriesCount,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
@@ -132,10 +132,12 @@ export function MultiSeriesDots({
   pulse: ResolvedPulseConfig | null;
   /** Pan/zoom right-edge override — pulse is frozen-out while scrolled back. */
   viewEnd?: SharedValue<number | null>;
+  /** Number of live series slots to mount. */
+  seriesCount: number;
 }) {
   return (
     <Group>
-      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+      {Array.from({ length: seriesCount }, (_, i) => (
         <SeriesDotAtIndex
           key={i}
           index={i}

package/src/components/MultiSeriesTooltipStack.tsx

@@ -4,11 +4,13 @@ import {
   type SkFont,
 } from "@shopify/react-native-skia";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
-import { MAX_MULTI_SERIES } from "../constants";
 import type { TooltipLayout } from "../hooks/crosshairShared";
 import type { LiveChartPalette } from "../types";
 
-const TOOLTIP_STACK_SLOTS = MAX_MULTI_SERIES + 1;
+// Candle tooltips have exactly O/H/L/C + time. This component is only mounted
+// for candle mode, so reserving the multi-series capacity registered 40 unused
+// derived-value mappers (8 empty rows × 5 mappers).
+const TOOLTIP_STACK_SLOTS = 5;
 
 function TooltipStackLine({
   index,

package/src/components/MultiSeriesValueLabels.tsx

@@ -5,7 +5,6 @@ import {
 } from "@shopify/react-native-skia";
 import { useDerivedValue } from "react-native-reanimated";
 
-import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type { MultiEngineState } from "../core/useLiveChartEngine";
 
@@ -78,16 +77,19 @@ export function MultiSeriesValueLabels({
   colors,
   font,
   dotRadius,
+  seriesCount,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
   colors: string[];
   font: SkFont;
   dotRadius: number;
+  /** Number of live series slots to mount. */
+  seriesCount: number;
 }) {
   return (
     <Group>
-      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+      {Array.from({ length: seriesCount }, (_, i) => (
         <SeriesValueLabelAtIndex
           key={i}
           index={i}

package/src/components/MultiSeriesValueLines.tsx

@@ -1,7 +1,6 @@
 import { DashPathEffect, Group, Path } from "@shopify/react-native-skia";
 
 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";
@@ -72,15 +71,18 @@ export function MultiSeriesValueLines({
   padding,
   colors,
   config,
+  seriesCount,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
   colors: string[];
   config: ResolvedValueLineConfig;
+  /** Number of live series slots to mount. */
+  seriesCount: number;
 }) {
   return (
     <Group>
-      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+      {Array.from({ length: seriesCount }, (_, i) => (
         <SeriesValueLineAtIndex
           key={i}
           index={i}

package/src/components/PerSeriesTooltipOverlay.tsx

@@ -0,0 +1,287 @@
+import {
+  Circle,
+  Group,
+  RoundedRect,
+  Text as SkiaText,
+  type SkFont,
+} from "@shopify/react-native-skia";
+import {
+  useDerivedValue,
+  type DerivedValue,
+  type SharedValue,
+} from "react-native-reanimated";
+import type { ResolvedPerSeriesTooltipConfig } from "../core/resolveConfig";
+import type { TooltipLayout } from "../hooks/crosshairShared";
+import type { LiveChartPalette } from "../types";
+
+type TooltipLayoutValue =
+  | SharedValue<TooltipLayout>
+  | DerivedValue<TooltipLayout>;
+
+function TimePill({
+  layout,
+  font,
+  palette,
+  config,
+  background,
+  color,
+  borderColor,
+}: {
+  layout: TooltipLayoutValue;
+  font: SkFont;
+  palette: LiveChartPalette;
+  config: ResolvedPerSeriesTooltipConfig;
+  background?: string;
+  color?: string;
+  borderColor?: string;
+}) {
+  const opacity = useDerivedValue(() =>
+    layout.value.perSeries?.timePill ? 1 : 0,
+  );
+  const x = useDerivedValue(
+    () => layout.value.perSeries?.timePill?.x ?? -400,
+  );
+  const y = useDerivedValue(
+    () => layout.value.perSeries?.timePill?.y ?? 0,
+  );
+  const w = useDerivedValue(
+    () => layout.value.perSeries?.timePill?.w ?? 0,
+  );
+  const h = useDerivedValue(
+    () => layout.value.perSeries?.timePill?.h ?? 0,
+  );
+  const text = useDerivedValue(
+    () => layout.value.perSeries?.timePill?.text ?? "",
+  );
+  const textX = useDerivedValue(
+    () => layout.value.perSeries?.timePill?.textX ?? -400,
+  );
+  const baselineY = useDerivedValue(
+    () => layout.value.perSeries?.timePill?.baselineY ?? 0,
+  );
+  const clip = useDerivedValue(() => ({
+    x: layout.value.perSeries?.timePill?.x ?? -400,
+    y: layout.value.perSeries?.timePill?.y ?? 0,
+    width: layout.value.perSeries?.timePill?.w ?? 0,
+    height: layout.value.perSeries?.timePill?.h ?? 0,
+  }));
+
+  return (
+    <Group opacity={opacity}>
+      <RoundedRect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        r={config.timePillRadius}
+        color={background ?? palette.tooltipBg}
+      />
+      <RoundedRect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        r={config.timePillRadius}
+        color={borderColor ?? palette.tooltipBorder}
+        style="stroke"
+        strokeWidth={1}
+      />
+      <Group clip={clip}>
+        <SkiaText
+          x={textX}
+          y={baselineY}
+          text={text}
+          font={font}
+          color={color ?? palette.tooltipText}
+        />
+      </Group>
+    </Group>
+  );
+}
+
+function SeriesPill({
+  index,
+  layout,
+  font,
+  palette,
+  config,
+  background,
+  labelColor,
+  valueColor,
+  borderColor,
+}: {
+  index: number;
+  layout: TooltipLayoutValue;
+  font: SkFont;
+  palette: LiveChartPalette;
+  config: ResolvedPerSeriesTooltipConfig;
+  background?: string;
+  labelColor?: string;
+  valueColor?: string;
+  borderColor?: string;
+}) {
+  const opacity = useDerivedValue(() => {
+    const pills = layout.value.perSeries?.pills;
+    return pills && index < pills.length ? 1 : 0;
+  });
+  const x = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.x ?? -400,
+  );
+  const y = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.y ?? 0,
+  );
+  const w = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.w ?? 0,
+  );
+  const h = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.h ?? 0,
+  );
+  const anchorX = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.anchorX ?? -400,
+  );
+  const anchorY = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.anchorY ?? -400,
+  );
+  const dotX = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.dotX ?? -400,
+  );
+  const dotY = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.dotY ?? -400,
+  );
+  const dotColor = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.color ?? palette.tooltipText,
+  );
+  const label = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.label ?? "",
+  );
+  const labelX = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.labelX ?? -400,
+  );
+  const value = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.value ?? "",
+  );
+  const valueX = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.valueX ?? -400,
+  );
+  const baselineY = useDerivedValue(
+    () => layout.value.perSeries?.pills[index]?.baselineY ?? 0,
+  );
+  const clip = useDerivedValue(() => ({
+    x: layout.value.perSeries?.pills[index]?.x ?? -400,
+    y: layout.value.perSeries?.pills[index]?.y ?? 0,
+    width: layout.value.perSeries?.pills[index]?.w ?? 0,
+    height: layout.value.perSeries?.pills[index]?.h ?? 0,
+  }));
+
+  return (
+    <Group opacity={opacity}>
+      <Circle
+        cx={anchorX}
+        cy={anchorY}
+        r={config.intersectionDotSize / 2}
+        color={dotColor}
+      />
+      <RoundedRect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        r={config.seriesPillRadius}
+        color={background ?? palette.tooltipBg}
+      />
+      <RoundedRect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        r={config.seriesPillRadius}
+        color={borderColor ?? palette.tooltipBorder}
+        style="stroke"
+        strokeWidth={1}
+      />
+      <Group clip={clip}>
+        <Circle
+          cx={dotX}
+          cy={dotY}
+          r={config.seriesPillDotSize / 2}
+          color={dotColor}
+        />
+        <SkiaText
+          x={labelX}
+          y={baselineY}
+          text={label}
+          font={font}
+          color={labelColor ?? palette.tooltipText}
+        />
+        <SkiaText
+          x={valueX}
+          y={baselineY}
+          text={value}
+          font={font}
+          color={valueColor ?? labelColor ?? palette.tooltipText}
+        />
+      </Group>
+    </Group>
+  );
+}
+
+/** Skia-only per-series tooltip renderer; every position is SharedValue-driven. */
+export function PerSeriesTooltipOverlay({
+  layout,
+  font,
+  palette,
+  config,
+  seriesCount,
+  tooltipBackground,
+  tooltipColor,
+  tooltipBorderColor,
+}: {
+  layout: TooltipLayoutValue;
+  font: SkFont;
+  palette: LiveChartPalette;
+  config: ResolvedPerSeriesTooltipConfig;
+  seriesCount: number;
+  tooltipBackground?: string;
+  tooltipColor?: string;
+  tooltipBorderColor?: string;
+}) {
+  const timeBackground =
+    config.timePillBackground ?? tooltipBackground;
+  const timeColor = config.timePillColor ?? tooltipColor;
+  const timeBorder =
+    config.timePillBorderColor ?? tooltipBorderColor;
+  const seriesBackground =
+    config.seriesPillBackground ?? tooltipBackground;
+  const seriesLabelColor =
+    config.seriesPillLabelColor ?? tooltipColor;
+  const seriesBorder =
+    config.seriesPillBorderColor ?? tooltipBorderColor;
+
+  return (
+    <Group>
+      <TimePill
+        layout={layout}
+        font={font}
+        palette={palette}
+        config={config}
+        background={timeBackground}
+        color={timeColor}
+        borderColor={timeBorder}
+      />
+      {Array.from({ length: seriesCount }, (_, index) => (
+        <SeriesPill
+          key={index}
+          index={index}
+          layout={layout}
+          font={font}
+          palette={palette}
+          config={config}
+          background={seriesBackground}
+          labelColor={seriesLabelColor}
+          valueColor={config.seriesPillValueColor}
+          borderColor={seriesBorder}
+        />
+      ))}
+    </Group>
+  );
+}