Mercurial > gemma

changeset 573:03c15abb8372

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: Minor adjustments to waterlevel scale
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 05 Sep 2018 16:30:12 +0200
parents 59b22dc924c8
children 18c007104106
files client/src/components/Fairwayprofile.vue client/src/components/Maplayer.vue
diffstat 2 files changed, 26 insertions(+), 14 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Fairwayprofile.vue	Wed Sep 05 16:14:06 2018 +0200
+++ b/client/src/components/Fairwayprofile.vue	Wed Sep 05 16:30:12 2018 +0200
@@ -18,11 +18,11 @@
 <script>
 import * as d3 from "d3";
 
-const BLUE_WATER = "#005DFF";
+const WATER_COLOR = "#005DFF";
 const GROUND_COLOR = "#4A2F06";
 
 const sampleData = [
-  { x: 3, y: -3.0 },
+  { x: 0, y: -3.0 },
   { x: 25, y: -2.0 },
   { x: 50, y: -4.5 },
   { x: 75, y: -4.0 },
@@ -33,7 +33,7 @@
   { x: 200, y: -3.0 },
   { x: 225, y: -3.5 },
   { x: 250, y: -3.0 },
-  { x: 297, y: -2.5 }
+  { x: 300, y: -2.5 }
 ];
 
 export default {
@@ -80,16 +80,22 @@
         .call(yAxis2);
       return { xScale, yScaleLeft, yScaleRight, graph };
     },
-    drawWaterlevel(graph, height, width) {
-      const zerolevel = this.height / 2 - this.margin.top;
-      const toBottom = height / 2;
+    drawWaterlevel({ graph, xScale, yScaleRight, height }) {
+      let waterArea = d3
+        .area()
+        .x(function(d) {
+          return xScale(d.x);
+        })
+        .y0(height)
+        .y1(function(d) {
+          return yScaleRight(d.y);
+        });
       graph
-        .append("rect")
-        .attr("x", 0)
-        .attr("y", zerolevel)
-        .attr("width", width)
-        .attr("height", toBottom)
-        .style("fill", BLUE_WATER);
+        .append("path")
+        .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }])
+        .attr("fill", WATER_COLOR)
+        .attr("stroke", WATER_COLOR)
+        .attr("d", waterArea);
     },
     drawProfile({ graph, xScale, yScaleRight, sampleData, height }) {
       let profileLine = d3
@@ -137,7 +143,13 @@
       height,
       width
     );
-    this.drawWaterlevel(graph, height, width);
+    this.drawWaterlevel({
+      graph,
+      xScale,
+      yScaleRight,
+      height,
+      width
+    });
     this.drawProfile({
       graph,
       xScale,
--- a/client/src/components/Maplayer.vue	Wed Sep 05 16:14:06 2018 +0200
+++ b/client/src/components/Maplayer.vue	Wed Sep 05 16:30:12 2018 +0200
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="profile d-flex flex-row">
-      <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 6]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile>
+      <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile>
     </div>
   </div>
 </template>