changeset 4295:0bb735a412af

client: fix drawing of Now label on Diagram (Waterlevels)
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 30 Aug 2019 16:54:12 +0200
parents c8b18408cc55
children 95786a675d70
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 16 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- 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