--- a/client/src/components/gauge/HydrologicalConditions.vue	Thu Jul 04 10:12:19 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Thu Jul 04 10:15:46 2019 +0200
@@ -108,7 +108,6 @@
 import * as d3 from "d3";
 import debounce from "debounce";
 import { startOfYear, endOfYear } from "date-fns";
-import jsPDF from "jspdf-yworks";
 import canvg from "canvg";
 import { pdfgen } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
@@ -237,119 +236,16 @@
       );
     },
     downloadPDF() {
-      if (this.templateData) {
-        this.pdf.doc = new jsPDF(
-          "l",
-          "mm",
-          this.templateData.properties.paperSize
-        );
-        // pdf width and height in millimeter (landscape)
-        this.pdf.width =
-          this.templateData.properties.paperSize === "a3" ? 420 : 297;
-        this.pdf.height =
-          this.templateData.properties.paperSize === "a3" ? 297 : 210;
-        // default values if some are missing in template
-        let defaultFontSize = 11,
-          defaultColor = "black",
-          defaultWidth = 70,
-          defaultTextColor = "black",
-          defaultBorderColor = "white",
-          defaultBgColor = "white",
-          defaultRounding = 2,
-          defaultPadding = 2,
-          defaultOffset = { x: 0, y: 0 };
-        this.templateData.elements.forEach(e => {
-          switch (e.type) {
-            case "diagram": {
-              this.addDiagram(
-                e.position,
-                e.offset || defaultOffset,
-                e.width,
-                e.height
-              );
-              break;
-            }
-            case "diagramtitle": {
-              let gaugeInfo =
-                this.selectedGauge.properties.objname +
-                " (" +
-                this.selectedGauge.id
-                  .split(".")[1]
-                  .replace(/[()]/g, "")
-                  .split(",")[3] +
-                "): Hydrological Conditions " +
-                this.longtermInterval.join(" - ");
-              this.addDiagramTitle(
-                e.position,
-                e.offset || defaultOffset,
-                e.fontsize || defaultFontSize,
-                e.color || defaultColor,
-                gaugeInfo
-              );
-              break;
-            }
-            case "diagramlegend": {
-              this.addDiagramLegend(
-                e.position,
-                e.offset || defaultOffset,
-                e.color || defaultColor
-              );
-              break;
-            }
-            case "image": {
-              this.addImage(
-                e.url,
-                e.format || "",
-                e.position,
-                e.offset || defaultOffset,
-                e.width || 90,
-                e.height || 60
-              );
-              break;
-            }
-            case "text": {
-              this.addText(
-                e.position,
-                e.offset || defaultOffset,
-                e.width || defaultWidth,
-                e.fontsize || defaultFontSize,
-                e.color || defaultTextColor,
-                e.text || ""
-              );
-              break;
-            }
-            case "box": {
-              this.addBox(
-                e.position,
-                e.offset || defaultOffset,
-                e.width || 90,
-                e.height || 60,
-                e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
-                e.color || defaultBgColor,
-                e.brcolor || defaultBorderColor
-              );
+      let diagramTitle =
+        this.gaugeInfo(this.selectedGauge) +
+        ": Hydrological Conditions " +
+        this.longtermInterval.join(" - ");
 
-              break;
-            }
-            case "textbox": {
-              this.addTextBox(
-                e.position,
-                e.offset || defaultOffset,
-                e.width,
-                e.height,
-                e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
-                e.padding || defaultPadding,
-                e.fontsize || defaultFontSize,
-                e.color || defaultTextColor,
-                e.background || defaultBgColor,
-                e.text || "",
-                e.brcolor || defaultBorderColor
-              );
-              break;
-            }
-          }
-        });
-      }
+      this.generatePDF({
+        templateData: this.templateData,
+        diagramTitle: diagramTitle
+      });
+
       this.pdf.doc.save(
         this.selectedGauge.properties.objname +
           " Hydrological-condition Diagram.pdf"