show all counts in tooltip

ts/src/stats/card-counts.ts

@@ -81,6 +81,29 @@ interface Reviews {
     early: number;
 }
 
+function barColour(idx: number): string {
+    switch (idx) {
+        case 0:
+            return schemeBlues[5][2];
+        case 1:
+            return schemeGreens[5][2];
+        case 2:
+            return schemeGreens[5][3];
+        case 3:
+            return "#FFDC41";
+        case 4:
+        default:
+            return "grey";
+    }
+}
+
+interface SummedDatum {
+    label: string;
+    count: number;
+    idx: number;
+    total: number;
+}
+
 export function renderCards(
     svgElem: SVGElement,
     bounds: GraphBounds,
@@ -88,11 +111,13 @@ export function renderCards(
 ): void {
     const summed = cumsum(sourceData.counts, (d) => d[1]);
     const data = Array.from(summed).map((n, idx) => {
+        const count = sourceData.counts[idx];
         return {
-            count: sourceData.counts[idx],
+            label: count[0],
+            count: count[1],
             idx,
             total: n,
-        };
+        } as SummedDatum;
     });
     // ensuring a non-zero range makes a better animation
     // in the empty data case
@@ -103,20 +128,29 @@ export function renderCards(
 
     x.range([bounds.marginLeft, bounds.width - bounds.marginRight - bounds.marginLeft]);
 
-    const tooltipText = (d: any): string => {
+    const tooltipText = (current: SummedDatum): string => {
-        const pct = ((d.count[1] / xMax) * 100).toFixed(2);
+        const lines: string[] = [];
-        return `${d.count[0]}: ${d.count[1]} (${pct}%)`;
+        for (const [idx, d] of data.entries()) {
+            const pct = ((d.count / xMax) * 100).toFixed(2);
+            const colour = `<span style="color: ${barColour(idx)};">■</span>`;
+            let line = `${colour} ${d.label}: ${d.count} (${pct}%)`;
+            if (idx === current.idx) {
+                line = `<b>${line}</b>`;
+            }
+            lines.push(line);
+        }
+        return lines.join("<br>");
     };
 
     const updateBar = (sel: any): any => {
         return sel
-            .on("mousemove", function (this: any, d: any) {
+            .on("mousemove", function (this: any, d: SummedDatum) {
                 const [x, y] = mouse(document.body);
                 showTooltip(tooltipText(d), x, y);
             })
             .transition(trans)
-            .attr("x", (d) => x(d.total - d.count[1]))
+            .attr("x", (d: SummedDatum) => x(d.total - d.count))
-            .attr("width", (d) => x(d.count[1]) - x(0));
+            .attr("width", (d: SummedDatum) => x(d.count) - x(0));
     };
 
     svg.select("g.days")
@@ -128,22 +162,8 @@ export function renderCards(
                     .append("rect")
                     .attr("height", 10)
                     .attr("y", bounds.marginTop)
-                    .attr("fill", (d: any): any => {
+                    .attr("fill", (d: SummedDatum): any => barColour(d.idx))
-                        switch (d.idx) {
-                            case 0:
-                                return schemeBlues[5][2];
-                            case 1:
-                                return schemeGreens[5][2];
-                            case 2:
-                                return schemeGreens[5][3];
-                            case 3:
-                                return "#FFDC41";
-                            case 4:
-                                return "grey";
-                        }
-                    })
                     .on("mouseout", hideTooltip)
-
                     .call((d) => updateBar(d)),
             (update) => update.call((d) => updateBar(d))
         );