diff client/src/fairway/Fairwayprofile.vue @ 849:d63e60b868bf

WIP Fairwayprofile
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 28 Sep 2018 12:35:24 +0200
parents 596ef3b46028
children fb39ec3b95a8
line wrap: on
line diff
--- a/client/src/fairway/Fairwayprofile.vue	Fri Sep 28 12:26:46 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Fri Sep 28 12:35:24 2018 +0200
@@ -2,12 +2,12 @@
     <div class="profiledisplay d-flex flex-row">
         <div class="fairwayprofile">
         </div>
-        <div class="waterlevelselection d-flex flex-column">
+        <!-- <div class="waterlevelselection d-flex flex-column">
             <div class="form-check" v-for="level in waterLevels" :key="level.level">
-                <input class="form-check-input" :id="level.year" v-model="selectedWaterLevel" :value="level.level" type="radio">
+                <input class="form-check-input" :id="level.year" @change="setWaterlevel(level)" :value="level.level" type="radio">
                 <label class="form-check-label" :for="level.year">{{level.year}}</label>
             </div>
-        </div>
+        </div> -->
     </div>
 </template>
 
@@ -84,6 +84,9 @@
     }
   },
   methods: {
+    setWaterlevel(level) {
+      console.log(level);
+    },
     drawDiagram() {
       const chartDiv = document.querySelector(".fairwayprofile");
       d3.select("svg").remove();
@@ -139,13 +142,13 @@
           .x(function(d) {
             return xScale(d.x);
           })
-          .y0(0)
+          .y0(yScaleRight(0))
           .y1(function(d) {
             return yScaleRight(d.y);
           });
         graph
           .append("path")
-          .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }])
+          .datum([{ x: startPoint, y: -depth }, { x: endPoint, y: -depth }])
           .attr("fill", "#002AFF")
           .attr("stroke-opacity", 0.65)
           .attr("fill-opacity", 0.65)