Lightweight Charts React Components

import { useCallback, useEffect, useMemo, useRef } from "react";
import { CrosshairMode } from "lightweight-charts";
import type {
  IChartApi,
  IRange,
  LineData,
  MouseEventParams,
  Time,
  UTCTimestamp,
} from "lightweight-charts";
import {
  Chart,
  LineSeries,
  TimeScale,
  type ChartApiRef,
  type SeriesApiRef,
} from "lightweight-charts-react-components";

type Side = "first" | "second";
type Point = LineData<UTCTimestamp>;

export function SynchronizedCharts({
  first,
  second,
}: {
  first: Point[];
  second: Point[];
}) {
  const firstChart = useRef<ChartApiRef<Time, IChartApi>>(null);
  const secondChart = useRef<ChartApiRef<Time, IChartApi>>(null);
  const firstSeries = useRef<SeriesApiRef<"Line">>(null);
  const secondSeries = useRef<SeriesApiRef<"Line">>(null);
  const forwardingRange = useRef(false);
  const pointerOwner = useRef<Side | null>(null);
  const firstValues = useMemo(
    () => new Map(first.map(point => [point.time, point.value])),
    [first]
  );
  const secondValues = useMemo(
    () => new Map(second.map(point => [point.time, point.value])),
    [second]
  );

  const forwardRange = useCallback((source: Side, range: IRange<Time> | null) => {
    if (!range || forwardingRange.current) return;
    const target = (source === "first" ? secondChart : firstChart).current
      ?.api()
      ?.timeScale();
    if (!target) return;
    const existing = target.getVisibleRange();
    // Equality also stops deferred notifications after the synchronous guard
    // has been cleared. Inputs here use numeric timestamps exclusively.
    if (existing?.from === range.from && existing?.to === range.to) return;
    forwardingRange.current = true;
    try {
      target.setVisibleRange(range);
    } finally {
      forwardingRange.current = false;
    }
  }, []);

  const forwardCrosshair = useCallback(
    (source: Side, param: MouseEventParams) => {
      // Only a chart currently under the user's pointer can lead. Programmatic
      // changes on the follower must not become new input on the source.
      if (pointerOwner.current !== source) return;
      const targetChart = (source === "first" ? secondChart : firstChart).current?.api();
      const targetSeries = (
        source === "first" ? secondSeries : firstSeries
      ).current?.api();
      const values = source === "first" ? secondValues : firstValues;
      if (!targetChart || !targetSeries) return;
      const value =
        typeof param.time === "number"
          ? values.get(param.time as UTCTimestamp)
          : undefined;
      if (!param.point || value === undefined || typeof param.time !== "number") {
        targetChart.clearCrosshairPosition();
        return;
      }
      // A matching time uses the target's own value, never the source's price or
      // y pixel. The target series provides the correct price scale and pane.
      targetChart.setCrosshairPosition(value, param.time, targetSeries);
    },
    [firstValues, secondValues]
  );

  useEffect(() => {
    let frame = 0;
    const initialize = () => {
      const a = firstChart.current?.api();
      const b = secondChart.current?.api();
      if (!a || !b || !firstSeries.current?.api() || !secondSeries.current?.api()) {
        frame = requestAnimationFrame(initialize);
        return;
      }
      a.timeScale().fitContent();
      const range = a.timeScale().getVisibleRange();
      if (range) b.timeScale().setVisibleRange(range);
    };
    initialize();
    return () => cancelAnimationFrame(frame);
  }, []);

  const leave = () => {
    pointerOwner.current = null;
    firstChart.current?.api()?.clearCrosshairPosition();
    secondChart.current?.api()?.clearCrosshairPosition();
  };

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 320px), 1fr))",
        gap: 16,
      }}
    >
      <Chart
        ref={firstChart}
        options={{ autoSize: true, crosshair: { mode: CrosshairMode.Normal } }}
        containerProps={{
          style: { height: 300 },
          onPointerEnter: () => {
            pointerOwner.current = "first";
          },
          onPointerLeave: leave,
        }}
        onCrosshairMove={param => forwardCrosshair("first", param)}
      >
        <LineSeries ref={firstSeries} data={first} options={{ color: "#2563eb" }} />
        <TimeScale onVisibleTimeRangeChange={range => forwardRange("first", range)} />
      </Chart>
      <Chart
        ref={secondChart}
        options={{ autoSize: true, crosshair: { mode: CrosshairMode.Normal } }}
        containerProps={{
          style: { height: 300 },
          onPointerEnter: () => {
            pointerOwner.current = "second";
          },
          onPointerLeave: leave,
        }}
        onCrosshairMove={param => forwardCrosshair("second", param)}
      >
        <LineSeries ref={secondSeries} data={second} options={{ color: "#ea580c" }} />
        <TimeScale onVisibleTimeRangeChange={range => forwardRange("second", range)} />
      </Chart>
    </div>
  );
}