--- a/client/src/components/gauge/Waterlevel.vue	Thu Aug 01 12:48:33 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Aug 02 13:30:29 2019 +0200
@@ -106,7 +106,7 @@
 import { endOfDay } from "date-fns";
 import debounce from "debounce";
 import { saveAs } from "file-saver";
-import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
+import { diagram, pdfgen, templateLoader, refwaterlevels } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
@@ -116,7 +116,7 @@
 const d3 = Object.assign(d3Base, { lineChunked });
 
 export default {
-  mixins: [diagram, pdfgen, templateLoader],
+  mixins: [diagram, pdfgen, templateLoader, refwaterlevels],
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
   },
@@ -465,6 +465,7 @@
         .attr("clip-path", "url(#waterlevel-clip)");
       svg.selectAll(".hdc-line").attr("stroke", "red");
       svg.selectAll(".ldc-line").attr("stroke", "green");
+
       svg.selectAll(".mw-line").attr("stroke", "rgb(128,128,128)");
       svg.selectAll(".rn-line").attr("stroke", "rgb(128,128,128)");
       svg
@@ -559,32 +560,29 @@
         .style("font-size", "0.8em");
     },
     getExtent(refWaterLevels) {
+      let rest;
+      if (refWaterLevels) {
+        // set min/max values for the waterlevel axis
+        // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
+        const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
+        rest = [
+          {
+            waterlevel: HDC + (HDC - LDC) / 8
+          },
+          {
+            waterlevel: Math.max(LDC - (HDC - LDC) / 4, 0)
+          }
+        ];
+      } else {
+        rest = [];
+      }
       return {
         // set min/max values for the date axis
         date: [
           this.waterlevels[0].date,
           endOfDay(this.waterlevels[this.waterlevels.length - 1].date)
         ],
-        // set min/max values for the waterlevel axis
-        // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
-        waterlevel: d3.extent(
-          [
-            ...this.waterlevels,
-            {
-              waterlevel:
-                refWaterLevels.HDC +
-                (refWaterLevels.HDC - refWaterLevels.LDC) / 8
-            },
-            {
-              waterlevel: Math.max(
-                refWaterLevels.LDC -
-                  (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
-                0
-              )
-            }
-          ],
-          d => d.waterlevel
-        )
+        waterlevel: d3.extent([...this.waterlevels, ...rest], d => d.waterlevel)
       };
     },
     getScale({ dimensions, extent }) {
@@ -593,10 +591,11 @@
       const y = d3.scaleLinear().range([dimensions.mainHeight, 0]);
       const x2 = d3.scaleTime().range([0, dimensions.width]);
       const y2 = d3.scaleLinear().range([dimensions.navHeight, 0]);
-
+      const [lo, hi] = extent.waterlevel;
       // setting the min and max values for the diagram axes
+      const dy = Math.ceil(0.15 * (hi - lo));
       x.domain(d3.extent(extent.date));
-      y.domain(extent.waterlevel);
+      y.domain([lo - dy, hi + dy]);
       x2.domain(x.domain());
       y2.domain(y.domain());
 
@@ -701,6 +700,8 @@
         .call(lineChunked);
     },
     drawNowLines({ scale, extent, diagram, navigation }) {
+      const [lo, hi] = extent.waterlevel;
+      const dy = Math.ceil(0.15 * (hi - lo));
       const nowLine = d3
         .line()
         .x(d => scale.x(d.x))
@@ -709,9 +710,7 @@
       const nowLabel = selection => {
         selection.attr(
           "transform",
-          `translate(${scale.x(new Date())}, ${scale.y(
-            extent.waterlevel[1] - 16
-          )})`
+          `translate(${scale.x(new Date())}, ${scale.y(hi + dy * 0.4)})`
         );
       };
 
@@ -719,8 +718,8 @@
       diagram
         .append("path")
         .datum([
-          { x: new Date(), y: extent.waterlevel[0] },
-          { x: new Date(), y: extent.waterlevel[1] - 20 }
+          { x: new Date(), y: lo - dy },
+          { x: new Date(), y: hi + dy * 0.4 }
         ])
         .attr("class", "now-line")
         .attr("d", nowLine);
@@ -734,10 +733,7 @@
       // draw in nav
       navigation
         .append("path")
-        .datum([
-          { x: new Date(), y: extent.waterlevel[0] },
-          { x: new Date(), y: extent.waterlevel[1] - 20 }
-        ])
+        .datum([{ x: new Date(), y: hi + dy }, { x: new Date(), y: lo - dy }])
         .attr("class", "now-line")
         .attr(
           "d",
@@ -778,23 +774,31 @@
       };
     },
     drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) {
-      // filling area between HDC and LDC
-      diagram
-        .append("rect")
-        .attr("class", "hdc-ldc-area")
-        .attr("x", 0)
-        .attr("y", scale.y(refWaterLevels.HDC))
-        .attr("width", dimensions.width)
-        .attr(
-          "height",
-          scale.y(refWaterLevels.LDC) - scale.y(refWaterLevels.HDC)
-        );
+      if (refWaterLevels) {
+        const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
+        // filling area between HDC and LDC if both of them are available
+        if (LDC && HDC) {
+          diagram
+            .append("rect")
+            .attr("class", "hdc-ldc-area")
+            .attr("x", 0)
+            .attr("y", scale.y(HDC))
+            .attr("width", dimensions.width)
+            .attr("height", refWaterLevels ? scale.y(LDC) - scale.y(HDC) : 0);
+        }
+      }
 
       const refWaterlevelLine = d3
         .line()
         .x(d => scale.x(d.x))
         .y(d => scale.y(d.y));
 
+      const levelStyle = name => {
+        if (/HDC/.test(name)) return "hdc-line";
+        if (/LDC/.test(name)) return "ldc-line";
+        return `${name.toLowerCase()}-line`;
+      };
+
       for (let ref in refWaterLevels) {
         if (refWaterLevels[ref]) {
           diagram
@@ -803,7 +807,7 @@
               { x: 0, y: refWaterLevels[ref] },
               { x: extent.date[1], y: refWaterLevels[ref] }
             ])
-            .attr("class", ref.toLowerCase() + "-line")
+            .attr("class", levelStyle(ref))
             .attr("d", refWaterlevelLine);
           diagram // label
             .append("rect")
@@ -955,6 +959,7 @@
         .attr("class", "chart-dots")
         .append("circle")
         .attr("class", "chart-dot")
+        .attr("opacity", 0)
         .attr("r", 4);
 
       // create container for the tooltip