langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make histogram show bars again

Browse Source
This commit is contained in:
Henrik Giesel 2021-01-30 02:08:01 +01:00
parent 3290e5373b
commit 3c906977b9
7 changed files with 47 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ts/graphs/added.ts
View File

@ -109,12 +109,10 @@ export function buildHistogram(
];
function hoverText(
data: HistogramData,
binIdx: number,
bin: Bin<number, 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);

2
ts/graphs/calendar.ts
View File

@ -215,7 +215,7 @@ export function renderCalendar(
.attr("class", (d: any): string => {
return d.count > 0 ? "clickable" : "";
})
.on("click", function (this: any, d: any) {
.on("click", function (_event: MouseEvent, d: any) {
if (d.count > 0) {
dispatch("search", { query: `"prop:rated=${d.day}"` });
}

3
ts/graphs/ease.ts
View File

@ -69,8 +69,7 @@ export function prepareData(
const colourScale = scaleSequential(interpolateRdYlGn).domain([xMin, 300]);
function hoverText(data: HistogramData, binIdx: number, _percent: number): string {
const bin = data.bins[binIdx];
function hoverText(bin: Bin<number, number>, _percent: number): string {
const minPct = Math.floor(bin.x0!);
const maxPct = Math.floor(bin.x1!);
const percent = maxPct - minPct <= 10 ? `${bin.x0}%` : `${bin.x0}%-${bin.x1}%`;

6
ts/graphs/future-due.ts
View File

@ -149,15 +149,13 @@ export function buildHistogram(
const total = sum(bins as any, binValue);
function hoverText(
data: HistogramData,
binIdx: number,
bin: Bin<number, number>,
cumulative: number,
_percent: number
): string {
const bin = data.bins[binIdx];
const days = dayLabel(i18n, bin.x0!, bin.x1!);
const cards = i18n.tr(i18n.TR.STATISTICS_CARDS_DUE, {
cards: binValue(data.bins[binIdx] as any),
cards: binValue(bin as any),
});
const totalLabel = i18n.tr(i18n.TR.STATISTICS_RUNNING_TOTAL);

37
ts/graphs/histogram-graph.ts
View File

@ -28,8 +28,7 @@ export interface HistogramData {
bins: Bin<number, number>[];
total: number;
hoverText: (
data: HistogramData,
binIdx: number,
bin: Bin<number, number>,
cumulative: number,
percent: number
) => string;
@ -84,9 +83,9 @@ export function histogramGraph(
// x bars
function barWidth(d: any): number {
const width = Math.max(0, x(d.x1)! - x(d.x0)! - 1);
return width ? width : 0;
function barWidth(d: Bin<number, number>): number {
const width = Math.max(0, x(d.x1!) - x(d.x0!) - 1);
return width ?? 0;
}
const updateBar = (sel: any): any => {
@ -152,28 +151,34 @@ export function histogramGraph(
);
}
const hoverData: [
Bin<number, number>,
number
][] = data.bins.map((bin: Bin<number, number>, index: number) => [
bin,
areaData[index + 1],
]);
// hover/tooltip
const hoverzone = svg
.select("g.hoverzone")
.selectAll("rect")
.data(data.bins)
.data(hoverData)
.join("rect")
.attr("x", (d: any) => x(d.x0)!)
.attr("y", () => y(yMax!)!)
.attr("width", barWidth)
.attr("height", () => y(0)! - y(yMax!)!)
.on("mousemove", (event: MouseEvent, _d: Bin<number, number>) => {
.attr("x", ([bin]) => x(bin.x0!))
.attr("y", () => y(yMax))
.attr("width", ([bin]) => barWidth(bin))
.attr("height", () => y(0) - y(yMax))
.on("mousemove", (event: MouseEvent, [bin, area]) => {
const [x, y] = pointer(event);
// TODO
const idx = 0;
const pct = data.showArea ? (areaData[idx + 1] / data.total) * 100 : 0;
showTooltip(data.hoverText(data, idx, areaData[idx + 1], pct), x, y);
const pct = data.showArea ? (area / data.total) * 100 : 0;
showTooltip(data.hoverText(bin, area, pct), x, y);
})
.on("mouseout", hideTooltip);
if (data.onClick) {
hoverzone
.filter((d: Bin<number, number>) => d.length > 0)
.filter(([bin]: [Bin<number, number>, number]) => bin.length > 0)
.attr("class", "clickable")
.on("click", data.onClick);
}

4
ts/graphs/intervals.ts
View File

@ -143,12 +143,10 @@ export function prepareIntervalData(
).domain([xMax!, xMin!]);
function hoverText(
data: HistogramData,
binIdx: number,
bin: Bin<number, number>,
_cumulative: number,
percent: number
): string {
const bin = data.bins[binIdx];
// const day = dayLabel(i18n, bin.x0!, bin.x1!);
const interval = intervalLabel(i18n, bin.x0!, bin.x1!, bin.length);
const total = i18n.tr(i18n.TR.STATISTICS_RUNNING_TOTAL);

33
ts/graphs/reviews.ts
View File

@ -201,9 +201,9 @@ export function renderReviews(
// x bars
function barWidth(d: any): number {
const width = Math.max(0, x(d.x1)! - x(d.x0)! - 1);
return width ? width : 0;
function barWidth(d: Bin<number, number>): number {
const width = Math.max(0, x(d.x1!) - x(d.x0!) - 1);
return width ?? 0;
}
const cappedRange = scaleLinear().range([0.3, 0.5]);
@ -346,7 +346,7 @@ export function renderReviews(
"d",
area()
.curve(curveBasis)
.x((d, idx) => {
.x((_d: [number, number], idx: number) => {
if (idx === 0) {
return x(bins[0].x0!)!;
} else {
@ -358,19 +358,26 @@ export function renderReviews(
);
}
// // hover/tooltip
const hoverData: [
Bin<number, number>,
number
][] = bins.map((bin: Bin<number, number>, index: number) => [
bin,
areaData[index + 1],
]);
// hover/tooltip
svg.select("g.hoverzone")
.selectAll("rect")
.data(bins)
.data(hoverData)
.join("rect")
.attr("x", (d: any) => x(d.x0)!)
.attr("y", () => y(yMax!)!)
.attr("width", barWidth)
.attr("height", () => y(0)! - y(yMax!)!)
.on("mousemove", (event: MouseEvent, d) => {
const idx = 0; // TODO
.attr("x", ([bin]) => x(bin.x0!))
.attr("y", () => y(yMax))
.attr("width", ([bin]) => barWidth(bin))
.attr("height", () => y(0) - y(yMax))
.on("mousemove", (event: MouseEvent, [bin, area]): void => {
const [x, y] = pointer(event);
showTooltip(tooltipText(d as any /* TODO */, areaData[idx + 1]), x, y);
showTooltip(tooltipText(bin as any, area), x, y);
})
.on("mouseout", hideTooltip);