# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1558427587 -7200
# Node ID 83210507aaca6e1a7b8125429a311bf47e1c64dd
# Parent  954f8b751fb0147d9b698fe51d8d0ef8430f364e
client: waterlevel diagram: improved readability of nash sutcliffe

diff -r 954f8b751fb0 -r 83210507aaca client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Tue May 21 10:12:17 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Tue May 21 10:33:07 2019 +0200
@@ -501,19 +501,20 @@
       // updater functions are used by the zoom feature to rescale all elements.
       const updaters = [];
 
-      // draw
+      // draw (order matters)
       updaters.push(this.drawAxes());
       updaters.push(this.drawWaterlevelChart());
       updaters.push(this.drawPredictionAreas());
-      updaters.push(this.drawNashSutcliffe(24));
-      updaters.push(this.drawNashSutcliffe(48));
-      updaters.push(this.drawNashSutcliffe(72));
       updaters.push(this.drawNowLines());
 
       // static, don't need updater
       this.drawNavigationChart();
       this.drawRefLines(refWaterLevels);
 
+      updaters.push(this.drawNashSutcliffe(72));
+      updaters.push(this.drawNashSutcliffe(48));
+      updaters.push(this.drawNashSutcliffe(24));
+
       // INTERACTIONS
 
       // create rectanlge on the main chart area to capture mouse events
@@ -597,14 +598,14 @@
         .attr("clip-path", "url(#waterlevel-clip)");
       this.svg
         .selectAll("path.nash-sutcliffe.ns72")
-        .attr("fill", "rgba(0, 0, 0, 0.05)");
+        .attr("fill", "rgba(255, 255, 255, 0.5)");
       this.svg
         .selectAll("text.nash-sutcliffe")
         .style("font-size", "10px")
         .attr("clip-path", "url(#waterlevel-clip)")
         .selectAll("tspan:last-child")
         .style("font-size", "9px")
-        .attr("fill", "#777");
+        .attr("fill", "#555");
       this.svg
         .selectAll(".tick line")
         .attr("stroke-dasharray", 5)