i18n graph titles

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

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>

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" />

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>

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>

ts/src/stats/GraphsPage.svelte

@@ -139,7 +139,7 @@
 <FutureDue {sourceData} {i18n} />
 <ReviewsGraph {sourceData} {revlogRange} {i18n} />
 <IntervalsGraph {sourceData} {i18n} />
-<EaseGraph {sourceData} />
+<EaseGraph {sourceData} {i18n} />
-<ButtonsGraph {sourceData} />
+<ButtonsGraph {sourceData} {i18n} />
-<HourGraph {sourceData} />
+<HourGraph {sourceData} {i18n} />
 <AddedGraph {sourceData} {i18n} />

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" />

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>

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>

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 adjustedRange = scaleLinear().range([0.8, 0.3]);
-    const shiftedMin = xMin! - Math.round((xMax - xMin!) / 10);
+    const colourScale = scaleSequential((n) =>
-    const colourScale = scaleSequential(interpolateGreens).domain([shiftedMin, xMax]);
+        interpolateGreens(adjustedRange(n))
+    ).domain([xMin!, xMax]);
 
     const total = sum(bins as any, binValue);