# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1553789947 -3600
# Node ID 1b5acce6120d656730890db062dd178dfa80d84a
# Parent  adf355aaef572e661fe6cbfc83e5971880531e5e
client: added legend to cross profile diagram

diff -r adf355aaef57 -r 1b5acce6120d client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Thu Mar 28 17:18:01 2019 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Thu Mar 28 17:19:07 2019 +0100
@@ -1,5 +1,25 @@
 <template>
-  <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div>
+  <div class="d-flex flex-fill">
+    <DiagramLegend>
+      <div class="legend">
+        <span style="background-color: #5995ff"></span> Water
+      </div>
+      <div class="legend">
+        <span style="background-color: #1f4fff"></span> Fairway
+      </div>
+      <div class="legend">
+        <span style="background-color: #4a2f06"></span>
+        Ground
+      </div>
+    </DiagramLegend>
+    <div
+      class="d-flex flex-fill justify-content-center align-items-center diagram-container"
+    >
+      <div v-if="!fairwayData">
+        <translate>No data available.</translate>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -22,9 +42,13 @@
 import debounce from "debounce";
 
 const GROUND_COLOR = "#4A2F06";
+const WATER_COLOR = "#005DFF";
 
 export default {
   name: "fairwayprofile",
+  components: {
+    DiagramLegend: () => import("@/components/DiagramLegend")
+  },
   data() {
     return {
       coordinatesInput: "",
@@ -74,9 +98,6 @@
         return [];
       return this.currentProfile[this.additionalSurvey.date_info].points;
     },
-    waterColor() {
-      return "#005DFF";
-    },
     xScale() {
       return [0, this.totalLength];
     },
@@ -133,12 +154,11 @@
     },
     drawDiagram() {
       this.coordinatesSelect = null;
-      const chartDiv = document.querySelector(".fairwayprofile");
-      d3.select(".fairwayprofile svg").remove();
+      d3.select(".diagram-container svg").remove();
       this.scaleFairwayProfile();
-      let svg = d3.select(chartDiv).append("svg");
-      svg.attr("width", this.width);
-      svg.attr("height", this.height);
+      let svg = d3.select(".diagram-container").append("svg");
+      svg.attr("width", "100%");
+      svg.attr("height", "100%");
       const width = this.width - this.margin.right - 1.5 * this.margin.left;
       const height = this.height - this.margin.top - 2 * this.margin.bottom;
       const currentData = this.currentData;
@@ -206,7 +226,7 @@
       graph
         .append("text")
         .attr("transform", ["rotate(-90)"])
-        .attr("y", this.width - 60)
+        .attr("y", this.width - 70)
         .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2)
         .attr("dy", "1em")
         .attr("fill", "black")
@@ -214,8 +234,8 @@
         .text("Depth [m]");
       graph
         .append("text")
-        .attr("y", 0 - this.margin.left)
-        .attr("x", 0 - height / 4)
+        .attr("y", -50)
+        .attr("x", -(height / 4))
         .attr("dy", "1em")
         .attr("fill", "black")
         .style("text-anchor", "middle")
@@ -270,8 +290,8 @@
         .append("path")
         .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }])
         .attr("fill-opacity", 0.65)
-        .attr("fill", this.waterColor)
-        .attr("stroke", this.waterColor)
+        .attr("fill", WATER_COLOR)
+        .attr("stroke", WATER_COLOR)
         .attr("d", waterArea);
     },
     drawProfile({
@@ -325,10 +345,11 @@
       }
     },
     scaleFairwayProfile() {
-      if (!document.querySelector(".fairwayprofile")) return;
-      const clientHeight = document.querySelector(".fairwayprofile")
+      if (!document.querySelector(".diagram-container")) return;
+      const clientHeight = document.querySelector(".diagram-container")
         .clientHeight;
-      const clientWidth = document.querySelector(".fairwayprofile").clientWidth;
+      const clientWidth = document.querySelector(".diagram-container")
+        .clientWidth;
       if (!clientHeight || !clientWidth) return;
       this.height = clientHeight;
       this.width = clientWidth;