Mercurial > gemma
comparison client/src/components/fairway/Fairwayprofile.vue @ 3527:8a9ee18de13f waterlevel-in-crossprofile
client: fairway profiles: implemented selection between depth reference waterlevel and current waterlevel
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 29 May 2019 15:56:14 +0200 |
parents | 320aa3b85152 |
children | 804df080c826 |
comparison
equal
deleted
inserted
replaced
3522:320aa3b85152 | 3527:8a9ee18de13f |
---|---|
183 .getLayer("BOTTLENECKS") | 183 .getLayer("BOTTLENECKS") |
184 .getSource() | 184 .getSource() |
185 .getFeatures() | 185 .getFeatures() |
186 .find(f => f.get("objnam") === this.selectedBottleneck); | 186 .find(f => f.get("objnam") === this.selectedBottleneck); |
187 }, | 187 }, |
188 refWaterlevels() { | 188 waterlevel() { |
189 return JSON.parse(this.bottleneck.get("reference_water_levels")); | 189 return this.selectedWaterLevel === "ref" |
190 ? this.refWaterlevel | |
191 : this.bottleneck.get("gm_waterlevel"); | |
192 }, | |
193 refWaterlevel() { | |
194 return this.selectedSurvey.waterlevel_value; | |
190 } | 195 } |
191 }, | 196 }, |
192 watch: { | 197 watch: { |
193 currentData() { | 198 currentData() { |
194 this.drawDiagram(); | 199 this.drawDiagram(); |
519 .domain([0, this.totalLength]) | 524 .domain([0, this.totalLength]) |
520 .rangeRound([0, width]); | 525 .rangeRound([0, width]); |
521 | 526 |
522 let yScaleRight = d3 | 527 let yScaleRight = d3 |
523 .scaleLinear() | 528 .scaleLinear() |
524 .domain([this.maxAlt * 1.1, -(this.maxAlt * 0.1)]) | 529 .domain([ |
530 this.maxAlt * 1.1 + | |
531 Math.abs(this.waterlevel - this.refWaterlevel) / 100, | |
532 -(this.maxAlt * 0.1) | |
533 ]) | |
525 .rangeRound([height, 0]); | 534 .rangeRound([height, 0]); |
526 | 535 |
527 let yScaleLeft = d3 | 536 let yScaleLeft = d3 |
528 .scaleLinear() | 537 .scaleLinear() |
529 .domain([ | 538 .domain([ |
530 this.refWaterlevels.LDC - this.maxAlt * 100, | 539 this.waterlevel - |
531 this.refWaterlevels.LDC + this.maxAlt * 0.1 * 100 | 540 (this.maxAlt * 100 + |
541 Math.abs(this.waterlevel - this.refWaterlevel)), | |
542 this.waterlevel + this.maxAlt * 0.1 * 100 | |
532 ]) | 543 ]) |
533 .rangeRound([height, 0]); | 544 .rangeRound([height, 0]); |
534 | 545 |
535 let xAxis = d3.axisBottom(xScale).ticks(5); | 546 let xAxis = d3.axisBottom(xScale).ticks(5); |
536 let yAxisRight = d3.axisRight(yScaleRight); | 547 let yAxisRight = d3.axisRight(yScaleRight); |
611 let profileLine = d3 | 622 let profileLine = d3 |
612 .line() | 623 .line() |
613 .x(d => { | 624 .x(d => { |
614 return xScale(d.x); | 625 return xScale(d.x); |
615 }) | 626 }) |
616 .y(d => { | 627 .y(d => |
617 return yScaleRight(d.y); | 628 yScaleRight( |
618 }); | 629 d.y + Math.abs(this.waterlevel - this.refWaterlevel) / 100 |
630 ) | |
631 ); | |
619 let profileArea = d3 | 632 let profileArea = d3 |
620 .area() | 633 .area() |
621 .x(function(d) { | 634 .x(function(d) { |
622 return xScale(d.x); | 635 return xScale(d.x); |
623 }) | 636 }) |
624 .y0(height) | 637 .y0(height) |
625 .y1(function(d) { | 638 .y1(d => |
626 return yScaleRight(d.y); | 639 yScaleRight( |
627 }); | 640 d.y + Math.abs(this.waterlevel - this.refWaterlevel) / 100 |
641 ) | |
642 ); | |
628 graph | 643 graph |
629 .append("path") | 644 .append("path") |
630 .datum(part) | 645 .datum(part) |
631 .attr("fill", color) | 646 .attr("fill", color) |
632 .attr("stroke", color) | 647 .attr("stroke", color) |