Mercurial > gemma
diff client/src/components/gauge/HydrologicalConditions.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 | 2f024d6189ca |
children | a6eda41e7724 |
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 {