# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1559645062 -7200
# Node ID 3090845588089d7844e66d3c13b411ddf6c1e5d9
# Parent  033366f94abf9463b3d5944794c79fb68155c7b3
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

diff -r 033366f94abf -r 309084558808 client/src/components/fairway/Fairwayprofile.vue
--- 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();