--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 13:08:03 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 14:06:23 2019 +0200
@@ -3,30 +3,27 @@
     <h1>Available Fairway Depth</h1>
     <UISpinnerOverlay v-if="loading" />
     <div class="d-flex flex-row">
-      <div class="ml-3 mr-auto">
-        <ul>
-          <li v-for="(entry, index) in legend" :key="index">{{ entry }}</li>
-        </ul>
-      </div>
       <div class="d-flex flex-column mr-auto">
         <div class="d-flex flex-row">
-          <div class="mr-3 ml-auto">
-            <select class="mr-3">
+          <div class="mr-3 my-auto ml-auto">
+            <select class="form-control mr-3">
               <option>Monthly</option>
               <option>Quaterly</option>
               <option>Yearly</option>
             </select>
           </div>
-          <div class="mr-3">
-            <label for="from" class="mr-3"><translate>from</translate></label
-            ><input />
+          <div class="d-flex flex-row mr-3">
+            <label for="from" class="my-auto mr-3"
+              ><translate>from</translate></label
+            ><input class="form-control" type="date" />
           </div>
-          <div class="mr-auto">
-            <label for="to" class="mr-3"><translate>to</translate></label
-            ><input />
+          <div class="d-flex flex-row mr-auto">
+            <label for="to" class="my-auto mr-3"
+              ><translate>to</translate></label
+            ><input class="form-control" type="date" />
           </div>
         </div>
-        <div class="diagram-container"></div>
+        <div :id="containerId" class="diagram-container"></div>
       </div>
     </div>
   </div>
@@ -52,7 +49,9 @@
 import * as d3 from "d3";
 import app from "@/main";
 import { displayError } from "@/lib/errors";
+import debounce from "debounce";
 import { HTTP } from "@/lib/http";
+import { diagram } from "@/lib/mixins";
 
 const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h]
 01-2019, 22.000,1.000, 4.000,6.000, 20.000
@@ -62,8 +61,10 @@
 05-2019, 30.000,0.000,0.000,0.000, 30.000`;
 
 export default {
+  mixins: [diagram],
   data() {
     return {
+      containerId: "availablefairwaydepth",
       loading: false,
       fwData: null,
       width: 1000,
@@ -76,14 +77,14 @@
       legend: "",
       diagram: null,
       yScale: null,
-      barsWidth: 60
+      barsWidth: 60,
+      dimensions: null
     };
   },
+  created() {
+    window.addEventListener("resize", debounce(this.drawDiagram), 100);
+  },
   mounted() {
-    this.yScale = d3
-      .scaleLinear()
-      .domain([-33, 33])
-      .range([this.height - 30, 0]);
     this.loadData();
   },
   computed: {
@@ -137,6 +138,11 @@
         });
     },
     drawDiagram() {
+      this.dimensions = this.getDimensions();
+      this.yScale = d3
+        .scaleLinear()
+        .domain([-33, 33])
+        .range([this.dimensions.mainHeight - 30, 0]);
       d3.select(".diagram-container svg").remove();
       this.generateDiagramContainer();
       this.drawBars();
@@ -147,8 +153,8 @@
       const diagram = d3
         .select(".diagram-container")
         .append("svg")
-        .attr("width", this.width)
-        .attr("height", this.height);
+        .attr("width", this.dimensions.width)
+        .attr("height", this.dimensions.mainHeight);
       this.diagram = diagram
         .append("g")
         .attr("transform", `translate(0 ${this.paddingTop})`);
@@ -216,7 +222,7 @@
         .attr("y", this.yScale(0) + this.labelPaddingTop);
     },
     drawScaleLabel() {
-      const center = this.height / 2;
+      const center = this.dimensions.mainHeight / 2;
       this.diagram
         .append("text")
         .text(this.$options.LEGEND)