Mercurial > gemma

changeset 3212:f87fd173f750

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagrams: fixed tooltip bug Bug was caused by selecting elements by css class instead of id (when multiple diagrams are displayed).
author Markus Kottlaender <markus@intevation.de>
date Thu, 09 May 2019 10:34:09 +0200
parents f76927849ef8
children b3a1ecdda797
files client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue
diffstat 2 files changed, 4 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue	Thu May 09 10:08:49 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Thu May 09 10:34:09 2019 +0200
@@ -493,6 +493,7 @@
       // create rectanlge on the main chart area to capture mouse events
       const eventRect = this.svg
         .append("rect")
+        .attr("id", "zoom-hydrocond")
         .attr("class", "zoom")
         .attr("width", this.dimensions.width)
         .attr("height", this.dimensions.mainHeight)
@@ -933,7 +934,7 @@
         .on("mousemove", () => {
           // find data point closest to mouse
           const x0 = this.scale.x.invert(
-              d3.mouse(document.querySelector(".zoom"))[0]
+              d3.mouse(document.getElementById("zoom-hydrocond"))[0]
             ),
             i = d3.bisector(d => d.date).left(this.longtermWaterlevels, x0, 1),
             d0 = this.longtermWaterlevels[i - 1],
--- a/client/src/components/gauge/Waterlevel.vue	Thu May 09 10:08:49 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu May 09 10:34:09 2019 +0200
@@ -516,6 +516,7 @@
       // create rectanlge on the main chart area to capture mouse events
       const eventRect = this.svg
         .append("rect")
+        .attr("id", "zoom-waterlevels")
         .attr("class", "zoom")
         .attr("width", this.dimensions.width)
         .attr("height", this.dimensions.mainHeight)
@@ -1041,7 +1042,7 @@
         .on("mousemove", () => {
           // find data point closest to mouse
           const x0 = this.scale.x.invert(
-              d3.mouse(document.querySelector(".zoom"))[0]
+              d3.mouse(document.getElementById("zoom-waterlevels"))[0]
             ),
             i = d3.bisector(d => d.date).left(this.waterlevels, x0, 1),
             d0 = this.waterlevels[i - 1],