From 595c5095460945406c364644b05be3d52017a542 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Sun, 28 Jun 2020 14:21:31 +1000
Subject: [PATCH] i18n graph titles

---
 rslib/ftl/statistics.ftl           | 7 +++++++
 ts/src/stats/AddedGraph.svelte     | 3 ++-
 ts/src/stats/ButtonsGraph.svelte   | 6 +++++-
 ts/src/stats/EaseGraph.svelte      | 6 +++++-
 ts/src/stats/FutureDue.svelte      | 3 ++-
 ts/src/stats/GraphsPage.svelte     | 6 +++---
 ts/src/stats/HourGraph.svelte      | 6 +++++-
 ts/src/stats/IntervalsGraph.svelte | 3 ++-
 ts/src/stats/ReviewsGraph.svelte   | 3 ++-
 ts/src/stats/future-due.ts         | 7 ++++---
 10 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/rslib/ftl/statistics.ftl b/rslib/ftl/statistics.ftl
index 7aa6ab299..5bd8baee7 100644
--- a/rslib/ftl/statistics.ftl
+++ b/rslib/ftl/statistics.ftl
@@ -88,3 +88,10 @@ statistics-range-all-time = deck life
 statistics-range-deck = deck
 statistics-range-collection = collection
 statistics-range-search = Search
+statistics-future-due-title = Future Due
+statistics-reviews-title = Reviews
+statistics-intervals-title = Review Intervals
+statistics-answer-buttons-title = Answer Buttons
+statistics-hours-title = Hourly Breakdown
+statistics-added-title = Added
+statistics-card-ease-title = Card Ease
diff --git a/ts/src/stats/AddedGraph.svelte b/ts/src/stats/AddedGraph.svelte
index d1dd4efe0..1bd07faae 100644
--- a/ts/src/stats/AddedGraph.svelte
+++ b/ts/src/stats/AddedGraph.svelte
@@ -24,6 +24,7 @@
         histogramData = buildHistogram(addedData, range);
     }
 
+    const title = i18n.tr(i18n.TR.STATISTICS_ADDED_TITLE);
     const month = timeSpan(i18n, 1 * MONTH);
     const month3 = timeSpan(i18n, 3 * MONTH);
     const year = timeSpan(i18n, 1 * YEAR);
@@ -32,7 +33,7 @@
 
 {#if histogramData}
     <div class="graph">
-        <h1>Added</h1>
+        <h1>{title}</h1>
 
         <div class="range-box-inner">
             <label>
diff --git a/ts/src/stats/ButtonsGraph.svelte b/ts/src/stats/ButtonsGraph.svelte
index cd527c425..6d06671d0 100644
--- a/ts/src/stats/ButtonsGraph.svelte
+++ b/ts/src/stats/ButtonsGraph.svelte
@@ -4,8 +4,10 @@
     import AxisLabels from "./AxisLabels.svelte";
     import { gatherData, GraphData, renderButtons } from "./buttons";
     import pb from "../backend/proto";
+    import { I18n } from "../i18n";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
+    export let i18n: I18n;
 
     const bounds = defaultGraphBounds();
     const xText = "";
@@ -17,10 +19,12 @@
         console.log("gathering data");
         renderButtons(svg as SVGElement, bounds, gatherData(sourceData));
     }
+
+    const title = i18n.tr(i18n.TR.STATISTICS_ANSWER_BUTTONS_TITLE);
 </script>
 
 <div class="graph">
-    <h1>Answer Buttons</h1>
+    <h1>{title}</h1>
 
     <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
         <g class="bars" />
diff --git a/ts/src/stats/EaseGraph.svelte b/ts/src/stats/EaseGraph.svelte
index 1295db3b7..2e9ed0676 100644
--- a/ts/src/stats/EaseGraph.svelte
+++ b/ts/src/stats/EaseGraph.svelte
@@ -3,8 +3,10 @@
     import { gatherData, prepareData, GraphData } from "./ease";
     import pb from "../backend/proto";
     import HistogramGraph from "./HistogramGraph.svelte";
+    import { I18n } from "../i18n";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
+    export let i18n: I18n;
 
     let svg = null as HTMLElement | SVGElement | null;
     let histogramData = null as HistogramData | null;
@@ -13,11 +15,13 @@
         console.log("gathering data");
         histogramData = prepareData(gatherData(sourceData));
     }
+
+    const title = i18n.tr(i18n.TR.STATISTICS_CARD_EASE_TITLE);
 </script>
 
 {#if histogramData}
     <div class="graph">
-        <h1>Card Ease</h1>
+        <h1>{title}</h1>
 
         <HistogramGraph data={histogramData} xText="Ease (%)" yText="Number of cards" />
     </div>
diff --git a/ts/src/stats/FutureDue.svelte b/ts/src/stats/FutureDue.svelte
index 77d78a74f..ecc8db060 100644
--- a/ts/src/stats/FutureDue.svelte
+++ b/ts/src/stats/FutureDue.svelte
@@ -32,6 +32,7 @@
         histogramData = buildHistogram(graphData, range);
     }
 
+    const title = i18n.tr(i18n.TR.STATISTICS_FUTURE_DUE_TITLE);
     const month = timeSpan(i18n, 1 * MONTH);
     const month3 = timeSpan(i18n, 3 * MONTH);
     const year = timeSpan(i18n, 1 * YEAR);
@@ -41,7 +42,7 @@
 {#if histogramData}
 
     <div class="graph">
-        <h1>Future Due</h1>
+        <h1>{title}</h1>
 
         <div class="range-box-inner">
             <label>
diff --git a/ts/src/stats/GraphsPage.svelte b/ts/src/stats/GraphsPage.svelte
index 00d66677a..edb83bfda 100644
--- a/ts/src/stats/GraphsPage.svelte
+++ b/ts/src/stats/GraphsPage.svelte
@@ -139,7 +139,7 @@
 <FutureDue {sourceData} {i18n} />
 <ReviewsGraph {sourceData} {revlogRange} {i18n} />
 <IntervalsGraph {sourceData} {i18n} />
-<EaseGraph {sourceData} />
-<ButtonsGraph {sourceData} />
-<HourGraph {sourceData} />
+<EaseGraph {sourceData} {i18n} />
+<ButtonsGraph {sourceData} {i18n} />
+<HourGraph {sourceData} {i18n} />
 <AddedGraph {sourceData} {i18n} />
diff --git a/ts/src/stats/HourGraph.svelte b/ts/src/stats/HourGraph.svelte
index 90d1e764d..5f15767f1 100644
--- a/ts/src/stats/HourGraph.svelte
+++ b/ts/src/stats/HourGraph.svelte
@@ -4,8 +4,10 @@
     import AxisLabels from "./AxisLabels.svelte";
     import { gatherData, GraphData, renderHours } from "./hours";
     import pb from "../backend/proto";
+    import { I18n } from "../i18n";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
+    export let i18n: I18n;
 
     const bounds = defaultGraphBounds();
     const xText = "";
@@ -17,10 +19,12 @@
         console.log("gathering data");
         renderHours(svg as SVGElement, bounds, gatherData(sourceData));
     }
+
+    const title = i18n.tr(i18n.TR.STATISTICS_HOURS_TITLE);
 </script>
 
 <div class="graph">
-    <h1>Hours</h1>
+    <h1>{title}</h1>
 
     <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
         <g class="bars" />
diff --git a/ts/src/stats/IntervalsGraph.svelte b/ts/src/stats/IntervalsGraph.svelte
index 6015712a7..eb5862122 100644
--- a/ts/src/stats/IntervalsGraph.svelte
+++ b/ts/src/stats/IntervalsGraph.svelte
@@ -30,13 +30,14 @@
         histogramData = prepareIntervalData(intervalData, range);
     }
 
+    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);
 </script>
 
 {#if histogramData}
     <div class="graph intervals">
-        <h1>Review Intervals</h1>
+        <h1>{title}</h1>
 
         <div class="range-box-inner">
             <label>
diff --git a/ts/src/stats/ReviewsGraph.svelte b/ts/src/stats/ReviewsGraph.svelte
index 752a9797a..b275bb7ce 100644
--- a/ts/src/stats/ReviewsGraph.svelte
+++ b/ts/src/stats/ReviewsGraph.svelte
@@ -43,13 +43,14 @@
         renderReviews(svg as SVGElement, bounds, graphData, range, showTime);
     }
 
+    const title = i18n.tr(i18n.TR.STATISTICS_REVIEWS_TITLE);
     const month = timeSpan(i18n, 1 * MONTH);
     const month3 = timeSpan(i18n, 3 * MONTH);
     const year = timeSpan(i18n, 1 * YEAR);
 </script>
 
 <div class="graph">
-    <h1>Reviews</h1>
+    <h1>{title}</h1>
 
     <div class="range-box-inner">
         <label>
diff --git a/ts/src/stats/future-due.ts b/ts/src/stats/future-due.ts
index 81b333d4f..674bc85ea 100644
--- a/ts/src/stats/future-due.ts
+++ b/ts/src/stats/future-due.ts
@@ -96,9 +96,10 @@ export function buildHistogram(
         .domain(x.domain() as any)
         .thresholds(x.ticks(desiredBars))(data.entries() as any);
 
-    // start slightly darker
-    const shiftedMin = xMin! - Math.round((xMax - xMin!) / 10);
-    const colourScale = scaleSequential(interpolateGreens).domain([shiftedMin, xMax]);
+    const adjustedRange = scaleLinear().range([0.8, 0.3]);
+    const colourScale = scaleSequential((n) =>
+        interpolateGreens(adjustedRange(n))
+    ).domain([xMin!, xMax]);
 
     const total = sum(bins as any, binValue);