From 3c906977b9c8e4bbbb1f7cb6a1f00d0bd80f62c7 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sat, 30 Jan 2021 02:08:01 +0100 Subject: [PATCH] Make histogram show bars again --- ts/graphs/added.ts | 4 +--- ts/graphs/calendar.ts | 2 +- ts/graphs/ease.ts | 3 +-- ts/graphs/future-due.ts | 6 ++---- ts/graphs/histogram-graph.ts | 37 ++++++++++++++++++++---------------- ts/graphs/intervals.ts | 4 +--- ts/graphs/reviews.ts | 33 +++++++++++++++++++------------- 7 files changed, 47 insertions(+), 42 deletions(-) diff --git a/ts/graphs/added.ts b/ts/graphs/added.ts index 0584c7a56..62f9c0e60 100644 --- a/ts/graphs/added.ts +++ b/ts/graphs/added.ts @@ -109,12 +109,10 @@ export function buildHistogram( ]; function hoverText( - data: HistogramData, - binIdx: number, + bin: Bin, 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); diff --git a/ts/graphs/calendar.ts b/ts/graphs/calendar.ts index e770eae77..1afe66302 100644 --- a/ts/graphs/calendar.ts +++ b/ts/graphs/calendar.ts @@ -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}"` }); } diff --git a/ts/graphs/ease.ts b/ts/graphs/ease.ts index b4f81a887..09103ddf2 100644 --- a/ts/graphs/ease.ts +++ b/ts/graphs/ease.ts @@ -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, _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}%`; diff --git a/ts/graphs/future-due.ts b/ts/graphs/future-due.ts index 1b52b1b0f..a50bbb8d6 100644 --- a/ts/graphs/future-due.ts +++ b/ts/graphs/future-due.ts @@ -149,15 +149,13 @@ export function buildHistogram( const total = sum(bins as any, binValue); function hoverText( - data: HistogramData, - binIdx: number, + bin: Bin, 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); diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts index 74572f5e7..2ffedab8c 100644 --- a/ts/graphs/histogram-graph.ts +++ b/ts/graphs/histogram-graph.ts @@ -28,8 +28,7 @@ export interface HistogramData { bins: Bin[]; total: number; hoverText: ( - data: HistogramData, - binIdx: number, + bin: Bin, 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 { + 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 + ][] = data.bins.map((bin: Bin, 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) => { + .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) => d.length > 0) + .filter(([bin]: [Bin, number]) => bin.length > 0) .attr("class", "clickable") .on("click", data.onClick); } diff --git a/ts/graphs/intervals.ts b/ts/graphs/intervals.ts index 2f1647b78..7b3a26206 100644 --- a/ts/graphs/intervals.ts +++ b/ts/graphs/intervals.ts @@ -143,12 +143,10 @@ export function prepareIntervalData( ).domain([xMax!, xMin!]); function hoverText( - data: HistogramData, - binIdx: number, + bin: Bin, _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); diff --git a/ts/graphs/reviews.ts b/ts/graphs/reviews.ts index fcbac0295..b4119abf9 100644 --- a/ts/graphs/reviews.ts +++ b/ts/graphs/reviews.ts @@ -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 { + 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 + ][] = bins.map((bin: Bin, 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);