Mercurial > gemma

changeset 3901:fe0d62727c41

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: added right y axis
author Markus Kottlaender <markus@intevation.de>
date Wed, 10 Jul 2019 16:08:55 +0200
parents 5a92597e9cd9
children 0149b68a4f7e
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 15 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Wed Jul 10 15:52:41 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Wed Jul 10 16:08:55 2019 +0200
@@ -388,6 +388,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)
       };
 
@@ -561,9 +566,10 @@
         .selectAll("tspan:last-child, tspan:first-child")
         .attr("fill", "#555");
       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");
       svg
@@ -608,7 +614,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,
@@ -683,9 +689,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")