Mercurial > gemma
changeset 573:03c15abb8372
fix: Minor adjustments to waterlevel scale
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 05 Sep 2018 16:30:12 +0200 |
parents | 59b22dc924c8 |
children | 18c007104106 |
files | client/src/components/Fairwayprofile.vue client/src/components/Maplayer.vue |
diffstat | 2 files changed, 26 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Fairwayprofile.vue Wed Sep 05 16:14:06 2018 +0200 +++ b/client/src/components/Fairwayprofile.vue Wed Sep 05 16:30:12 2018 +0200 @@ -18,11 +18,11 @@ <script> import * as d3 from "d3"; -const BLUE_WATER = "#005DFF"; +const WATER_COLOR = "#005DFF"; const GROUND_COLOR = "#4A2F06"; const sampleData = [ - { x: 3, y: -3.0 }, + { x: 0, y: -3.0 }, { x: 25, y: -2.0 }, { x: 50, y: -4.5 }, { x: 75, y: -4.0 }, @@ -33,7 +33,7 @@ { x: 200, y: -3.0 }, { x: 225, y: -3.5 }, { x: 250, y: -3.0 }, - { x: 297, y: -2.5 } + { x: 300, y: -2.5 } ]; export default { @@ -80,16 +80,22 @@ .call(yAxis2); return { xScale, yScaleLeft, yScaleRight, graph }; }, - drawWaterlevel(graph, height, width) { - const zerolevel = this.height / 2 - this.margin.top; - const toBottom = height / 2; + drawWaterlevel({ graph, xScale, yScaleRight, height }) { + let waterArea = d3 + .area() + .x(function(d) { + return xScale(d.x); + }) + .y0(height) + .y1(function(d) { + return yScaleRight(d.y); + }); graph - .append("rect") - .attr("x", 0) - .attr("y", zerolevel) - .attr("width", width) - .attr("height", toBottom) - .style("fill", BLUE_WATER); + .append("path") + .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }]) + .attr("fill", WATER_COLOR) + .attr("stroke", WATER_COLOR) + .attr("d", waterArea); }, drawProfile({ graph, xScale, yScaleRight, sampleData, height }) { let profileLine = d3 @@ -137,7 +143,13 @@ height, width ); - this.drawWaterlevel(graph, height, width); + this.drawWaterlevel({ + graph, + xScale, + yScaleRight, + height, + width + }); this.drawProfile({ graph, xScale,
--- a/client/src/components/Maplayer.vue Wed Sep 05 16:14:06 2018 +0200 +++ b/client/src/components/Maplayer.vue Wed Sep 05 16:30:12 2018 +0200 @@ -13,7 +13,7 @@ </div> </div> <div class="profile d-flex flex-row"> - <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 6]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile> + <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile> </div> </div> </template>