Mercurial > gemma
changeset 3493:da58cf951342
client: diagram-template: improve diagramlegend element (AvailableFairwayDepth)
* make values and styles of diagramlegend dynamic
* adjust positioning and size
* use rounded rectangular for diagramlegend element
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 27 May 2019 17:27:39 +0200 |
parents | 624c64670d48 |
children | 97326e30407c 220713fcb190 |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 19 insertions(+), 24 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Mon May 27 16:59:39 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Mon May 27 17:27:39 2019 +0200 @@ -195,7 +195,7 @@ const lowerBound = [d[0], w[0]].filter(x => x).join(", "); const upperBound = [d[1], w[1]].filter(x => x).join(", "); return [ - `> LDC`, + `> LDC`, `< ${lowerBound}`, `< ${upperBound}`, `>= ${upperBound}` @@ -407,41 +407,36 @@ y = offset.y; this.pdf.doc.setFontSize(10); let width = - (this.pdf.doc.getStringUnitWidth(">= LDC [h]") * 10) / (72 / 25.6) + 15; + (this.pdf.doc.getStringUnitWidth(">= LDC") * 10) / (72 / 25.6) + 15; // 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(7); + y = this.pdf.height - offset.y - this.getTextHeight(6); } this.pdf.doc.setTextColor(color); - this.pdf.doc.setDrawColor("rgb(255, 133, 94)"); - this.pdf.doc.setFillColor("rgb(255, 133, 94)"); - this.pdf.doc.rect(x, y, 8, 4, "FD"); - this.pdf.doc.text(">= LDC [h]", x + 10, y + 3); + this.pdf.doc.setDrawColor(this.$options.COLORS.LDC); + this.pdf.doc.setFillColor(this.$options.COLORS.LDC); + this.pdf.doc.roundedRect(x, y, 10, 4, 1.5, 1.5, "FD"); + this.pdf.doc.text(this.legend[0], x + 12, y + 3); - this.pdf.doc.setDrawColor("rgb(255, 66, 79)"); - this.pdf.doc.setFillColor("rgb(255, 66, 79)"); - this.pdf.doc.rect(x, y + 5, 8, 4, "FD"); - this.pdf.doc.text("< 200.00 [h]", x + 10, y + 8); + this.pdf.doc.setDrawColor(this.$options.COLORS.REST[0]); + this.pdf.doc.setFillColor(this.$options.COLORS.REST[0]); + this.pdf.doc.roundedRect(x, y + 5, 10, 4, 1.5, 1.5, "FD"); + this.pdf.doc.text(this.legend[1], x + 12, y + 8); - this.pdf.doc.setDrawColor("rgb(255, 115, 124)"); - this.pdf.doc.setFillColor("rgb(255, 115, 124)"); - this.pdf.doc.rect(x, y + 10, 8, 4, "FD"); - this.pdf.doc.text(">= 200.00 [h]", x + 10, y + 13); + this.pdf.doc.setDrawColor(this.$options.COLORS.REST[1]); + this.pdf.doc.setFillColor(this.$options.COLORS.REST[1]); + this.pdf.doc.roundedRect(x, y + 10, 10, 4, 1.5, 1.5, "FD"); + this.pdf.doc.text(this.legend[2], x + 12, y + 13); - this.pdf.doc.setDrawColor("rgb(255, 153, 160)"); - this.pdf.doc.setFillColor("rgb(255, 153, 160)"); - this.pdf.doc.rect(x, y + 15, 8, 4, "FD"); - this.pdf.doc.text(">= 230.00 [h]", x + 10, y + 18); - - this.pdf.doc.setDrawColor("rgb(45, 132, 179)"); - this.pdf.doc.setFillColor("rgb(45, 132, 179)"); - this.pdf.doc.rect(x, y + 20, 8, 4, "FD"); - this.pdf.doc.text(">= 250.00 [h]", x + 10, y + 23); + this.pdf.doc.setDrawColor(this.$options.COLORS.HIGHEST); + this.pdf.doc.setFillColor(this.$options.COLORS.HIGHEST); + this.pdf.doc.roundedRect(x, y + 15, 10, 4, 1.5, 1.5, "FD"); + this.pdf.doc.text(this.legend[3], x + 12, y + 18); }, legendStyle(index) { const style = {