Mercurial > gemma
changeset 844:c2cba785ca4d
WIP Fairwayprofile
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 28 Sep 2018 11:40:28 +0200 |
parents | d2aa972df342 |
children | 596ef3b46028 |
files | client/src/application/Main.vue client/src/fairway/Fairwayprofile.vue |
diffstat | 2 files changed, 11 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Fri Sep 28 11:34:51 2018 +0200 +++ b/client/src/application/Main.vue Fri Sep 28 11:40:28 2018 +0200 @@ -2,7 +2,7 @@ <div class="main d-flex flex-column"> <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> <div v-if="isSplitscreen" class="profile d-flex flex-row"> - <FairwayProfile :selectedWaterLevel="selectedWaterLevel" :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile> + <FairwayProfile :minAlt="minAlt" maxAlt="maxAlt" :selectedWaterLevel="selectedWaterLevel" :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile> </div> </div> </template> @@ -30,10 +30,6 @@ return { width: null, height: null, - yScaleRight: { - lo: -6, - hi: 1 - }, margin: { top: 20, right: 40, @@ -60,7 +56,11 @@ return [this.yScaleLeft.lo, this.yScaleLeft.hi]; }, yAxisRight() { - return [this.yScaleRight.lo, this.yScaleRight.hi]; + const hi = + Math.max(this.maxAlt, this.selectedWaterLevel) - + this.selectedWaterLevel; + const lo = this.selectedWaterLevel - this.minAlt; + return [lo, hi]; }, margins() { return this.margin;
--- a/client/src/fairway/Fairwayprofile.vue Fri Sep 28 11:34:51 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Fri Sep 28 11:40:28 2018 +0200 @@ -48,7 +48,9 @@ "totalLength", "waterLevels", "fairwayCoordinates", - "selectedWaterLevel" + "selectedWaterLevel", + "minAlt", + "maxAlt" ], computed: { waterColor() { @@ -137,7 +139,7 @@ .x(function(d) { return xScale(d.x); }) - .y0(yScaleRight(this.selectedWaterLevel)) + .y0(0) .y1(function(d) { return yScaleRight(d.y); }); @@ -235,10 +237,7 @@ }); graph .append("path") - .datum([ - { x: 0, y: this.selectedWaterLevel }, - { x: this.totalLength, y: this.selectedWaterLevel } - ]) + .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) .attr("fill", this.waterColor) .attr("stroke", this.waterColor) .attr("d", waterArea);