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

split hover text out, fix bugs

Browse source
This commit is contained in:
Damien Elmes 2020-06-23 18:40:53 +10:00
parent d753b31d40
commit d0d675609d
3 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/src/stats/graphs.css
View file

@ -54,7 +54,7 @@
.intervals .area { .intervals .area {
opacity: 0.05; opacity: 0.05;
pointer-events: none; pointer-events: none;
fill: #555; fill: black;
} }
.axis-label { .axis-label {

11
ts/src/stats/histogram-graph.ts
View file

@ -20,6 +20,7 @@ export interface HistogramData {
scale: ScaleLinear<number, number>; scale: ScaleLinear<number, number>;
bins: Bin<number, number>[]; bins: Bin<number, number>[];
total: number; total: number;
hoverText: (data: HistogramData, binIdx: number, percent: number) => string;
} }
export function histogramGraph( export function histogramGraph(
@ -111,7 +112,6 @@ export function histogramGraph(
); );
// hover/tooltip // hover/tooltip
svg.select("g.hoverzone") svg.select("g.hoverzone")
.selectAll("rect") .selectAll("rect")
.data(data.bins) .data(data.bins)
@ -122,13 +122,8 @@ export function histogramGraph(
.attr("height", () => y(0) - y(yMax!)) .attr("height", () => y(0) - y(yMax!))
.on("mousemove", function (this: any, d: any, idx) { .on("mousemove", function (this: any, d: any, idx) {
const [x, y] = mouse(document.body); const [x, y] = mouse(document.body);
const pct = ((areaData[idx] / data.total) * 100).toFixed(2); const pct = (areaData[idx + 1] / data.total) * 100;
showTooltip( showTooltip(data.hoverText(data, idx, pct), x, y);
`${d.length} cards with interval ${d.x0}~${d.x1} days. ` +
`<br>${pct}% cards below this point.`,
x,
y
);
}) })
.on("mouseout", hideTooltip); .on("mouseout", hideTooltip);
} }

17
ts/src/stats/intervals.ts
View file

@ -32,6 +32,18 @@ export function gatherIntervalData(data: pb.BackendProto.GraphsOut): IntervalGra
return { intervals }; return { intervals };
} }
function hoverText(data: HistogramData, binIdx: number, percent: number): string {
const bin = data.bins[binIdx];
const interval =
bin.x1! - bin.x0! === 1
? `${bin.x0} day interval`
: `${bin.x0}~${bin.x1} day interval`;
return (
`${bin.length} cards with ${interval}. ` +
`<br>${percent.toFixed(1)}% cards at or before this point.`
);
}
function prepareIntervalData( function prepareIntervalData(
data: IntervalGraphData, data: IntervalGraphData,
range: IntervalRange range: IntervalRange
@ -59,16 +71,17 @@ function prepareIntervalData(
case IntervalRange.All: case IntervalRange.All:
break; break;
} }
xMax = xMax! + 1;
// cap bars to available range // cap bars to available range
const desiredBars = Math.min(70, xMax! - xMin!); const desiredBars = Math.min(70, xMax! - xMin!);
const scale = scaleLinear().domain([xMin!, xMax!]); const scale = scaleLinear().domain([xMin!, xMax!]).nice();
const bins = histogram() const bins = histogram()
.domain(scale.domain() as any) .domain(scale.domain() as any)
.thresholds(scale.ticks(desiredBars))(allIntervals); .thresholds(scale.ticks(desiredBars))(allIntervals);
return { scale, bins, total }; return { scale, bins, total, hoverText };
} }
export function intervalGraph( export function intervalGraph(