Mercurial > gemma

changeset 3160:94935895e6d7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add diagram-element to template (waterlevel) * add the diagram as an element to template and add the ability to definewidth, height and position of the exported diagram to pdf
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 06 May 2019 13:05:49 +0200
parents 4f4905b57fcf
children 6a44a89ffb51
files client/src/components/gauge/Waterlevel.vue client/src/components/systemconfiguration/PDFTemplates.vue
diffstat 2 files changed, 49 insertions(+), 27 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Mon May 06 13:02:25 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Mon May 06 13:05:49 2019 +0200
@@ -115,6 +115,13 @@
         },
         elements: [
           {
+            type: "diagram",
+            position: "topleft",
+            offset: { x: 15, y: 50 },
+            width: 290,
+            height: 100
+          },
+          {
             type: "diagramlegend",
             position: "topleft",
             offset: { x: 30, y: 150 },
@@ -185,35 +192,9 @@
       );
     },
     downloadPDF() {
-      var svg = document.getElementById(this.containerId).innerHTML;
-      if (svg) {
-        svg = svg.replace(/\r?\n|\r/g, "").trim();
-      }
       this.pdf.doc = new jsPDF("l", "mm", this.form.paperSize);
-      var canvas = document.createElement("canvas");
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight / 2;
-      canvg(canvas, svg, {
-        ignoreMouse: true,
-        ignoreAnimation: true,
-        ignoreDimensions: true
-      });
-      var imgData = canvas.toDataURL("image/png");
-      // landscape format is used for both a3,a4 papersize
-      let xDiagram = this.form.paperSize === "a3" ? 40 : 15,
-        yDiagram = this.form.paperSize === "a3" ? 60 : 50,
-        widthDiagram = this.form.paperSize === "a3" ? 380 : 290,
-        heightDiagram = this.form.paperSize === "a3" ? 130 : 100;
       this.pdf.width = this.form.paperSize === "a3" ? 420 : 297;
       this.pdf.height = this.form.paperSize === "a3" ? 297 : 210;
-      this.pdf.doc.addImage(
-        imgData,
-        "PNG",
-        xDiagram,
-        yDiagram,
-        widthDiagram,
-        heightDiagram
-      );
       // check the template element
       if (this.templateData) {
         let defaultFontSize = 11,
@@ -227,6 +208,15 @@
           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 "diagramlegend": {
               this.addDiagramLegend(
                 e.position,
@@ -321,6 +311,37 @@
           });
       }
     },
+    addDiagram(position, offset, width, height) {
+      let x = offset.x,
+        y = offset.y;
+      var svg = document.getElementById(this.containerId).innerHTML;
+      if (svg) {
+        svg = svg.replace(/\r?\n|\r/g, "").trim();
+      }
+      var canvas = document.createElement("canvas");
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight / 2;
+      canvg(canvas, svg, {
+        ignoreMouse: true,
+        ignoreAnimation: true,
+        ignoreDimensions: true
+      });
+      var imgData = canvas.toDataURL("image/png");
+      // landscape format is used for both a3,a4 papersize
+      if (!width) {
+        width = this.form.paperSize === "a3" ? 380 : 290;
+      }
+      if (!height) {
+        height = this.form.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;
+      }
+      this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
+    },
     // Gauge info as a title for pdf
     addDiagramTitle(position, offset, size, color) {
       let gaugeInfo =
--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Mon May 06 13:02:25 2019 +0200
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Mon May 06 13:05:49 2019 +0200
@@ -183,7 +183,8 @@
                 "scale",
                 "northarrow",
                 "diagramlegend",
-                "diagramtitle"
+                "diagramtitle",
+                "diagram"
               ].indexOf(e.type) === -1
             ) {
               checkElement = true;