Mercurial > gemma
diff client/src/components/fairway/Fairwayprofile.vue @ 4137:a41fd26c1644 improvepdf
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 |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Thu Aug 01 11:22:46 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Thu Aug 01 11:47:27 2019 +0200 @@ -112,7 +112,7 @@ height: 0 border-top: dashed 2px #333 position: absolute - bottom: 20px + bottom: 50px left: 115px margin-left: -35px &::after @@ -381,13 +381,13 @@ this.pdf.doc.circle(x, y + 25, 2, "FD"); this.pdf.doc.text(x + 3, y + 26, "Sediment (Compare)"); }, - getPrintLayout() { + getPrintLayout(svgHeight, svgWidth) { return { main: { - top: 20, - right: 80, - bottom: 60, - left: 80 + top: Math.floor(0.08 * svgHeight), + right: Math.floor(0.08 * svgWidth), + bottom: Math.floor(0.2 * svgHeight), + left: Math.floor(0.08 * svgWidth) } }; }, @@ -395,7 +395,7 @@ d3.select(".diagram-container svg").remove(); this.scaleFairwayProfile(); if (!this.height || !this.width) return; // do not try to render when height and width are unknown - const layout = this.getPrintLayout(this.height); + const layout = this.getPrintLayout(this.height, this.width); this.renderTo({ element: ".diagram-container", dimensions: this.getDimensions({ @@ -500,7 +500,7 @@ graph .append("text") .attr("transform", ["rotate(-90)"]) - .attr("y", dimensions.width + 45) + .attr("y", dimensions.width + Math.floor(0.06 * dimensions.width)) .attr("x", -dimensions.mainHeight / 2) .attr("fill", "black") .style("text-anchor", "middle") @@ -508,7 +508,7 @@ graph .append("text") .attr("transform", ["rotate(-90)"]) - .attr("y", -50) + .attr("y", -1 * Math.floor(0.065 * dimensions.width)) .attr("x", -dimensions.mainHeight / 2) .attr("fill", "black") .style("text-anchor", "middle")