2020-06-24 01:41:07 +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-11-05 02:01:30 +01:00
|
|
|
import type pb from "anki/backend_proto";
|
2021-01-25 16:33:18 +01:00
|
|
|
import { extent, histogram, sum, Bin } from "d3-array";
|
2020-06-24 01:41:07 +02:00
|
|
|
import { scaleLinear, scaleSequential } from "d3-scale";
|
2020-11-01 05:26:58 +01:00
|
|
|
import type { HistogramData } from "./histogram-graph";
|
2020-06-24 01:41:07 +02:00
|
|
|
import { interpolateBlues } from "d3-scale-chromatic";
|
2020-11-05 02:01:30 +01:00
|
|
|
import type { I18n } from "anki/i18n";
|
|
|
|
import { dayLabel } from "anki/time";
|
2020-11-01 05:26:58 +01:00
|
|
|
import { GraphRange } from "./graph-helpers";
|
|
|
|
import type { TableDatum } from "./graph-helpers";
|
2020-06-24 01:41:07 +02:00
|
|
|
|
|
|
|
export interface GraphData {
|
|
|
|
daysAdded: number[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export function gatherData(data: pb.BackendProto.GraphsOut): GraphData {
|
|
|
|
const daysAdded = (data.cards as pb.BackendProto.Card[]).map((card) => {
|
|
|
|
const elapsedSecs = (card.id as number) / 1000 - data.nextDayAtSecs;
|
|
|
|
return Math.ceil(elapsedSecs / 86400);
|
|
|
|
});
|
|
|
|
return { daysAdded };
|
|
|
|
}
|
|
|
|
|
2021-01-25 16:33:18 +01:00
|
|
|
function makeQuery(start: number, end: number): string {
|
|
|
|
const include = `"added:${start}"`;
|
|
|
|
|
|
|
|
if (start === 1) {
|
|
|
|
return include;
|
|
|
|
}
|
|
|
|
|
|
|
|
const exclude = `-"added:${end}"`;
|
|
|
|
return `${include} AND ${exclude}`;
|
|
|
|
}
|
|
|
|
|
2020-06-26 11:25:02 +02:00
|
|
|
export function buildHistogram(
|
|
|
|
data: GraphData,
|
2020-07-17 05:46:06 +02:00
|
|
|
range: GraphRange,
|
2021-01-25 16:33:18 +01:00
|
|
|
i18n: I18n,
|
|
|
|
dispatch: any,
|
2020-08-04 08:01:11 +02:00
|
|
|
): [HistogramData | null, TableDatum[]] {
|
2020-06-24 01:41:07 +02:00
|
|
|
// get min/max
|
|
|
|
const total = data.daysAdded.length;
|
|
|
|
if (!total) {
|
2020-08-04 08:01:11 +02:00
|
|
|
return [null, []];
|
2020-06-24 01:41:07 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const [xMinOrig, _xMax] = extent(data.daysAdded);
|
|
|
|
let xMin = xMinOrig;
|
|
|
|
|
|
|
|
// cap max to selected range
|
|
|
|
switch (range) {
|
2020-07-17 05:46:06 +02:00
|
|
|
case GraphRange.Month:
|
2020-06-24 01:41:07 +02:00
|
|
|
xMin = -31;
|
|
|
|
break;
|
2020-07-17 05:46:06 +02:00
|
|
|
case GraphRange.ThreeMonths:
|
2020-06-24 01:41:07 +02:00
|
|
|
xMin = -90;
|
|
|
|
break;
|
2020-07-17 05:46:06 +02:00
|
|
|
case GraphRange.Year:
|
2020-06-24 01:41:07 +02:00
|
|
|
xMin = -365;
|
|
|
|
break;
|
2020-07-17 05:46:06 +02:00
|
|
|
case GraphRange.AllTime:
|
2020-06-24 01:41:07 +02:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
const xMax = 1;
|
|
|
|
const desiredBars = Math.min(70, Math.abs(xMin!));
|
|
|
|
|
|
|
|
const scale = scaleLinear().domain([xMin!, xMax]);
|
|
|
|
const bins = histogram()
|
|
|
|
.domain(scale.domain() as any)
|
|
|
|
.thresholds(scale.ticks(desiredBars))(data.daysAdded);
|
|
|
|
|
2020-07-06 06:01:49 +02:00
|
|
|
// empty graph?
|
|
|
|
if (!sum(bins, (bin) => bin.length)) {
|
2020-08-04 08:01:11 +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-24 01:41:07 +02:00
|
|
|
|
2020-08-04 08:01:11 +02:00
|
|
|
const totalInPeriod = sum(bins, (bin) => bin.length);
|
2020-09-21 03:31:27 +02:00
|
|
|
const periodDays = Math.abs(xMin!);
|
|
|
|
const cardsPerDay = Math.round(totalInPeriod / periodDays);
|
2020-08-04 08:01:11 +02:00
|
|
|
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 }),
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2020-06-28 12:52:38 +02:00
|
|
|
function hoverText(
|
|
|
|
data: HistogramData,
|
|
|
|
binIdx: number,
|
|
|
|
cumulative: number,
|
|
|
|
_percent: number
|
|
|
|
): string {
|
|
|
|
const bin = data.bins[binIdx];
|
|
|
|
const day = dayLabel(i18n, bin.x0!, bin.x1!);
|
|
|
|
const cards = i18n.tr(i18n.TR.STATISTICS_CARDS, { cards: bin.length });
|
|
|
|
const total = i18n.tr(i18n.TR.STATISTICS_RUNNING_TOTAL);
|
|
|
|
const totalCards = i18n.tr(i18n.TR.STATISTICS_CARDS, { cards: cumulative });
|
|
|
|
return `${day}:<br>${cards}<br>${total}: ${totalCards}`;
|
|
|
|
}
|
|
|
|
|
2021-01-25 16:33:18 +01:00
|
|
|
function onClick(bin: Bin<number, number>): void {
|
|
|
|
const start = Math.abs(bin.x0!) + 1;
|
|
|
|
const end = Math.abs(bin.x1!) + 1;
|
|
|
|
const query = makeQuery(start, end);
|
|
|
|
dispatch("search", { query });
|
2021-01-07 12:22:50 +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 16:33:18 +01:00
|
|
|
onClick,
|
2021-01-08 14:28:38 +01:00
|
|
|
colourScale,
|
|
|
|
showArea: true,
|
|
|
|
},
|
2020-08-05 06:49:57 +02:00
|
|
|
tableData,
|
|
|
|
];
|
2020-06-24 01:41:07 +02:00
|
|
|
}
|