Mercurial > gemma

changeset 844:c2cba785ca4d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
WIP Fairwayprofile
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 28 Sep 2018 11:40:28 +0200
parents d2aa972df342
children 596ef3b46028
files client/src/application/Main.vue client/src/fairway/Fairwayprofile.vue
diffstat 2 files changed, 11 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Main.vue	Fri Sep 28 11:34:51 2018 +0200
+++ b/client/src/application/Main.vue	Fri Sep 28 11:40:28 2018 +0200
@@ -2,7 +2,7 @@
     <div class="main d-flex flex-column">
         <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
         <div v-if="isSplitscreen" class="profile d-flex flex-row">
-            <FairwayProfile :selectedWaterLevel="selectedWaterLevel" :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile>
+            <FairwayProfile :minAlt="minAlt" maxAlt="maxAlt" :selectedWaterLevel="selectedWaterLevel" :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile>
         </div>
     </div>
 </template>
@@ -30,10 +30,6 @@
     return {
       width: null,
       height: null,
-      yScaleRight: {
-        lo: -6,
-        hi: 1
-      },
       margin: {
         top: 20,
         right: 40,
@@ -60,7 +56,11 @@
       return [this.yScaleLeft.lo, this.yScaleLeft.hi];
     },
     yAxisRight() {
-      return [this.yScaleRight.lo, this.yScaleRight.hi];
+      const hi =
+        Math.max(this.maxAlt, this.selectedWaterLevel) -
+        this.selectedWaterLevel;
+      const lo = this.selectedWaterLevel - this.minAlt;
+      return [lo, hi];
     },
     margins() {
       return this.margin;
--- a/client/src/fairway/Fairwayprofile.vue	Fri Sep 28 11:34:51 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Fri Sep 28 11:40:28 2018 +0200
@@ -48,7 +48,9 @@
     "totalLength",
     "waterLevels",
     "fairwayCoordinates",
-    "selectedWaterLevel"
+    "selectedWaterLevel",
+    "minAlt",
+    "maxAlt"
   ],
   computed: {
     waterColor() {
@@ -137,7 +139,7 @@
           .x(function(d) {
             return xScale(d.x);
           })
-          .y0(yScaleRight(this.selectedWaterLevel))
+          .y0(0)
           .y1(function(d) {
             return yScaleRight(d.y);
           });
@@ -235,10 +237,7 @@
         });
       graph
         .append("path")
-        .datum([
-          { x: 0, y: this.selectedWaterLevel },
-          { x: this.totalLength, y: this.selectedWaterLevel }
-        ])
+        .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }])
         .attr("fill", this.waterColor)
         .attr("stroke", this.waterColor)
         .attr("d", waterArea);