From 58950452e409d0a01cc33d6260ea22074b791243 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Thu, 7 Jan 2021 12:22:50 +0100 Subject: [PATCH] Add search to added graph --- ts/graphs/AddedGraph.svelte | 2 +- ts/graphs/HistogramGraph.svelte | 5 ++++- ts/graphs/added.ts | 18 +++++++++++++++++- ts/graphs/histogram-graph.ts | 20 ++++++++++++++++++-- 4 files changed, 40 insertions(+), 5 deletions(-) diff --git a/ts/graphs/AddedGraph.svelte b/ts/graphs/AddedGraph.svelte index 7d9485611..5ff7af8b9 100644 --- a/ts/graphs/AddedGraph.svelte +++ b/ts/graphs/AddedGraph.svelte @@ -39,7 +39,7 @@ - + diff --git a/ts/graphs/HistogramGraph.svelte b/ts/graphs/HistogramGraph.svelte index d178d33af..86347ad58 100644 --- a/ts/graphs/HistogramGraph.svelte +++ b/ts/graphs/HistogramGraph.svelte @@ -1,4 +1,5 @@ diff --git a/ts/graphs/added.ts b/ts/graphs/added.ts index 74caf2206..0e9b8f2fe 100644 --- a/ts/graphs/added.ts +++ b/ts/graphs/added.ts @@ -102,8 +102,24 @@ export function buildHistogram( return `${day}:
${cards}
${total}: ${totalCards}`; } + function makeQuery( + data: HistogramData, + binIdx: number, + ): string { + const start = Math.abs(data.bins[binIdx].x0!) + 1; + const include = `added:${start}` + + if (start === 1) { + return include + } + + const end = Math.abs(data.bins[binIdx].x1!) + 1; + const exclude = `-added:${end}` + return `${include} ${exclude}` + } + return [ - { scale, bins, total: totalInPeriod, hoverText, colourScale, showArea: true }, + { scale, bins, total: totalInPeriod, hoverText, makeQuery, colourScale, showArea: true }, tableData, ]; } diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts index aa067c66a..5f995f9d4 100644 --- a/ts/graphs/histogram-graph.ts +++ b/ts/graphs/histogram-graph.ts @@ -25,6 +25,10 @@ export interface HistogramData { cumulative: number, percent: number ) => string; + makeQuery?: ( + data: HistogramData, + binIdx: number, + ) => string; showArea: boolean; colourScale: ScaleSequential; binValue?: (bin: Bin) => number; @@ -34,7 +38,8 @@ export interface HistogramData { export function histogramGraph( svgElem: SVGElement, bounds: GraphBounds, - data: HistogramData | null + data: HistogramData | null, + dispatch: any, ): void { const svg = select(svgElem); const trans = svg.transition().duration(600) as any; @@ -152,10 +157,21 @@ export function histogramGraph( .attr("y", () => y(yMax!)!) .attr("width", barWidth) .attr("height", () => y(0)! - y(yMax!)!) + .on("mouseover", function (this: any) { + this.style = "cursor: pointer;"; + }) .on("mousemove", function (this: any, d: any, idx) { const [x, y] = mouse(document.body); 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", function (this: any) { + hideTooltip; + this.style = ""; + }) + .on('click', function(this: any, d: any, idx: number) { + console.log('clicked', this) + if (!data.makeQuery) { return } + dispatch("search", { query: data.makeQuery(data, idx) }) + }); }