Mercurial > gemma
changeset 3129:136b86794453
client: improve pdf-gen code for diagrams
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Mon, 29 Apr 2019 17:16:09 +0200 |
| parents | 1610d3042bbb |
| children | 2e36267ab50e |
| files | client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
| diffstat | 3 files changed, 96 insertions(+), 78 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Mon Apr 29 17:06:46 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Mon Apr 29 17:16:09 2019 +0200 @@ -153,8 +153,6 @@ methods: { downloadPDF() { var svg = this.$refs.diagramContainer.innerHTML; - var fairwayInfo = - this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")"; if (svg) { svg = svg.replace(/\r?\n|\r/g, "").trim(); } @@ -170,24 +168,32 @@ var imgData = canvas.toDataURL("image/png"); pdf.addImage(imgData, "PNG", 40, 60, 380, 130); // Fairway profile info for the pdf title - pdf.setTextColor("steelblue"); + this.addDiagramTitle(pdf, 140, 30, 22, "steelblue"); + this.addDiagramLegend(pdf, 60, 190, "black"); + pdf.save("Fairwayprofile diagram"); + }, + addDiagramTitle(pdf, x, y, size, color) { + let fairwayInfo = + this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")"; + pdf.setTextColor(color); pdf.setFontSize(22); pdf.setFontStyle("bold"); - pdf.text(fairwayInfo, 140, 30); - // Diagram legend + pdf.text(fairwayInfo, x, y); + }, + // Diagram legend + addDiagramLegend(pdf, x, y, color) { pdf.setFontSize(10); - pdf.setTextColor("black"); + pdf.setTextColor(color); pdf.setDrawColor("white"); pdf.setFillColor("#5995ff"); - pdf.circle(60, 190, 2, "FD"); - pdf.text(63, 191, "Water"); + pdf.circle(x, y, 2, "FD"); + pdf.text(x + 3, y + 1, "Water"); pdf.setFillColor("#1f4fff"); - pdf.circle(60, 195, 2, "FD"); - pdf.text(63, 196, "Fairway"); + pdf.circle(x, y + 5, 2, "FD"); + pdf.text(x + 3, y + 6, "Fairway"); pdf.setFillColor("#4a2f06"); - pdf.circle(60, 200, 2, "FD"); - pdf.text(63, 201, "Ground"); - pdf.save("Fairwayprofile diagram"); + pdf.circle(x, y + 10, 2, "FD"); + pdf.text(x + 3, y + 11, "Ground"); }, calcRelativeDepth(depth) { /* takes a depth value and substracts the delta of the relative waterlevel
--- a/client/src/components/gauge/HydrologicalConditions.vue Mon Apr 29 17:06:46 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Mon Apr 29 17:16:09 2019 +0200 @@ -96,15 +96,6 @@ 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(); } @@ -119,35 +110,50 @@ }); var imgData = canvas.toDataURL("image/png"); pdf.addImage(imgData, "PNG", 40, 60, 380, 130); - // 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"); + this.addDiagramTitle(pdf, 108, 30, 22, "steelblue"); + this.addDiagramLegend(pdf, 60, 190, "black"); pdf.save( this.selectedGauge.properties.objname + " Hydrological-condition Diagram.pdf" ); }, + // Gauge info as title + addDiagramTitle(pdf, x, y, size, color) { + let gaugeInfo = + this.selectedGauge.properties.objname + + " (" + + this.selectedGauge.id + .split(".")[1] + .replace(/[()]/g, "") + .split(",")[3] + + "): Hydrological Conditions " + + this.longtermInterval.join(" - "); + pdf.setTextColor(color); + pdf.setFontSize(22); + pdf.setFontStyle("bold"); + pdf.text(gaugeInfo, 108, 30); + }, + // Diagram legend + addDiagramLegend(pdf, x, y, color) { + pdf.setFontSize(10); + pdf.setTextColor(color); + pdf.setDrawColor("white"); + pdf.setFillColor("red"); + pdf.circle(x, y, 2, "FD"); + pdf.text(x + 3, y + 1, "" + this.yearCompare); + pdf.setFillColor("orange"); + pdf.circle(x, y + 5, 2, "FD"); + pdf.text(x + 3, y + 6, "Q25%"); + pdf.setFillColor("black"); + pdf.circle(x, y + 10, 2, "FD"); + pdf.text(x + 3, y + 11, "Median "); + pdf.setFillColor("purple"); + pdf.circle(x, y + 15, 2, "FD"); + pdf.text(x + 3, y + 16, "Q75%"); + pdf.setFillColor("lightsteelblue"); + pdf.circle(x, y + 20, 2, "FD"); + pdf.text(x + 3, y + 21, "Long-term Amplitude"); + }, drawDiagram() { // remove old diagram d3.select(".diagram-container svg").remove();
--- a/client/src/components/gauge/Waterlevel.vue Mon Apr 29 17:06:46 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Mon Apr 29 17:16:09 2019 +0200 @@ -101,18 +101,6 @@ methods: { downloadPDF() { var svg = this.$refs.diagramContainer.innerHTML; - var gaugeInfo = - this.selectedGauge.properties.objname + - " (" + - this.selectedGauge.id - .split(".")[1] - .replace(/[()]/g, "") - .split(",")[3] + - "):" + - " Waterlevel " + - this.dateFrom.toLocaleDateString() + - " - " + - this.dateTo.toLocaleDateString(); if (svg) { svg = svg.replace(/\r?\n|\r/g, "").trim(); } @@ -128,30 +116,48 @@ var imgData = canvas.toDataURL("image/png"); pdf.addImage(imgData, "PNG", 40, 60, 380, 130); // Gauge info as a title for pdf - 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("steelblue"); - pdf.circle(60, 190, 2, "FD"); - pdf.text(63, 191, "Waterlevel"); - pdf.setFillColor("#dae6f0"); - pdf.circle(60, 195, 2, "FD"); - pdf.setFillColor("#e5ffe5"); - pdf.circle(60, 200, 2, "FD"); - pdf.text(63, 201, "Navigable Range"); - pdf.setDrawColor("#90b4d2"); - pdf.setFillColor("#90b4d2"); - pdf.circle(60, 195, 0.6, "FD"); - pdf.text(63, 196, "Prediction"); + this.addDiagramTitle(pdf, 108, 30, 22, "steelblue"); + this.addDiagramLegend(pdf, 60, 190, "black"); pdf.save( this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf" ); }, + addDiagramTitle(pdf, x, y, size, color) { + let gaugeInfo = + this.selectedGauge.properties.objname + + " (" + + this.selectedGauge.id + .split(".")[1] + .replace(/[()]/g, "") + .split(",")[3] + + "):" + + " Waterlevel " + + this.dateFrom.toLocaleDateString() + + " - " + + this.dateTo.toLocaleDateString(); + pdf.setTextColor(color); + pdf.setFontSize(size); + pdf.setFontStyle("bold"); + pdf.text(gaugeInfo, x, y); + }, + // Diagram legend + addDiagramLegend(pdf, x, y, color) { + pdf.setFontSize(10); + pdf.setTextColor(color); + pdf.setDrawColor("white"); + pdf.setFillColor("steelblue"); + pdf.circle(x, y, 2, "FD"); + pdf.text(x + 3, y + 1, "Waterlevel"); + pdf.setFillColor("#dae6f0"); + pdf.circle(x, y + 5, 2, "FD"); + pdf.setFillColor("#e5ffe5"); + pdf.circle(x, y + 10, 2, "FD"); + pdf.text(x + 3, y + 11, "Navigable Range"); + pdf.setDrawColor("#90b4d2"); + pdf.setFillColor("#90b4d2"); + pdf.circle(x, y + 5, 0.6, "FD"); + pdf.text(x + 3, y + 6, "Prediction"); + }, drawDiagram() { // remove old diagram and exit if necessary data is missing d3.select(".diagram-container svg").remove();