# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1561050986 -7200
# Node ID be939dcdfdfd1f3eb69b1edf47ced9d6d416df54
# Parent  18777f6df3efa0782b3da130b72a5bdef6cdce5c
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.

diff -r 18777f6df3ef -r be939dcdfdfd client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Thu Jun 20 18:42:52 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Thu Jun 20 19:16:26 2019 +0200
@@ -543,6 +543,7 @@
       updaters.push(this.drawWaterlevelLineChart("q75"));
       updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels));
       updaters.push(this.drawNowLines());
+
       if (refWaterLevels) {
         this.drawRefLines(refWaterLevels); // static, doesn't need an updater
       }
@@ -750,6 +751,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))
@@ -757,7 +763,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]
           )})`
         );
@@ -766,10 +772,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
@@ -782,10 +785,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",
diff -r 18777f6df3ef -r be939dcdfdfd client/src/components/gauge/Waterlevel.vue
--- 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",