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