diff client/src/components/gauge/Waterlevel.vue @ 3726:be939dcdfdfd

client: waterlevel diagrams: make now line label not update its position when zooming Of course the line and label could both be updated and move with the time but since all other data is static after generating the diagram once, a moving now line would be to fancy... but I was tempted.
author Markus Kottlaender <markus@intevation.de>
date Thu, 20 Jun 2019 19:16:26 +0200
parents 05bbd1a97567
children 2b6734a6730a
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Thu Jun 20 18:42:52 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Jun 20 19:16:26 2019 +0200
@@ -862,6 +862,11 @@
         );
     },
     drawNowLines() {
+      const now = new Date();
+      const nowCoords = [
+        { x: now, y: this.extent.waterlevel[0] },
+        { x: now, y: this.extent.waterlevel[1] }
+      ];
       const nowLine = d3
         .line()
         .x(d => this.scale.x(d.x))
@@ -869,7 +874,7 @@
       const nowLabel = selection => {
         selection.attr(
           "transform",
-          `translate(${this.scale.x(new Date())}, ${this.scale.y(
+          `translate(${this.scale.x(now)}, ${this.scale.y(
             this.extent.waterlevel[1]
           )})`
         );
@@ -878,10 +883,7 @@
       // draw in main
       this.diagram
         .append("path")
-        .datum([
-          { x: new Date(), y: this.extent.waterlevel[0] },
-          { x: new Date(), y: this.extent.waterlevel[1] }
-        ])
+        .datum(nowCoords)
         .attr("class", "now-line")
         .attr("d", nowLine);
       this.diagram // label
@@ -894,10 +896,7 @@
       // draw in nav
       this.navigation
         .append("path")
-        .datum([
-          { x: new Date(), y: this.extent.waterlevel[0] },
-          { x: new Date(), y: this.extent.waterlevel[1] }
-        ])
+        .datum(nowCoords)
         .attr("class", "now-line")
         .attr(
           "d",