Mercurial > gemma
changeset 780:c98f88ac08a4
Fairwayprofile WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 26 Sep 2018 14:25:21 +0200 |
parents | 8ba1be486833 |
children | f6a6ce90a1b5 |
files | client/src/application/Main.vue client/src/fairway/Fairwayprofile.vue client/src/fairway/store.js |
diffstat | 3 files changed, 62 insertions(+), 46 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Wed Sep 26 13:46:18 2018 +0200 +++ b/client/src/application/Main.vue Wed Sep 26 14:25:21 2018 +0200 @@ -30,10 +30,6 @@ return { width: null, height: null, - xScale: { - x: 0, - y: 300 - }, yScaleRight: { lo: -6, hi: 1 @@ -48,7 +44,12 @@ }, computed: { ...mapGetters("application", ["isSplitscreen", "drawMode"]), - ...mapGetters("fairwayprofile", ["currentProfile", "minAlt", "maxAlt"]), + ...mapGetters("fairwayprofile", [ + "currentProfile", + "minAlt", + "maxAlt", + "totalLength" + ]), xAxis() { return [this.xScale.x, this.xScale.y]; }, @@ -66,6 +67,12 @@ lo: this.minAlt, hi: this.maxAlt }; + }, + xScale() { + return { + x: 0, + y: this.totalLength + }; } }, created() {
--- a/client/src/fairway/Fairwayprofile.vue Wed Sep 26 13:46:18 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Wed Sep 26 14:25:21 2018 +0200 @@ -34,6 +34,9 @@ return {}; }, watch: { + data() { + this.drawDiagram(); + }, width() { this.drawDiagram(); }, @@ -51,11 +54,12 @@ const width = this.width - this.margin.right - this.margin.left; const height = this.height - this.margin.top - this.margin.bottom; const currentData = this.data; - const { xScale, yScaleRight, graph } = this.generateCoordinates( - svg, - height, - width - ); + const { + xScale, + yScaleRight, + yScaleLeft, + graph + } = this.generateCoordinates(svg, height, width); this.drawWaterlevel({ graph, xScale, @@ -66,7 +70,7 @@ this.drawProfile({ graph, xScale, - yScaleRight, + yScaleLeft, currentData, height, width @@ -126,40 +130,42 @@ .attr("stroke", WATER_COLOR) .attr("d", waterArea); }, - drawProfile({ graph, xScale, yScaleRight, currentData, height }) { - let profileLine = d3 - .line() - .x(d => { - return xScale(d.x); - }) - .y(d => { - return yScaleRight(d.y); - }); - let profileArea = d3 - .area() - .x(function(d) { - return xScale(d.x); - }) - .y0(height) - .y1(function(d) { - return yScaleRight(d.y); - }); - graph - .append("path") - .datum(currentData) - .attr("fill", GROUND_COLOR) - .attr("stroke", GROUND_COLOR) - .attr("stroke-width", 3) - .attr("d", profileArea); - graph - .append("path") - .datum(currentData) - .attr("fill", "none") - .attr("stroke", "black") - .attr("stroke-linejoin", "round") - .attr("stroke-linecap", "round") - .attr("stroke-width", 3) - .attr("d", profileLine); + drawProfile({ graph, xScale, yScaleLeft, currentData, height }) { + for (let part of currentData) { + let profileLine = d3 + .line() + .x(d => { + return xScale(d.x); + }) + .y(d => { + return yScaleLeft(d.y); + }); + let profileArea = d3 + .area() + .x(function(d) { + return xScale(d.x); + }) + .y0(height) + .y1(function(d) { + return yScaleLeft(d.y); + }); + graph + .append("path") + .datum(part) + .attr("fill", GROUND_COLOR) + .attr("stroke", GROUND_COLOR) + .attr("stroke-width", 3) + .attr("d", profileArea); + graph + .append("path") + .datum(part) + .attr("fill", "none") + .attr("stroke", "black") + .attr("stroke-linejoin", "round") + .attr("stroke-linecap", "round") + .attr("stroke-width", 3) + .attr("d", profileLine); + } } }, mounted() {
--- a/client/src/fairway/store.js Wed Sep 26 13:46:18 2018 +0200 +++ b/client/src/fairway/store.js Wed Sep 26 14:25:21 2018 +0200 @@ -29,6 +29,9 @@ }, maxAlt: state => { return state.maxAlt; + }, + totalLength: state => { + return state.totalLength; } }, mutations: { @@ -43,7 +46,7 @@ state.currentProfile = result.points; state.minAlt = result.minAlt; state.maxAlt = result.maxAlt; - state.totalLength = result.totalLength; + state.totalLength = result.lengthPolyLine; }, setStartPoint: (state, start) => { state.startPoint = start;