Mercurial > gemma
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", |