Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 4359:057787583b12

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add showNumbers option to AvailableFairwayDepthLNWL * Add code similiar to AvailableFairwayDepth.vue, but slightly different because the bars are drawn differently. Each draw function uses its own method to select the svg elements to modify.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 09 Sep 2019 17:03:27 +0200
parents 0d516bac1aae
children 59a7b7ec56c4
comparison
equal deleted inserted replaced
4358:a7196b55c064 4359:057787583b12
40 :download="csvFileName" 40 :download="csvFileName"
41 class="mt-2 btn btn-sm btn-info w-100" 41 class="mt-2 btn btn-sm btn-info w-100"
42 >Download CSV</a 42 >Download CSV</a
43 > 43 >
44 </div> 44 </div>
45 <div class="btn-group-toggle w-100 mt-2">
46 <label
47 class="btn btn-outline-secondary btn-sm"
48 :class="{ active: showNumbers }"
49 ><input
50 type="checkbox"
51 v-model="showNumbers"
52 autocomplete="off"
53 />Numbers
54 </label>
55 </div>
45 </DiagramLegend> 56 </DiagramLegend>
46 <div 57 <div
47 ref="diagramContainer" 58 ref="diagramContainer"
48 :id="containerId" 59 :id="containerId"
49 class="diagram-container flex-fill" 60 class="diagram-container flex-fill"
67 * 78 *
68 * Author(s): 79 * Author(s):
69 * * Thomas Junk <thomas.junk@intevation.de> 80 * * Thomas Junk <thomas.junk@intevation.de>
70 * * Markus Kottländer <markus.kottlaender@intevation.de> 81 * * Markus Kottländer <markus.kottlaender@intevation.de>
71 * * Fadi Abbud <fadi.abbud@intevation.de> 82 * * Fadi Abbud <fadi.abbud@intevation.de>
83 * * Bernhard Reiter <bernhard.reiter@intevation.de>
72 */ 84 */
73 import * as d3 from "d3"; 85 import * as d3 from "d3";
74 import app from "@/main"; 86 import app from "@/main";
75 import debounce from "debounce"; 87 import debounce from "debounce";
76 import { mapState } from "vuex"; 88 import { mapState } from "vuex";
101 form: { 113 form: {
102 template: null 114 template: null
103 }, 115 },
104 templateData: null, 116 templateData: null,
105 templates: [], 117 templates: [],
106 defaultTemplate: defaultDiagramTemplate 118 defaultTemplate: defaultDiagramTemplate,
119 showNumbers: false
107 }; 120 };
108 }, 121 },
109 created() { 122 created() {
110 this.resizeListenerFunction = debounce(this.drawDiagram, 100); 123 this.resizeListenerFunction = debounce(this.drawDiagram, 100);
111 window.addEventListener("resize", this.resizeListenerFunction); 124 window.addEventListener("resize", this.resizeListenerFunction);
475 .attr("transform", `translate(0 ${this.paddingTop})`) 488 .attr("transform", `translate(0 ${this.paddingTop})`)
476 .attr("width", afdWidth) 489 .attr("width", afdWidth)
477 .attr("fill", (d, i) => { 490 .attr("fill", (d, i) => {
478 return this.$options.AFDCOLORS[i]; 491 return this.$options.AFDCOLORS[i];
479 }); 492 });
493 if (this.showNumbers) {
494 afd
495 .selectAll("text")
496 .data([data.above, data.between, data.below])
497 .enter()
498 .append("text")
499 .attr("fill", "black")
500 .attr("text-anchor", "middle")
501 .attr("x", ldcWidth / 2)
502 .attr("y", (d, i) => {
503 let h = d; // i == 0
504 if (i > 0) {
505 h += data.above;
506 }
507 if (i > 1) {
508 h += data.between;
509 }
510 return yScale(h + 0.8) + this.paddingTop;
511 })
512 .text(d => (d > 0 ? Math.round(d) : ""))
513 .attr("font-size", "8");
514 }
480 }, 515 },
481 drawLNWL(data, i, diagram, spaceBetween, widthPerItem, ldcWidth, yScale) { 516 drawLNWL(data, i, diagram, spaceBetween, widthPerItem, ldcWidth, yScale) {
482 let lnwl = diagram 517 let lnwl = diagram
483 .append("g") 518 .append("g")
484 .attr( 519 .attr(
508 .attr("y", y - 10) 543 .attr("y", y - 10)
509 .attr("x", d3.event.pageX - dy); 544 .attr("x", d3.event.pageX - dy);
510 //d3.event.pageX gives coordinates relative to SVG 545 //d3.event.pageX gives coordinates relative to SVG
511 //dy gives offset of svg on page 546 //dy gives offset of svg on page
512 }) 547 })
513 .attr("height", d => { 548 .attr("height", d => yScale(0) - yScale(d))
514 return yScale(0) - yScale(d); 549 .attr("y", d => yScale(d))
515 })
516 .attr("y", d => {
517 return yScale(d);
518 })
519 .attr("transform", `translate(0 ${this.paddingTop})`) 550 .attr("transform", `translate(0 ${this.paddingTop})`)
520 .attr("width", ldcWidth) 551 .attr("width", ldcWidth)
521 .attr("fill", () => { 552 .attr("fill", () => {
522 return this.$options.LWNLCOLORS.LDC; 553 return this.$options.LWNLCOLORS.LDC;
523 }); 554 });
555 if (this.showNumbers) {
556 // we do not need to bind data or a datum as the forEach in drawBars
557 // already brings us only one datum in data
558 lnwl
559 .append("text")
560 .attr("y", yScale(data.ldc + 0.8) + this.paddingTop)
561 .text(data.ldc)
562 .attr("text-anchor", "left")
563 .attr("fill", "black")
564 .attr("font-size", "8");
565 }
524 }, 566 },
525 drawScaleLabel({ diagram, dimensions }) { 567 drawScaleLabel({ diagram, dimensions }) {
526 diagram 568 diagram
527 .append("text") 569 .append("text")
528 .text(this.$options.LEGEND) 570 .text(this.$options.LEGEND)
529 .attr("text-anchor", "middle") 571 .attr("text-anchor", "middle")
530 .attr("x", 0) 572 .attr("x", 0)
531 .attr("y", 0) 573 .attr("y", 0)
532 .attr("dy", "20") 574 .attr("dy", "20")
575 .attr("fill", "black")
533 // translate a few mm to the right to allow for slightly higher letters 576 // translate a few mm to the right to allow for slightly higher letters
534 .attr( 577 .attr(
535 "transform", 578 "transform",
536 `translate(2, ${(dimensions.mainHeight + this.paddingTop) / 579 `translate(2, ${(dimensions.mainHeight + this.paddingTop) /
537 2}), rotate(-90)` 580 2}), rotate(-90)`
601 } 644 }
602 }, 645 },
603 watch: { 646 watch: {
604 fwLNWLData() { 647 fwLNWLData() {
605 this.drawDiagram(); 648 this.drawDiagram();
649 },
650 showNumbers() {
651 this.drawDiagram();
606 } 652 }
607 }, 653 },
608 LEGEND: app.$gettext("Percent"), 654 LEGEND: app.$gettext("Percent"),
609 AFDCOLORS: ["blue", "darksalmon", "hotpink"], 655 AFDCOLORS: ["blue", "darksalmon", "hotpink"],
610 LWNLCOLORS: { 656 LWNLCOLORS: {