diff --git a/ts/src/stats/graphs.css b/ts/src/stats/graphs.css index 02b0f64e9..74acbba64 100644 --- a/ts/src/stats/graphs.css +++ b/ts/src/stats/graphs.css @@ -54,7 +54,7 @@ .intervals .area { opacity: 0.05; pointer-events: none; - fill: #555; + fill: black; } .axis-label { diff --git a/ts/src/stats/histogram-graph.ts b/ts/src/stats/histogram-graph.ts index e6919f604..3bd710457 100644 --- a/ts/src/stats/histogram-graph.ts +++ b/ts/src/stats/histogram-graph.ts @@ -20,6 +20,7 @@ export interface HistogramData { scale: ScaleLinear; bins: Bin[]; total: number; + hoverText: (data: HistogramData, binIdx: number, percent: number) => string; } export function histogramGraph( @@ -111,7 +112,6 @@ export function histogramGraph( ); // hover/tooltip - svg.select("g.hoverzone") .selectAll("rect") .data(data.bins) @@ -122,13 +122,8 @@ export function histogramGraph( .attr("height", () => y(0) - y(yMax!)) .on("mousemove", function (this: any, d: any, idx) { const [x, y] = mouse(document.body); - const pct = ((areaData[idx] / data.total) * 100).toFixed(2); - showTooltip( - `${d.length} cards with interval ${d.x0}~${d.x1} days. ` + - `
${pct}% cards below this point.`, - x, - y - ); + const pct = (areaData[idx + 1] / data.total) * 100; + showTooltip(data.hoverText(data, idx, pct), x, y); }) .on("mouseout", hideTooltip); } diff --git a/ts/src/stats/intervals.ts b/ts/src/stats/intervals.ts index 24ed88a74..c08e26431 100644 --- a/ts/src/stats/intervals.ts +++ b/ts/src/stats/intervals.ts @@ -32,6 +32,18 @@ export function gatherIntervalData(data: pb.BackendProto.GraphsOut): IntervalGra 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}. ` + + `
${percent.toFixed(1)}% cards at or before this point.` + ); +} + function prepareIntervalData( data: IntervalGraphData, range: IntervalRange @@ -59,16 +71,17 @@ function prepareIntervalData( case IntervalRange.All: break; } + xMax = xMax! + 1; // cap bars to available range const desiredBars = Math.min(70, xMax! - xMin!); - const scale = scaleLinear().domain([xMin!, xMax!]); + const scale = scaleLinear().domain([xMin!, xMax!]).nice(); const bins = histogram() .domain(scale.domain() as any) .thresholds(scale.ticks(desiredBars))(allIntervals); - return { scale, bins, total }; + return { scale, bins, total, hoverText }; } export function intervalGraph(