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( function hoverText(
data: HistogramData, bin: Bin<number, number>,
binIdx: number,
cumulative: number, cumulative: number,
_percent: number _percent: number
): string { ): string {
const bin = data.bins[binIdx];
const day = dayLabel(i18n, bin.x0!, bin.x1!); const day = dayLabel(i18n, bin.x0!, bin.x1!);
const cards = i18n.tr(i18n.TR.STATISTICS_CARDS, { cards: bin.length }); const cards = i18n.tr(i18n.TR.STATISTICS_CARDS, { cards: bin.length });
const total = i18n.tr(i18n.TR.STATISTICS_RUNNING_TOTAL); 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 => { .attr("class", (d: any): string => {
return d.count > 0 ? "clickable" : ""; return d.count > 0 ? "clickable" : "";
}) })
.on("click", function (this: any, d: any) { .on("click", function (_event: MouseEvent, d: any) {
if (d.count > 0) { if (d.count > 0) {
dispatch("search", { query: `"prop:rated=${d.day}"` }); 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]); const colourScale = scaleSequential(interpolateRdYlGn).domain([xMin, 300]);
function hoverText(data: HistogramData, binIdx: number, _percent: number): string { function hoverText(bin: Bin<number, number>, _percent: number): string {
const bin = data.bins[binIdx];
const minPct = Math.floor(bin.x0!); const minPct = Math.floor(bin.x0!);
const maxPct = Math.floor(bin.x1!); const maxPct = Math.floor(bin.x1!);
const percent = maxPct - minPct <= 10 ? `${bin.x0}%` : `${bin.x0}%-${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); const total = sum(bins as any, binValue);
function hoverText( function hoverText(
data: HistogramData, bin: Bin<number, number>,
binIdx: number,
cumulative: number, cumulative: number,
_percent: number _percent: number
): string { ): string {
const bin = data.bins[binIdx];
const days = dayLabel(i18n, bin.x0!, bin.x1!); const days = dayLabel(i18n, bin.x0!, bin.x1!);
const cards = i18n.tr(i18n.TR.STATISTICS_CARDS_DUE, { 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); 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>[]; bins: Bin<number, number>[];
total: number; total: number;
hoverText: ( hoverText: (
data: HistogramData, bin: Bin<number, number>,
binIdx: number,
cumulative: number, cumulative: number,
percent: number percent: number
) => string; ) => string;
@ -84,9 +83,9 @@ export function histogramGraph(
// x bars // x bars
function barWidth(d: any): number { function barWidth(d: Bin<number, number>): number {
const width = Math.max(0, x(d.x1)! - x(d.x0)! - 1); const width = Math.max(0, x(d.x1!) - x(d.x0!) - 1);
return width ? width : 0; return width ?? 0;
} }
const updateBar = (sel: any): any => { 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 // hover/tooltip
const hoverzone = svg const hoverzone = svg
.select("g.hoverzone") .select("g.hoverzone")
.selectAll("rect") .selectAll("rect")
.data(data.bins) .data(hoverData)
.join("rect") .join("rect")
.attr("x", (d: any) => x(d.x0)!) .attr("x", ([bin]) => x(bin.x0!))
.attr("y", () => y(yMax!)!) .attr("y", () => y(yMax))
.attr("width", barWidth) .attr("width", ([bin]) => barWidth(bin))
.attr("height", () => y(0)! - y(yMax!)!) .attr("height", () => y(0) - y(yMax))
.on("mousemove", (event: MouseEvent, _d: Bin<number, number>) => { .on("mousemove", (event: MouseEvent, [bin, area]) => {
const [x, y] = pointer(event); const [x, y] = pointer(event);
// TODO const pct = data.showArea ? (area / data.total) * 100 : 0;
const idx = 0; showTooltip(data.hoverText(bin, area, pct), x, y);
const pct = data.showArea ? (areaData[idx + 1] / data.total) * 100 : 0;
showTooltip(data.hoverText(data, idx, areaData[idx + 1], pct), x, y);
}) })
.on("mouseout", hideTooltip); .on("mouseout", hideTooltip);
if (data.onClick) { if (data.onClick) {
hoverzone hoverzone
.filter((d: Bin<number, number>) => d.length > 0) .filter(([bin]: [Bin<number, number>, number]) => bin.length > 0)
.attr("class", "clickable") .attr("class", "clickable")
.on("click", data.onClick); .on("click", data.onClick);
} }

4
ts/graphs/intervals.ts
View File

@ -143,12 +143,10 @@ export function prepareIntervalData(
).domain([xMax!, xMin!]); ).domain([xMax!, xMin!]);
function hoverText( function hoverText(
data: HistogramData, bin: Bin<number, number>,
binIdx: number,
_cumulative: number, _cumulative: number,
percent: number percent: number
): string { ): string {
const bin = data.bins[binIdx];
// const day = dayLabel(i18n, bin.x0!, bin.x1!); // const day = dayLabel(i18n, bin.x0!, bin.x1!);
const interval = intervalLabel(i18n, bin.x0!, bin.x1!, bin.length); const interval = intervalLabel(i18n, bin.x0!, bin.x1!, bin.length);
const total = i18n.tr(i18n.TR.STATISTICS_RUNNING_TOTAL); 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 // x bars
function barWidth(d: any): number { function barWidth(d: Bin<number, number>): number {
const width = Math.max(0, x(d.x1)! - x(d.x0)! - 1); const width = Math.max(0, x(d.x1!) - x(d.x0!) - 1);
return width ? width : 0; return width ?? 0;
} }
const cappedRange = scaleLinear().range([0.3, 0.5]); const cappedRange = scaleLinear().range([0.3, 0.5]);
@ -346,7 +346,7 @@ export function renderReviews(
"d", "d",
area() area()
.curve(curveBasis) .curve(curveBasis)
.x((d, idx) => { .x((_d: [number, number], idx: number) => {
if (idx === 0) { if (idx === 0) {
return x(bins[0].x0!)!; return x(bins[0].x0!)!;
} else { } 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") svg.select("g.hoverzone")
.selectAll("rect") .selectAll("rect")
.data(bins) .data(hoverData)
.join("rect") .join("rect")
.attr("x", (d: any) => x(d.x0)!) .attr("x", ([bin]) => x(bin.x0!))
.attr("y", () => y(yMax!)!) .attr("y", () => y(yMax))
.attr("width", barWidth) .attr("width", ([bin]) => barWidth(bin))
.attr("height", () => y(0)! - y(yMax!)!) .attr("height", () => y(0) - y(yMax))
.on("mousemove", (event: MouseEvent, d) => { .on("mousemove", (event: MouseEvent, [bin, area]): void => {
const idx = 0; // TODO
const [x, y] = pointer(event); 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); .on("mouseout", hideTooltip);