--- a/client/src/components/Statistics.vue	Tue May 07 16:30:20 2019 +0200
+++ b/client/src/components/Statistics.vue	Tue May 07 16:59:11 2019 +0200
@@ -120,12 +120,12 @@
       const bn = this.bottlenecksList.filter(
         x => x.properties.name === this.selectedBottleneck
       )[0];
-      this.$store.commit("fairwayprofile/setSelectedFairwayAvailability", bn);
+      this.$store.commit("diagram/setSelectedFairwayAvailability", bn);
     }
   },
   computed: {
     ...mapState("application", ["showStatistics", "paneSetup", "showProfiles"]),
-    ...mapState("fairwayprofile", ["selectedFairwayAvailabilityFeature"]),
+    ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]),
     ...mapState("imports", ["stretches"]),
     ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]),
     ...mapGetters("map", ["openLayersMap"]),
@@ -134,10 +134,7 @@
         return this.selectedFairwayAvailabilityFeature;
       },
       set(feature) {
-        this.$store.commit(
-          "fairwayprofile/setSelectedFairwayAvailability",
-          feature
-        );
+        this.$store.commit("diagram/setSelectedFairwayAvailability", feature);
       }
     },
     entries() {
@@ -165,10 +162,7 @@
       if (this.type === this.$options.BOTTLENECKS && this.selectedBottleneck) {
         this.setSelectedBottleneck();
       } else {
-        this.$store.commit(
-          "fairwayprofile/setSelectedFairwayAvailability",
-          null
-        );
+        this.$store.commit("diagram/setSelectedFairwayAvailability", null);
       }
       this.openLayersMap()
         .getLayer("STRETCHES")

--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 16:30:20 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 16:59:11 2019 +0200
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <h1>Available Fairway Depth</h1>
+  <div class="d-flex flex-column flex-fill">
+    <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
     <UISpinnerOverlay v-if="loading" />
-    <div class="d-flex flex-row">
+    <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">
@@ -52,6 +52,7 @@
 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
@@ -88,11 +89,21 @@
     this.loadData();
   },
   computed: {
+    ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]),
     availability() {
       return this.plainAvailability;
+    },
+    title() {
+      return `Available Fairway Depth: ${this.featureName}`;
+    },
+    featureName() {
+      return this.selectedFairwayAvailabilityFeature.properties.name;
     }
   },
   methods: {
+    close() {
+      this.$store.commit("application/paneSetup", "DEFAULT");
+    },
     prepareLegend(header) {
       const headerEntries = header.split(",");
       headerEntries.shift();
@@ -118,8 +129,9 @@
       this.fwData = transformed;
     },
     loadData() {
-      const URL =
-        "/data/bottleneck/fairway-depth/Furt%20Wendeplatz%20Theben?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly";
+      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") }
       })

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/store/diagram.js	Tue May 07 16:59:11 2019 +0200
@@ -0,0 +1,32 @@
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+
+const init = () => {
+  return {
+    selectedFairwayAvailabilityFeature: null
+  };
+};
+
+const diagram = {
+  init,
+  namespaced: true,
+  state: init(),
+  mutations: {
+    setSelectedFairwayAvailability: (state, feature) => {
+      state.selectedFairwayAvailabilityFeature = feature;
+    }
+  }
+};
+
+export { diagram };

--- a/client/src/store/fairway.js	Tue May 07 16:30:20 2019 +0200
+++ b/client/src/store/fairway.js	Tue May 07 16:59:11 2019 +0200
@@ -37,8 +37,7 @@
     previousCuts: [],
     profileLoading: false,
     selectedCut: null,
-    differencesLoading: false,
-    selectedFairwayAvailabilityFeature: null
+    differencesLoading: false
   };
 };
 
@@ -58,9 +57,6 @@
     }
   },
   mutations: {
-    setSelectedFairwayAvailability: (state, feature) => {
-      state.selectedFairwayAvailabilityFeature = feature;
-    },
     additionalSurvey: (state, additionalSurvey) => {
       state.additionalSurvey = additionalSurvey;
     },

--- a/client/src/store/index.js	Tue May 07 16:30:20 2019 +0200
+++ b/client/src/store/index.js	Tue May 07 16:59:11 2019 +0200
@@ -23,6 +23,7 @@
 import bottlenecks from "./bottlenecks";
 import { imports } from "./imports";
 import { importschedule } from "./importschedule";
+import { diagram } from "./diagram";
 import gauges from "./gauges";
 
 Vue.use(Vuex);
@@ -32,6 +33,7 @@
     reset() {
       this.replaceState({
         application: application.init(),
+        diagram: diagram.init(),
         fairwayprofile: fairwayprofile.init(),
         imports: imports.init(),
         importschedule: importschedule.init(),
@@ -45,6 +47,7 @@
   },
   modules: {
     application,
+    diagram,
     fairwayprofile,
     imports,
     importschedule,