# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1557395771 -7200
# Node ID ee6a4e8af7668b17b9797fe110fcf9d48949340f
# Parent  3b36bb33f5b0b5f0283abb456a6b29ab2a65ad15
available_fairway_depth: legend POC

diff -r 3b36bb33f5b0 -r ee6a4e8af766 client/src/components/fairway/AvailableFairwayDepth.vue
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Thu May 09 11:31:10 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Thu May 09 11:56:11 2019 +0200
@@ -3,6 +3,13 @@
     <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
     <UISpinnerOverlay v-if="loading" />
     <div class="mt-3 d-flex flex-row my-auto">
+      <div class="my-auto">
+        <ul class="list-group">
+          <li class="text-left list-item" v-for="entry in legend" :key="entry">
+            {{ entry }}
+          </li>
+        </ul>
+      </div>
       <div :id="containerId" class="ml-auto diagram-container"></div>
     </div>
   </div>
@@ -47,7 +54,6 @@
       labelPaddingTop: 15,
       scalePaddingLeft: 50,
       paddingTop: 10,
-      legend: "",
       diagram: null,
       yScale: null,
       barsWidth: 60,
@@ -66,7 +72,8 @@
       "fwData",
       "from",
       "to",
-      "frequency"
+      "frequency",
+      "legend"
     ]),
     fromDate() {
       return this.from;
@@ -158,7 +165,8 @@
         .attr("height", height)
         .attr("width", this.barsWidth)
         .attr("transform", d => `translate(0 ${-1 * height(d)})`)
-        .attr("fill", this.$options.COLORS.LDC);
+        .attr("fill", this.$options.COLORS.LDC)
+        .attr("id", "ldc");
     },
     drawHighestLevel(everyBar) {
       const height = this.fnheight("highestLevel");
@@ -166,7 +174,7 @@
         .append("rect")
         .attr("y", this.yScale(0))
         .attr("height", height)
-        .attr("width", this.barsWidth)
+        .attr("width", this.barsWidth - 5)
         .attr("transform", d => `translate(0 ${-1 * height(d)})`)
         .attr("fill", this.$options.COLORS.HIGHEST);
     },
@@ -195,9 +203,9 @@
         .call(yAxis);
     }
   },
-  LEGEND: app.$gettext("sum of days / Summe der Tage"),
+  LEGEND: app.$gettext("Sum of days"),
   COLORS: {
-    LDC: "#59C6FF",
+    LDC: "#FF855E",
     HIGHEST: "#2D84B3",
     REST: ["#FF424F", "#FF737C", "#FF99A0"]
   }