--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 16:59:11 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 17:38:25 2019 +0200
@@ -2,29 +2,8 @@
   <div class="d-flex flex-column flex-fill">
     <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
     <UISpinnerOverlay v-if="loading" />
-    <div class="mt-3 d-flex flex-row">
-      <div class="d-flex flex-column mr-auto">
-        <div class="d-flex flex-row">
-          <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="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="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 :id="containerId" class="diagram-container"></div>
-      </div>
+    <div class="mt-3 d-flex flex-row my-auto">
+      <div :id="containerId" class="diagram-container"></div>
     </div>
   </div>
 </template>
@@ -50,24 +29,15 @@
 import app from "@/main";
 import { displayError } from "@/lib/errors";
 import debounce from "debounce";
-import { HTTP } from "@/lib/http";
 import { diagram } from "@/lib/mixins";
 import { mapState } from "vuex";
 
-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
-02-2019, 24.000,0.000,0.000,0.000, 23.000
-03-2019, 30.000,0.000,0.000,0.000, 30.000
-04-2019, 30.000,0.000,0.000,0.000, 30.000
-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,
       height: 600,
       paddingRight: 100,
@@ -89,7 +59,7 @@
     this.loadData();
   },
   computed: {
-    ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]),
+    ...mapState("diagram", ["selectedFairwayAvailabilityFeature", "fwData"]),
     availability() {
       return this.plainAvailability;
     },
@@ -104,40 +74,12 @@
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
-    prepareLegend(header) {
-      const headerEntries = header.split(",");
-      headerEntries.shift();
-      return headerEntries.map(x => {
-        return x.split("#")[1].trim();
-      });
-    },
-    prepare(data) {
-      const csv = data.split("\n");
-      this.legend = this.prepareLegend(csv.shift());
-      let transformed = csv.map(e => {
-        const result = e.split(",");
-        const label = result.shift();
-        const ldc = result.shift();
-        const highestLevel = result.pop();
-        return {
-          label: label,
-          ldc: ldc,
-          highestLevel: highestLevel,
-          lowerLevels: result
-        };
-      });
-      this.fwData = transformed;
-    },
     loadData() {
-      const URL = `/data/bottleneck/fairway-depth/${
-        this.featureName
-      }?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly`;
-      HTTP.get(URL, {
-        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-      })
+      this.$store
+        .dispatch("diagram/loadAvailableFairwayDepth", {
+          featureName: this.featureName
+        })
         .then(() => {
-          // const { data } = response;
-          this.prepare(MOCKDATA);
           this.drawDiagram();
         })
         .catch(error => {