Mercurial > gemma

changeset 2691:023a607c4bcc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 ef59a4255670
children 966c94e699fa
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 11 insertions(+), 11 deletions(-) [+]
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})`