Mercurial > gemma
comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3128:1610d3042bbb
fairway_availability: generative code fixed
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 29 Apr 2019 17:06:46 +0200 |
parents | 383720d8d98e |
children | 2e36267ab50e |
comparison
equal
deleted
inserted
replaced
3127:0374197c384f | 3128:1610d3042bbb |
---|---|
60 }, | 60 }, |
61 drawBars({ diagram, data, yScale }) { | 61 drawBars({ diagram, data, yScale }) { |
62 const paddingRight = 100; | 62 const paddingRight = 100; |
63 const paddingTop = 30; | 63 const paddingTop = 30; |
64 | 64 |
65 const bars = diagram | 65 const allBars = diagram |
66 .selectAll("g") | 66 .selectAll("g") |
67 .data(data) | 67 .data(data) |
68 .enter() | 68 .enter() |
69 .append("g") | 69 .append("g") |
70 .attr("transform", (d, i) => { | 70 .attr("transform", (d, i) => { |
71 return ( | 71 return "translate(" + (paddingRight + i * 95) + " 10 )"; |
72 "translate(" + (paddingRight + i * 60) + "," + yScale(-1) + ")" | |
73 ); | |
74 }); | 72 }); |
75 const bar = bars.append("g"); | 73 const barPerMonth = allBars |
76 | |
77 bar | |
78 .selectAll("rect") | 74 .selectAll("rect") |
79 .data(d => d.values) | 75 .data(d => d.values) |
80 .enter() | 76 .enter() |
81 .append("rect") | 77 .append("rect") |
82 .attr("width", 30) | 78 .attr("x", 0) |
83 .attr("height", (d, i) => { | 79 .attr("y", yScale(0)) |
84 console.log(d); | 80 .attr("height", d => { |
85 return yScale(0) - yScale(d); | 81 return Math.abs(yScale(0) - yScale(d)); |
86 }) | 82 }) |
87 .attr("transform", d => { | 83 .attr("transform", d => { |
88 return "translate(0 -" + (yScale(0) - yScale(d)) + ")"; | 84 if (d > 0) |
85 return "translate(0 -" + Math.abs(yScale(0) - yScale(d)) + ")"; | |
86 return "translate(0 " + 0 + ")"; | |
89 }) | 87 }) |
88 .attr("width", 60) | |
90 .attr("fill", (d, i) => { | 89 .attr("fill", (d, i) => { |
91 return colors[i]; | 90 return colors[i]; |
92 }); | 91 }); |
93 | |
94 bars | |
95 .append("text") | |
96 .text((d, i) => { | |
97 return d.month; | |
98 }) | |
99 .attr("text-anchor", "middle") | |
100 .attr("x", 15) | |
101 .attr("y", 0) | |
102 .attr("dy", "1em"); | |
103 }, | 92 }, |
104 drawLabel(diagram, height) { | 93 drawLabel(diagram, height) { |
105 const dy = height / 2; | 94 const dy = height / 2; |
106 diagram | 95 diagram |
107 .append("text") | 96 .append("text") |