Function ChartPanelInner

src/components/ChartPanel.tsx:137–627

({ selectedMarket, lineOnly = false }: ChartPanelProps)

}

function ChartPanelInner({ selectedMarket, lineOnly = false }: ChartPanelProps) {
  const { t } = useI18n();
  const [timeRange, setTimeRange] = useState<TimeRange>("24h");
  const [chartMode, setChartMode] = useState<ChartMode>("candle");
  const [showMA, setShowMA] = useState(true);
  const [showMACD, setShowMACD] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [crosshairData, setCrosshairData] = useState<CrosshairData | null>(null);
  const [chartData, setChartData] = useState<ChartData | null>(null);
  const [useUTC, setUseUTC] = useState(true);
  const retryCount = useRef(0);

  const chartContainerRef = useRef<HTMLDivElement>(null);
  const macdContainerRef = useRef<HTMLDivElement>(null);
  const chartInstanceRef = useRef<ReturnType<typeof import("lightweight-charts").createChart> | null>(null);
  const macdChartRef = useRef<ReturnType<typeof import("lightweight-charts").createChart> | null>(null);

  const isMulti = useMemo(() => {
    if (!selectedMarket) return false;
    return selectedMarket.markets.filter(m => m.active !== false).length > 1;
  }, [selectedMarket]);

  const effectiveMode = lineOnly ? "line" : (isMulti && chartMode === "candle" ? "line" : chartMode);

  // ────────────────────────────────────────────────────────
  // Step 1: FETCH DATA — only when market or timeRange changes
  // ────────────────────────────────────────────────────────
  useEffect(() => {
    if (!selectedMarket) { setChartData(null); return; }

    const cacheKey = `${selectedMarket.id}:${timeRange}`;
    // Already have this data cached?
    if (chartData?.key === cacheKey) return;

    let cancelled = false;
    setLoading(true);

    const hours = TIME_HOURS[timeRange];
    const baseUrl = `/api/snapshots?eventId=${encodeURIComponent(selectedMarket.id)}&hours=${hours}`;
    const bucketMs = BUCKET_MS[timeRange];

    (async () => {
      try {
        if (isMulti) {
          const res = await fetch(`${baseUrl}&perMarket=1`);
          const result = await res.json();
          const seriesList: SeriesData[] = (result?.series || []).filter((s: SeriesData) => s.data.length >= 2);
          const sorted = [...seriesList].sort((a, b) => {
            const aLast = a.data[a.data.length - 1]?.prob ?? 0;
            const bLast = b.data[b.data.length - 1]?.prob ?? 0;
            return bLast - aLast;
          });
          const multi = sorted.map(s => ({
            label: s.label,
            points: dedupByTime(s.data.map(d => ({
              time: Math.floor(new Date(d.recorded_at).getTime() / 1000),
              value: d.prob,