Render Extra

This commit is contained in:
Luc Mcgrady 2025-09-03 00:03:52 +01:00
parent c0a67c3eaa
commit b30e2df201
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C

View file

@ -11,10 +11,13 @@ import {
min,
pointer,
rollup,
type ScaleLinear,
scaleLinear,
type ScaleTime,
scaleTime,
schemeCategory10,
select,
type Selection,
} from "d3";
import * as tr from "@generated/ftl";
@ -66,7 +69,7 @@ export function renderWorkloadChart(
const subgraph_data = ({
[SimulateWorkloadSubgraph.ratio]: data.map(d => ({
...d,
y: (60 * 60 * (d.memorized - d.start_memorized)) / d.timeCost,
y: (60 * 60 * (d.memorized - d.start_memorized)) / d.count,
})),
[SimulateWorkloadSubgraph.time]: data.map(d => ({ ...d, y: d.timeCost / d.learnSpan })),
[SimulateWorkloadSubgraph.count]: data.map(d => ({ ...d, y: d.count / d.learnSpan })),
@ -100,6 +103,19 @@ export function renderWorkloadChart(
return `${tr.deckConfigDesiredRetention()}: ${xTickFormat(dr)}<br>`;
}
select(svgElem)
.enter()
.datum(subgraph_data[subgraph_data.length - 1])
.append("line")
.attr("x1", bounds.marginLeft)
.attr("x2", bounds.width - bounds.marginRight)
.attr("y1", bounds.marginTop)
.attr("y2", bounds.marginTop)
.attr("stroke", "black")
.attr("stroke-width", 1);
const startMemorized = subgraph_data[0].start_memorized;
return _renderSimulationChart(
svgElem,
bounds,
@ -110,6 +126,20 @@ export function renderWorkloadChart(
(_e: MouseEvent, _d: number) => undefined,
yTickFormat,
xTickFormat,
(svg, x, y) => {
svg
.selectAll("line")
.data(subgraph == SimulateWorkloadSubgraph.memorized ? [startMemorized] : [])
.enter()
.attr("x1", x(xMin))
.attr("x2", x(xMax))
.attr("y1",d => y(d))
.attr("y2",d => y(d))
.attr("stroke", "black")
.attr("stroke-dasharray", "5,5")
.attr("stroke-width", 1);
},
subgraph == SimulateWorkloadSubgraph.memorized ? startMemorized : 0,
);
}
@ -190,16 +220,25 @@ export function renderSimulationChart(
);
}
function _renderSimulationChart<T extends { x: any; y: any; label: number }>(
function _renderSimulationChart<
X extends ScaleLinear<number, number> | ScaleTime<number, number>,
T extends { x: any; y: any; label: number },
>(
svgElem: SVGElement,
bounds: GraphBounds,
subgraph_data: T[],
x: any,
x: X,
formatY: (n: T["y"]) => string,
formatX: (n: T["x"]) => string,
legendMouseMove: (e: MouseEvent, d: number) => void,
yTickFormat?: (n: number) => string,
xTickFormat?: (n: number) => string,
renderExtra?: (
svg: Selection<SVGElement, unknown, null, undefined>,
x: X,
y: ScaleLinear<number, number, never>,
) => void,
y_min: number = Infinity,
): TableDatum[] {
const svg = select(svgElem);
svg.selectAll(".lines").remove();
@ -220,7 +259,8 @@ function _renderSimulationChart<T extends { x: any; y: any; label: number }>(
// y scale
const yMax = max(subgraph_data, d => d.y)!;
const yMin = min(subgraph_data, d => d.y)!;
let yMin = min(subgraph_data, d => d.y)!;
yMin = min([yMin, y_min])!;
const y = scaleLinear()
.range([bounds.height - bounds.marginBottom, bounds.marginTop])
.domain([yMin, yMax])
@ -248,7 +288,7 @@ function _renderSimulationChart<T extends { x: any; y: any; label: number }>(
.attr("fill", "currentColor");
// x lines
const points = subgraph_data.map((d) => [x(d.x), y(d.y), d.label]);
const points = subgraph_data.map((d) => [x(d.x)!, y(d.y)!, d.label]);
const groups = rollup(points, v => Object.assign(v, { z: v[0][2] }), d => d[2]);
const color = schemeCategory10;
@ -370,6 +410,8 @@ function _renderSimulationChart<T extends { x: any; y: any; label: number }>(
setDataAvailable(svg, true);
renderExtra?.(svg, x, y);
const tableData: TableDatum[] = [];
return tableData;