# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1557386854 -7200
# Node ID 5b8916b78ceab99f46c6b98df8d2e924df122ce0
# Parent  3bba82bcb6a6a3bcdf1314b6fbaaac67fce0f8c2
client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option

diff -r 3bba82bcb6a6 -r 5b8916b78cea client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Wed May 08 17:53:08 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Thu May 09 09:27:34 2019 +0200
@@ -524,13 +524,14 @@
         .attr("stroke", "none")
         .attr("fill", "lightsteelblue");
       this.svg
-        .selectAll(".hdc-line, .ldc-line, .mw-line")
+        .selectAll(".hdc-line, .ldc-line, .mw-line, .rn-line")
         .attr("stroke-width", 1)
         .attr("fill", "none")
         .attr("clip-path", "url(#hydrocond-clip)");
       this.svg.selectAll(".hdc-line").attr("stroke", "red");
       this.svg.selectAll(".ldc-line").attr("stroke", "green");
       this.svg.selectAll(".mw-line").attr("stroke", "grey");
+      this.svg.selectAll(".rn-line").attr("stroke", "grey");
       this.svg
         .selectAll(".ref-waterlevel-label")
         .style("font-size", "11px")
@@ -812,50 +813,73 @@
         .y(d => this.scale.y(d.y));
 
       // HDC
-      this.diagram
-        .append("path")
-        .datum([
-          { x: 0, y: refWaterLevels.HDC },
-          { x: this.extent.date[1], y: refWaterLevels.HDC }
-        ])
-        .attr("class", "hdc-line")
-        .attr("d", refWaterlevelLine);
-      this.diagram // label
-        .append("text")
-        .text(`HDC (${refWaterLevels.HDC})`)
-        .attr("class", "ref-waterlevel-label")
-        .attr("x", 5)
-        .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
+      if (refWaterLevels.HDC) {
+        this.diagram
+          .append("path")
+          .datum([
+            { x: 0, y: refWaterLevels.HDC },
+            { x: this.extent.date[1], y: refWaterLevels.HDC }
+          ])
+          .attr("class", "hdc-line")
+          .attr("d", refWaterlevelLine);
+        this.diagram // label
+          .append("text")
+          .text(`HDC (${refWaterLevels.HDC})`)
+          .attr("class", "ref-waterlevel-label")
+          .attr("x", 5)
+          .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
+      }
       // LDC
-      this.diagram
-        .append("path")
-        .datum([
-          { x: 0, y: refWaterLevels.LDC },
-          { x: this.extent.date[1], y: refWaterLevels.LDC }
-        ])
-        .attr("class", "ldc-line")
-        .attr("d", refWaterlevelLine);
-      this.diagram // label
-        .append("text")
-        .text(`LDC (${refWaterLevels.LDC})`)
-        .attr("class", "ref-waterlevel-label")
-        .attr("x", 5)
-        .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
+      if (refWaterLevels.LDC) {
+        this.diagram
+          .append("path")
+          .datum([
+            { x: 0, y: refWaterLevels.LDC },
+            { x: this.extent.date[1], y: refWaterLevels.LDC }
+          ])
+          .attr("class", "ldc-line")
+          .attr("d", refWaterlevelLine);
+        this.diagram // label
+          .append("text")
+          .text(`LDC (${refWaterLevels.LDC})`)
+          .attr("class", "ref-waterlevel-label")
+          .attr("x", 5)
+          .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
+      }
       // MW
-      this.diagram
-        .append("path")
-        .datum([
-          { x: 0, y: refWaterLevels.MW },
-          { x: this.extent.date[1], y: refWaterLevels.MW }
-        ])
-        .attr("class", "mw-line")
-        .attr("d", refWaterlevelLine);
-      this.diagram // label
-        .append("text")
-        .text(`MW (${refWaterLevels.MW})`)
-        .attr("class", "ref-waterlevel-label")
-        .attr("x", 5)
-        .attr("y", this.scale.y(refWaterLevels.MW) - 3);
+      if (refWaterLevels.MW) {
+        this.diagram
+          .append("path")
+          .datum([
+            { x: 0, y: refWaterLevels.MW },
+            { x: this.extent.date[1], y: refWaterLevels.MW }
+          ])
+          .attr("class", "mw-line")
+          .attr("d", refWaterlevelLine);
+        this.diagram // label
+          .append("text")
+          .text(`MW (${refWaterLevels.MW})`)
+          .attr("class", "ref-waterlevel-label")
+          .attr("x", 5)
+          .attr("y", this.scale.y(refWaterLevels.MW) - 3);
+      }
+      // RN
+      if (refWaterLevels.RN) {
+        this.diagram
+          .append("path")
+          .datum([
+            { x: 0, y: refWaterLevels.RN },
+            { x: this.extent.date[1], y: refWaterLevels.RN }
+          ])
+          .attr("class", "rn-line")
+          .attr("d", refWaterlevelLine);
+        this.diagram // label
+          .append("text")
+          .text(`RN (${refWaterLevels.RN})`)
+          .attr("class", "ref-waterlevel-label")
+          .attr("x", 5)
+          .attr("y", this.scale.y(refWaterLevels.RN) - 3);
+      }
     },
     createZoom(updaters, eventRect) {
       const brush = d3
diff -r 3bba82bcb6a6 -r 5b8916b78cea client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Wed May 08 17:53:08 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu May 09 09:27:34 2019 +0200
@@ -554,13 +554,14 @@
         .attr("fill-opacity", 0.6);
 
       this.svg
-        .selectAll(".hdc-line, .mw-line, .ldc-line")
+        .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line")
         .attr("stroke-width", 1)
         .attr("fill", "none")
         .attr("clip-path", "url(#waterlevel-clip)");
       this.svg.selectAll(".hdc-line").attr("stroke", "red");
       this.svg.selectAll(".ldc-line").attr("stroke", "green");
       this.svg.selectAll(".mw-line").attr("stroke", "grey");
+      this.svg.selectAll(".rn-line").attr("stroke", "grey");
       this.svg
         .selectAll(".ref-waterlevel-label")
         .style("font-size", "11px")
@@ -865,50 +866,73 @@
         .y(d => this.scale.y(d.y));
 
       // HDC
-      this.diagram
-        .append("path")
-        .datum([
-          { x: 0, y: refWaterLevels.HDC },
-          { x: this.extent.date[1], y: refWaterLevels.HDC }
-        ])
-        .attr("class", "hdc-line")
-        .attr("d", refWaterlevelLine);
-      this.diagram // label
-        .append("text")
-        .text(`HDC (${refWaterLevels.HDC})`)
-        .attr("class", "ref-waterlevel-label")
-        .attr("x", 5)
-        .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
+      if (refWaterLevels.HDC) {
+        this.diagram
+          .append("path")
+          .datum([
+            { x: 0, y: refWaterLevels.HDC },
+            { x: this.extent.date[1], y: refWaterLevels.HDC }
+          ])
+          .attr("class", "hdc-line")
+          .attr("d", refWaterlevelLine);
+        this.diagram // label
+          .append("text")
+          .text(`HDC (${refWaterLevels.HDC})`)
+          .attr("class", "ref-waterlevel-label")
+          .attr("x", 5)
+          .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
+      }
       // LDC
-      this.diagram
-        .append("path")
-        .datum([
-          { x: 0, y: refWaterLevels.LDC },
-          { x: this.extent.date[1], y: refWaterLevels.LDC }
-        ])
-        .attr("class", "ldc-line")
-        .attr("d", refWaterlevelLine);
-      this.diagram // label
-        .append("text")
-        .text(`LDC (${refWaterLevels.LDC})`)
-        .attr("class", "ref-waterlevel-label")
-        .attr("x", 5)
-        .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
+      if (refWaterLevels.LDC) {
+        this.diagram
+          .append("path")
+          .datum([
+            { x: 0, y: refWaterLevels.LDC },
+            { x: this.extent.date[1], y: refWaterLevels.LDC }
+          ])
+          .attr("class", "ldc-line")
+          .attr("d", refWaterlevelLine);
+        this.diagram // label
+          .append("text")
+          .text(`LDC (${refWaterLevels.LDC})`)
+          .attr("class", "ref-waterlevel-label")
+          .attr("x", 5)
+          .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
+      }
       // MW
-      this.diagram
-        .append("path")
-        .datum([
-          { x: 0, y: refWaterLevels.MW },
-          { x: this.extent.date[1], y: refWaterLevels.MW }
-        ])
-        .attr("class", "mw-line")
-        .attr("d", refWaterlevelLine);
-      this.diagram // label
-        .append("text")
-        .text(`MW (${refWaterLevels.MW})`)
-        .attr("class", "ref-waterlevel-label")
-        .attr("x", 5)
-        .attr("y", this.scale.y(refWaterLevels.MW) - 3);
+      if (refWaterLevels.MW) {
+        this.diagram
+          .append("path")
+          .datum([
+            { x: 0, y: refWaterLevels.MW },
+            { x: this.extent.date[1], y: refWaterLevels.MW }
+          ])
+          .attr("class", "mw-line")
+          .attr("d", refWaterlevelLine);
+        this.diagram // label
+          .append("text")
+          .text(`MW (${refWaterLevels.MW})`)
+          .attr("class", "ref-waterlevel-label")
+          .attr("x", 5)
+          .attr("y", this.scale.y(refWaterLevels.MW) - 3);
+      }
+      // RN
+      if (refWaterLevels.RN) {
+        this.diagram
+          .append("path")
+          .datum([
+            { x: 0, y: refWaterLevels.RN },
+            { x: this.extent.date[1], y: refWaterLevels.RN }
+          ])
+          .attr("class", "rn-line")
+          .attr("d", refWaterlevelLine);
+        this.diagram // label
+          .append("text")
+          .text(`RN (${refWaterLevels.RN})`)
+          .attr("class", "ref-waterlevel-label")
+          .attr("x", 5)
+          .attr("y", this.scale.y(refWaterLevels.RN) - 3);
+      }
     },
     drawNashSutcliffe(hours) {
       const coeff = this.nashSutcliffe.coeffs.find(c => c.hours === hours);