# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1567176852 -7200
# Node ID 0bb735a412afbdfdc61c7fd0472c1e27866e1559
# Parent  c8b18408cc5576af03d243e67dd527f284c55201
client: fix drawing of Now label on Diagram (Waterlevels)

diff -r c8b18408cc55 -r 0bb735a412af client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Fri Aug 30 16:11:15 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Aug 30 16:54:12 2019 +0200
@@ -391,7 +391,9 @@
       if (this.hasPredictions) {
         updaters.push(this.drawPredictionAreas({ scale, diagram, navigation }));
       }
-      updaters.push(this.drawNowLines({ scale, extent, diagram, navigation }));
+      updaters.push(
+        this.drawNowLines({ scale, extent, diagram, navigation, dimensions })
+      );
 
       // static, don't need updater
       this.drawNavigationChart({ scale, navigation });
@@ -696,7 +698,7 @@
         .datum(this.waterlevels)
         .call(lineChunked);
     },
-    drawNowLines({ scale, extent, diagram, navigation }) {
+    drawNowLines({ scale, extent, diagram, navigation, dimensions }) {
       const [lo, hi] = extent.waterlevel;
       const dy = Math.ceil(0.15 * (hi - lo));
       const nowLine = d3
@@ -705,10 +707,18 @@
         .y(d => scale.y(d.y));
 
       const nowLabel = selection => {
-        selection.attr(
-          "transform",
-          `translate(${scale.x(new Date())}, ${scale.y(hi + dy * 0.4)})`
-        );
+        selection
+          .attr(
+            "transform",
+            `translate(${scale.x(new Date())}, ${scale.y(hi + dy * 0.4)})`
+          )
+          // hide Now label outside the diagram y-axises
+          .attr(
+            "opacity",
+            scale.x(new Date()) >= dimensions.width || scale.x(new Date()) <= 0
+              ? 0
+              : 1
+          );
       };
 
       // draw in main