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 = {