import { useState, useEffect } from 'react';
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';
import { parseLogData } from '../utils/logParser';
export default function LossChart({ dataUrl }) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(dataUrl)
.then(res => res.text())
.then(text => {
const parsedData = parseLogData(text);
const parsed = parsedData.filter((_, i) => i % 50 === 0 || i === parsedData.length - 1);
setData(parsed);
setLoading(false);
})
.catch(err => {
console.error(err);
setLoading(false);
});
}, [dataUrl]);
if (loading) {
return Loading chart data...
;
}
return (
);
}