uis-cloud-computing/7project/frontend/src/pages/BalanceChart.tsx

// src/BalanceChart.tsx
import { useEffect, useRef, useState } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { type BalancePoint } from '../api';

function formatAmount(n: number) {
  return new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n);
}

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}

type Props = { data: BalancePoint[]; pxPerPoint?: number };

export default function BalanceChart({ data, pxPerPoint = 40 }: Props) {
  const wrapRef = useRef<HTMLDivElement | null>(null);
  const [containerWidth, setContainerWidth] = useState(0);

  useEffect(() => {
    function measure() {
      if (!wrapRef.current) return;
      setContainerWidth(wrapRef.current.clientWidth);
    }
    measure();
    const obs = new ResizeObserver(measure);
    if (wrapRef.current) obs.observe(wrapRef.current);
    return () => obs.disconnect();
  }, []);

  if (data.length === 0) {
    return <div>No data to display</div>;
  }

  const desiredWidth = Math.max(containerWidth, Math.max(600, data.length * pxPerPoint));

  return (
    <div ref={wrapRef} className="chart-scroll">
      <div className="chart-inner" style={{ minWidth: desiredWidth, paddingBottom: 8 }}>
        <LineChart
          width={desiredWidth}
          height={300}
          data={data}
          margin={{ top: 5, right: 30, left: 50, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis
            dataKey="date"
            tickFormatter={formatDate}
            label={{ value: 'Date', position: 'insideBottom', offset: -5 }}
          />
          <YAxis
            tickFormatter={(value) => formatAmount(value as number)}
            label={{ value: 'Balance', angle: -90, position: 'insideLeft', offset: -30 }}
          />
          <Tooltip
            labelFormatter={formatDate}
            formatter={(value) => [formatAmount(value as number), 'Balance']}
          />
          <Legend />
          <Line type="monotone" dataKey="balance" stroke="#3b82f6" strokeWidth={2} activeDot={{ r: 8 }} />
        </LineChart>
      </div>
    </div>
  );
}