Mercurial > gemma
changeset 3527:8a9ee18de13f waterlevel-in-crossprofile
client: fairway profiles: implemented selection between depth reference waterlevel and current waterlevel
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 29 May 2019 15:56:14 +0200 |
parents | 320aa3b85152 |
children | 804df080c826 |
files | client/src/components/fairway/Fairwayprofile.vue client/src/components/fairway/Profiles.vue client/src/store/fairwayprofile.js |
diffstat | 3 files changed, 32 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Wed May 29 13:34:59 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Wed May 29 15:56:14 2019 +0200 @@ -185,8 +185,13 @@ .getFeatures() .find(f => f.get("objnam") === this.selectedBottleneck); }, - refWaterlevels() { - return JSON.parse(this.bottleneck.get("reference_water_levels")); + waterlevel() { + return this.selectedWaterLevel === "ref" + ? this.refWaterlevel + : this.bottleneck.get("gm_waterlevel"); + }, + refWaterlevel() { + return this.selectedSurvey.waterlevel_value; } }, watch: { @@ -521,14 +526,20 @@ let yScaleRight = d3 .scaleLinear() - .domain([this.maxAlt * 1.1, -(this.maxAlt * 0.1)]) + .domain([ + this.maxAlt * 1.1 + + Math.abs(this.waterlevel - this.refWaterlevel) / 100, + -(this.maxAlt * 0.1) + ]) .rangeRound([height, 0]); let yScaleLeft = d3 .scaleLinear() .domain([ - this.refWaterlevels.LDC - this.maxAlt * 100, - this.refWaterlevels.LDC + this.maxAlt * 0.1 * 100 + this.waterlevel - + (this.maxAlt * 100 + + Math.abs(this.waterlevel - this.refWaterlevel)), + this.waterlevel + this.maxAlt * 0.1 * 100 ]) .rangeRound([height, 0]); @@ -613,18 +624,22 @@ .x(d => { return xScale(d.x); }) - .y(d => { - return yScaleRight(d.y); - }); + .y(d => + yScaleRight( + d.y + Math.abs(this.waterlevel - this.refWaterlevel) / 100 + ) + ); let profileArea = d3 .area() .x(function(d) { return xScale(d.x); }) .y0(height) - .y1(function(d) { - return yScaleRight(d.y); - }); + .y1(d => + yScaleRight( + d.y + Math.abs(this.waterlevel - this.refWaterlevel) / 100 + ) + ); graph .append("path") .datum(part)
--- a/client/src/components/fairway/Profiles.vue Wed May 29 13:34:59 2019 +0200 +++ b/client/src/components/fairway/Profiles.vue Wed May 29 15:56:14 2019 +0200 @@ -37,7 +37,7 @@ </select> <div v-if="selectedBottleneck"> <div class="d-flex mt-2"> - <div class="flex-fill"> + <div class="flex-fill" style="max-width: 75px;"> <small class="text-muted"> <translate>Waterlevel</translate>: </small> @@ -45,11 +45,11 @@ v-model="selectedWaterLevel" class="form-control form-control-sm small" > - <option value="LDC"> - <translate>LDC</translate> + <option value="ref"> + <translate>Depth Reference</translate> </option> <option value="current"> - <translate>Current</translate> + <translate>Current Waterlevel</translate> </option> </select> </div>
--- a/client/src/store/fairwayprofile.js Wed May 29 13:34:59 2019 +0200 +++ b/client/src/store/fairwayprofile.js Wed May 29 15:56:14 2019 +0200 @@ -28,7 +28,7 @@ minAlt: 0, maxAlt: 0, currentProfile: {}, - selectedWaterLevel: "LDC", + selectedWaterLevel: "ref", fairwayData: [], startPoint: null, endPoint: null, @@ -106,7 +106,7 @@ state.fairwayData = []; state.startPoint = null; state.endPoint = null; - state.selectedWaterLevel = "LDC"; + state.selectedWaterLevel = "ref"; }, previousCuts: (state, previousCuts) => { state.previousCuts = previousCuts;