Mercurial > gemma
changeset 3901:fe0d62727c41
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")