1
import * as d3 from 'd3';
 2
import { useEffect, useRef } from 'react';
 3
import { io } from 'socket.io-client';
 4
 
 5
export default function RealtimeChart() {
 6
  const svgRef = useRef<SVGSVGElement>(null);
 7
 
 8
  useEffect(() => {
 9
    const socket = io(process.env.NEXT_PUBLIC_SOCKET_URL!);
10
    socket.on('data-update', (newData) => {
11
      updateChart(newData);
12
    });
13
    return () => { socket.disconnect(); };
14
  }, []);
15
 
16
  const updateChart = (data: any) => {
17
    // D3 logic to update paths and scales
18
  };
19
 
20
  return <svg ref={svgRef} className="w-full h-64" />;
21
}