--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Tue Apr 30 12:05:04 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue Apr 30 15:32:57 2019 +0200
@@ -2,6 +2,23 @@
   <div>
     <h1>Available Fairway Depth</h1>
     <UISpinnerOverlay v-if="loading" />
+    <div class="d-flex flex-row ml-3">
+      <div class="mr-3 ml-auto">
+        <select class="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>
+      <div class="mr-auto">
+        <label for="to" class="mr-3"><translate>to</translate></label
+        ><input />
+      </div>
+    </div>
     <div class="diagram-container"></div>
   </div>
 </template>
@@ -24,15 +41,20 @@
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import * as d3 from "d3";
+import app from "@/main";
 
 export default {
   data() {
     return {
       loading: false,
-      colors: ["red", "green", "blue", "purple"]
+      colors: ["red", "green", "blue", "purple"],
+      fwData: null,
+      width: 1000,
+      height: 600
     };
   },
   mounted() {
+    this.loadData();
     this.drawDiagram();
   },
   computed: {
@@ -41,9 +63,8 @@
     }
   },
   methods: {
+    loadData() {},
     drawDiagram() {
-      const width = 1000;
-      const height = 600;
       const data = [
         { month: "feb", values: [30, 20, 10, 0] },
         { month: "mar", values: [25, 23, 0, 0] },
@@ -54,15 +75,15 @@
       const yScale = d3
         .scaleLinear()
         .domain([-30, 30])
-        .range([height - 30, 0]);
+        .range([this.height - 30, 0]);
 
       const diagram = d3
         .select(".diagram-container")
         .append("svg")
-        .attr("width", width)
-        .attr("height", height);
+        .attr("width", this.width)
+        .attr("height", this.height);
       this.drawBars({ diagram, data, yScale });
-      this.drawLabel(diagram, height);
+      this.drawLabel(diagram, this.height);
       this.drawScale(diagram, yScale);
     },
     drawBars({ diagram, data, yScale }) {
@@ -99,15 +120,15 @@
         });
     },
     drawLabel(diagram, height) {
-      const dy = height / 2;
+      const center = height / 2;
       diagram
         .append("text")
-        .text("sum of days / Summe der Tage")
+        .text(this.$options.LEGEND)
         .attr("text-anchor", "middle")
         .attr("x", 0)
         .attr("y", 0)
         .attr("dy", "1em")
-        .attr("transform", "translate(0, " + dy + "), rotate(-90)");
+        .attr("transform", `translate(0, ${center}), rotate(-90)`);
     },
     drawScale(diagram, yScale) {
       const paddingLeft = 50;
@@ -115,9 +136,10 @@
       const yAxis = d3.axisLeft().scale(yScale);
       diagram
         .append("g")
-        .attr("transform", "translate(" + paddingLeft + " " + paddingTop + ")")
+        .attr("transform", `translate(${paddingLeft} ${paddingTop})`)
         .call(yAxis);
     }
-  }
+  },
+  LEGEND: app.$gettext("sum of days / Summe der Tage")
 };
 </script>