# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1557746017 -7200
# Node ID 3159ee3bcb16194e714db0d447d82f37455b6a34
# Parent  35c124338f36094eccb693170d6b4d17f5e58fea
client: diagram-template: improve size of pdf-container element
	* calculate width,height of pdfContainer element dynamically

diff -r 35c124338f36 -r 3159ee3bcb16 client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Mon May 13 12:42:18 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Mon May 13 13:13:37 2019 +0200
@@ -55,7 +55,7 @@
     </div>
     <div
       id="pdfContainer"
-      style="position: absolute;width: 1500px; height: 400px; z-index: -1;"
+      style="position: absolute; z-index: -1; top: 600px;"
     ></div>
   </div>
 </template>
@@ -319,11 +319,20 @@
     addDiagram(position, offset, width, height) {
       let x = offset.x,
         y = offset.y;
+      // check if there are tow diagrams on screen
       if (
         ["GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"].indexOf(this.paneSetup) !==
         -1
       ) {
         this.containerId = "pdfContainer";
+        // set width and height
+        document.querySelector("#pdfContainer").style.width =
+          document.querySelector("#waterlevel-diagram-container").clientWidth *
+            2 +
+          "px";
+        document.querySelector("#pdfContainer").style.height =
+          document.querySelector("#waterlevel-diagram-container").clientHeight +
+          "px";
         this.drawDiagram();
       }
       var svg = document.getElementById(this.containerId).innerHTML;