GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Simulator legend tooltip (#3676)

Browse source 
* Added: Tooltip to simulator legend

* Added: Memorised tooltip

* Add: Per day text

* Added: Group name to tooltip
This commit is contained in:
Luc Mcgrady 2025-01-09 09:33:10 +00:00 committed by GitHub
parent 5d150c74a4
commit 16514727ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 35 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
ts/routes/graphs/simulator.ts
View file

@ -18,6 +18,7 @@ import {
import * as tr from "@generated/ftl"; import * as tr from "@generated/ftl";
import { timeSpan } from "@tslib/time"; import { timeSpan } from "@tslib/time";
import { sumBy } from "lodash-es";
import type { GraphBounds, TableDatum } from "./graph-helpers"; import type { GraphBounds, TableDatum } from "./graph-helpers";
import { setDataAvailable } from "./graph-helpers"; import { setDataAvailable } from "./graph-helpers";
import { hideTooltip, showTooltip } from "./tooltip-utils.svelte"; import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
@ -163,6 +164,13 @@ export function renderSimulationChart(
hideTooltip(); 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 { function mousemove(event: MouseEvent, d: any): void {
pointer(event, document.body); pointer(event, document.body);
const date = x.invert(d[0]); const date = x.invert(d[0]);
@ -188,13 +196,7 @@ export function renderSimulationChart(
const hidden = path.classed("hidden"); const hidden = path.classed("hidden");
if (!hidden) { if (!hidden) {
const tooltip = ({ tooltipContent += `#${key}: ${formatY(value)}<br>`;
[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}<br>`;
} }
} }
@ -211,7 +213,32 @@ export function renderSimulationChart(
.join("g") .join("g")
.attr("transform", (d, i) => `translate(0,${i * 20})`) .attr("transform", (d, i) => `translate(0,${i * 20})`)
.attr("cursor", "pointer") .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}:<br/>
${tr.statisticsAverage()}: ${perDay({ count: average })}<br/>
${tr.statisticsTotal()}: ${formatY(total)}`,
e.pageX,
e.pageY,
);
}
legend.append("rect") legend.append("rect")
.attr("x", bounds.width - bounds.marginRight + 36) .attr("x", bounds.width - bounds.marginRight + 36)