Mercurial > gemma

changeset 4294:c8b18408cc55

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 30 Aug 2019 16:11:15 +0200
parents dbd8d2416da7
children 0bb735a412af
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 9 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Fri Aug 30 13:36:18 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Aug 30 16:11:15 2019 +0200
@@ -831,14 +831,16 @@
       const dateNow = new Date(this.nashSutcliffe.when);
       const dateStart = new Date(dateNow.getTime() - hours * 60 * 60 * 1000);
 
-      const nashSutcliffeBox = hours => {
+      const nashSutcliffeBox = (hours, date) => {
         // show/hide boxes depending on scale of chart (hide if > 90 days)
         diagram
           .selectAll("path.nash-sutcliffe")
           .attr(
             "stroke-opacity",
             scale.x.domain()[1] - scale.x.domain()[0] > 90 * 86400000 ? 0 : 1
-          );
+          )
+          // show boxes only if now line in the selected time range
+          .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0);
         return d3
           .area()
           .x(d => scale.x(d))
@@ -859,7 +861,9 @@
             dimensions.mainHeight -
               (Math.floor(0.06 * dimensions.mainHeight) * days + 0.5) +
               12
-          );
+          )
+          // show label only if now line in the selected time range
+          .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0);
       };
 
       if (coeff.samples) {
@@ -867,7 +871,7 @@
           .append("path")
           .datum([dateStart, dateNow])
           .attr("class", "nash-sutcliffe ns" + hours)
-          .attr("d", nashSutcliffeBox(hours));
+          .attr("d", nashSutcliffeBox(hours, dateNow));
         diagram
           .append("text")
           .attr("class", "nash-sutcliffe ns" + hours)
@@ -890,7 +894,7 @@
       return () => {
         diagram
           .select("path.nash-sutcliffe.ns" + hours)
-          .attr("d", nashSutcliffeBox(hours));
+          .attr("d", nashSutcliffeBox(hours, dateNow));
         diagram
           .select("text.nash-sutcliffe.ns" + hours)
           .call(nashSutcliffeLabel, dateNow, hours);