Mercurial > gemma
comparison client/src/fairway/Fairwayprofile.vue @ 844:c2cba785ca4d
WIP Fairwayprofile
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 28 Sep 2018 11:40:28 +0200 |
parents | 07be3e5f99a9 |
children | 596ef3b46028 |
comparison
equal
deleted
inserted
replaced
843:d2aa972df342 | 844:c2cba785ca4d |
---|---|
46 "yScaleRight", | 46 "yScaleRight", |
47 "margin", | 47 "margin", |
48 "totalLength", | 48 "totalLength", |
49 "waterLevels", | 49 "waterLevels", |
50 "fairwayCoordinates", | 50 "fairwayCoordinates", |
51 "selectedWaterLevel" | 51 "selectedWaterLevel", |
52 "minAlt", | |
53 "maxAlt" | |
52 ], | 54 ], |
53 computed: { | 55 computed: { |
54 waterColor() { | 56 waterColor() { |
55 const result = this.waterLevels.find( | 57 const result = this.waterLevels.find( |
56 x => x.level === this.selectedWaterLevel | 58 x => x.level === this.selectedWaterLevel |
135 let fairwayArea = d3 | 137 let fairwayArea = d3 |
136 .area() | 138 .area() |
137 .x(function(d) { | 139 .x(function(d) { |
138 return xScale(d.x); | 140 return xScale(d.x); |
139 }) | 141 }) |
140 .y0(yScaleRight(this.selectedWaterLevel)) | 142 .y0(0) |
141 .y1(function(d) { | 143 .y1(function(d) { |
142 return yScaleRight(d.y); | 144 return yScaleRight(d.y); |
143 }); | 145 }); |
144 graph | 146 graph |
145 .append("path") | 147 .append("path") |
233 .y1(function(d) { | 235 .y1(function(d) { |
234 return yScaleRight(d.y); | 236 return yScaleRight(d.y); |
235 }); | 237 }); |
236 graph | 238 graph |
237 .append("path") | 239 .append("path") |
238 .datum([ | 240 .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) |
239 { x: 0, y: this.selectedWaterLevel }, | |
240 { x: this.totalLength, y: this.selectedWaterLevel } | |
241 ]) | |
242 .attr("fill", this.waterColor) | 241 .attr("fill", this.waterColor) |
243 .attr("stroke", this.waterColor) | 242 .attr("stroke", this.waterColor) |
244 .attr("d", waterArea); | 243 .attr("d", waterArea); |
245 }, | 244 }, |
246 drawProfile({ graph, xScale, yScaleLeft, currentData, height }) { | 245 drawProfile({ graph, xScale, yScaleLeft, currentData, height }) { |