changeset 3346:83210507aaca

client: waterlevel diagram: improved readability of nash sutcliffe
author Markus Kottlaender <markus@intevation.de>
date Tue, 21 May 2019 10:33:07 +0200
parents 954f8b751fb0
children cd745be63f71
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 7 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- 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)