Mercurial > gemma
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)