Mercurial > gemma

changeset 3348:7bb6c921cf91

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: improved nash sutcliffe display Values/labels will always be displayed now. The boxes indicating the time period are only displayed if applicable. If the chart extent is > 90 days the boxes are hidden.
author Markus Kottlaender <markus@intevation.de>
date Tue, 21 May 2019 12:13:16 +0200
parents cd745be63f71
children ac0006f675c0
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 31 insertions(+), 23 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Tue May 21 11:48:15 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Tue May 21 12:13:16 2019 +0200
@@ -593,7 +593,7 @@
       this.svg
         .selectAll("path.nash-sutcliffe")
         .attr("fill", "none")
-        .attr("stroke", "black")
+        .attr("stroke", "darkgrey")
         .attr("stroke-width", 1)
         .attr("clip-path", "url(#waterlevel-clip)");
       this.svg
@@ -603,8 +603,7 @@
         .selectAll("text.nash-sutcliffe")
         .style("font-size", "10px")
         .attr("clip-path", "url(#waterlevel-clip)")
-        .selectAll("tspan:last-child")
-        .style("font-size", "9px")
+        .selectAll("tspan:last-child, tspan:first-child")
         .attr("fill", "#555");
       this.svg
         .selectAll(".tick line")
@@ -925,6 +924,16 @@
       const dateStart = new Date(dateNow.getTime() - hours * 60 * 60 * 1000);
 
       const nashSutcliffeBox = hours => {
+        // show/hide boxes depending on scale of chart (hide if > 90 days)
+        this.diagram
+          .selectAll("path.nash-sutcliffe")
+          .attr(
+            "stroke-opacity",
+            this.scale.x.domain()[1] - this.scale.x.domain()[0] > 90 * 86400000
+              ? 0
+              : 1
+          );
+
         return d3
           .area()
           .x(d => this.scale.x(d))
@@ -935,17 +944,11 @@
       const nashSutcliffeLabel = (label, date, hours) => {
         let days = hours / 24;
         label
-          .attr("x", this.scale.x(date) + 3)
+          .attr("x", Math.min(this.scale.x(date), this.dimensions.width) - 4)
           .attr("y", this.dimensions.mainHeight - (15 * days + 0.5) + 12);
       };
 
-      // Show nash-sutcliffe only when x-axis extent is smaller than 35 days
-      // (3024000000 ms). Since it shows squares representing 1, 2 and 3 days
-      // it does not make sense to show them on a x-axis with hundres of days.
-      if (
-        coeff.samples &&
-        this.scale.x.domain()[1] - this.scale.x.domain()[0] < 3024000000
-      ) {
+      if (coeff.samples) {
         this.diagram
           .append("path")
           .datum([dateStart, dateNow])
@@ -954,25 +957,30 @@
         this.diagram
           .append("text")
           .attr("class", "nash-sutcliffe ns" + hours)
-          .call(nashSutcliffeLabel, dateStart, hours)
+          .attr("text-anchor", "end")
+          .call(nashSutcliffeLabel, dateNow, hours)
+          .append("tspan")
+          .text(hours + "h: ")
+          .select(function() {
+            return this.parentNode;
+          })
           .append("tspan")
           .text(coeff.value.toFixed(2))
           .select(function() {
             return this.parentNode;
           })
           .append("tspan")
-          .text(` (${coeff.samples})`)
-          .attr("dy", -1);
+          .text(` (${coeff.samples})`);
+      }
 
-        return () => {
-          this.diagram
-            .select("path.nash-sutcliffe.ns" + hours)
-            .attr("d", nashSutcliffeBox(hours));
-          this.diagram
-            .select("text.nash-sutcliffe.ns" + hours)
-            .call(nashSutcliffeLabel, dateStart, hours);
-        };
-      }
+      return () => {
+        this.diagram
+          .select("path.nash-sutcliffe.ns" + hours)
+          .attr("d", nashSutcliffeBox(hours));
+        this.diagram
+          .select("text.nash-sutcliffe.ns" + hours)
+          .call(nashSutcliffeLabel, dateNow, hours);
+      };
     },
     createZoom(updaters, eventRect) {
       const brush = d3