mirror of
https://github.com/ankitects/anki.git
synced 2026-01-09 03:53:55 -05:00
Render Extra
This commit is contained in:
parent
c0a67c3eaa
commit
b30e2df201
1 changed files with 47 additions and 5 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue