Mercurial > gemma
diff client/src/components/gauge/Waterlevel.vue @ 2691:023a607c4bcc
client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
and added fade animation
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 15 Mar 2019 16:59:15 +0100 |
parents | 8f919fe629f9 |
children | 04b082a86d50 |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Fri Mar 15 16:45:34 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Fri Mar 15 16:59:15 2019 +0100 @@ -56,7 +56,9 @@ fill: steelblue stroke: steelblue pointer-events: none + transition: opacity 0.1s .chart-tooltip + transition: opacity 0.3s rect fill: #fff stroke: #ccc @@ -368,12 +370,8 @@ .call(brush.move, x.range().map(t.invertX, t)); }) .on("start", () => { - svg.select(".chart-dot").style("display", "none"); - svg.select(".chart-tooltip").style("display", "none"); - }) - .on("end", () => { - svg.select(".chart-dot").style("display", null); - svg.select(".chart-tooltip").style("display", null); + svg.select(".chart-dot").style("opacity", 0); + svg.select(".chart-tooltip").style("opacity", 0); }); navChart @@ -414,18 +412,18 @@ tooltipText .append("tspan") .attr("x", 8) - .attr("y", 7) + .attr("y", 8) .style("font-weight", "bold"); let bisectDate = d3.bisector(d => d.date).left; zoomRect .on("mouseover", () => { - svg.select(".chart-dot").style("display", null); - svg.select(".chart-tooltip").style("display", null); + svg.select(".chart-dot").style("opacity", 1); + svg.select(".chart-tooltip").style("opacity", 1); }) .on("mouseout", () => { - svg.select(".chart-dot").style("display", "none"); - svg.select(".chart-tooltip").style("display", "none"); + svg.select(".chart-dot").style("opacity", 0); + svg.select(".chart-tooltip").style("opacity", 0); }) .on("mousemove", () => { let x0 = x.invert(d3.mouse(document.querySelector(".zoom"))[0]), @@ -436,9 +434,11 @@ svg .select(".chart-dot") + .style("opacity", 1) .attr("transform", `translate(${x(d.date)}, ${y(d.waterlevel)})`); svg .select(".chart-tooltip") + .style("opacity", 1) .attr( "transform", `translate(${x(d.date) - 25}, ${y(d.waterlevel) - 25})`