diff client/src/components/fairway/Fairwayprofile.vue @ 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
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)