Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 4361:8a26225b6133 fa-round-in-backend

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: change AvailableFairwayDepth diagram * Use days from the backend to draw the AvailableFairwayDepth diagram, by removing the hoursInDays() function.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 09 Sep 2019 17:24:14 +0200
parents 2f212f520a04
children 7d9376f8a28c
comparison
equal deleted inserted replaced
4355:60efb69c4245 4361:8a26225b6133
91 import { HTTP } from "@/lib/http"; 91 import { HTTP } from "@/lib/http";
92 import { displayError } from "@/lib/errors"; 92 import { displayError } from "@/lib/errors";
93 import { FREQUENCIES } from "@/store/fairwayavailability"; 93 import { FREQUENCIES } from "@/store/fairwayavailability";
94 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; 94 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
95 95
96 // FIXME This is a rounding methods that shows that we have fractions,
97 // because we are coming from hours. Users will understand the underlying
98 // math better and we can see if this is wanted.
99 // With the backend just giving us the summarized hours, we cannot do
100 // a classification of each day into a category.
101 // (The name of the function is kept to keep the diff more readable and
102 // should changed if this is more clarified.)
103 const hoursInDays = x => Math.round((x * 10) / 24) / 10;
104
105 export default { 96 export default {
106 mixins: [diagram, pdfgen, templateLoader], 97 mixins: [diagram, pdfgen, templateLoader],
107 components: { 98 components: {
108 DiagramLegend: () => import("@/components/DiagramLegend") 99 DiagramLegend: () => import("@/components/DiagramLegend")
109 }, 100 },
473 let y = d3.mouse(this)[1]; 464 let y = d3.mouse(this)[1];
474 const dy = document 465 const dy = document
475 .querySelector(".diagram-container") 466 .querySelector(".diagram-container")
476 .getBoundingClientRect().left; 467 .getBoundingClientRect().left;
477 d3.select("#tooltip") 468 d3.select("#tooltip")
478 .text(hoursInDays(d.height)) 469 .text(d.height)
479 .attr("y", y - 10) 470 .attr("y", y - 10)
480 .attr("x", d3.event.pageX - dy); 471 .attr("x", d3.event.pageX - dy);
481 //d3.event.pageX gives coordinates relative to SVG 472 //d3.event.pageX gives coordinates relative to SVG
482 //dy gives offset of svg on page 473 //dy gives offset of svg on page
483 }) 474 })
484 .attr("y", d => { 475 .attr("y", d => 2 * yScale(0) - yScale(d.translateY) + this.paddingTop)
485 return (
486 2 * yScale(0) - yScale(hoursInDays(d.translateY)) + this.paddingTop
487 );
488 })
489 .attr("height", d => { 476 .attr("height", d => {
490 return yScale(0) - yScale(hoursInDays(d.height)); 477 return yScale(0) - yScale(d.height);
491 }) 478 })
492 .attr("x", ldcOffset + spaceBetween / 2) 479 .attr("x", ldcOffset + spaceBetween / 2)
493 .attr("width", widthPerItem - ldcOffset - spaceBetween) 480 .attr("width", widthPerItem - ldcOffset - spaceBetween)
494 .attr("id", "lower") 481 .attr("id", "lower")
495 .attr("fill", (d, i) => { 482 .attr("fill", (d, i) => {
498 if (this.showNumbers) { 485 if (this.showNumbers) {
499 everyBar 486 everyBar
500 .selectAll("g.bars") 487 .selectAll("g.bars")
501 .data(d => d.lowerLevels) 488 .data(d => d.lowerLevels)
502 .enter() 489 .enter()
503 .filter(d => hoursInDays(d.height) > 0) 490 .filter(d => d.height > 0)
504 .insert("text") 491 .insert("text")
505 .attr("y", d => { 492 .attr("y", d => {
506 return ( 493 return (
507 2 * yScale(0) - 494 2 * yScale(0) -
508 yScale(hoursInDays(d.translateY)) + 495 yScale(d.translateY) +
509 this.paddingTop + 496 this.paddingTop +
510 (yScale(0) - yScale(hoursInDays(d.height))) + 497 (yScale(0) - yScale(d.height)) +
511 (yScale(0) - yScale(1.9)) //instead o alignment-baseline hanging 498 (yScale(0) - yScale(1.9)) //instead o alignment-baseline hanging
512 ); 499 );
513 }) 500 })
514 .attr("x", widthPerItem / 2) 501 .attr("x", widthPerItem / 2)
515 .text(d => hoursInDays(d.height)) 502 .text(d => d.height)
516 // does not work with svg2pdf .attr("alignment-baseline", "hanging") 503 // does not work with svg2pdf .attr("alignment-baseline", "hanging")
517 .attr("text-anchor", "middle") 504 .attr("text-anchor", "middle")
518 .attr("font-size", "8") 505 .attr("font-size", "8")
519 .attr("fill", "black"); 506 .attr("fill", "black");
520 } 507 }
521 }, 508 },
522 fnheight({ name, yScale }) { 509 fnheight({ name, yScale }) {
523 return d => yScale(0) - yScale(hoursInDays(d[name])); 510 return d => yScale(0) - yScale(d[name]);
524 }, 511 },
525 drawLDC({ everyBar, yScale, widthPerItem, spaceBetween, ldcOffset }) { 512 drawLDC({ everyBar, yScale, widthPerItem, spaceBetween, ldcOffset }) {
526 const height = this.fnheight({ name: "ldc", yScale }); 513 const height = this.fnheight({ name: "ldc", yScale });
527 everyBar 514 everyBar
528 .append("rect") 515 .append("rect")
538 let y = d3.mouse(this)[1]; 525 let y = d3.mouse(this)[1];
539 const dy = document 526 const dy = document
540 .querySelector(".diagram-container") 527 .querySelector(".diagram-container")
541 .getBoundingClientRect().left; 528 .getBoundingClientRect().left;
542 d3.select("#tooltip") 529 d3.select("#tooltip")
543 .text(hoursInDays(d.ldc)) 530 .text(d.ldc)
544 .attr("y", y - 50) 531 .attr("y", y - 50)
545 .attr("x", d3.event.pageX - dy); 532 .attr("x", d3.event.pageX - dy);
546 //d3.event.pageX gives coordinates relative to SVG 533 //d3.event.pageX gives coordinates relative to SVG
547 //dy gives offset of svg on page 534 //dy gives offset of svg on page
548 }) 535 })
556 ) 543 )
557 .attr("fill", this.$options.COLORS.LDC) 544 .attr("fill", this.$options.COLORS.LDC)
558 .attr("id", "ldc"); 545 .attr("id", "ldc");
559 if (this.showNumbers) { 546 if (this.showNumbers) {
560 everyBar 547 everyBar
561 .filter(d => hoursInDays(d.ldc) > 0) 548 .filter(d => d.ldc > 0)
562 .append("text") 549 .append("text")
563 .attr("y", yScale(0.5)) // some distance from the bar 550 .attr("y", yScale(0.5)) // some distance from the bar
564 .attr("x", spaceBetween / 2) 551 .attr("x", spaceBetween / 2)
565 .text(d => hoursInDays(d.ldc)) 552 .text(d => d.ldc)
566 .attr("text-anchor", "left") 553 .attr("text-anchor", "left")
567 .attr("font-size", "8") 554 .attr("font-size", "8")
568 .attr( 555 .attr(
569 "transform", 556 "transform",
570 d => `translate(0 ${this.paddingTop + -1 * height(d)})` 557 d => `translate(0 ${this.paddingTop + -1 * height(d)})`
594 let y = d3.mouse(this)[1]; 581 let y = d3.mouse(this)[1];
595 const dy = document 582 const dy = document
596 .querySelector(".diagram-container") 583 .querySelector(".diagram-container")
597 .getBoundingClientRect().left; 584 .getBoundingClientRect().left;
598 d3.select("#tooltip") 585 d3.select("#tooltip")
599 .text(hoursInDays(d.highestLevel)) 586 .text(d.highestLevel)
600 .attr("y", y - 50) 587 .attr("y", y - 50)
601 .attr("x", d3.event.pageX - dy); 588 .attr("x", d3.event.pageX - dy);
602 //d3.event.pageX gives coordinates relative to SVG 589 //d3.event.pageX gives coordinates relative to SVG
603 //dy gives offset of svg on page 590 //dy gives offset of svg on page
604 }) 591 })
611 d => `translate(0 ${this.paddingTop + -1 * height(d)})` 598 d => `translate(0 ${this.paddingTop + -1 * height(d)})`
612 ) 599 )
613 .attr("fill", this.$options.COLORS.HIGHEST); 600 .attr("fill", this.$options.COLORS.HIGHEST);
614 if (this.showNumbers) { 601 if (this.showNumbers) {
615 everyBar 602 everyBar
616 .filter(d => hoursInDays(d.highestLevel) > 0) 603 .filter(d => d.highestLevel > 0)
617 .append("text") 604 .append("text")
618 .attr("y", yScale(0.5)) // some distance from the bar 605 .attr("y", yScale(0.5)) // some distance from the bar
619 .attr("x", widthPerItem / 2) 606 .attr("x", widthPerItem / 2)
620 .text(d => hoursInDays(d.highestLevel)) 607 .text(d => d.highestLevel)
621 .attr("text-anchor", "middle") 608 .attr("text-anchor", "middle")
622 .attr("font-size", "8") 609 .attr("font-size", "8")
623 .attr( 610 .attr(
624 "transform", 611 "transform",
625 d => `translate(0 ${this.paddingTop + -1 * height(d)})` 612 d => `translate(0 ${this.paddingTop + -1 * height(d)})`