anki/ts/graphs/future-due.ts
Vova Selin 2df3698e8c
Minor changes to graphs (#1566)
* Add thousands comma separator for card counts graph

* Fix Answer Buttons graph's tooltip

Changes to the "times pressed" heading

* Shows the percent of that button out of all the presses

* Comma separates total on thousands

* Update CONTRIBUTERS

* Wider spacing for graph tables

* Switch to locale-based stats numbers

* Update CONTRIBUTORS 

Wrong email?

* Fix counts graph on narrow devices

Graph and table now align in a column when the device's screen is narrow. Columns widths are  bounded to not get too wide

* Rename toLocaleXXX functions

* toLocaleNumber -> localizedNumber
 *  toLocaleString -> localizedDate

Also cleans up sketchy "card counts" table formatting

* Localize more numbers

Uses locale-based rounding for more numbers now

* Localize graph axis ticks

* Fix future-due graph tooltip

* avoid div by zero (dae)

Ignoring NaN in localizedNumber() could potentially mask a mistake
in the future - better to explicitly handle the invalid case at the
source instead.
2021-12-29 15:04:15 +10:00

208 lines
5.6 KiB
TypeScript

// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* eslint
@typescript-eslint/no-explicit-any: "off",
*/
import type { Stats, Cards } from "../lib/proto";
import {
extent,
histogram,
rollup,
sum,
scaleLinear,
scaleSequential,
interpolateGreens,
} from "d3";
import type { Bin } from "d3";
import { localizedNumber } from "../lib/i18n";
import * as tr from "../lib/ftl";
import { CardQueue } from "../lib/cards";
import type { HistogramData } from "./histogram-graph";
import { dayLabel } from "../lib/time";
import { GraphRange } from "./graph-helpers";
import type { TableDatum, SearchDispatch } from "./graph-helpers";
export interface GraphData {
dueCounts: Map<number, number>;
haveBacklog: boolean;
}
export function gatherData(data: Stats.GraphsResponse): GraphData {
const isLearning = (card: Cards.Card): boolean =>
[CardQueue.Learn, CardQueue.PreviewRepeat].includes(card.queue);
let haveBacklog = false;
const due = (data.cards as Cards.Card[])
.filter((c: Cards.Card) => {
// reviews
return (
[CardQueue.Review, CardQueue.DayLearn].includes(c.queue) ||
// or learning cards
isLearning(c)
);
})
.map((c: Cards.Card) => {
let dueDay: number;
if (isLearning(c)) {
const offset = c.due - data.nextDayAtSecs;
dueDay = Math.floor(offset / 86_400) + 1;
} else {
// - testing just odue fails on day 1
// - testing just odid fails on lapsed cards that
// have due calculated at regraduation time
const due = c.originalDeckId && c.originalDue ? c.originalDue : c.due;
dueDay = due - data.daysElapsed;
}
haveBacklog = haveBacklog || dueDay < 0;
return dueDay;
});
const dueCounts = rollup(
due,
(v) => v.length,
(d) => d,
);
return { dueCounts, haveBacklog };
}
function binValue(d: Bin<Map<number, number>, number>): number {
return sum(d, (d) => d[1]);
}
export interface FutureDueResponse {
histogramData: HistogramData | null;
tableData: TableDatum[];
}
function makeQuery(start: number, end: number): string {
if (start === end) {
return `"prop:due=${start}"`;
} else {
const fromQuery = `"prop:due>=${start}"`;
const tillQuery = `"prop:due<=${end}"`;
return `${fromQuery} AND ${tillQuery}`;
}
}
export function buildHistogram(
sourceData: GraphData,
range: GraphRange,
backlog: boolean,
dispatch: SearchDispatch,
browserLinksSupported: boolean,
): FutureDueResponse {
const output = { histogramData: null, tableData: [] };
// get min/max
const data = sourceData.dueCounts;
if (!data) {
return output;
}
const [xMinOrig, origXMax] = extent<number>(data.keys());
let xMin = xMinOrig;
if (!backlog) {
xMin = 0;
}
let xMax = origXMax;
// cap max to selected range
switch (range) {
case GraphRange.Month:
xMax = 31;
break;
case GraphRange.ThreeMonths:
xMax = 90;
break;
case GraphRange.Year:
xMax = 365;
break;
case GraphRange.AllTime:
break;
}
// cap bars to available range
const desiredBars = Math.min(70, xMax! - xMin!);
const x = scaleLinear().domain([xMin!, xMax!]);
const bins = histogram()
.value((m) => {
return m[0];
})
.domain(x.domain() as any)
.thresholds(x.ticks(desiredBars))(data.entries() as any);
// empty graph?
if (!sum(bins, (bin) => bin.length)) {
return output;
}
const xTickFormat = (n: number): string => localizedNumber(n);
const adjustedRange = scaleLinear().range([0.7, 0.3]);
const colourScale = scaleSequential((n) =>
interpolateGreens(adjustedRange(n)!),
).domain([xMin!, xMax!]);
const total = sum(bins as any, binValue);
function hoverText(
bin: Bin<number, number>,
cumulative: number,
_percent: number,
): string {
const days = dayLabel(bin.x0!, bin.x1!);
const cards = tr.statisticsCardsDue({
cards: binValue(bin as any),
});
const totalLabel = tr.statisticsRunningTotal();
return `${days}:<br>${cards}<br>${totalLabel}: ${localizedNumber(cumulative)}`;
}
function onClick(bin: Bin<number, number>): void {
const start = bin.x0!;
const end = bin.x1! - 1;
const query = makeQuery(start, end);
dispatch("search", { query });
}
const periodDays = xMax! - xMin!;
const tableData = [
{
label: tr.statisticsTotal(),
value: tr.statisticsReviews({ reviews: total }),
},
{
label: tr.statisticsAverage(),
value: tr.statisticsReviewsPerDay({
count: Math.round(total / periodDays),
}),
},
{
label: tr.statisticsDueTomorrow(),
value: tr.statisticsReviews({
reviews: sourceData.dueCounts.get(1) ?? 0,
}),
},
];
return {
histogramData: {
scale: x,
bins,
total,
hoverText,
onClick: browserLinksSupported ? onClick : null,
showArea: true,
colourScale,
binValue,
xTickFormat,
},
tableData,
};
}