Mercurial > gemma

changeset 4139:0becdd2812c9 improvepdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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