diff --git a/rslib/ftl/statistics.ftl b/rslib/ftl/statistics.ftl
index ee64fcc39..ba50942c5 100644
--- a/rslib/ftl/statistics.ftl
+++ b/rslib/ftl/statistics.ftl
@@ -183,15 +183,19 @@ statistics-due-tomorrow = Due tomorrow
# eg 5 of 15 (33.3%)
statistics-amount-of-total-with-percentage = { $amount } of { $total } ({ $percent }%)
statistics-average-over-period = Average over period
-statistics-reviews-per-day = { $count ->
- [one] { $count } review/day
- *[other] { $count } reviews/day
- }
-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
- }
+statistics-reviews-per-day =
+ { $count ->
+ [one] { $count } review/day
+ *[other] { $count } reviews/day
+ }
+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
+ }
+statistics-average-ease = Average ease
diff --git a/ts/src/stats/EaseGraph.svelte b/ts/src/stats/EaseGraph.svelte
index 46154342e..ebefee011 100644
--- a/ts/src/stats/EaseGraph.svelte
+++ b/ts/src/stats/EaseGraph.svelte
@@ -4,14 +4,17 @@
import pb from "../backend/proto";
import HistogramGraph from "./HistogramGraph.svelte";
import { I18n } from "../i18n";
+ import { TableDatum } from "./graphs";
+ 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[] = [];
$: if (sourceData) {
- histogramData = prepareData(gatherData(sourceData), i18n);
+ [histogramData, tableData] = prepareData(gatherData(sourceData), i18n);
}
const title = i18n.tr(i18n.TR.STATISTICS_CARD_EASE_TITLE);
@@ -24,4 +27,6 @@
{subtitle}
+
+
diff --git a/ts/src/stats/ease.ts b/ts/src/stats/ease.ts
index b71d5daab..5a22d1f9f 100644
--- a/ts/src/stats/ease.ts
+++ b/ts/src/stats/ease.ts
@@ -7,12 +7,13 @@
*/
import pb from "../backend/proto";
-import { extent, histogram } from "d3-array";
+import { extent, histogram, sum } from "d3-array";
import { scaleLinear, scaleSequential } from "d3-scale";
import { CardQueue } from "../cards";
import { HistogramData } from "./histogram-graph";
import { interpolateRdYlGn } from "d3-scale-chromatic";
import { I18n } from "../i18n";
+import { TableDatum } from "./graphs";
export interface GraphData {
eases: number[];
@@ -25,11 +26,14 @@ export function gatherData(data: pb.BackendProto.GraphsOut): GraphData {
return { eases };
}
-export function prepareData(data: GraphData, i18n: I18n): HistogramData | null {
+export function prepareData(
+ data: GraphData,
+ i18n: I18n
+): [HistogramData | null, TableDatum[]] {
// get min/max
const allEases = data.eases;
if (!allEases.length) {
- return null;
+ return [null, []];
}
const total = allEases.length;
const [_xMin, origXMax] = extent(allEases);
@@ -57,5 +61,16 @@ export function prepareData(data: GraphData, i18n: I18n): HistogramData | null {
});
}
- return { scale, bins, total, hoverText, colourScale, showArea: false };
+ const xTickFormat = (num: number): string => `${num.toFixed(0)}%`;
+ const tableData = [
+ {
+ label: i18n.tr(i18n.TR.STATISTICS_AVERAGE_EASE),
+ value: xTickFormat(sum(allEases) / total),
+ },
+ ];
+
+ return [
+ { scale, bins, total, hoverText, colourScale, showArea: false, xTickFormat },
+ tableData,
+ ];
}
diff --git a/ts/src/stats/histogram-graph.ts b/ts/src/stats/histogram-graph.ts
index de5bac32d..2e590ad7f 100644
--- a/ts/src/stats/histogram-graph.ts
+++ b/ts/src/stats/histogram-graph.ts
@@ -28,6 +28,7 @@ export interface HistogramData {
showArea: boolean;
colourScale: ScaleSequential;
binValue?: (bin: Bin) => number;
+ xTickFormat?: (d: any) => string;
}
export function histogramGraph(
@@ -50,7 +51,12 @@ export function histogramGraph(
const x = data.scale.range([bounds.marginLeft, bounds.width - bounds.marginRight]);
svg.select(".x-ticks")
.transition(trans)
- .call(axisBottom(x).ticks(7).tickSizeOuter(0));
+ .call(
+ axisBottom(x)
+ .ticks(7)
+ .tickSizeOuter(0)
+ .tickFormat((data.xTickFormat ?? null) as any)
+ );
// y scale