Mercurial > gemma

changeset 2689:8f919fe629f9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
author Markus Kottlaender <markus@intevation.de>
date Fri, 15 Mar 2019 16:41:16 +0100
parents d316a6e41f54
children ef59a4255670
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 90 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Fri Mar 15 16:35:08 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Mar 15 16:41:16 2019 +0100
@@ -49,6 +49,20 @@
       .handle
         stroke: rgba($color-info, 0.5)
         fill: rgba($color-info, 0.5)
+
+    .chart-dots
+      clip-path: url(#clip)
+      .chart-dot
+        fill: steelblue
+        stroke: steelblue
+        pointer-events: none
+    .chart-tooltip
+      rect
+        fill: #fff
+        stroke: #ccc
+      text
+        fill: #666
+        font-size: 12px
 </style>
 
 <script>
@@ -352,6 +366,14 @@
           navChart
             .select(".brush")
             .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);
         });
 
       navChart
@@ -360,13 +382,80 @@
         .call(brush)
         .call(brush.move, x.range());
 
-      svg
+      let zoomRect = svg
         .append("rect")
         .attr("class", "zoom")
         .attr("width", width)
         .attr("height", mainHeight)
         .attr("transform", `translate(${mainMargin.left}, ${mainMargin.top})`)
         .call(zoom);
+
+      // TOOLTIPS
+
+      let dots = mainChart.append("g").attr("class", "chart-dots");
+      dots
+        .append("circle")
+        .attr("class", "chart-dot")
+        .attr("r", 4);
+      let tooltips = mainChart.append("g").attr("class", "chart-tooltip");
+      tooltips
+        .append("rect")
+        .attr("x", -25)
+        .attr("y", -25)
+        .attr("rx", 4)
+        .attr("ry", 4)
+        .attr("width", 105)
+        .attr("height", 40);
+      let tooltipText = tooltips.append("text");
+      tooltipText
+        .append("tspan")
+        .attr("x", -15)
+        .attr("y", -8);
+      tooltipText
+        .append("tspan")
+        .attr("x", 8)
+        .attr("y", 7)
+        .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);
+        })
+        .on("mouseout", () => {
+          svg.select(".chart-dot").style("display", "none");
+          svg.select(".chart-tooltip").style("display", "none");
+        })
+        .on("mousemove", () => {
+          let x0 = x.invert(d3.mouse(document.querySelector(".zoom"))[0]),
+            i = bisectDate(this.waterlevels, x0, 1),
+            d0 = this.waterlevels[i - 1],
+            d1 = this.waterlevels[i],
+            d = x0 - d0.date > d1.date - x0 ? d1 : d0;
+
+          svg
+            .select(".chart-dot")
+            .attr("transform", `translate(${x(d.date)}, ${y(d.waterlevel)})`);
+          svg
+            .select(".chart-tooltip")
+            .attr(
+              "transform",
+              `translate(${x(d.date) - 25}, ${y(d.waterlevel) - 25})`
+            );
+          svg.select(".chart-tooltip text tspan:first-child").text(
+            d.date.toLocaleString([], {
+              year: "2-digit",
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit"
+            })
+          );
+          svg
+            .select(".chart-tooltip text tspan:last-child")
+            .text(d.waterlevel + " cm");
+        });
     }
   },
   created() {