Mercurial > gemma
comparison client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3368:70605404f37d
fa_lnwl: prototypical diagram added
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 22 May 2019 11:00:25 +0200 |
parents | 8974efd71917 |
children | ccb5455f0713 |
comparison
equal
deleted
inserted
replaced
3367:ecb4baa2be1a | 3368:70605404f37d |
---|---|
419 .attr("height", this.dimensions.mainHeight); | 419 .attr("height", this.dimensions.mainHeight); |
420 this.diagram = diagram | 420 this.diagram = diagram |
421 .append("g") | 421 .append("g") |
422 .attr("transform", `translate(0 ${this.paddingTop})`); | 422 .attr("transform", `translate(0 ${this.paddingTop})`); |
423 }, | 423 }, |
424 drawBars() {}, | 424 drawBars() { |
425 this.drawLNWL(); | |
426 }, | |
427 drawLNWL() { | |
428 let lnwl = this.diagram | |
429 .append("g") | |
430 .attr("transform", `translate(${this.paddingRight})`); | |
431 lnwl | |
432 .selectAll("rect") | |
433 .data(this.fwLNWLData.lnwl) | |
434 .enter() | |
435 .append("rect") | |
436 .attr("height", d => { | |
437 return this.yScale(0) - this.yScale(d.percent); | |
438 }) | |
439 .attr("y", d => { | |
440 return this.yScale(d.translateY); | |
441 }) | |
442 .attr("width", this.barsWidth) | |
443 .attr("fill", d => { | |
444 if (d.level === "LDC") return "#aaaaaa"; | |
445 return "#3333cc"; | |
446 }); | |
447 }, | |
425 drawScaleLabel() { | 448 drawScaleLabel() { |
426 const center = this.dimensions.mainHeight / 2; | 449 const center = this.dimensions.mainHeight / 2; |
427 this.diagram | 450 this.diagram |
428 .append("text") | 451 .append("text") |
429 .text(this.$options.LEGEND) | 452 .text(this.$options.LEGEND) |