Mercurial > gemma

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

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 12:35:24 +0200
parents 596ef3b46028
children fb39ec3b95a8
comparison
equal deleted inserted replaced
848:22f7d33eee65 849:d63e60b868bf
1 <template> 1 <template>
2 <div class="profiledisplay d-flex flex-row"> 2 <div class="profiledisplay d-flex flex-row">
3 <div class="fairwayprofile"> 3 <div class="fairwayprofile">
4 </div> 4 </div>
5 <div class="waterlevelselection d-flex flex-column"> 5 <!-- <div class="waterlevelselection d-flex flex-column">
6 <div class="form-check" v-for="level in waterLevels" :key="level.level"> 6 <div class="form-check" v-for="level in waterLevels" :key="level.level">
7 <input class="form-check-input" :id="level.year" v-model="selectedWaterLevel" :value="level.level" type="radio"> 7 <input class="form-check-input" :id="level.year" @change="setWaterlevel(level)" :value="level.level" type="radio">
8 <label class="form-check-label" :for="level.year">{{level.year}}</label> 8 <label class="form-check-label" :for="level.year">{{level.year}}</label>
9 </div> 9 </div>
10 </div> 10 </div> -->
11 </div> 11 </div>
12 </template> 12 </template>
13 13
14 <style lang="scss"> 14 <style lang="scss">
15 .waterlevelselection { 15 .waterlevelselection {
82 fairwayCoordinates() { 82 fairwayCoordinates() {
83 this.drawDiagram(); 83 this.drawDiagram();
84 } 84 }
85 }, 85 },
86 methods: { 86 methods: {
87 setWaterlevel(level) {
88 console.log(level);
89 },
87 drawDiagram() { 90 drawDiagram() {
88 const chartDiv = document.querySelector(".fairwayprofile"); 91 const chartDiv = document.querySelector(".fairwayprofile");
89 d3.select("svg").remove(); 92 d3.select("svg").remove();
90 let svg = d3.select(chartDiv).append("svg"); 93 let svg = d3.select(chartDiv).append("svg");
91 svg.attr("width", this.width); 94 svg.attr("width", this.width);
137 let fairwayArea = d3 140 let fairwayArea = d3
138 .area() 141 .area()
139 .x(function(d) { 142 .x(function(d) {
140 return xScale(d.x); 143 return xScale(d.x);
141 }) 144 })
142 .y0(0) 145 .y0(yScaleRight(0))
143 .y1(function(d) { 146 .y1(function(d) {
144 return yScaleRight(d.y); 147 return yScaleRight(d.y);
145 }); 148 });
146 graph 149 graph
147 .append("path") 150 .append("path")
148 .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) 151 .datum([{ x: startPoint, y: -depth }, { x: endPoint, y: -depth }])
149 .attr("fill", "#002AFF") 152 .attr("fill", "#002AFF")
150 .attr("stroke-opacity", 0.65) 153 .attr("stroke-opacity", 0.65)
151 .attr("fill-opacity", 0.65) 154 .attr("fill-opacity", 0.65)
152 .attr("stroke", "#FFD20D") 155 .attr("stroke", "#FFD20D")
153 .attr("d", fairwayArea); 156 .attr("d", fairwayArea);