Lightweight Charts React Components

import { useCallback, useMemo, useRef, useState } from "react";
import { LineStyle } from "lightweight-charts";
import type {
  CandlestickData,
  MouseEventParams,
  SeriesMarker,
  UTCTimestamp,
} from "lightweight-charts";
import {
  CandlestickSeries,
  Chart,
  Markers,
  Pane,
  PriceLine,
  TimeScale,
  TimeScaleFitContentTrigger,
  type SeriesApiRef,
} from "lightweight-charts-react-components";

type Execution = {
  id: string;
  barTime: UTCTimestamp;
  side: "buy" | "sell";
  quantity: number;
};
type Level = { id: string; price: number; title: string; color: string };

const quantize = (rawPrice: number, tickSize: number, precision: number) =>
  Number((Math.round(rawPrice / tickSize) * tickSize).toFixed(precision));

function PriceInput({
  price,
  tickSize,
  precision,
  onCommit,
}: {
  price: number;
  tickSize: number;
  precision: number;
  onCommit: (price: number) => void;
}) {
  // Hold the typed text and round on commit. Rounding each keystroke would rewrite
  // the field mid-entry: with a tick of 5, typing "105" would turn "1" into 0.
  const [draft, setDraft] = useState<string | null>(null);
  const commit = () => {
    if (draft === null) return;
    setDraft(null);
    const rawPrice = Number(draft);
    if (draft !== "" && Number.isFinite(rawPrice)) {
      onCommit(quantize(rawPrice, tickSize, precision));
    }
  };
  return (
    <input
      type="number"
      step={tickSize}
      value={draft ?? price}
      onChange={event => setDraft(event.target.value)}
      onBlur={commit}
      onKeyDown={event => {
        if (event.key === "Enter") commit();
      }}
    />
  );
}

export function TradeAnnotations({
  candles,
  executions,
  initialLevels,
  tickSize,
  precision,
}: {
  candles: CandlestickData<UTCTimestamp>[];
  executions: Execution[];
  initialLevels: Level[];
  tickSize: number;
  precision: number;
}) {
  const seriesRef = useRef<SeriesApiRef<"Candlestick">>(null);
  const [levels, setLevels] = useState(initialLevels);
  const [showExecutions, setShowExecutions] = useState(true);
  const [placing, setPlacing] = useState(false);

  const markers = useMemo<SeriesMarker<UTCTimestamp>[]>(() => {
    if (!showExecutions) return [];
    const loadedTimes = new Set(candles.map(bar => bar.time));
    return executions
      .filter(execution => loadedTimes.has(execution.barTime))
      .map(execution => ({
        id: execution.id,
        time: execution.barTime,
        position:
          execution.side === "buy" ? ("belowBar" as const) : ("aboveBar" as const),
        shape: execution.side === "buy" ? ("arrowUp" as const) : ("arrowDown" as const),
        color: execution.side === "buy" ? "#16a34a" : "#dc2626",
        text: `${execution.side.toUpperCase()} ${execution.quantity}`,
      }))
      .sort((a, b) => a.time - b.time || a.id.localeCompare(b.id));
  }, [candles, executions, showExecutions]);

  const onClick = useCallback(
    (param: MouseEventParams) => {
      if (!placing || !param.point || !(tickSize > 0) || !Number.isFinite(tickSize))
        return;
      const series = seriesRef.current?.api();
      if (!series || param.paneIndex !== series.getPane().paneIndex()) return;
      // Convert from pane-local pixels using the target series' actual scale.
      // point.y is not a price and may refer to an unrelated pane.
      const rawPrice = series.coordinateToPrice(param.point.y);
      if (rawPrice === null || !Number.isFinite(rawPrice)) return;
      const price = quantize(rawPrice, tickSize, precision);
      const id = crypto.randomUUID();
      setLevels(previous => [
        ...previous,
        { id, price, title: "Alert", color: "#f59e0b" },
      ]);
      setPlacing(false);
    },
    [placing, tickSize, precision]
  );

  return (
    <section>
      <button onClick={() => setShowExecutions(value => !value)}>
        {showExecutions ? "Hide executions" : "Show executions"}
      </button>
      <button onClick={() => setPlacing(value => !value)}>
        {placing ? "Cancel placement" : "Place alert level"}
      </button>
      <Chart
        options={{ autoSize: true }}
        containerProps={{ style: { height: 360 } }}
        onClick={onClick}
      >
        <Pane>
          <CandlestickSeries
            ref={seriesRef}
            data={candles}
            options={{
              priceLineVisible: false,
              priceFormat: { type: "price", minMove: tickSize, precision },
            }}
          >
            <Markers markers={markers} options={{ zOrder: "normal" }} />
            {levels.map(level => (
              <PriceLine
                key={level.id}
                price={level.price}
                options={{
                  title: level.title,
                  color: level.color,
                  lineStyle: LineStyle.Dashed,
                  axisLabelVisible: true,
                }}
              />
            ))}
          </CandlestickSeries>
        </Pane>
        <TimeScale>
          <TimeScaleFitContentTrigger deps={[]} />
        </TimeScale>
      </Chart>
      {levels.map(level => (
        <label key={level.id} style={{ display: "block" }}>
          {level.title}
          <PriceInput
            price={level.price}
            tickSize={tickSize}
            precision={precision}
            onCommit={price =>
              setLevels(previous =>
                previous.map(item => (item.id === level.id ? { ...item, price } : item))
              )
            }
          />
          <button
            onClick={() =>
              setLevels(previous => previous.filter(item => item.id !== level.id))
            }
          >
            Remove
          </button>
        </label>
      ))}
    </section>
  );
}