From 93b8cebf1e0b3f2194b669d0df4378fdb134d176 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Sun, 28 Jun 2020 17:44:51 +1000
Subject: [PATCH] drop axis labels + add subtitles

This leaves more room for the graphs and avoids issues with large values
overlapping the labels. We can improve the subtitle wording to make
things clearer in the future, and the hover tooltips should also
clarify what the axes represent.
---
 rslib/ftl/statistics.ftl           | 10 +++++++---
 ts/src/stats/AddedGraph.svelte     |  6 ++++--
 ts/src/stats/ButtonsGraph.svelte   |  6 +++---
 ts/src/stats/EaseGraph.svelte      |  6 ++++--
 ts/src/stats/FutureDue.svelte      | 10 ++++------
 ts/src/stats/HistogramGraph.svelte |  5 -----
 ts/src/stats/HourGraph.svelte      |  6 +++---
 ts/src/stats/IntervalsGraph.svelte |  6 ++++--
 ts/src/stats/ReviewsGraph.svelte   | 11 +++++------
 ts/src/stats/graphs.css            |  4 ++++
 ts/src/stats/graphs.ts             |  4 ++--
 11 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/rslib/ftl/statistics.ftl b/rslib/ftl/statistics.ftl
index d93fbdd28..0b952488e 100644
--- a/rslib/ftl/statistics.ftl
+++ b/rslib/ftl/statistics.ftl
@@ -95,6 +95,10 @@ statistics-answer-buttons-title = Answer Buttons
 statistics-hours-title = Hourly Breakdown
 statistics-added-title = Added
 statistics-card-ease-title = Card Ease
-statistics-axis-label-answer-count = Answers
-statistics-axis-label-card-count = Cards
-statistics-axis-label-review-time = Review Time
+statistics-future-due-subtitle = The number of reviews due in the future.
+statistics-added-subtitle = The number of new cards you have added.
+statistics-reviews-count-subtitle = The number of questions you have answered.
+statistics-reviews-time-subtitle = The time taken to answer the questions.
+statistics-intervals-subtitle = Delays until reviews are shown again.
+statistics-answer-buttons-subtitle = The number of times you have pressed each button.
+statistics-hours-subtitle = Review success rate for each hour of the day.
diff --git a/ts/src/stats/AddedGraph.svelte b/ts/src/stats/AddedGraph.svelte
index e7d66d364..318321222 100644
--- a/ts/src/stats/AddedGraph.svelte
+++ b/ts/src/stats/AddedGraph.svelte
@@ -27,7 +27,7 @@
     const month3 = timeSpan(i18n, 3 * MONTH);
     const year = timeSpan(i18n, 1 * YEAR);
     const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_TIME);
-    const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_CARD_COUNT);
+    const subtitle = i18n.tr(i18n.TR.STATISTICS_ADDED_SUBTITLE);
 </script>
 
 {#if histogramData}
@@ -53,6 +53,8 @@
             </label>
         </div>
 
-        <HistogramGraph data={histogramData} xText="Days" {yText} {i18n} />
+        <div class="subtitle">{subtitle}</div>
+
+        <HistogramGraph data={histogramData} />
     </div>
 {/if}
diff --git a/ts/src/stats/ButtonsGraph.svelte b/ts/src/stats/ButtonsGraph.svelte
index 59060b829..f108495d4 100644
--- a/ts/src/stats/ButtonsGraph.svelte
+++ b/ts/src/stats/ButtonsGraph.svelte
@@ -10,7 +10,6 @@
     export let i18n: I18n;
 
     const bounds = defaultGraphBounds();
-    const xText = "";
 
     let svg = null as HTMLElement | SVGElement | null;
 
@@ -19,16 +18,17 @@
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_ANSWER_BUTTONS_TITLE);
-    const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_ANSWER_COUNT);
+    const subtitle = i18n.tr(i18n.TR.STATISTICS_ANSWER_BUTTONS_SUBTITLE);
 </script>
 
 <div class="graph">
     <h1>{title}</h1>
 
+    <div class="subtitle">{subtitle}</div>
+
     <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
         <g class="bars" />
         <g class="hoverzone" />
         <AxisTicks {bounds} />
-        <AxisLabels {bounds} {xText} {yText} {i18n} />
     </svg>
 </div>
diff --git a/ts/src/stats/EaseGraph.svelte b/ts/src/stats/EaseGraph.svelte
index c7928a656..e6ae605c4 100644
--- a/ts/src/stats/EaseGraph.svelte
+++ b/ts/src/stats/EaseGraph.svelte
@@ -16,13 +16,15 @@
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_CARD_EASE_TITLE);
-    const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_CARD_COUNT);
+    const subtitle = "temp"; //i18n.tr(i18n.TR.STATISTICS_EASE_SUBTITLE);
 </script>
 
 {#if histogramData}
     <div class="graph">
         <h1>{title}</h1>
 
-        <HistogramGraph data={histogramData} xText="Ease (%)" {yText} {i18n} />
+        <div class="subtitle">{subtitle}</div>
+
+        <HistogramGraph data={histogramData} />
     </div>
 {/if}
diff --git a/ts/src/stats/FutureDue.svelte b/ts/src/stats/FutureDue.svelte
index 5a8b3a792..c0f32d67e 100644
--- a/ts/src/stats/FutureDue.svelte
+++ b/ts/src/stats/FutureDue.svelte
@@ -35,7 +35,7 @@
     const month3 = timeSpan(i18n, 3 * MONTH);
     const year = timeSpan(i18n, 1 * YEAR);
     const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_TIME);
-    const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_CARD_COUNT);
+    const subtitle = i18n.tr(i18n.TR.STATISTICS_FUTURE_DUE_SUBTITLE);
 </script>
 
 {#if histogramData}
@@ -43,10 +43,6 @@
     <div class="graph">
         <h1>{title}</h1>
 
-        <div class="range-box-inner">
-            The number of cards studied each day, relative to today.
-        </div>
-
         <div class="range-box-inner">
             <label>
                 <input type="radio" bind:group={range} value={FutureDueRange.Month} />
@@ -66,7 +62,9 @@
             </label>
         </div>
 
-        <HistogramGraph data={histogramData} xText="" {yText} {i18n} />
+        <div class="subtitle">{subtitle}</div>
+
+        <HistogramGraph data={histogramData} />
 
     </div>
 {/if}
diff --git a/ts/src/stats/HistogramGraph.svelte b/ts/src/stats/HistogramGraph.svelte
index 2e754653c..7f032c6e8 100644
--- a/ts/src/stats/HistogramGraph.svelte
+++ b/ts/src/stats/HistogramGraph.svelte
@@ -3,12 +3,8 @@
     import AxisLabels from "./AxisLabels.svelte";
     import AxisTicks from "./AxisTicks.svelte";
     import { defaultGraphBounds } from "./graphs";
-    import { I18n } from "../i18n";
 
     export let data: HistogramData | null = null;
-    export let i18n: I18n;
-    export let xText: string;
-    export let yText: string;
 
     let bounds = defaultGraphBounds();
     let svg = null as HTMLElement | SVGElement | null;
@@ -23,5 +19,4 @@
     <g class="hoverzone" />
     <path class="area" />
     <AxisTicks {bounds} />
-    <AxisLabels {bounds} {xText} {yText} {i18n} />
 </svg>
diff --git a/ts/src/stats/HourGraph.svelte b/ts/src/stats/HourGraph.svelte
index 8b2478fd1..c42ffd3ec 100644
--- a/ts/src/stats/HourGraph.svelte
+++ b/ts/src/stats/HourGraph.svelte
@@ -10,7 +10,6 @@
     export let i18n: I18n;
 
     const bounds = defaultGraphBounds();
-    const xText = "";
 
     let svg = null as HTMLElement | SVGElement | null;
 
@@ -19,17 +18,18 @@
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_HOURS_TITLE);
-    const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_ANSWER_COUNT);
+    const subtitle = i18n.tr(i18n.TR.STATISTICS_HOURS_SUBTITLE);
 </script>
 
 <div class="graph">
     <h1>{title}</h1>
 
+    <div class="subtitle">{subtitle}</div>
+
     <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
         <g class="bars" />
         <path class="area" />
         <g class="hoverzone" />
         <AxisTicks {bounds} />
-        <AxisLabels {bounds} {xText} {yText} {i18n} />
     </svg>
 </div>
diff --git a/ts/src/stats/IntervalsGraph.svelte b/ts/src/stats/IntervalsGraph.svelte
index 626219300..0eaf34e36 100644
--- a/ts/src/stats/IntervalsGraph.svelte
+++ b/ts/src/stats/IntervalsGraph.svelte
@@ -31,7 +31,7 @@
     const title = i18n.tr(i18n.TR.STATISTICS_INTERVALS_TITLE);
     const month = timeSpan(i18n, 1 * MONTH);
     const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_TIME);
-    const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_CARD_COUNT);
+    const subtitle = i18n.tr(i18n.TR.STATISTICS_INTERVALS_SUBTITLE);
 </script>
 
 {#if histogramData}
@@ -70,6 +70,8 @@
             </label>
         </div>
 
-        <HistogramGraph data={histogramData} xText="Interval (days)" {yText} {i18n} />
+        <div class="subtitle">{subtitle}</div>
+
+        <HistogramGraph data={histogramData} />
     </div>
 {/if}
diff --git a/ts/src/stats/ReviewsGraph.svelte b/ts/src/stats/ReviewsGraph.svelte
index 60e12363f..4319cc8c4 100644
--- a/ts/src/stats/ReviewsGraph.svelte
+++ b/ts/src/stats/ReviewsGraph.svelte
@@ -31,8 +31,6 @@
             break;
     }
 
-    const xText = "";
-
     $: if (sourceData) {
         graphData = gatherData(sourceData);
     }
@@ -47,11 +45,11 @@
     const year = timeSpan(i18n, 1 * YEAR);
     const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_TIME);
 
-    let yText: string;
+    let subtitle: string;
     $: if (showTime) {
-        yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_REVIEW_TIME);
+        subtitle = i18n.tr(i18n.TR.STATISTICS_REVIEWS_TIME_SUBTITLE);
     } else {
-        yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_ANSWER_COUNT);
+        subtitle = i18n.tr(i18n.TR.STATISTICS_REVIEWS_COUNT_SUBTITLE);
     }
 </script>
 
@@ -86,6 +84,8 @@
         {/if}
     </div>
 
+    <div class="subtitle">{subtitle}</div>
+
     <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
         {#each [4, 3, 2, 1, 0] as i}
             <g class="bars{i}" />
@@ -93,7 +93,6 @@
         <path class="area" />
         <g class="hoverzone" />
         <AxisTicks {bounds} />
-        <AxisLabels {bounds} {xText} {yText} {i18n} />
     </svg>
 
 </div>
diff --git a/ts/src/stats/graphs.css b/ts/src/stats/graphs.css
index ee568e416..4fc7d6ca4 100644
--- a/ts/src/stats/graphs.css
+++ b/ts/src/stats/graphs.css
@@ -121,3 +121,7 @@
 .legend-outer {
     text-align: center;
 }
+
+.subtitle {
+    text-align: center;
+}
diff --git a/ts/src/stats/graphs.ts b/ts/src/stats/graphs.ts
index c5ccfd0b3..facae054a 100644
--- a/ts/src/stats/graphs.ts
+++ b/ts/src/stats/graphs.ts
@@ -53,8 +53,8 @@ export function defaultGraphBounds(): GraphBounds {
     return {
         width: 600,
         height: 250,
-        marginLeft: 100,
-        marginRight: 20,
+        marginLeft: 70,
+        marginRight: 30,
         marginTop: 20,
         marginBottom: 40,
     };