react-native-livechart 4.11.0 → 4.13.0

package/src/components/PerSeriesTooltipOverlay.tsx

@@ -0,0 +1,290 @@
+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,
+  opacity,
+  tooltipBackground,
+  tooltipColor,
+  tooltipBorderColor,
+}: {
+  layout: TooltipLayoutValue;
+  font: SkFont;
+  palette: LiveChartPalette;
+  config: ResolvedPerSeriesTooltipConfig;
+  seriesCount: number;
+  /** Active crosshair opacity; idle `alwaysShow` pills stay fully visible. */
+  opacity?: SharedValue<number> | DerivedValue<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 opacity={opacity}>
+      <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>
+  );
+}