diff --git a/ts/graphs/graphs.scss b/ts/graphs/graphs.scss index 75c4eddf7..bd2aa4615 100644 --- a/ts/graphs/graphs.scss +++ b/ts/graphs/graphs.scss @@ -197,3 +197,7 @@ .no-focus-outline:focus { outline: 0; } + +.clickable { + cursor: pointer; +} diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts index 5f995f9d4..8a4b90d90 100644 --- a/ts/graphs/histogram-graph.ts +++ b/ts/graphs/histogram-graph.ts @@ -136,7 +136,7 @@ export function histogramGraph( "d", area() .curve(curveBasis) - .x((d, idx) => { + .x((_d, idx) => { if (idx === 0) { return x(data.bins[0].x0!)!; } else { @@ -149,7 +149,7 @@ export function histogramGraph( } // hover/tooltip - svg.select("g.hoverzone") + const hoverzone = svg.select("g.hoverzone") .selectAll("rect") .data(data.bins) .join("rect") @@ -157,21 +157,18 @@ 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) { + .on("mousemove", function (this: any, _d: any, idx: number) { 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", 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) }) - }); + .on("mouseout", hideTooltip); + + if (data.makeQuery) { + hoverzone + .attr("class", "clickable") + .on("click", function (this: any, _d: any, idx: number) { + dispatch("search", { query: data.makeQuery!(data, idx) }) + }); + } }