--- a/client/src/components/Statistics.vue	Wed May 08 10:50:14 2019 +0200
+++ b/client/src/components/Statistics.vue	Wed May 08 11:25:11 2019 +0200
@@ -49,27 +49,35 @@
             <small class="my-auto text-muted"
               ><translate>Type</translate></small
             >
-            <select class="form-control">
-              <option>Monthly</option>
-              <option>Quaterly</option>
-              <option>Yearly</option>
+            <select v-model="selectedFrequency" class="form-control">
+              <option
+                v-for="(option, index) in $options.FREQUENCIES"
+                :value="option"
+                :key="index"
+                ><translate>{{ option }}</translate></option
+              >
             </select>
           </div>
           <div class="d-flex flex-column mb-3">
             <small for="from" class="my-auto text-muted"
               ><translate>Date from</translate></small
-            ><input id="from" class="form-control" type="date" />
+            ><input
+              id="from"
+              v-model="fromDate"
+              class="form-control"
+              type="date"
+            />
           </div>
           <div class="d-flex flex-column">
             <small for="to" class="my-auto text-muted"
               ><translate>Date to</translate></small
-            ><input id="to" class="form-control" type="date" />
+            ><input id="to" v-model="toDate" class="form-control" type="date" />
           </div>
         </div>
         <div class="mt-3">
           <button
             @click="openFairwaydepth"
-            :disabled="selectedEntry == null"
+            :disabled="isComplete"
             class="btn btn-info btn-sm w-100"
           >
             <translate>Available Fairway Depth</translate>
@@ -97,6 +105,7 @@
  */
 
 import app from "@/main";
+import { displayError } from "@/lib/errors";
 import { mapState, mapGetters } from "vuex";
 
 export default {
@@ -108,7 +117,26 @@
   },
   methods: {
     openFairwaydepth() {
-      this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
+      this.loading = true;
+      this.$store
+        .dispatch("diagram/loadAvailableFairwayDepth", {
+          feature: this.selectedFairwayAvailabilityFeature,
+          from: this.from,
+          to: this.to,
+          frequency: this.frequency
+        })
+        .then(() => {
+          this.loading = false;
+          this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
+        })
+        .catch(error => {
+          console.log(error);
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
     },
     close() {
       this.$store.commit("application/showStatistics", false);
@@ -147,10 +175,47 @@
   },
   computed: {
     ...mapState("application", ["showStatistics", "paneSetup", "showProfiles"]),
-    ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]),
+    ...mapState("diagram", [
+      "selectedFairwayAvailabilityFeature",
+      "from",
+      "to",
+      "frequency"
+    ]),
     ...mapState("imports", ["stretches"]),
     ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]),
     ...mapGetters("map", ["openLayersMap"]),
+    isComplete() {
+      return (
+        this.from == null ||
+        this.to == null ||
+        this.frequency == null ||
+        this.selectedFairwayAvailabilityFeature == null
+      );
+    },
+    fromDate: {
+      get() {
+        return this.from;
+      },
+      set(value) {
+        this.$store.commit("diagram/setFrom", value);
+      }
+    },
+    toDate: {
+      get() {
+        return this.to;
+      },
+      set(value) {
+        this.$store.commit("diagram/setTo", value);
+      }
+    },
+    selectedFrequency: {
+      get() {
+        return this.frequency;
+      },
+      set(value) {
+        this.$store.commit("diagram/setFrequency", value);
+      }
+    },
     selectedEntry: {
       get() {
         return this.selectedFairwayAvailabilityFeature;
@@ -205,7 +270,12 @@
   BOTTLENECKS: "bottlenecks",
   SECTIONS: "sections",
   STRETCHES: "stretches",
-  AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth")
+  AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"),
+  FREQUENCIES: {
+    MONTHLY: "monthly",
+    QUARTERLY: "quarterly",
+    YEARLY: "yearly"
+  }
 };
 </script>