Mercurial > gemma
changeset 3514:fcb4f3fabde8 waterlevel-in-crossprofile
client: fairway profiles: added second y-axis (WIP)
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 28 May 2019 19:22:42 +0200 |
parents | ca9590be1da2 |
children | d3ca26b1d104 |
files | client/src/components/fairway/Fairwayprofile.vue |
diffstat | 1 files changed, 49 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Tue May 28 18:40:02 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Tue May 28 19:22:42 2019 +0200 @@ -96,9 +96,9 @@ height: null, margin: { top: 20, - right: 40, - bottom: 30, - left: 40 + right: 80, + bottom: 60, + left: 80 }, form: { template: null @@ -141,6 +141,7 @@ }; }, computed: { + ...mapGetters("map", ["openLayersMap"]), ...mapGetters("fairwayprofile", ["totalLength"]), ...mapState("fairwayprofile", [ "additionalSurvey", @@ -176,6 +177,16 @@ ) return []; return this.currentProfile[this.additionalSurvey.date_info].points; + }, + bottleneck() { + return this.openLayersMap() + .getLayer("BOTTLENECKS") + .getSource() + .getFeatures() + .find(f => f.get("objnam") === this.selectedBottleneck); + }, + refWaterlevels() { + return JSON.parse(this.bottleneck.get("reference_water_levels")); } }, watch: { @@ -410,8 +421,8 @@ 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.generateScalesAndGraph( @@ -477,14 +488,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") @@ -507,8 +525,18 @@ .domain([this.maxAlt * 1.1, -(this.maxAlt * 0.1)]) .rangeRound([height, 0]); + let yScaleLeft = d3 + .scaleLinear() + .domain([ + this.refWaterlevels.LDC * 1.1, + this.refWaterlevels.LDC - yScaleRight.domain()[1] * 100 + ]) + .rangeRound([height, 0]); + let xAxis = d3.axisBottom(xScale).ticks(5); - let yAxis2 = d3.axisRight(yScaleRight); + let yAxisRight = d3.axisRight(yScaleRight); + let yAxisLeft = d3.axisLeft(yScaleLeft); + let graph = svg .append("g") .attr( @@ -529,7 +557,7 @@ graph .append("g") .attr("transform", "translate(" + width + ",0)") - .call(yAxis2) + .call(yAxisRight) .selectAll(".tick text") .attr("fill", "black") .select(function() { @@ -537,6 +565,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 }; },