frontend/src/components/ChartPanel.tsx

import {
  LineChart,
  Line,
  XAxis,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

export default function ChartPanel({ data, metric }) {
  const formatted = data.timestamps.map((t, i) => ({
    time: new Date(t).toLocaleTimeString(),
    avg: data[metric].avg[i],
    max: data[metric].max[i],
    min: data[metric].min[i],
  }));

  return (
    <div className="h-64">

      <ResponsiveContainer>

        <LineChart data={formatted}>

          <XAxis dataKey="time" hide />

          <Tooltip />

          <Line dataKey="avg" stroke="#00ffcc" />

          <Line dataKey="max" stroke="#ff4d4f" />

          <Line dataKey="min" stroke="#8884d8" />

        </LineChart>

      </ResponsiveContainer>

    </div>
  );
}