Mercurial > gemma
changeset 3058:7a1a33fcec64
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