diff --git a/ts/routes/graphs/simulator.ts b/ts/routes/graphs/simulator.ts index db2c51818..f509e2691 100644 --- a/ts/routes/graphs/simulator.ts +++ b/ts/routes/graphs/simulator.ts @@ -18,6 +18,7 @@ import { import * as tr from "@generated/ftl"; import { timeSpan } from "@tslib/time"; +import { sumBy } from "lodash-es"; import type { GraphBounds, TableDatum } from "./graph-helpers"; import { setDataAvailable } from "./graph-helpers"; import { hideTooltip, showTooltip } from "./tooltip-utils.svelte"; @@ -163,6 +164,13 @@ export function renderSimulationChart( hideTooltip(); }); + const formatY: (value: number) => string = ({ + [SimulateSubgraph.time]: timeSpan, + [SimulateSubgraph.count]: (value: number) => tr.statisticsReviews({ reviews: Math.round(value) }), + [SimulateSubgraph.memorized]: (value: number) => + tr.statisticsMemorized({ memorized: Math.round(value).toFixed(0) }), + })[subgraph]; + function mousemove(event: MouseEvent, d: any): void { pointer(event, document.body); const date = x.invert(d[0]); @@ -188,13 +196,7 @@ export function renderSimulationChart( const hidden = path.classed("hidden"); if (!hidden) { - const tooltip = ({ - [SimulateSubgraph.time]: timeSpan(value), - [SimulateSubgraph.count]: tr.statisticsReviews({ reviews: Math.round(value) }), - [SimulateSubgraph.memorized]: tr.statisticsMemorized({ memorized: Math.round(value).toFixed(0) }), - })[subgraph]; - - tooltipContent += `#${key}: ${tooltip}
`; + tooltipContent += `#${key}: ${formatY(value)}
`; } } @@ -211,7 +213,32 @@ export function renderSimulationChart( .join("g") .attr("transform", (d, i) => `translate(0,${i * 20})`) .attr("cursor", "pointer") - .on("click", (event, d) => toggleGroup(event, d)); + .on("click", (event, d) => toggleGroup(event, d)) + .on("mousemove", legendMouseMove) + .on("mouseout", hideTooltip); + + const perDay = ({ + [SimulateSubgraph.count]: tr.statisticsReviewsPerDay, + [SimulateSubgraph.time]: ({ count }: { count: number }) => timeSpan(count), + [SimulateSubgraph.memorized]: tr.statisticsCardsPerDay, + })[subgraph]; + + function legendMouseMove(e: MouseEvent, d: number) { + const data = subgraph_data.filter(datum => datum.label == d); + + const total = subgraph == SimulateSubgraph.memorized + ? data[data.length - 1].memorized - data[0].memorized + : sumBy(data, d => d.y); + const average = total / (data?.length || 1); + + showTooltip( + `#${d}:
+ ${tr.statisticsAverage()}: ${perDay({ count: average })}
+ ${tr.statisticsTotal()}: ${formatY(total)}`, + e.pageX, + e.pageY, + ); + } legend.append("rect") .attr("x", bounds.width - bounds.marginRight + 36)