Mercurial > gemma

changeset 4890:5d9c7fcda566

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fix drawing of fairway profile. The basic functionality for calculating the graph to draw resides in geo.js This was a port of existing code from the backend (cross.go). For historic reasons there was a bug present in this code which was fixed in the backend. The height was transformed via Math.abs() which results in strange behavior for measurements above the waterlevel. Points which are 1.5m above the waterlevel were drawn 1.5m below the waterlevel. There were two fixes: 1) The y-component of the x/y-pair of the fairwayprofile point is taken as is without Math.abs() 2) To draw the diagram, there is the definition of a domain necessarry. A minimum value for the values above the waterlevel is constructed in case there is no point above (10 percent of the range below the waterlevel). In case there are values above the waterlevel which in turn means the minumum value is < 0, there is this value taken as a minimum. D3 scales accordingly.
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 10 Feb 2020 15:09:59 +0100
parents ab6eb160cd29
children e68220372832
files client/src/components/fairway/Fairwayprofile.vue client/src/lib/geo.js
diffstat 2 files changed, 22 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue	Sun Feb 09 20:24:54 2020 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon Feb 10 15:09:59 2020 +0100
@@ -197,6 +197,7 @@
       "startPoint",
       "endPoint",
       "fairwayData",
+      "minAlt",
       "maxAlt",
       "selectedWaterLevel",
       "depth",
@@ -652,21 +653,28 @@
         .scaleLinear()
         .domain([0, this.totalLength])
         .rangeRound([0, width]);
-
+      // Upper limit is relevant for the extension of the y-Axis
+      // If there is no measure above the waterlevel we choose a cosmetic value of this.maxAlt *0.1
+      // to get a bit of space above the waterlevel.
+      // Otherwise we take the maximum measured value
+      const upperLimit =
+        this.minAlt > 0 ? this.maxAlt * 0.1 : Math.abs(this.minAlt);
+      // In order to draw positive values downwards, we switch both values in the
+      // domain definition [min, max] => [max, min] has the desired effect.
       let yScaleRight = d3
         .scaleLinear()
         .domain([
           this.maxAlt * 1.1 + (this.waterlevel - this.refWaterlevel) / 100,
-          -(this.maxAlt * 0.1)
+          -upperLimit
         ])
         .rangeRound([height, 0]);
-
+      // This definition is accordingly but uses values * 100 for the tickformatter
       let yScaleLeft = d3
         .scaleLinear()
         .domain([
           this.waterlevel -
             (this.maxAlt * 110 + (this.waterlevel - this.refWaterlevel)),
-          this.waterlevel + this.maxAlt * 10
+          this.waterlevel + upperLimit * 100
         ])
         .rangeRound([height, 0]);
 
--- a/client/src/lib/geo.js	Sun Feb 09 20:24:54 2020 +0100
+++ b/client/src/lib/geo.js	Mon Feb 10 15:09:59 2020 +0100
@@ -20,19 +20,20 @@
  *
  */
 
-import { GeoJSON } from "ol/format";
-import Feature from "ol/Feature";
-import distance from "@turf/distance";
 import {
   lineString as turfLineString,
-  polygon as turfPolygon,
-  point as turfPoint
+  point as turfPoint,
+  polygon as turfPolygon
 } from "@turf/helpers";
-import lineSplit from "@turf/line-split";
-import lineSlice from "@turf/line-slice";
-import lineIntersect from "@turf/line-intersect";
+
+import Feature from "ol/Feature";
+import { GeoJSON } from "ol/format";
 // import booleanWithin from "@turf/boolean-within";
 import booleanContains from "@turf/boolean-contains";
+import distance from "@turf/distance";
+import lineIntersect from "@turf/line-intersect";
+import lineSlice from "@turf/line-slice";
+import lineSplit from "@turf/line-split";
 
 const EARTHRADIUS = 6378137.0;
 
@@ -113,7 +114,7 @@
     for (let coordinateTriplet of segment) {
       currentPoint = Point(coordinateTriplet);
       lengthPolyLine += distanceBetween(referencePoint, currentPoint);
-      let y = Math.abs(currentPoint.alt);
+      let y = currentPoint.alt;
       points.push({
         x: lengthPolyLine,
         y: y