Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3916:c76bbd27f89c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: AFDvsLNWL diagram: adjusted height to be same as other AFD diagram
author Markus Kottlaender <markus@intevation.de>
date Thu, 11 Jul 2019 14:14:48 +0200
parents 9ec50fd5c9fa
children 1e837d86bead
comparison
equal deleted inserted replaced
3915:f7f09f32d6e0 3916:c76bbd27f89c
44 </div> 44 </div>
45 </DiagramLegend> 45 </DiagramLegend>
46 <div 46 <div
47 ref="diagramContainer" 47 ref="diagramContainer"
48 :id="containerId" 48 :id="containerId"
49 class="mx-auto my-auto diagram-container" 49 class="diagram-container flex-fill"
50 ></div> 50 ></div>
51 </div> 51 </div>
52 </div> 52 </div>
53 </template> 53 </template>
54 54
88 data() { 88 data() {
89 return { 89 return {
90 containerId: "availablefairwaydepthlnwl", 90 containerId: "availablefairwaydepthlnwl",
91 resizeListenerFunction: null, 91 resizeListenerFunction: null,
92 loading: false, 92 loading: false,
93 labelPaddingTop: 15, 93 scalePaddingLeft: 60,
94 scalePaddingLeft: 50, 94 scalePaddingRight: 0,
95 scalePaddingRight: 30, 95 paddingTop: 25,
96 paddingTop: 10,
97 pdf: { 96 pdf: {
98 doc: null, 97 doc: null,
99 width: null, 98 width: null,
100 height: null 99 height: null
101 }, 100 },
343 }, 342 },
344 close() { 343 close() {
345 this.$store.commit("application/paneSetup", "DEFAULT"); 344 this.$store.commit("application/paneSetup", "DEFAULT");
346 }, 345 },
347 getDimensions({ svgHeight, svgWidth }) { 346 getDimensions({ svgHeight, svgWidth }) {
348 const mainMargin = { top: 20, right: 20, bottom: 110, left: 200 }; 347 const mainMargin = { top: 0, right: 20, bottom: 75, left: 200 };
349 const navMargin = { 348 const navMargin = {
350 top: svgHeight - mainMargin.top - 65, 349 top: svgHeight - mainMargin.top - 65,
351 right: 20, 350 right: 20,
352 bottom: 30, 351 bottom: 30,
353 left: 80 352 left: 80
378 }, 377 },
379 renderTo({ element, dimensions }) { 378 renderTo({ element, dimensions }) {
380 let diagram = d3 379 let diagram = d3
381 .select(element) 380 .select(element)
382 .append("svg") 381 .append("svg")
383 .attr("width", dimensions.width) 382 .attr("width", "100%")
384 .attr("height", dimensions.mainHeight); 383 .attr("height", "100%");
385 diagram = diagram 384 diagram = diagram.append("g");
386 .append("g")
387 .attr("transform", `translate(0 ${this.paddingTop})`);
388 const yScale = d3 385 const yScale = d3
389 .scaleLinear() 386 .scaleLinear()
390 .domain([0, 100]) 387 .domain([0, 100])
391 .range([dimensions.mainHeight - 30, 0]); 388 .range([dimensions.mainHeight - 30, 0]);
392 this.drawScaleLabel({ diagram, dimensions }); 389 this.drawScaleLabel({ diagram, dimensions });
436 .attr("font-size", "9") 433 .attr("font-size", "9")
437 .attr( 434 .attr(
438 "transform", 435 "transform",
439 `translate(${this.scalePaddingLeft + 436 `translate(${this.scalePaddingLeft +
440 widthPerItem * i + 437 widthPerItem * i +
441 widthPerItem / 2} ${dimensions.mainHeight - 15})` 438 widthPerItem / 2} ${dimensions.mainHeight + this.paddingTop - 5})`
442 ); 439 );
443 }, 440 },
444 drawAFD( 441 drawAFD(
445 data, 442 data,
446 i, 443 i,
497 } 494 }
498 if (i === 2) { 495 if (i === 2) {
499 return yScale(data.above + data.between + d); 496 return yScale(data.above + data.between + d);
500 } 497 }
501 }) 498 })
499 .attr("transform", `translate(0 ${this.paddingTop})`)
502 .attr("width", afdWidth) 500 .attr("width", afdWidth)
503 .attr("fill", (d, i) => { 501 .attr("fill", (d, i) => {
504 return this.$options.AFDCOLORS[i]; 502 return this.$options.AFDCOLORS[i];
505 }); 503 });
506 }, 504 },
540 return yScale(0) - yScale(d); 538 return yScale(0) - yScale(d);
541 }) 539 })
542 .attr("y", d => { 540 .attr("y", d => {
543 return yScale(d); 541 return yScale(d);
544 }) 542 })
543 .attr("transform", `translate(0 ${this.paddingTop})`)
545 .attr("width", ldcWidth) 544 .attr("width", ldcWidth)
546 .attr("fill", () => { 545 .attr("fill", () => {
547 return this.$options.LWNLCOLORS.LDC; 546 return this.$options.LWNLCOLORS.LDC;
548 }); 547 });
549 }, 548 },
550 drawScaleLabel({ diagram, dimensions }) { 549 drawScaleLabel({ diagram, dimensions }) {
551 const center = dimensions.mainHeight / 2;
552 diagram 550 diagram
553 .append("text") 551 .append("text")
554 .text(this.$options.LEGEND) 552 .text(this.$options.LEGEND)
555 .attr("text-anchor", "middle") 553 .attr("text-anchor", "middle")
556 .attr("x", 0) 554 .attr("x", 0)
557 .attr("y", 0) 555 .attr("y", 0)
558 .attr("dy", "10") 556 .attr("dy", "20")
559 // translate a few mm to the right to allow for slightly higher letters 557 // translate a few mm to the right to allow for slightly higher letters
560 .attr("transform", `translate(2, ${center}), rotate(-90)`); 558 .attr(
559 "transform",
560 `translate(2, ${(dimensions.mainHeight + this.paddingTop) /
561 2}), rotate(-90)`
562 );
561 }, 563 },
562 drawScale({ diagram, dimensions, yScale }) { 564 drawScale({ diagram, dimensions, yScale }) {
563 const yAxisLeft = d3 565 const yAxisLeft = d3
564 .axisLeft() 566 .axisLeft()
565 .tickSizeInner( 567 .tickSizeInner(
577 579
578 diagram 580 diagram
579 .append("g") 581 .append("g")
580 .attr( 582 .attr(
581 "transform", 583 "transform",
582 `translate(${dimensions.width - this.scalePaddingRight})` 584 `translate(${dimensions.width - this.scalePaddingRight} ${
585 this.paddingTop
586 })`
583 ) 587 )
584 .call(yAxisLeft) 588 .call(yAxisLeft)
585 .selectAll(".tick text") 589 .selectAll(".tick text")
586 .attr("fill", "black") 590 .attr("fill", "black")
587 .attr("dx", -6) 591 .attr("dx", -6)
598 .selectAll(".tick line") 602 .selectAll(".tick line")
599 .attr("stroke-dasharray", "none") 603 .attr("stroke-dasharray", "none")
600 .attr("stroke", "#333"); 604 .attr("stroke", "#333");
601 diagram 605 diagram
602 .append("g") 606 .append("g")
603 .attr("transform", `translate(${this.scalePaddingLeft})`) 607 .attr(
608 "transform",
609 `translate(${this.scalePaddingLeft} ${this.paddingTop})`
610 )
604 .call(yAxisRight) 611 .call(yAxisRight)
605 .selectAll(".tick text") 612 .selectAll(".tick text")
606 .attr("fill", "black") 613 .attr("fill", "black")
607 .attr("dx", 6) 614 .attr("dx", 6)
608 .select(function() { 615 .select(function() {