--- 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;