Mercurial > gemma
changeset 4139:0becdd2812c9 improvepdf
client: waterlevels: use offsets relative to svgwidth and svgheight
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 01 Aug 2019 12:20:07 +0200 |
parents | 33deb8634783 |
children | 4d7569cca5e6 |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 13 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Thu Aug 01 11:57:36 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Thu Aug 01 12:20:07 2019 +0200 @@ -275,14 +275,19 @@ this.pdf.doc.circle(x, y + 5, 0.6, "FD"); this.pdf.doc.text(x + padding, y + 6, "Prediction"); }, - 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.09 * 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.09 * svgWidth) } }; }, @@ -292,7 +297,7 @@ const elem = document.querySelector("#" + this.containerId); const svgWidth = elem.clientWidth; const svgHeight = elem.clientHeight; - const layout = this.getPrintLayout(svgHeight); + const layout = this.getPrintLayout(svgHeight, svgWidth); if (!this.selectedGauge || !this.waterlevels.length || !elem) return; this.renderTo({ element: `#${this.containerId}`, @@ -492,7 +497,7 @@ svg .selectAll("path.nash-sutcliffe") .attr("fill", "none") - .attr("stroke", "darkgrey") + .attr("stroke", "gray") .attr("stroke-width", 1) .attr("clip-path", "url(#waterlevel-clip)"); svg