Mercurial > gemma
changeset 4135:a6eda41e7724 improvepdf
hydrological_conditions: use offsets relative to svgwidth and svgheight
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 01 Aug 2019 10:38:15 +0200 |
parents | b785b6bef578 |
children | 630b817d12b3 |
files | client/src/components/gauge/HydrologicalConditions.vue client/src/lib/mixins.js |
diffstat | 2 files changed, 24 insertions(+), 15 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Wed Jul 31 18:33:49 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Thu Aug 01 10:38:15 2019 +0200 @@ -277,14 +277,19 @@ this.pdf.doc.circle(x, y + 20, 2, "FD"); this.pdf.doc.text(x + padding, y + 21, "Long-term Amplitude"); }, - getPrintLayout(svgHeight) { + getPrintLayout(svgHeight, svgWidth) { return { - main: { top: 20, right: 50, bottom: 110, left: 80 }, + main: { + top: Math.floor(0.05 * svgHeight), + right: Math.floor(0.05 * svgWidth), + bottom: Math.floor(0.32 * svgHeight), + left: Math.floor(0.07 * svgWidth) + }, nav: { - top: svgHeight - 85, - right: 20, - bottom: 30, - left: 80 + top: Math.floor(0.78 * svgHeight), + right: Math.floor(0.013 * svgWidth), + bottom: Math.floor(0.095 * svgHeight), + left: Math.floor(0.07 * svgWidth) } }; }, @@ -296,7 +301,7 @@ return; const svgWidth = el.clientWidth; const svgHeight = el.clientHeight; - const layout = this.getPrintLayout(svgHeight); + const layout = this.getPrintLayout(svgHeight, svgWidth); this.renderTo({ element: `#${this.containerId}`, dimensions: this.getDimensions({ @@ -448,8 +453,8 @@ .attr("clip-path", "url(#hydrocond-clip)"); svg.selectAll(".hdc-line").attr("stroke", "red"); svg.selectAll(".ldc-line").attr("stroke", "green"); - svg.selectAll(".mw-line").attr("stroke", "grey"); - svg.selectAll(".rn-line").attr("stroke", "grey"); + svg.selectAll(".mw-line").attr("stroke", "gray"); + svg.selectAll(".rn-line").attr("stroke", "gray"); svg .selectAll(".ref-waterlevel-label") .style("font-size", "10px") @@ -651,14 +656,16 @@ .attr("transform", `translate(0, ${dimensions.mainHeight})`) .call(axes.x) .selectAll(".tick text") - .attr("y", 15); + .attr("y", Math.floor(0.015 * dimensions.mainHeight)); diagram // label .append("text") .text(this.$gettext("Waterlevel [m]")) .attr("text-anchor", "middle") .attr( "transform", - `translate(-45, ${dimensions.mainHeight / 2}) rotate(-90)` + `translate(${-0.05 * + Math.floor(dimensions.width)}, ${dimensions.mainHeight / + 2}) rotate(-90)` ); diagram .append("g")
--- a/client/src/lib/mixins.js Wed Jul 31 18:33:49 2019 +0200 +++ b/client/src/lib/mixins.js Thu Aug 01 10:38:15 2019 +0200 @@ -149,13 +149,14 @@ addDiagram(position, offset, width, height) { let x = offset.x, y = offset.y; - const svgWidth = this.millimeter2pixels(width, 80); - const svgHeight = this.millimeter2pixels(height, 80); + const DPI = 80; + const svgWidth = this.millimeter2pixels(width, DPI); + const svgHeight = this.millimeter2pixels(height, DPI); // draw the diagram in a separated html element to get the full size const offScreen = document.querySelector("#offScreen"); offScreen.style.width = `${svgWidth}px`; offScreen.style.height = `${svgHeight}px`; - const layout = this.getPrintLayout(svgHeight); + const layout = this.getPrintLayout(svgHeight, svgWidth); this.renderTo({ element: offScreen, dimensions: this.getDimensions({ @@ -171,10 +172,11 @@ if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - height; } + //debugSVG({ svg, svgWidth, svgHeight }); svg2pdf(svg, this.pdf.doc, { xOffset: x, yOffset: y, - scale: this.pixel2millimeter(1, 80) + scale: this.pixel2millimeter(1, DPI) }); offScreen.removeChild(svg); },