Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3877:d82b5e5868e3 improve-fwa-diagrams

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: available fairway depth diagrams: draw horizontal scale lines for better readability
author Markus Kottlaender <markus@intevation.de>
date Fri, 21 Jun 2019 10:19:40 +0200
parents 0c6ef9e655fc
children 1ff97bb72a24
comparison
equal deleted inserted replaced
3876:0c6ef9e655fc 3877:d82b5e5868e3
484 .scaleLinear() 484 .scaleLinear()
485 .domain(this.frequencyToRange) 485 .domain(this.frequencyToRange)
486 .range([this.dimensions.mainHeight - 30, 0]); 486 .range([this.dimensions.mainHeight - 30, 0]);
487 d3.select(".diagram-container svg").remove(); 487 d3.select(".diagram-container svg").remove();
488 this.generateDiagramContainer(); 488 this.generateDiagramContainer();
489 this.drawBars();
490 this.drawScaleLabel(); 489 this.drawScaleLabel();
491 this.drawScale(); 490 this.drawScale();
491 this.drawBars();
492 this.drawTooltip(); 492 this.drawTooltip();
493 }, 493 },
494 generateDiagramContainer() { 494 generateDiagramContainer() {
495 const diagram = d3 495 const diagram = d3
496 .select(".diagram-container") 496 .select(".diagram-container")
509 .attr("opacity", 0) 509 .attr("opacity", 0)
510 .attr("id", "tooltip"); 510 .attr("id", "tooltip");
511 }, 511 },
512 drawBars() { 512 drawBars() {
513 const everyBar = this.diagram 513 const everyBar = this.diagram
514 .selectAll("g") 514 .selectAll("g.bars")
515 .data(this.fwData) 515 .data(this.fwData)
516 .enter() 516 .enter()
517 .append("g") 517 .append("g")
518 .attr("class", "bars")
518 .attr("transform", (d, i) => { 519 .attr("transform", (d, i) => {
519 const dx = this.scalePaddingLeft + i * this.widthPerItem; 520 const dx = this.scalePaddingLeft + i * this.widthPerItem;
520 return `translate(${dx})`; 521 return `translate(${dx})`;
521 }); 522 });
522 this.drawSingleBars(everyBar); 523 this.drawSingleBars(everyBar);
527 this.drawHighestLevel(everyBar); 528 this.drawHighestLevel(everyBar);
528 this.drawLowerLevels(everyBar); 529 this.drawLowerLevels(everyBar);
529 }, 530 },
530 drawLowerLevels(everyBar) { 531 drawLowerLevels(everyBar) {
531 everyBar 532 everyBar
532 .selectAll("g") 533 .selectAll("g.bars")
533 .data(d => d.lowerLevels) 534 .data(d => d.lowerLevels)
534 .enter() 535 .enter()
535 .append("rect") 536 .append("rect")
536 .on("mouseover", function() { 537 .on("mouseover", function() {
537 d3.select(this).attr("opacity", "0.8"); 538 d3.select(this).attr("opacity", "0.8");
655 .attr("y", 0) 656 .attr("y", 0)
656 .attr("dy", "1em") 657 .attr("dy", "1em")
657 .attr("transform", `translate(0, ${center}), rotate(-90)`); 658 .attr("transform", `translate(0, ${center}), rotate(-90)`);
658 }, 659 },
659 drawScale() { 660 drawScale() {
660 const yAxisLeft = d3.axisLeft().scale(this.yScale); 661 const yAxisLeft = d3
661 const yAxisRight = d3.axisRight().scale(this.yScale); 662 .axisLeft()
662 this.diagram 663 .tickSizeInner(
663 .append("g") 664 this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
664 .attr("transform", `translate(${this.scalePaddingLeft})`) 665 )
665 .call(yAxisLeft) 666 .tickSizeOuter(0)
666 .selectAll(".tick text") 667 .scale(this.yScale);
667 .attr("fill", "black") 668 const yAxisRight = d3
668 .select(function() { 669 .axisRight()
669 return this.parentNode; 670 .tickSizeInner(
670 }) 671 this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
671 .selectAll(".tick line") 672 )
672 .attr("stroke", "black"); 673 .tickSizeOuter(0)
674 .scale(this.yScale);
675
673 this.diagram 676 this.diagram
674 .append("g") 677 .append("g")
675 .attr( 678 .attr(
676 "transform", 679 "transform",
677 `translate(${this.dimensions.width - this.scalePaddingRight})` 680 `translate(${this.dimensions.width - this.scalePaddingRight})`
678 ) 681 )
682 .call(yAxisLeft)
683 .selectAll(".tick text")
684 .attr("fill", "black")
685 .attr("dx", -6)
686 .select(function() {
687 return this.parentNode;
688 })
689 .selectAll(".tick line")
690 .attr("stroke-dasharray", 5)
691 .attr("stroke", "#ccc");
692 this.diagram
693 .append("g")
694 .attr("transform", `translate(${this.scalePaddingLeft})`)
679 .call(yAxisRight) 695 .call(yAxisRight)
680 .selectAll(".tick text") 696 .selectAll(".tick text")
681 .attr("fill", "black") 697 .attr("fill", "black")
698 .attr("dx", 6)
682 .select(function() { 699 .select(function() {
683 return this.parentNode; 700 return this.parentNode;
684 }) 701 })
685 .selectAll(".tick line") 702 .selectAll(".tick line")
686 .attr("stroke", "black"); 703 .attr("stroke", "transparent");
687 this.diagram.selectAll(".domain").attr("stroke", "black"); 704 this.diagram.selectAll(".domain").attr("stroke", "black");
688 } 705 }
689 }, 706 },
690 watch: { 707 watch: {
691 fwData() { 708 fwData() {