Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 3527:8a9ee18de13f waterlevel-in-crossprofile

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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)