diff client/src/components/gauge/Waterlevel.vue @ 4109:5317ae66f654

clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 30 Jul 2019 12:03:56 +0200
parents f391497287fb
children 0f69d256fa12 0becdd2812c9
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Mon Jul 29 16:53:15 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Tue Jul 30 12:03:56 2019 +0200
@@ -209,12 +209,10 @@
         this.dateFrom.toLocaleDateString() +
         " - " +
         this.dateTo.toLocaleDateString();
-
       this.generatePDF({
         templateData: this.templateData,
         diagramTitle: diagramTitle
       });
-
       this.pdf.doc.save(
         this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf"
       );
@@ -247,33 +245,35 @@
     },
     // Diagram legend
     addDiagramLegend(position, offset, color) {
-      let x = offset.x;
-      let y = offset.y;
+      let x = offset.x + 2, // 2 is the radius of the circle
+        y = offset.y,
+        padding = 3;
+      this.pdf.doc.setFontStyle("normal");
       this.pdf.doc.setFontSize(10);
-      let width =
-        (this.pdf.doc.getStringUnitWidth("Navigable Range") * 10) /
-          (72 / 25.6) +
-        5;
+      let width = this.pdf.doc.getTextWidth("Navigable Range") + padding;
       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 - this.getTextHeight(4);
+        y = this.pdf.height - offset.y - this.getTextHeight(3);
+      }
+      if (y < this.getTextHeight(1)) {
+        y = y + this.getTextHeight(1) / 2;
       }
       this.pdf.doc.setTextColor(color);
       this.pdf.doc.setDrawColor("white");
       this.pdf.doc.setFillColor("steelblue");
       this.pdf.doc.circle(x, y, 2, "FD");
-      this.pdf.doc.text(x + 3, y + 1, "Waterlevel");
+      this.pdf.doc.text(x + padding, y + 1, "Waterlevel");
       this.pdf.doc.setFillColor("#dae6f0");
       this.pdf.doc.circle(x, y + 5, 2, "FD");
       this.pdf.doc.setFillColor("#e5ffe5");
       this.pdf.doc.circle(x, y + 10, 2, "FD");
-      this.pdf.doc.text(x + 3, y + 11, "Navigable Range");
+      this.pdf.doc.text(x + padding, y + 11, "Navigable Range");
       this.pdf.doc.setDrawColor("#90b4d2");
       this.pdf.doc.setFillColor("#90b4d2");
       this.pdf.doc.circle(x, y + 5, 0.6, "FD");
-      this.pdf.doc.text(x + 3, y + 6, "Prediction");
+      this.pdf.doc.text(x + padding, y + 6, "Prediction");
     },
     getPrintLayout(svgHeight) {
       return {