Synced charts

import { useMemo } from "react";
import { View } from "react-native";
import {
  LiveChart,
  type ChartOverlayContext,
  type ChartViewportControl,
  type LiveChartPoint,
  type ViewportConfig,
} from "react-native-livechart";
import {
  cancelAnimation,
  useAnimatedReaction,
  useSharedValue,
  type SharedValue,
} from "react-native-reanimated";

function Mirror({
  ctx,
  follower,
}: {
  ctx: ChartOverlayContext;
  follower: ChartViewportControl;
}) {
  const { scale } = ctx;
  const { end, window } = follower;
  useAnimatedReaction(
    () => scale.get(),
    (drawn) => {
      if (drawn.plot.width <= 0) return;
      cancelAnimation(end);
      cancelAnimation(window);
      end.set(drawn.now);
      window.set(drawn.window);
    },
  );
  return null;
}

function SyncedCharts({
  data,
  value,
  otherData,
  otherValue,
}: {
  data: SharedValue<LiveChartPoint[]>;
  value: SharedValue<number>;
  otherData: SharedValue<LiveChartPoint[]>;
  otherValue: SharedValue<number>;
}) {
  const leaderEnd = useSharedValue<number | null>(null);
  const leaderWindow = useSharedValue<number | null>(null);
  const followerEnd = useSharedValue<number | null>(null);
  const followerWindow = useSharedValue<number | null>(null);
  const leader = useMemo<ViewportConfig>(
    () => ({ end: leaderEnd, window: leaderWindow }),
    [leaderEnd, leaderWindow],
  );
  const follower = useMemo<ViewportConfig>(
    () => ({
      end: followerEnd,
      window: followerWindow,
      windowSmoothing: false,
    }),
    [followerEnd, followerWindow],
  );

  return (
    <>
      <View style={{ height: 200 }}>
        <LiveChart
          data={data}
          value={value}
          timeWindow={3600}
          viewport={leader}
          timeScroll
          zoom
          renderOverlay={(ctx) => <Mirror ctx={ctx} follower={follower} />}
        />
      </View>
      <View style={{ height: 200 }}>
        <LiveChart
          data={otherData}
          value={otherValue}
          timeWindow={3600}
          viewport={follower}
          timeScroll={false}
          zoom={false}
        />
      </View>
    </>
  );
}