# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1557744138 -7200
# Node ID 35c124338f36094eccb693170d6b4d17f5e58fea
# Parent  64324aaeb1fb5765fda0cc244ab09b0e748e78c3
client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions)
	* draw the full diagram in case when tow diagrams are showen on screen

diff -r 64324aaeb1fb -r 35c124338f36 client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Mon May 13 09:41:35 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Mon May 13 12:42:18 2019 +0200
@@ -57,6 +57,10 @@
         </div>
       </div>
     </div>
+    <div
+      id="tmpContainer"
+      style="position: absolute; z-index: -1; top: 600px;"
+    ></div>
   </div>
 </template>
 
@@ -284,10 +288,29 @@
     addDiagram(position, offset, width, height) {
       let x = offset.x,
         y = offset.y;
+      // check if there are tow diagrams on the screen
+      // draw the diagram in a separated html element to get the full size
+      if (
+        ["GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"].indexOf(this.paneSetup) !==
+        -1
+      ) {
+        this.containerId = "tmpContainer";
+        // set width and height
+        document.querySelector("#tmpContainer").style.width =
+          document.querySelector("#hydrologicalconditions-diagram-container")
+            .clientWidth *
+            2 +
+          "px";
+        document.querySelector("#tmpContainer").style.height =
+          document.querySelector("#hydrologicalconditions-diagram-container")
+            .clientHeight + "px";
+        this.drawDiagram();
+      }
       var svg = document.getElementById(this.containerId).innerHTML;
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
+      this.containerId = "hydrologicalconditions-diagram-container";
       var canvas = document.createElement("canvas");
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight / 2;