# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1552570946 -3600
# Node ID 4ffae834276e9197c5b9fb9928151aa3b4590d57
# Parent  c52bf6f994c04220399704b8b8a1c594d78729d6
client: waterlevel diagram: added background grid to chart

diff -r c52bf6f994c0 -r 4ffae834276e client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Thu Mar 14 14:07:25 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Mar 14 14:42:26 2019 +0100
@@ -11,11 +11,6 @@
       fill: transparent
       clip-path: url(#clip)
 
-    .zoom
-      cursor: move
-      fill: none
-      pointer-events: all
-
     .hdc-line,
     .ldc-line,
     .mw-line
@@ -33,6 +28,16 @@
       fill: #999
     .hdc-ldc-area
       fill: rgba(0, 255, 0, 0.15)
+
+    .tick
+      line
+        stroke-dasharray: 5
+        stroke: #ccc
+
+    .zoom
+      cursor: move
+      fill: none
+      pointer-events: all
     .brush
       .selection
         stroke: transparent
@@ -127,9 +132,15 @@
       x2.domain(x.domain());
       y2.domain(y.domain());
       // creating the axes based on these scales
-      let xAxis = d3.axisBottom(x),
-        xAxis2 = d3.axisBottom(x2),
-        yAxis = d3.axisLeft(y);
+      let xAxis = d3
+        .axisTop(x)
+        .tickSizeInner(mainHeight)
+        .tickSizeOuter(0);
+      let xAxis2 = d3.axisBottom(x2);
+      let yAxis = d3
+        .axisRight(y)
+        .tickSizeInner(width)
+        .tickSizeOuter(0);
 
       // PREPARING CHART FUNCTIONS
 
@@ -171,13 +182,19 @@
       mainChart
         .append("g")
         .attr("transform", `translate(0, ${mainHeight})`)
-        .call(xAxis);
+        .call(xAxis)
+        .selectAll(".tick text")
+        .attr("y", 15);
       mainChart // label
         .append("text")
         .text(this.$gettext("Waterlevel [cm]"))
         .attr("text-anchor", "middle")
         .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`);
-      mainChart.append("g").call(yAxis);
+      mainChart
+        .append("g")
+        .call(yAxis)
+        .selectAll(".tick text")
+        .attr("x", -25);
 
       // reference waterlevels
       // filling area between HDC and LDC