split hover text out, fix bugs

ts/src/stats/graphs.css

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

ts/src/stats/histogram-graph.ts

@@ -20,6 +20,7 @@ export interface HistogramData {
     scale: ScaleLinear<number, number>;
     bins: Bin<number, number>[];
     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. ` +
-                    `<br>${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);
 }

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}. ` +
+        `<br>${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(