--- a/client/src/components/gauge/HydrologicalConditions.vue	Tue Jul 09 14:42:26 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Jul 09 15:37:42 2019 +0200
@@ -104,6 +104,7 @@
 import * as d3 from "d3";
 import debounce from "debounce";
 import { startOfYear, endOfYear } from "date-fns";
+import svg2pdf from "svg2pdf.js";
 import { pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
@@ -246,6 +247,36 @@
           " Hydrological-condition Diagram.pdf"
       );
     },
+    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
+      const offScreen = document.querySelector("#offScreen");
+      offScreen.style.width = "1550px";
+      offScreen.style.height = "400px";
+      this.renderTo(offScreen);
+      var svg = offScreen.querySelector("svg");
+      // use default width,height if they are missing in the template definition
+      if (!width) {
+        width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
+      }
+      if (!height) {
+        height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
+      }
+      if (["topright", "bottomright"].indexOf(position) !== -1) {
+        x = this.pdf.width - offset.x - width;
+      }
+      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
+        y = this.pdf.height - offset.y - height;
+      }
+      svg2pdf(svg, this.pdf.doc, {
+        xOffset: x,
+        yOffset: y,
+        // TODO depend on the size and aspect ration on paper
+        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18
+      });
+    },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {
         this.templateData = this.defaultTemplate;

--- a/client/src/lib/mixins.js	Tue Jul 09 14:42:26 2019 +0200
+++ b/client/src/lib/mixins.js	Tue Jul 09 15:37:42 2019 +0200
@@ -14,7 +14,6 @@
  * * Bernhard Reiter <bernhard.reiter@intevation.de>
  */
 import jsPDF from "jspdf-yworks";
-import svg2pdf from "svg2pdf.js";
 import locale2 from "locale2";
 import { mapState } from "vuex";
 import { HTTP } from "@/lib/http";
@@ -139,36 +138,6 @@
         ")"
       );
     },
-    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
-      const offScreen = document.querySelector("#offScreen");
-      offScreen.style.width = "1550px";
-      offScreen.style.height = "400px";
-      this.renderTo(offScreen);
-      var svg = offScreen.querySelector("svg");
-      // use default width,height if they are missing in the template definition
-      if (!width) {
-        width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
-      }
-      if (!height) {
-        height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
-      }
-      if (["topright", "bottomright"].indexOf(position) !== -1) {
-        x = this.pdf.width - offset.x - width;
-      }
-      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
-        y = this.pdf.height - offset.y - height;
-      }
-      svg2pdf(svg, this.pdf.doc, {
-        xOffset: x,
-        yOffset: y,
-        // TODO depend on the size and aspect ration on paper
-        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18
-      });
-    },
     generatePDF(params) {
       // creates a new jsPDF object into this.pdf.doc
       // will call functions that the calling context has to provide