Fix up histogram code to correctly hide tooltip again

This commit is contained in:
Henrik Giesel 2021-01-08 14:22:20 +01:00
parent 740dcedbe6
commit fd58f73f13
2 changed files with 16 additions and 15 deletions

View file

@ -197,3 +197,7 @@
.no-focus-outline:focus {
outline: 0;
}
.clickable {
cursor: pointer;
}

View file

@ -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) })
});
}
}