# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1562768127 -7200
# Node ID 0149b68a4f7eb8631078dba5d507aee8fe98ec46
# Parent  fe0d62727c41be5a4bd4bde4f4fc5d9f139bb6f8
client: hydrological conditions diagram: added right y axis

diff -r fe0d62727c41 -r 0149b68a4f7e client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Wed Jul 10 16:08:55 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Wed Jul 10 16:15:27 2019 +0200
@@ -506,9 +506,10 @@
         .attr("fill", "#999")
         .style("font-size", "11px");
       svg
-        .selectAll(".tick line")
+        .selectAll(".axis--x .tick line, .axis--y .tick line")
         .attr("stroke-dasharray", 5)
         .attr("stroke", "#ccc");
+      svg.selectAll(".axis--y-right .tick line").attr("stroke", "transparent");
       svg.selectAll(".tick text").attr("fill", "black");
       svg.selectAll(".domain").attr("stroke", "black");
 
@@ -554,7 +555,7 @@
         .style("font-size", "0.8em");
     },
     getDimensions({ svgWidth, svgHeight }) {
-      const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
+      const mainMargin = { top: 20, right: 50, bottom: 110, left: 80 };
       const navMargin = {
         top: svgHeight - mainMargin.top - 65,
         right: 20,
@@ -639,6 +640,11 @@
           .tickSizeInner(dimensions.width)
           .tickSizeOuter(0)
           .tickFormat(d => this.$options.filters.waterlevel(d)),
+        yRight: d3
+          .axisRight(scale.y)
+          .tickSizeInner(3)
+          .tickSizeOuter(0)
+          .tickFormat(d => this.$options.filters.waterlevel(d)),
         x2: d3.axisBottom(scale.x2)
       };
     },
@@ -708,9 +714,16 @@
         );
       diagram
         .append("g")
+        .attr("class", "axis--y")
         .call(axes.y)
         .selectAll(".tick text")
         .attr("x", -25);
+      diagram
+        .append("g")
+        .attr("class", "axis--y-right")
+        .attr("transform", `translate(${dimensions.width})`)
+        .call(axes.yRight)
+        .selectAll(".tick text");
 
       navigation
         .append("g")