Mercurial > gemma

changeset 4109:5317ae66f654

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 6ee5523967ec
children 7959f62d3051
files client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue
diffstat 2 files changed, 27 insertions(+), 24 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue	Mon Jul 29 16:53:15 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Jul 30 12:03:56 2019 +0200
@@ -241,38 +241,41 @@
     },
     // Diagram legend
     addDiagramLegend(position, offset, color) {
-      let x = offset.x,
-        y = offset.y;
-      let width =
-        (this.pdf.doc.getStringUnitWidth("Long-term Amplitude") * 10) /
-          (72 / 25.6) +
-        5;
+      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.getTextWidth("Long-term Amplitude") + padding;
       // if position is on the right, x needs to be calculate with pdf width and
       // the size of the element
       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(5) - 2;
       }
-      this.pdf.doc.setFontSize(10);
+      if (y < this.getTextHeight(1)) {
+        y = y + this.getTextHeight(1) / 2;
+      }
+      console.log(y);
       this.pdf.doc.setTextColor(color);
       this.pdf.doc.setDrawColor("white");
       this.pdf.doc.setFillColor("red");
       this.pdf.doc.circle(x, y, 2, "FD");
-      this.pdf.doc.text(x + 3, y + 1, "" + this.yearCompare);
+      this.pdf.doc.text(x + padding, y + 1, "" + this.yearCompare);
       this.pdf.doc.setFillColor("orange");
       this.pdf.doc.circle(x, y + 5, 2, "FD");
-      this.pdf.doc.text(x + 3, y + 6, "Q25%");
+      this.pdf.doc.text(x + padding, y + 6, "Q25%");
       this.pdf.doc.setFillColor("black");
       this.pdf.doc.circle(x, y + 10, 2, "FD");
       this.pdf.doc.text(x + 3, y + 11, "Median ");
       this.pdf.doc.setFillColor("purple");
       this.pdf.doc.circle(x, y + 15, 2, "FD");
-      this.pdf.doc.text(x + 3, y + 16, "Q75%");
+      this.pdf.doc.text(x + padding, y + 16, "Q75%");
       this.pdf.doc.setFillColor("lightsteelblue");
       this.pdf.doc.circle(x, y + 20, 2, "FD");
-      this.pdf.doc.text(x + 3, y + 21, "Long-term Amplitude");
+      this.pdf.doc.text(x + padding, y + 21, "Long-term Amplitude");
     },
     getPrintLayout(svgHeight) {
       return {
--- 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 {