Mercurial > gemma

changeset 3514:fcb4f3fabde8 waterlevel-in-crossprofile

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 };
     },