From 1e48188c1427413890893afbd3aa5337ea695c77 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Thu, 16 Jul 2020 13:18:35 +1000
Subject: [PATCH] add table in card count tooltip for readability

---
 ts/src/stats/card-counts.ts | 19 ++++++++++++++-----
 ts/src/stats/graphs.scss    |  5 +++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/ts/src/stats/card-counts.ts b/ts/src/stats/card-counts.ts
index 4e414bb4b..e563178a8 100644
--- a/ts/src/stats/card-counts.ts
+++ b/ts/src/stats/card-counts.ts
@@ -99,8 +99,10 @@ function barColour(idx: number): string {
 
 interface SummedDatum {
     label: string;
+    // count of this particular item
     count: number;
     idx: number;
+    // running total
     total: number;
 }
 
@@ -129,17 +131,24 @@ export function renderCards(
     x.range([bounds.marginLeft, bounds.width - bounds.marginRight - bounds.marginLeft]);
 
     const tooltipText = (current: SummedDatum): string => {
-        const lines: string[] = [];
+        const rows: string[] = [];
         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}%)`;
+            let label = `${colour} ${d.label}`;
             if (idx === current.idx) {
-                line = `<b>${line}</b>`;
+                label = `<b>${label}</b>`;
             }
-            lines.push(line);
+            const count = d.count;
+            const pctStr = `${pct}%`;
+            const row = `<tr>
+            <td>${label}</td>
+            <td align=right>${count}</td>
+            <td align=right>${pctStr}</td>
+            </tr>`;
+            rows.push(row);
         }
-        return lines.join("<br>");
+        return `<table>${rows.join("")}</table>`;
     };
 
     const updateBar = (sel: any): any => {
diff --git a/ts/src/stats/graphs.scss b/ts/src/stats/graphs.scss
index 118117a81..2559291cf 100644
--- a/ts/src/stats/graphs.scss
+++ b/ts/src/stats/graphs.scss
@@ -28,6 +28,11 @@ body {
     background: $day-tooltip-bg;
 }
 
+.graph-tooltip td {
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
 .graph {
     margin-left: auto;
     margin-right: auto;