# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1564648695 -7200
# Node ID a6eda41e772489ff16e0c5ff6e7060407bb8c9b9
# Parent  b785b6bef578bccd512f60f8604afb2d6addef6b
hydrological_conditions: use offsets relative to svgwidth and svgheight

diff -r b785b6bef578 -r a6eda41e7724 client/src/components/gauge/HydrologicalConditions.vue
--- 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")
diff -r b785b6bef578 -r a6eda41e7724 client/src/lib/mixins.js
--- 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);
     },