Mercurial > gemma

changeset 3058:7a1a33fcec64

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add infos and diagram legend for the generated pdf(hydrological diagram)
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 16 Apr 2019 10:28:22 +0200
parents 40a4a808b9b6
children 6f5693bf7804
files client/src/components/gauge/HydrologicalConditions.vue
diffstat 1 files changed, 39 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue	Tue Apr 16 10:19:09 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Apr 16 10:28:22 2019 +0200
@@ -161,13 +161,23 @@
     ...mapState("gauges", [
       "longtermWaterlevels",
       "yearWaterlevels",
-      "yearCompare"
+      "yearCompare",
+      "longtermInterval"
     ]),
     ...mapGetters("gauges", ["selectedGauge"])
   },
   methods: {
     downloadPDF() {
       var svg = this.svg._groups[0][0].outerHTML;
+      var gaugeInfo =
+        this.selectedGauge.properties.objname +
+        " (" +
+        this.selectedGauge.id
+          .split(".")[1]
+          .replace(/[()]/g, "")
+          .split(",")[3] +
+        "): Hydrological Conditions " +
+        this.longtermInterval.join(" - ");
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
@@ -182,7 +192,34 @@
       });
       var imgData = canvas.toDataURL("image/png");
       pdf.addImage(imgData, "PNG", 40, 60, 380, 130);
-      pdf.save("Hydrological condition Diagram.pdf");
+      // Gauge info as as title
+      pdf.setTextColor("steelblue");
+      pdf.setFontSize(22);
+      pdf.setFontStyle("bold");
+      pdf.text(gaugeInfo, 108, 30);
+      // Diagram legend
+      pdf.setFontSize(10);
+      pdf.setTextColor("black");
+      pdf.setDrawColor("white");
+      pdf.setFillColor("red");
+      pdf.circle(60, 190, 2, "FD");
+      pdf.text(63, 191, "" + this.yearCompare);
+      pdf.setFillColor("orange");
+      pdf.circle(60, 195, 2, "FD");
+      pdf.text(63, 196, "Q25%");
+      pdf.setFillColor("black");
+      pdf.circle(60, 200, 2, "FD");
+      pdf.text(63, 201, "Median ");
+      pdf.setFillColor("purple");
+      pdf.circle(60, 205, 2, "FD");
+      pdf.text(63, 206, "Q75%");
+      pdf.setFillColor("lightsteelblue");
+      pdf.circle(60, 210, 2, "FD");
+      pdf.text(63, 211, "Long-term Amplitude");
+      pdf.save(
+        this.selectedGauge.properties.objname +
+          " Hydrological-condition Diagram.pdf"
+      );
     },
     drawDiagram() {
       // remove old diagram