Mercurial > gemma
changeset 3537:cbf883596e4e
merged waterlevel-in-crossprofile branch into default
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Thu, 30 May 2019 10:45:20 +0200 |
| parents | 337e9f85f84c (current diff) 1422ca0e6a51 (diff) |
| children | 5be5b54336ea b268cae2df39 |
| files | |
| diffstat | 4 files changed, 102 insertions(+), 110 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Wed May 29 18:41:35 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Thu May 30 10:45:20 2019 +0200 @@ -17,9 +17,15 @@ </div> <div class="legend"> <span - style="background-color: #4a2f06; width: 20px; height: 20px;" + style="width: 14px; height: 14px; background-color: #4a2f06; border: solid 3px black; background-clip: padding-box; box-sizing: content-box;" ></span> - Ground + Sediment + </div> + <div class="legend"> + <span + style="width: 14px; height: 14px; background-color: rgba(74, 47, 6, 0.6); border: solid 3px #943007; background-clip: padding-box; box-sizing: content-box;" + ></span> + Sediment (Compare) </div> <div> <select @@ -96,9 +102,9 @@ height: null, margin: { top: 20, - right: 40, - bottom: 30, - left: 40 + right: 80, + bottom: 60, + left: 80 }, form: { template: null @@ -141,6 +147,7 @@ }; }, computed: { + ...mapGetters("map", ["openLayersMap"]), ...mapGetters("fairwayprofile", ["totalLength"]), ...mapState("fairwayprofile", [ "additionalSurvey", @@ -149,32 +156,21 @@ "endPoint", "fairwayData", "maxAlt", - "referenceWaterLevel", - "selectedWaterLevel", - "waterLevels" + "selectedWaterLevel" ]), + ...mapState("bottlenecks", ["selectedSurvey", "selectedBottleneck"]), ...mapState("application", ["paneSetup"]), title() { let dates = [this.selectedSurvey.date_info]; + let waterlevelLabel = + this.selectedWaterLevel === "ref" + ? this.selectedSurvey.depth_reference + : "Current"; if (this.additionalSurvey) dates.push(this.additionalSurvey.date_info); dates.map(d => this.$options.filters.dateTime(d, true)); return `${this.$gettext("Fairwayprofile")}: ${ this.selectedBottleneck - } (${dates.join(", ")})`; - }, - selectedSurvey: { - get() { - return this.$store.state.bottlenecks.selectedSurvey; - } - }, - selectedBottleneck: { - get() { - return this.$store.state.bottlenecks.selectedBottleneck; - } - }, - ...mapState("bottlenecks", ["selectedSurvey"]), - relativeWaterLevelDelta() { - return this.selectedWaterLevel.value - this.referenceWaterLevel; + } (${dates.join(", ")}) WL: ${waterlevelLabel} (${this.waterlevel} cm)`; }, currentData() { if ( @@ -192,15 +188,20 @@ return []; return this.currentProfile[this.additionalSurvey.date_info].points; }, - xScale() { - return [0, this.totalLength]; + bottleneck() { + return this.openLayersMap() + .getLayer("BOTTLENECKS") + .getSource() + .getFeatures() + .find(f => f.get("objnam") === this.selectedBottleneck); }, - yScaleRight() { - //ToDO calcReleativeDepth(this.maxAlt) to get the - // maximum depth according to the actual waterlevel - // additionally: take the one which is higher reference or current waterlevel - const DELTA = this.maxAlt * 1.1 - this.maxAlt; - return [this.maxAlt * 1 + DELTA, -DELTA]; + waterlevel() { + return this.selectedWaterLevel === "ref" + ? this.refWaterlevel + : this.bottleneck.get("gm_waterlevel"); + }, + refWaterlevel() { + return this.selectedSurvey.waterlevel_value; } }, watch: { @@ -371,7 +372,7 @@ } }); } - this.pdf.doc.save("Fairwayprofile diagram"); + this.pdf.doc.save(this.title.replace(/\s/g, "_").replace(/[():,]/g, "")); }, addDiagram(position, offset, width, height) { let x = offset.x, @@ -429,36 +430,17 @@ this.pdf.doc.circle(x, y + 10, 2, "FD"); this.pdf.doc.text(x + 3, y + 11, "Ground"); }, - calcRelativeDepth(depth) { - /* takes a depth value and substracts the delta of the relative waterlevel - * say the reference level is above the current level, the ground is nearer, - * thus, the depth is lower. - * - * E.g.: - * - * Reference waterlevel 5m, current 4m => delta = -1m - * If the distance to the ground was 3m from the 5m mark - * it is now only 2m from the current waterlevel. - * - * Vice versa: - * - * If the reference level is 5m and the current 6m => delta = +1m - * The ground is one meter farer away from the current waterlevel - * - */ - return depth - this.relativeWaterLevelDelta; - }, drawDiagram() { d3.select(".diagram-container svg").remove(); this.scaleFairwayProfile(); let svg = d3.select(".diagram-container").append("svg"); svg.attr("width", "100%"); svg.attr("height", "100%"); - const width = this.width - this.margin.right - 1.5 * this.margin.left; - const height = this.height - this.margin.top - 2 * this.margin.bottom; + const width = this.width - this.margin.right - this.margin.left; + const height = this.height - this.margin.top - this.margin.bottom; const currentData = this.currentData; const additionalData = this.additionalData; - const { xScale, yScaleRight, graph } = this.generateCoordinates( + const { xScale, yScaleRight, graph } = this.generateScalesAndGraph( svg, height, width @@ -498,7 +480,6 @@ } for (let data of this.fairwayData) { const [startPoint, endPoint, depth] = data.coordinates[0]; - const style = data.style(); let fairwayArea = d3 .area() .x(function(d) { @@ -513,7 +494,7 @@ .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) .attr("fill", "#002AFF") .attr("fill-opacity", 0.65) - .attr("stroke", style[0].getStroke().getColor()) + .attr("stroke", "transparent") .attr("d", fairwayArea); } }, @@ -521,14 +502,21 @@ graph .append("text") .attr("transform", ["rotate(-90)"]) - .attr("y", this.width - 70) + .attr("y", this.width - 100) .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) - .attr("dy", "1em") .attr("fill", "black") .style("text-anchor", "middle") .text("Depth [m]"); graph .append("text") + .attr("transform", ["rotate(-90)"]) + .attr("y", -50) + .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) + .attr("fill", "black") + .style("text-anchor", "middle") + .text("Waterlevel [cm]"); + graph + .append("text") .attr("y", -50) .attr("x", -(height / 4)) .attr("dy", "1em") @@ -540,21 +528,35 @@ ]) .text("Width [m]"); }, - generateCoordinates(svg, height, width) { + generateScalesAndGraph(svg, height, width) { let xScale = d3 .scaleLinear() - .domain(this.xScale) + .domain([0, this.totalLength]) .rangeRound([0, width]); - xScale.ticks(5); - let yScaleRight = d3 .scaleLinear() - .domain(this.yScaleRight) + .domain([ + this.maxAlt * 1.1 + + Math.abs(this.waterlevel - this.refWaterlevel) / 100, + -(this.maxAlt * 0.1) + ]) .rangeRound([height, 0]); - let xAxis = d3.axisBottom(xScale); - let yAxis2 = d3.axisRight(yScaleRight); + let yScaleLeft = d3 + .scaleLinear() + .domain([ + this.waterlevel - + (this.maxAlt * 100 + + Math.abs(this.waterlevel - this.refWaterlevel)), + this.waterlevel + this.maxAlt * 0.1 * 100 + ]) + .rangeRound([height, 0]); + + let xAxis = d3.axisBottom(xScale).ticks(5); + let yAxisRight = d3.axisRight(yScaleRight); + let yAxisLeft = d3.axisLeft(yScaleLeft); + let graph = svg .append("g") .attr( @@ -564,7 +566,7 @@ graph .append("g") .attr("transform", "translate(0," + height + ")") - .call(xAxis.ticks(5)) + .call(xAxis) .selectAll(".tick text") .attr("fill", "black") .select(function() { @@ -575,7 +577,7 @@ graph .append("g") .attr("transform", "translate(" + width + ",0)") - .call(yAxis2) + .call(yAxisRight) .selectAll(".tick text") .attr("fill", "black") .select(function() { @@ -583,6 +585,18 @@ }) .selectAll(".tick line") .attr("stroke", "black"); + graph + .append("g") + .attr("transform", "translate(0 0)") + .call(yAxisLeft) + .selectAll(".tick text") + .attr("fill", "black") + .select(function() { + return this.parentNode; + }) + .selectAll(".tick line") + .attr("stroke", "black"); + graph.selectAll(".domain").attr("stroke", "black"); return { xScale, yScaleRight, graph }; }, @@ -601,7 +615,7 @@ .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) .attr("fill-opacity", 0.65) .attr("fill", WATER_COLOR) - .attr("stroke", WATER_COLOR) + .attr("stroke", "transparent") .attr("d", waterArea); }, drawProfile({ @@ -620,25 +634,27 @@ .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) .attr("fill", color) - .attr("stroke", color) - .attr("stroke-width", 3) - .attr("stroke-opacity", opacity) + .attr("stroke", "transparent") .attr("fill-opacity", opacity) .attr("d", profileArea); graph
--- a/client/src/components/fairway/Profiles.vue Wed May 29 18:41:35 2019 +0200 +++ b/client/src/components/fairway/Profiles.vue Thu May 30 10:45:20 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,15 +45,11 @@ v-model="selectedWaterLevel" class="form-control form-control-sm small" > - <option value="" v-if="Object.keys(waterLevels).length === 0"> - <translate>Current</translate> + <option value="ref"> + <translate>Depth Reference</translate> </option> - <option - v-for="wl in Object.keys(waterLevels)" - :key="wl" - :value="wl" - > - {{ wl | surveyDate }} + <option value="current"> + <translate>Current Waterlevel</translate> </option> </select> </div> @@ -327,7 +323,7 @@ }, selectedWaterLevel: { get() { - return this.$store.state.fairwayprofile.selectedWaterLevel.date || ""; + return this.$store.state.fairwayprofile.selectedWaterLevel; }, set(value) { this.$store.commit("fairwayprofile/setSelectedWaterLevel", value);
--- a/client/src/store/fairwayprofile.js Wed May 29 18:41:35 2019 +0200 +++ b/client/src/store/fairwayprofile.js Thu May 30 10:45:20 2019 +0200 @@ -28,9 +28,7 @@ minAlt: 0, maxAlt: 0, currentProfile: {}, - referenceWaterLevel: null, - waterLevels: {}, - selectedWaterLevel: "", + selectedWaterLevel: "ref", fairwayData: [], startPoint: null, endPoint: null, @@ -61,7 +59,7 @@ state.additionalSurvey = additionalSurvey; }, setSelectedWaterLevel: (state, level) => { - state.selectedWaterLevel = state.waterLevels[level]; + state.selectedWaterLevel = level; }, setDifferencesLoading: (state, value) => { state.differencesLoading = value; @@ -69,8 +67,6 @@ profileLoaded: (state, answer) => { const { response, surveyDate } = answer; const { data } = response; - const { waterlevel } = response.data.properties; - const { value, when } = waterlevel; const coordinates = data.geometry.coordinates; if (!coordinates) return; const startPoint = state.startPoint; @@ -79,12 +75,6 @@ const result = prepareProfile({ geoJSON, startPoint, endPoint }); // Use Vue.set() to make new object properties rective // https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats - const entry = { - date: when, - value: value - }; - state.waterLevels = { [when]: entry }; - state.selectedWaterLevel = entry; Vue.set(state.currentProfile, surveyDate, { points: result.points, length: result.lengthPolyLine @@ -116,9 +106,7 @@ state.fairwayData = []; state.startPoint = null; state.endPoint = null; - state.referenceWaterLevel = null; - state.waterLevels = {}; - state.selectedWaterLevel = ""; + state.selectedWaterLevel = "ref"; }, previousCuts: (state, previousCuts) => { state.previousCuts = previousCuts;
--- a/pkg/controllers/cross.go Wed May 29 18:41:35 2019 +0200 +++ b/pkg/controllers/cross.go Thu May 30 10:45:20 2019 +0200 @@ -21,7 +21,6 @@ "net/http" "time" - "gemma.intevation.de/gemma/pkg/common" "gemma.intevation.de/gemma/pkg/models" "gemma.intevation.de/gemma/pkg/octree" ) @@ -167,13 +166,6 @@ Type: "MultiLineString", Coordinates: joined, }, - Properties: map[string]interface{}{ - "waterlevel": map[string]interface{}{ - // TODO: Fetch values from database. - "value": float64(50), - "when": start.Format(common.TimeFormat), - }, - }, }, }