added graph table

rslib/ftl/statistics.ftl

@@ -188,3 +188,7 @@ statistics-minutes-per-day = { $count ->
   [one] { $count } minute/day
   *[other] { $count } minutes/day
   }
+statistics-cards-per-day = { $count ->
+  [one] { $count } card/day
+  *[other] { $count } cards/day
+  }

ts/src/stats/AddedGraph.svelte

@@ -1,16 +1,18 @@
 <script lang="typescript">
-    import { RevlogRange, GraphRange } from "./graphs";
+    import { RevlogRange, GraphRange, TableDatum } from "./graphs";
     import { I18n } from "../i18n";
     import { HistogramData } from "./histogram-graph";
     import { gatherData, buildHistogram, GraphData } from "./added";
     import pb from "../backend/proto";
     import HistogramGraph from "./HistogramGraph.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
+    import TableData from "./TableData.svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
 
     let histogramData = null as HistogramData | null;
+    let tableData: TableDatum[] = [];
     let graphRange: GraphRange = GraphRange.Month;
 
     let addedData: GraphData | null = null;
@@ -19,7 +21,7 @@
     }
 
     $: if (addedData) {
-        histogramData = buildHistogram(addedData, graphRange, i18n);
+        [histogramData, tableData] = buildHistogram(addedData, graphRange, i18n);
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_ADDED_TITLE);
@@ -36,4 +38,6 @@
     <div class="subtitle">{subtitle}</div>
 
     <HistogramGraph data={histogramData} {i18n} />
+
+    <TableData {i18n} {tableData} />
 </div>

ts/src/stats/added.ts

@@ -7,13 +7,13 @@
  */
 
 import pb from "../backend/proto";
-import { extent, histogram, sum } from "d3-array";
+import { extent, histogram, sum, mean } from "d3-array";
 import { scaleLinear, scaleSequential } from "d3-scale";
 import { HistogramData } from "./histogram-graph";
 import { interpolateBlues } from "d3-scale-chromatic";
 import { I18n } from "../i18n";
 import { dayLabel } from "../time";
-import { GraphRange } from "./graphs";
+import { GraphRange, TableDatum } from "./graphs";
 
 export interface GraphData {
     daysAdded: number[];
@@ -31,11 +31,11 @@ export function buildHistogram(
     data: GraphData,
     range: GraphRange,
     i18n: I18n
-): HistogramData | null {
+): [HistogramData | null, TableDatum[]] {
     // get min/max
     const total = data.daysAdded.length;
     if (!total) {
-        return null;
+        return [null, []];
     }
 
     const [xMinOrig, _xMax] = extent(data.daysAdded);
@@ -65,11 +65,24 @@ export function buildHistogram(
 
     // empty graph?
     if (!sum(bins, (bin) => bin.length)) {
-        return null;
+        return [null, []];
     }
 
     const colourScale = scaleSequential(interpolateBlues).domain([xMin!, xMax]);
 
+    const totalInPeriod = sum(bins, (bin) => bin.length);
+    const cardsPerDay = Math.round(mean(bins, (bin) => bin.length) ?? 0);
+    const tableData = [
+        {
+            label: i18n.tr(i18n.TR.STATISTICS_TOTAL),
+            value: i18n.tr(i18n.TR.STATISTICS_CARDS, { cards: totalInPeriod }),
+        },
+        {
+            label: i18n.tr(i18n.TR.STATISTICS_AVERAGE),
+            value: i18n.tr(i18n.TR.STATISTICS_CARDS_PER_DAY, { count: cardsPerDay }),
+        },
+    ];
+
     function hoverText(
         data: HistogramData,
         binIdx: number,
@@ -84,5 +97,5 @@ export function buildHistogram(
         return `${day}:<br>${cards}<br>${total}: ${totalCards}`;
     }
 
-    return { scale, bins, total, hoverText, colourScale, showArea: true };
+    return [{ scale, bins, total, hoverText, colourScale, showArea: true }, tableData];
 }