--- 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>
 

--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Wed May 08 10:50:14 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Wed May 08 11:25:11 2019 +0200
@@ -27,10 +27,10 @@
  */
 import * as d3 from "d3";
 import app from "@/main";
-import { displayError } from "@/lib/errors";
 import debounce from "debounce";
 import { diagram } from "@/lib/mixins";
 import { mapState } from "vuex";
+import filters from "@/lib/filters.js";
 
 export default {
   mixins: [diagram],
@@ -56,15 +56,31 @@
     window.addEventListener("resize", debounce(this.drawDiagram), 100);
   },
   mounted() {
-    this.loadData();
+    this.drawDiagram();
   },
   computed: {
-    ...mapState("diagram", ["selectedFairwayAvailabilityFeature", "fwData"]),
+    ...mapState("diagram", [
+      "selectedFairwayAvailabilityFeature",
+      "fwData",
+      "from",
+      "to",
+      "frequency"
+    ]),
+    fromDate() {
+      return this.from;
+    },
+    toDate() {
+      return this.to;
+    },
     availability() {
       return this.plainAvailability;
     },
     title() {
-      return `Available Fairway Depth: ${this.featureName}`;
+      return `Available Fairway Depth: ${
+        this.featureName
+      } (${filters.surveyDate(this.fromDate)} - ${filters.surveyDate(
+        this.toDate
+      )}) ${this.frequency}`;
     },
     featureName() {
       return this.selectedFairwayAvailabilityFeature.properties.name;
@@ -74,23 +90,6 @@
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
-    loadData() {
-      this.$store
-        .dispatch("diagram/loadAvailableFairwayDepth", {
-          featureName: this.featureName
-        })
-        .then(() => {
-          this.drawDiagram();
-        })
-        .catch(error => {
-          console.log(error);
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    },
     drawDiagram() {
       this.dimensions = this.getDimensions();
       this.yScale = d3

--- a/client/src/store/diagram.js	Wed May 08 10:50:14 2019 +0200
+++ b/client/src/store/diagram.js	Wed May 08 11:25:11 2019 +0200
@@ -24,6 +24,9 @@
 const init = () => {
   return {
     selectedFairwayAvailabilityFeature: null,
+    from: null,
+    to: null,
+    frequency: null,
     fwData: null,
     legend: null
   };
@@ -34,6 +37,15 @@
   namespaced: true,
   state: init(),
   mutations: {
+    setFrequency: (state, frequency) => {
+      state.frequency = frequency;
+    },
+    setFrom: (state, from) => {
+      state.from = from;
+    },
+    setTo: (state, to) => {
+      state.to = to;
+    },
     setSelectedFairwayAvailability: (state, feature) => {
       state.selectedFairwayAvailabilityFeature = feature;
     },
@@ -51,8 +63,10 @@
   actions: {
     loadAvailableFairwayDepth: ({ commit }, options) => {
       return new Promise((resolve, reject) => {
-        const { featureName } = options;
-        const URL = `/data/bottleneck/fairway-depth/${featureName}?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly`;
+        const { feature, from, to, frequency } = options;
+        const URL = `/data/bottleneck/fairway-depth/${
+          feature.properties.name
+        }?from=${from}T00:00:00%2b00:00&to=${to}T23:59:59%2b07:00&mode=${frequency}`;
         HTTP.get(URL, {
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })