Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 4137:a41fd26c1644 improvepdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fairwayprofile: set margins relative to svgheight and svgwidth
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 01 Aug 2019 11:47:27 +0200
parents 639bdb17c3f2
children 51aae07d5f7b
comparison
equal deleted inserted replaced
4136:630b817d12b3 4137:a41fd26c1644
110 .direction-indicator 110 .direction-indicator
111 width: 70px 111 width: 70px
112 height: 0 112 height: 0
113 border-top: dashed 2px #333 113 border-top: dashed 2px #333
114 position: absolute 114 position: absolute
115 bottom: 20px 115 bottom: 50px
116 left: 115px 116 left: 115px
117 margin-left: -35px 117 margin-left: -35px
118 &::after 118 &::after
119 content: "" 119 content: ""
120 width: 0 120 width: 0
379 this.pdf.doc.setDrawColor("#943007"); 379 this.pdf.doc.setDrawColor("#943007");
380 this.pdf.doc.setFillColor("#928269"); 380 this.pdf.doc.setFillColor("#928269");
381 this.pdf.doc.circle(x, y + 25, 2, "FD"); 381 this.pdf.doc.circle(x, y + 25, 2, "FD");
382 this.pdf.doc.text(x + 3, y + 26, "Sediment (Compare)"); 382 this.pdf.doc.text(x + 3, y + 26, "Sediment (Compare)");
383 }, 383 },
384 getPrintLayout() { 384 getPrintLayout(svgHeight, svgWidth) {
385 return { 385 return {
386 main: { 386 main: {
387 top: 20, 387 top: Math.floor(0.08 * svgHeight),
388 right: 80, 388 right: Math.floor(0.08 * svgWidth),
389 bottom: 60, 389 bottom: Math.floor(0.2 * svgHeight),
390 left: 80 390 left: Math.floor(0.08 * svgWidth)
391 } 391 }
392 }; 392 };
393 }, 393 },
394 drawDiagram() { 394 drawDiagram() {
395 d3.select(".diagram-container svg").remove(); 395 d3.select(".diagram-container svg").remove();
396 this.scaleFairwayProfile(); 396 this.scaleFairwayProfile();
397 if (!this.height || !this.width) return; // do not try to render when height and width are unknown 397 if (!this.height || !this.width) return; // do not try to render when height and width are unknown
398 const layout = this.getPrintLayout(this.height); 398 const layout = this.getPrintLayout(this.height, this.width);
399 this.renderTo({ 399 this.renderTo({
400 element: ".diagram-container", 400 element: ".diagram-container",
401 dimensions: this.getDimensions({ 401 dimensions: this.getDimensions({
402 svgWidth: this.width, 402 svgWidth: this.width,
403 svgHeight: this.height, 403 svgHeight: this.height,
498 }, 498 },
499 drawLabels({ graph, dimensions }) { 499 drawLabels({ graph, dimensions }) {
500 graph 500 graph
501 .append("text") 501 .append("text")
502 .attr("transform", ["rotate(-90)"]) 502 .attr("transform", ["rotate(-90)"])
503 .attr("y", dimensions.width + 45) 503 .attr("y", dimensions.width + Math.floor(0.06 * dimensions.width))
504 .attr("x", -dimensions.mainHeight / 2) 504 .attr("x", -dimensions.mainHeight / 2)
505 .attr("fill", "black") 505 .attr("fill", "black")
506 .style("text-anchor", "middle") 506 .style("text-anchor", "middle")
507 .text("Depth [m]"); 507 .text("Depth [m]");
508 graph 508 graph
509 .append("text") 509 .append("text")
510 .attr("transform", ["rotate(-90)"]) 510 .attr("transform", ["rotate(-90)"])
511 .attr("y", -50) 511 .attr("y", -1 * Math.floor(0.065 * dimensions.width))
512 .attr("x", -dimensions.mainHeight / 2) 512 .attr("x", -dimensions.mainHeight / 2)
513 .attr("fill", "black") 513 .attr("fill", "black")
514 .style("text-anchor", "middle") 514 .style("text-anchor", "middle")
515 .text("Waterlevel [m]"); 515 .text("Waterlevel [m]");
516 graph 516 graph