Spaces:
Running
Running
| import Plot from "react-plotly.js"; | |
| import type { Data } from "plotly.js"; | |
| import type { Trajectory } from "./useOptimisation"; | |
| // f at each iteration, one line per run | |
| export default function HistoryPlot({ trajectories }: { trajectories: Trajectory[] }) { | |
| const data = trajectories.map((t) => ({ | |
| x: t.path.map((_, k) => k), | |
| y: t.path.map((p) => p.value), | |
| type: "scatter", | |
| mode: "lines+markers", | |
| name: t.label, | |
| line: { color: t.color, width: 2 }, | |
| marker: { color: t.color, size: 4 }, | |
| hovertemplate: "iteration %{x}<br>f = %{y:.4g}<extra></extra>", | |
| })) as Data[]; | |
| return ( | |
| <div className="flex flex-col gap-1"> | |
| <span className="text-sm text-gray-700">f at each iteration</span> | |
| <div className="h-40"> | |
| <Plot | |
| data={data} | |
| layout={{ | |
| showlegend: false, | |
| margin: { t: 8, r: 8, b: 32, l: 48 }, | |
| font: { size: 11 }, | |
| xaxis: { title: { text: "iteration", standoff: 4 }, rangemode: "tozero" }, | |
| yaxis: { automargin: true }, | |
| }} | |
| config={{ displayModeBar: false, responsive: true }} | |
| style={{ width: "100%", height: "100%" }} | |
| /> | |
| </div> | |
| </div> | |
| ); | |
| } | |