--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Statistics.vue	Mon May 06 13:02:25 2019 +0200
@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="[
+      'box ui-element rounded bg-white text-nowrap',
+      { expanded: showStatistics }
+    ]"
+  >
+    <div style="width: 18rem">
+      <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" />
+      <div class="box-body">
+        <UISpinnerOverlay v-if="loading" />
+        <div class="d-flex flex-column">
+          <select class="form-control font-weight-bold" v-model="type">
+            <option :value="null">{{ $options.TYPES.EMPTY }}</option>
+            <option>{{ $options.TYPES.AVAILABLEFAIRWAYDEPTH }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* 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):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+
+import app from "@/main";
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      type: null,
+      loading: false
+    };
+  },
+  methods: {
+    close() {
+      this.$store.commit("application/showStatistics", false);
+    }
+  },
+  computed: {
+    ...mapState("application", ["showStatistics", "paneSetup"]),
+    label() {
+      return this.$gettext("Statistics");
+    }
+  },
+  TYPES: {
+    AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"),
+    EMPTY: app.$gettext("Please choose statistic")
+  }
+};
+</script>
+
+<style></style>