From 1b62b932fe7be973f86243928093e2c2de3df33a Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Tue, 4 Aug 2020 14:37:21 +1000
Subject: [PATCH] factor out data table into separate file

---
 ts/src/stats/ReviewsGraph.svelte | 18 +++++-------------
 ts/src/stats/TableData.svelte    | 18 ++++++++++++++++++
 ts/src/stats/graphs.ts           |  5 +++++
 ts/src/stats/reviews.ts          | 28 +++++++++++++++++-----------
 4 files changed, 45 insertions(+), 24 deletions(-)
 create mode 100644 ts/src/stats/TableData.svelte

diff --git a/ts/src/stats/ReviewsGraph.svelte b/ts/src/stats/ReviewsGraph.svelte
index fd089e4be..10405106f 100644
--- a/ts/src/stats/ReviewsGraph.svelte
+++ b/ts/src/stats/ReviewsGraph.svelte
@@ -1,11 +1,12 @@
 <script lang="typescript">
     import AxisTicks from "./AxisTicks.svelte";
-    import { defaultGraphBounds, RevlogRange, GraphRange } from "./graphs";
+    import { defaultGraphBounds, RevlogRange, GraphRange, TableDatum } from "./graphs";
     import { GraphData, gatherData, renderReviews } from "./reviews";
     import pb from "../backend/proto";
     import { I18n } from "../i18n";
     import NoDataOverlay from "./NoDataOverlay.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
+    import TableData from "./TableData.svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let revlogRange: RevlogRange;
@@ -22,9 +23,9 @@
         graphData = gatherData(sourceData);
     }
 
-    let tableStrings: [string, string][] = [];
+    let tableData: TableDatum[] = [] as any;
     $: if (graphData) {
-        tableStrings = renderReviews(
+        tableData = renderReviews(
             svg as SVGElement,
             bounds,
             graphData,
@@ -69,14 +70,5 @@
         <NoDataOverlay {bounds} {i18n} />
     </svg>
 
-    <div class="centered">
-        <table dir={i18n.direction()}>
-            {#each tableStrings as [label, value]}
-                <tr>
-                    <td class="align-end">{label}:</td>
-                    <td class="align-start">{value}</td>
-                </tr>
-            {/each}
-        </table>
-    </div>
+    <TableData {i18n} {tableData} />
 </div>
diff --git a/ts/src/stats/TableData.svelte b/ts/src/stats/TableData.svelte
new file mode 100644
index 000000000..f351f45ec
--- /dev/null
+++ b/ts/src/stats/TableData.svelte
@@ -0,0 +1,18 @@
+<script lang="typescript">
+    import { I18n } from "../i18n";
+    import { TableDatum } from "./graphs";
+
+    export let i18n: I18n;
+    export let tableData: TableDatum[];
+</script>
+
+<div class="centered">
+    <table dir={i18n.direction()}>
+        {#each tableData as { label, value }}
+            <tr>
+                <td class="align-end">{label}:</td>
+                <td class="align-start">{value}</td>
+            </tr>
+        {/each}
+    </table>
+</div>
diff --git a/ts/src/stats/graphs.ts b/ts/src/stats/graphs.ts
index 13a19acbd..3c3908f8f 100644
--- a/ts/src/stats/graphs.ts
+++ b/ts/src/stats/graphs.ts
@@ -109,3 +109,8 @@ export function millisecondCutoffForRange(
 
     return (nextDayAtSecs - 86400 * days) * 1000;
 }
+
+export interface TableDatum {
+    label: string;
+    value: string;
+}
diff --git a/ts/src/stats/reviews.ts b/ts/src/stats/reviews.ts
index f03c800d7..d22450397 100644
--- a/ts/src/stats/reviews.ts
+++ b/ts/src/stats/reviews.ts
@@ -18,7 +18,7 @@ import { select, mouse } from "d3-selection";
 import { scaleLinear, scaleSequential } from "d3-scale";
 import { axisBottom, axisLeft } from "d3-axis";
 import { showTooltip, hideTooltip } from "./tooltip";
-import { GraphBounds, setDataAvailable, GraphRange } from "./graphs";
+import { GraphBounds, setDataAvailable, GraphRange, TableDatum } from "./graphs";
 import { area, curveBasis } from "d3-shape";
 import { min, histogram, sum, max, Bin, cumsum } from "d3-array";
 import { timeSpan, dayLabel } from "../time";
@@ -108,7 +108,7 @@ export function renderReviews(
     range: GraphRange,
     showTime: boolean,
     i18n: I18n
-): [string, string][] {
+): TableDatum[] {
     const svg = select(svgElem);
     const trans = svg.transition().duration(600) as any;
 
@@ -389,25 +389,31 @@ export function renderReviews(
         averageAnswerTime = averageAnswerTimeLabel = "";
     }
 
-    const tableData: [string, string][] = [
-        [
-            i18n.tr(i18n.TR.STATISTICS_DAYS_STUDIED),
-            i18n.tr(i18n.TR.STATISTICS_AMOUNT_OF_TOTAL_WITH_PERCENTAGE, {
+    const tableData: TableDatum[] = [
+        {
+            label: i18n.tr(i18n.TR.STATISTICS_DAYS_STUDIED),
+            value: i18n.tr(i18n.TR.STATISTICS_AMOUNT_OF_TOTAL_WITH_PERCENTAGE, {
                 amount: studiedDays,
                 total: periodDays,
                 percent: Math.round((studiedDays / periodDays) * 100),
             }),
-        ],
+        },
 
-        [i18n.tr(i18n.TR.STATISTICS_TOTAL), totalString],
+        { label: i18n.tr(i18n.TR.STATISTICS_TOTAL), value: totalString },
 
-        [i18n.tr(i18n.TR.STATISTICS_AVERAGE_FOR_DAYS_STUDIED), averageForDaysStudied],
+        {
+            label: i18n.tr(i18n.TR.STATISTICS_AVERAGE_FOR_DAYS_STUDIED),
+            value: averageForDaysStudied,
+        },
 
-        [i18n.tr(i18n.TR.STATISTICS_AVERAGE_OVER_PERIOD), averageForPeriod],
+        {
+            label: i18n.tr(i18n.TR.STATISTICS_AVERAGE_OVER_PERIOD),
+            value: averageForPeriod,
+        },
     ];
 
     if (averageAnswerTime) {
-        tableData.push([averageAnswerTimeLabel, averageAnswerTime]);
+        tableData.push({ label: averageAnswerTimeLabel, value: averageAnswerTime });
     }
 
     return tableData;