comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3914:9440d2922097

client: available fairwaydepth diagram: adjust width of ldc bar, draw 0-tick line as solid line
author Markus Kottlaender <markus@intevation.de>
date Thu, 11 Jul 2019 12:49:38 +0200
parents e4e496ae7974
children be0deb139518
comparison
equal deleted inserted replaced
3913:9ec50fd5c9fa 3914:9440d2922097
501 }); 501 });
502 }, 502 },
503 fnheight({ name, yScale }) { 503 fnheight({ name, yScale }) {
504 return d => yScale(0) - yScale(hoursInDays(d[name])); 504 return d => yScale(0) - yScale(hoursInDays(d[name]));
505 }, 505 },
506 drawLDC({ everyBar, yScale, widthPerItem, spaceBetween }) { 506 drawLDC({ everyBar, yScale, widthPerItem, spaceBetween, ldcOffset }) {
507 const height = this.fnheight({ name: "ldc", yScale }); 507 const height = this.fnheight({ name: "ldc", yScale });
508 everyBar 508 everyBar
509 .append("rect") 509 .append("rect")
510 .on("mouseover", function() { 510 .on("mouseover", function() {
511 d3.select(this).attr("opacity", "0.8"); 511 d3.select(this).attr("opacity", "0.8");
529 //dy gives offset of svg on page 529 //dy gives offset of svg on page
530 }) 530 })
531 .attr("y", yScale(0)) 531 .attr("y", yScale(0))
532 .attr("height", height) 532 .attr("height", height)
533 .attr("x", spaceBetween / 2) 533 .attr("x", spaceBetween / 2)
534 .attr("width", widthPerItem - spaceBetween) 534 .attr("width", widthPerItem - ldcOffset - spaceBetween)
535 .attr( 535 .attr(
536 "transform", 536 "transform",
537 d => `translate(0 ${this.paddingTop + -1 * height(d)})` 537 d => `translate(0 ${this.paddingTop + -1 * height(d)})`
538 ) 538 )
539 .attr("fill", this.$options.COLORS.LDC) 539 .attr("fill", this.$options.COLORS.LDC)
642 .select(function() { 642 .select(function() {
643 return this.parentNode; 643 return this.parentNode;
644 }) 644 })
645 .filter(d => d === 0) 645 .filter(d => d === 0)
646 .selectAll(".tick line") 646 .selectAll(".tick line")
647 .attr("stroke-dasharray", "none")
647 .attr("stroke", "#333"); 648 .attr("stroke", "#333");
648 diagram 649 diagram
649 .append("g") 650 .append("g")
650 .attr( 651 .attr(
651 "transform", 652 "transform",