2020-06-22 07:00:45 +02:00
|
|
|
// Copyright: Ankitects Pty Ltd and contributors
|
|
|
|
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
|
|
|
|
/* eslint
|
|
|
|
@typescript-eslint/no-non-null-assertion: "off",
|
|
|
|
@typescript-eslint/no-explicit-any: "off",
|
2020-06-23 05:43:23 +02:00
|
|
|
*/
|
2020-06-22 07:00:45 +02:00
|
|
|
|
2020-11-05 02:01:30 +01:00
|
|
|
import type pb from "anki/backend_proto";
|
2021-01-30 01:13:47 +01:00
|
|
|
import {
|
|
|
|
extent,
|
|
|
|
histogram,
|
|
|
|
quantile,
|
|
|
|
sum,
|
|
|
|
mean,
|
|
|
|
scaleLinear,
|
|
|
|
scaleSequential,
|
|
|
|
interpolateBlues,
|
|
|
|
} from "d3";
|
|
|
|
import type { Bin } from "d3";
|
2021-01-07 22:35:34 +01:00
|
|
|
import { CardType } from "anki/cards";
|
2020-11-01 05:26:58 +01:00
|
|
|
import type { HistogramData } from "./histogram-graph";
|
2020-11-05 02:01:30 +01:00
|
|
|
import type { I18n } from "anki/i18n";
|
2021-01-26 12:41:22 +01:00
|
|
|
import type { TableDatum, SearchDispatch } from "./graph-helpers";
|
2020-11-05 02:01:30 +01:00
|
|
|
import { timeSpan } from "anki/time";
|
2020-06-22 07:00:45 +02:00
|
|
|
|
|
|
|
export interface IntervalGraphData {
|
|
|
|
intervals: number[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum IntervalRange {
|
|
|
|
Month = 0,
|
|
|
|
Percentile50 = 1,
|
|
|
|
Percentile95 = 2,
|
2020-08-05 06:50:08 +02:00
|
|
|
All = 3,
|
2020-06-22 07:00:45 +02:00
|
|
|
}
|
|
|
|
|
2020-06-22 11:11:50 +02:00
|
|
|
export function gatherIntervalData(data: pb.BackendProto.GraphsOut): IntervalGraphData {
|
2020-06-24 01:41:07 +02:00
|
|
|
const intervals = (data.cards as pb.BackendProto.Card[])
|
2021-01-07 22:35:34 +01:00
|
|
|
.filter((c) => [CardType.Review, CardType.Relearn].includes(c.ctype))
|
2020-08-31 09:09:49 +02:00
|
|
|
.map((c) => c.interval);
|
2020-06-22 07:00:45 +02:00
|
|
|
return { intervals };
|
|
|
|
}
|
|
|
|
|
2020-06-28 12:52:38 +02:00
|
|
|
export function intervalLabel(
|
|
|
|
i18n: I18n,
|
|
|
|
daysStart: number,
|
|
|
|
daysEnd: number,
|
|
|
|
cards: number
|
2020-06-24 01:41:07 +02:00
|
|
|
): string {
|
2020-06-28 12:52:38 +02:00
|
|
|
if (daysEnd - daysStart <= 1) {
|
|
|
|
// singular
|
|
|
|
return i18n.tr(i18n.TR.STATISTICS_INTERVALS_DAY_SINGLE, {
|
|
|
|
day: daysStart,
|
|
|
|
cards,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
// range
|
|
|
|
return i18n.tr(i18n.TR.STATISTICS_INTERVALS_DAY_RANGE, {
|
|
|
|
daysStart,
|
2020-07-08 06:01:09 +02:00
|
|
|
daysEnd: daysEnd - 1,
|
2020-06-28 12:52:38 +02:00
|
|
|
cards,
|
|
|
|
});
|
|
|
|
}
|
2020-06-23 10:40:53 +02:00
|
|
|
}
|
|
|
|
|
2021-01-25 16:33:18 +01:00
|
|
|
function makeQuery(start: number, end: number): string {
|
|
|
|
if (start === end) {
|
|
|
|
return `"prop:ivl=${start}"`;
|
|
|
|
}
|
|
|
|
|
|
|
|
const fromQuery = `"prop:ivl>=${start}"`;
|
|
|
|
const tillQuery = `"prop:ivl<=${end}"`;
|
|
|
|
|
|
|
|
return `${fromQuery} AND ${tillQuery}`;
|
|
|
|
}
|
|
|
|
|
2020-06-23 11:07:47 +02:00
|
|
|
export function prepareIntervalData(
|
2020-06-23 09:25:28 +02:00
|
|
|
data: IntervalGraphData,
|
2020-06-28 12:52:38 +02:00
|
|
|
range: IntervalRange,
|
2021-01-25 16:33:18 +01:00
|
|
|
i18n: I18n,
|
2021-01-26 12:41:22 +01:00
|
|
|
dispatch: SearchDispatch,
|
2021-01-25 17:36:04 +01:00
|
|
|
browserLinksSupported: boolean
|
2020-08-04 07:28:41 +02:00
|
|
|
): [HistogramData | null, TableDatum[]] {
|
2020-06-23 09:25:28 +02:00
|
|
|
// get min/max
|
|
|
|
const allIntervals = data.intervals;
|
2020-06-23 12:43:19 +02:00
|
|
|
if (!allIntervals.length) {
|
2020-08-04 07:28:41 +02:00
|
|
|
return [null, []];
|
2020-06-23 12:43:19 +02:00
|
|
|
}
|
|
|
|
|
2021-01-08 12:11:53 +01:00
|
|
|
const xMin = 0;
|
|
|
|
let [, xMax] = extent(allIntervals);
|
|
|
|
let niceNecessary = false;
|
2020-06-23 09:25:28 +02:00
|
|
|
|
|
|
|
// cap max to selected range
|
|
|
|
switch (range) {
|
2020-06-23 05:43:23 +02:00
|
|
|
case IntervalRange.Month:
|
2021-01-08 12:11:53 +01:00
|
|
|
xMax = Math.min(xMax!, 30);
|
2020-06-23 05:43:23 +02:00
|
|
|
break;
|
|
|
|
case IntervalRange.Percentile50:
|
|
|
|
xMax = quantile(allIntervals, 0.5);
|
2021-01-08 12:11:53 +01:00
|
|
|
niceNecessary = true;
|
2020-06-23 05:43:23 +02:00
|
|
|
break;
|
|
|
|
case IntervalRange.Percentile95:
|
|
|
|
xMax = quantile(allIntervals, 0.95);
|
2021-01-08 12:11:53 +01:00
|
|
|
niceNecessary = true;
|
2020-06-23 05:43:23 +02:00
|
|
|
break;
|
|
|
|
case IntervalRange.All:
|
2021-01-08 12:11:53 +01:00
|
|
|
niceNecessary = true;
|
2020-06-23 05:43:23 +02:00
|
|
|
break;
|
|
|
|
}
|
2021-01-08 12:11:53 +01:00
|
|
|
|
2020-06-23 10:40:53 +02:00
|
|
|
xMax = xMax! + 1;
|
2020-06-23 05:43:23 +02:00
|
|
|
|
2021-01-08 12:11:53 +01:00
|
|
|
// do not show the zero interval
|
2021-01-08 12:29:22 +01:00
|
|
|
const increment = (x: number): number => x + 1;
|
2021-01-08 12:11:53 +01:00
|
|
|
|
2021-01-08 12:29:22 +01:00
|
|
|
const adjustTicks = (x: number, idx: number, ticks: number[]): number[] =>
|
|
|
|
idx === ticks.length - 1 ? [x - (ticks[0] - 1), x + 1] : [x - (ticks[0] - 1)];
|
2021-01-08 12:11:53 +01:00
|
|
|
|
2020-06-23 09:25:28 +02:00
|
|
|
// cap bars to available range
|
|
|
|
const desiredBars = Math.min(70, xMax! - xMin!);
|
2021-01-08 12:11:53 +01:00
|
|
|
|
|
|
|
const prescale = scaleLinear().domain([xMin!, xMax!]);
|
|
|
|
const scale = scaleLinear().domain(
|
|
|
|
(niceNecessary ? prescale.nice() : prescale).domain().map(increment)
|
|
|
|
);
|
|
|
|
|
2020-06-23 09:25:28 +02:00
|
|
|
const bins = histogram()
|
2021-01-08 12:11:53 +01:00
|
|
|
.domain(scale.domain() as [number, number])
|
2021-01-08 12:23:21 +01:00
|
|
|
.thresholds(scale.ticks(desiredBars).flatMap(adjustTicks))(allIntervals);
|
2020-06-23 05:43:23 +02:00
|
|
|
|
2020-07-06 06:01:49 +02:00
|
|
|
// empty graph?
|
2020-08-05 06:49:57 +02:00
|
|
|
const totalInPeriod = sum(bins, (bin) => bin.length);
|
|
|
|
if (!totalInPeriod) {
|
2020-08-04 07:28:41 +02:00
|
|
|
return [null, []];
|
2020-07-06 06:01:49 +02:00
|
|
|
}
|
|
|
|
|
2020-08-05 07:43:44 +02:00
|
|
|
const adjustedRange = scaleLinear().range([0.7, 0.3]);
|
|
|
|
const colourScale = scaleSequential((n) =>
|
2020-09-29 14:13:25 +02:00
|
|
|
interpolateBlues(adjustedRange(n)!)
|
2020-08-05 07:43:44 +02:00
|
|
|
).domain([xMax!, xMin!]);
|
2020-06-23 12:43:19 +02:00
|
|
|
|
2020-06-28 12:52:38 +02:00
|
|
|
function hoverText(
|
2021-01-30 02:08:01 +01:00
|
|
|
bin: Bin<number, number>,
|
2020-06-28 12:52:38 +02:00
|
|
|
_cumulative: number,
|
|
|
|
percent: number
|
|
|
|
): string {
|
|
|
|
// const day = dayLabel(i18n, bin.x0!, bin.x1!);
|
|
|
|
const interval = intervalLabel(i18n, bin.x0!, bin.x1!, bin.length);
|
2021-03-26 09:17:08 +01:00
|
|
|
const total = i18n.statisticsRunningTotal();
|
2020-07-22 07:15:52 +02:00
|
|
|
return `${interval}<br>${total}: \u200e${percent.toFixed(1)}%`;
|
2020-06-28 12:52:38 +02:00
|
|
|
}
|
|
|
|
|
2021-01-25 16:33:18 +01:00
|
|
|
function onClick(bin: Bin<number, number>): void {
|
2021-01-07 12:44:58 +01:00
|
|
|
const start = bin.x0!;
|
|
|
|
const end = bin.x1! - 1;
|
2021-01-25 16:33:18 +01:00
|
|
|
const query = makeQuery(start, end);
|
|
|
|
dispatch("search", { query });
|
2021-01-07 12:44:58 +01:00
|
|
|
}
|
|
|
|
|
2020-08-04 07:28:41 +02:00
|
|
|
const meanInterval = Math.round(mean(allIntervals) ?? 0);
|
|
|
|
const meanIntervalString = timeSpan(i18n, meanInterval * 86400, false);
|
|
|
|
const tableData = [
|
|
|
|
{
|
2021-03-26 09:17:08 +01:00
|
|
|
label: i18n.statisticsAverageInterval(),
|
2020-08-04 07:28:41 +02:00
|
|
|
value: meanIntervalString,
|
|
|
|
},
|
|
|
|
];
|
2021-01-25 17:36:04 +01:00
|
|
|
|
2020-08-05 06:49:57 +02:00
|
|
|
return [
|
2021-01-08 14:28:38 +01:00
|
|
|
{
|
|
|
|
scale,
|
|
|
|
bins,
|
|
|
|
total: totalInPeriod,
|
|
|
|
hoverText,
|
2021-01-25 17:36:04 +01:00
|
|
|
onClick: browserLinksSupported ? onClick : null,
|
2021-01-08 14:28:38 +01:00
|
|
|
colourScale,
|
|
|
|
showArea: true,
|
|
|
|
},
|
2020-08-05 06:49:57 +02:00
|
|
|
tableData,
|
|
|
|
];
|
2020-06-23 09:25:28 +02:00
|
|
|
}
|