Mercurial > gemma
changeset 3128:1610d3042bbb
fairway_availability: generative code fixed
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 29 Apr 2019 17:06:46 +0200 |
parents | 0374197c384f |
children | 136b86794453 |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 11 insertions(+), 22 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Mon Apr 29 16:05:14 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Mon Apr 29 17:06:46 2019 +0200 @@ -62,44 +62,33 @@ const paddingRight = 100; const paddingTop = 30; - const bars = diagram + const allBars = diagram .selectAll("g") .data(data) .enter() .append("g") .attr("transform", (d, i) => { - return ( - "translate(" + (paddingRight + i * 60) + "," + yScale(-1) + ")" - ); + return "translate(" + (paddingRight + i * 95) + " 10 )"; }); - const bar = bars.append("g"); - - bar + const barPerMonth = allBars .selectAll("rect") .data(d => d.values) .enter() .append("rect") - .attr("width", 30) - .attr("height", (d, i) => { - console.log(d); - return yScale(0) - yScale(d); + .attr("x", 0) + .attr("y", yScale(0)) + .attr("height", d => { + return Math.abs(yScale(0) - yScale(d)); }) .attr("transform", d => { - return "translate(0 -" + (yScale(0) - yScale(d)) + ")"; + if (d > 0) + return "translate(0 -" + Math.abs(yScale(0) - yScale(d)) + ")"; + return "translate(0 " + 0 + ")"; }) + .attr("width", 60) .attr("fill", (d, i) => { return colors[i]; }); - - bars - .append("text") - .text((d, i) => { - return d.month; - }) - .attr("text-anchor", "middle") - .attr("x", 15) - .attr("y", 0) - .attr("dy", "1em"); }, drawLabel(diagram, height) { const dy = height / 2;