1// Table view of the charted data, one collapsible table per curve.
3import type { ChartCurve } from "./WorkPrecisionChart";
5export function PointsTable({ curves }: { curves: ChartCurve[] }) {
6 const nonEmpty = curves.filter((c) => c.points.length > 0);
7 if (nonEmpty.length === 0) return null;
8 return (
9 <div style={{ marginTop: 12 }}>
10 {nonEmpty.map((c) => (
11 <details key={c.key} style={{ marginBottom: 6 }}>
12 <summary className="small" style={{ cursor: "pointer" }}>
13 <span className="legend-swatch" style={{ background: c.color }} />
14 {c.label} — data table
15 </summary>
16 <table className="data" style={{ marginTop: 6 }}>
17 <thead>
18 <tr>
19 <th>n</th>
20 <th>rel max error</th>
21 <th>rel L2 error</th>
22 <th>solve (s)</th>
23 <th>cold (s)</th>
24 </tr>
25 </thead>
26 <tbody>
27 {c.points.map((p) => (
28 <tr key={p.n}>
29 <td>{p.n}</td>
30 <td>{p.relMax.toExponential(2)}</td>
31 <td>{p.relL2.toExponential(2)}</td>
32 <td>{p.solveSeconds.toFixed(4)}</td>
33 <td>{p.coldSeconds.toFixed(4)}</td>
34 </tr>
35 ))}
36 </tbody>
37 </table>
38 </details>
39 ))}
40 </div>
41 );
42}