Mercurial > gemma
changeset 3590:309084558808
client: diagram-template: improve diagramlegend for fairwayprofile diagram
* add missing diagramlegend content to pdf
* adjust the styles of diagramlegend
* add .pdf extension for the saved filename
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Tue, 04 Jun 2019 12:44:22 +0200 |
parents | 033366f94abf |
children | 062dc9b54b86 |
files | client/src/components/fairway/Fairwayprofile.vue |
diffstat | 1 files changed, 34 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Tue Jun 04 12:29:20 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Tue Jun 04 12:44:22 2019 +0200 @@ -432,7 +432,9 @@ } }); } - this.pdf.doc.save(this.title.replace(/\s/g, "_").replace(/[():,]/g, "")); + this.pdf.doc.save( + this.title.replace(/\s/g, "_").replace(/[():,]/g, "") + ".pdf" + ); }, addDiagram(position, offset, width, height) { let x = offset.x, @@ -469,26 +471,49 @@ addDiagramLegend(position, offset, color) { let x = offset.x, y = offset.y; + this.pdf.doc.setFontSize(10); let width = - (this.pdf.doc.getStringUnitWidth("Ground") * 10) / (72 / 25.6) + 5; + (this.pdf.doc.getStringUnitWidth("Sediment (Compare)") * 10) / + (72 / 25.6) + + 4; 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(3); + y = this.pdf.height - offset.y - this.getTextHeight(8); } - this.pdf.doc.setFontSize(10); + this.pdf.doc.setTextColor(color); - this.pdf.doc.setDrawColor("white"); + this.pdf.doc.setDrawColor("#5995ff"); this.pdf.doc.setFillColor("#5995ff"); this.pdf.doc.circle(x, y, 2, "FD"); this.pdf.doc.text(x + 3, y + 1, "Water"); - this.pdf.doc.setFillColor("#1f4fff"); + + this.pdf.doc.setLineDash([0.3]); + this.pdf.doc.setDrawColor("#0000ff"); + this.pdf.doc.setFillColor("#fcfacc"); this.pdf.doc.circle(x, y + 5, 2, "FD"); - this.pdf.doc.text(x + 3, y + 6, "Fairway"); - this.pdf.doc.setFillColor("#4a2f06"); + this.pdf.doc.text(x + 3, y + 6, "Fairway (LOS 1)"); + + this.pdf.doc.setLineDash([1]); + this.pdf.doc.setFillColor("#fdfce5"); this.pdf.doc.circle(x, y + 10, 2, "FD"); - this.pdf.doc.text(x + 3, y + 11, "Ground"); + this.pdf.doc.text(x + 3, y + 11, "Fairway (LOS 2)"); + + this.pdf.doc.setLineDash(); + this.pdf.doc.setFillColor("#ffffff"); + this.pdf.doc.circle(x, y + 15, 2, "FD"); + this.pdf.doc.text(x + 3, y + 16, "Fairway (LOS 3)"); + + this.pdf.doc.setDrawColor("black"); + this.pdf.doc.setFillColor("#4a2e06"); + this.pdf.doc.circle(x, y + 20, 2, "FD"); + this.pdf.doc.text(x + 3, y + 21, "Sediment"); + + this.pdf.doc.setDrawColor("#943007"); + this.pdf.doc.setFillColor("#928269"); + this.pdf.doc.circle(x, y + 25, 2, "FD"); + this.pdf.doc.text(x + 3, y + 26, "Sediment (Compare)"); }, drawDiagram() { d3.select(".diagram-container svg").remove();