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 }) {