Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 3936:d859ec6cf2f0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fairwayprofile enhanced Added getDimensions to mixins. Use getDimensions to render fairwayprofile.
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 12 Jul 2019 09:55:03 +0200
parents 90496300311d
children 7b3935a8d9ee
comparison
equal deleted inserted replaced
3935:72b5743dfe64 3936:d859ec6cf2f0
148 */ 148 */
149 import * as d3 from "d3"; 149 import * as d3 from "d3";
150 import { mapState, mapGetters } from "vuex"; 150 import { mapState, mapGetters } from "vuex";
151 import debounce from "debounce"; 151 import debounce from "debounce";
152 import svg2pdf from "svg2pdf.js"; 152 import svg2pdf from "svg2pdf.js";
153 import { pdfgen, templateLoader } from "@/lib/mixins"; 153 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
154 import { HTTP } from "@/lib/http"; 154 import { HTTP } from "@/lib/http";
155 import { displayError } from "@/lib/errors"; 155 import { displayError } from "@/lib/errors";
156 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; 156 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
157 157
158 const GROUND_COLOR = "#4A2F06"; 158 const GROUND_COLOR = "#4A2F06";
159 const WATER_COLOR = "#005DFF"; 159 const WATER_COLOR = "#005DFF";
160 160
161 export default { 161 export default {
162 mixins: [pdfgen, templateLoader], 162 mixins: [diagram, pdfgen, templateLoader],
163 name: "fairwayprofile", 163 name: "fairwayprofile",
164 components: { 164 components: {
165 DiagramLegend: () => import("@/components/DiagramLegend") 165 DiagramLegend: () => import("@/components/DiagramLegend")
166 }, 166 },
167 data() { 167 data() {
348 const offScreen = document.querySelector("#offScreen"); 348 const offScreen = document.querySelector("#offScreen");
349 offScreen.style.width = `${svgWidth}px`; 349 offScreen.style.width = `${svgWidth}px`;
350 offScreen.style.height = `${svgHeight}px`; 350 offScreen.style.height = `${svgHeight}px`;
351 this.renderTo({ 351 this.renderTo({
352 element: offScreen, 352 element: offScreen,
353 dimensions: { 353 dimensions: this.getDimensions({
354 svgWidth: svgWidth - this.margin.right - this.margin.left, 354 svgWidth: svgWidth,
355 svgHeight: svgHeight - this.margin.top - this.margin.bottom 355 svgHeight: svgHeight,
356 } 356 main: {
357 top: 20,
358 right: 80,
359 bottom: 60,
360 left: 80
361 }
362 })
357 }); 363 });
358 var svg = offScreen.querySelector("svg"); 364 var svg = offScreen.querySelector("svg");
359 // use default width,height if they are missing in the template definition 365 // use default width,height if they are missing in the template definition
360 if (!width) { 366 if (!width) {
361 width = this.templateData.properties.paperSize === "a3" ? 380 : 290; 367 width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
428 d3.select(".diagram-container svg").remove(); 434 d3.select(".diagram-container svg").remove();
429 this.scaleFairwayProfile(); 435 this.scaleFairwayProfile();
430 if (!this.height || !this.width) return; // do not try to render when height and width are unknown 436 if (!this.height || !this.width) return; // do not try to render when height and width are unknown
431 this.renderTo({ 437 this.renderTo({
432 element: ".diagram-container", 438 element: ".diagram-container",
433 dimensions: { 439 dimensions: this.getDimensions({
434 svgWidth: this.width - this.margin.right - this.margin.left, 440 svgWidth: this.width,
435 svgHeight: this.height - this.margin.top - this.margin.bottom 441 svgHeight: this.height,
436 } 442 main: {
443 top: 20,
444 right: 80,
445 bottom: 60,
446 left: 80
447 }
448 })
437 }); 449 });
438 }, 450 },
439 renderTo({ element, dimensions }) { 451 renderTo({ element, dimensions }) {
440 let svg = d3.select(element).append("svg"); 452 let svg = d3.select(element).append("svg");
441 svg.attr("width", "100%"); 453 svg.attr("width", "100%");
442 svg.attr("height", "100%"); 454 svg.attr("height", "100%");
443 const width = dimensions.svgWidth; 455 const width = dimensions.width;
444 const height = dimensions.svgHeight; 456 const height = dimensions.mainHeight;
445 const currentData = this.currentData; 457 const currentData = this.currentData;
446 const additionalData = this.additionalData; 458 const additionalData = this.additionalData;
447 const { xScale, yScaleRight, graph } = this.generateScalesAndGraph( 459 const { xScale, yScaleRight, graph } = this.generateScalesAndGraph(
448 svg, 460 svg,
449 height, 461 height,
523 }, 535 },
524 drawLabels({ graph, dimensions }) { 536 drawLabels({ graph, dimensions }) {
525 graph 537 graph
526 .append("text") 538 .append("text")
527 .attr("transform", ["rotate(-90)"]) 539 .attr("transform", ["rotate(-90)"])
528 .attr("y", dimensions.svgWidth + 45) 540 .attr("y", dimensions.width + 45)
529 .attr("x", -dimensions.svgHeight / 2) 541 .attr("x", -dimensions.mainHeight / 2)
530 .attr("fill", "black") 542 .attr("fill", "black")
531 .style("text-anchor", "middle") 543 .style("text-anchor", "middle")
532 .text("Depth [m]"); 544 .text("Depth [m]");
533 graph 545 graph
534 .append("text") 546 .append("text")
535 .attr("transform", ["rotate(-90)"]) 547 .attr("transform", ["rotate(-90)"])
536 .attr("y", -50) 548 .attr("y", -50)
537 .attr("x", -dimensions.svgHeight / 2) 549 .attr("x", -dimensions.mainHeight / 2)
538 .attr("fill", "black") 550 .attr("fill", "black")
539 .style("text-anchor", "middle") 551 .style("text-anchor", "middle")
540 .text("Waterlevel [m]"); 552 .text("Waterlevel [m]");
541 graph 553 graph
542 .append("text") 554 .append("text")
545 .attr("dy", "1em") 557 .attr("dy", "1em")
546 .attr("fill", "black") 558 .attr("fill", "black")
547 .style("text-anchor", "middle") 559 .style("text-anchor", "middle")
548 .attr("transform", [ 560 .attr("transform", [
549 "translate(" + 561 "translate(" +
550 dimensions.svgWidth / 2 + 562 dimensions.width / 2 +
551 "," + 563 "," +
552 dimensions.svgHeight + 564 dimensions.mainHeight +
553 ")", 565 ")",
554 "rotate(0)" 566 "rotate(0)"
555 ]) 567 ])
556 .text("Width [m]"); 568 .text("Width [m]");
557 }, 569 },