--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Apr 12 13:35:02 2019 +0200
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <h1>Available Fairway Depth</h1>
+    <UISpinnerOverlay v-if="loading" />
+  </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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import * as d3 from "d3";
+
+export default {
+  data() {
+    return {
+      plainAvailability: [],
+      loading: false
+    };
+  },
+  computed: {
+    availability() {
+      return this.plainAvailability;
+    }
+  },
+  methods: {
+    /**
+     *
+     * aggregates data exceeding certain thresholds
+     *
+     * data = [1,2,3,4,5,6,7,8]
+     * treshold = [2,4,6]
+     *
+     * structure: treshold: count
+     *
+     * expected result = {
+     *  6: 2,
+     *  4: 2
+     *  2: 2
+     * }
+     *
+     * 1,2 are dropped, because they do not exceed any of the given tresholds
+     *
+     */
+    availabeDaysPerMonth(data, tresholds) {
+      const DESC = (a, b) => {
+        if (a > b) return -1;
+        if (a === b) return 0;
+        return 1;
+      };
+      const groups = tresholds.sort(DESC);
+      const collection = {};
+      groups.map(g => {
+        collection[g + ""] = 0;
+      });
+      return this.data.reduce((current, value) => {
+        for (let threshold in groups) {
+          if (value > threshold) {
+            return (current[threshold] += 1);
+          }
+        }
+        return current;
+      }, collection);
+    },
+    drawDiagram() {
+      const margin = 60;
+      const width = 1000 - 2 * margin;
+      const height = 600 - 2 * margin;
+      const yScale = d3
+        .scaleLinear()
+        .range([height, 0])
+        .domain([-35, 35]);
+      d3.select(".diagram-container svg").remove();
+      let svg = d3.select(".diagram-container").append("svg");
+      svg.attr("width", "100%");
+      svg.attr("height", "100%");
+      const chart = svg.attr("transform", `translate(${margin}, ${margin})`);
+      chart.append("g").call(d3.axisLeft(yScale));
+      const xScale = d3
+        .scaleBand()
+        .range([0, width])
+        .domain([1, 12])
+        .padding(0.2);
+      chart
+        .append("g")
+        .attr("transform", `translate(0, ${height})`)
+        .call(d3.axisBottom(xScale));
+      chart
+        .selectAll()
+        .data(this.availability)
+        .enter()
+        .append("rect")
+        .attr("x", s => xScale(s.month))
+        .attr("y", s => yScale(s.days))
+        .attr("height", s => height - yScale(s.days))
+        .attr("width", xScale.bandwidth());
+    }
+  }
+};
+</script>
+
+<style></style>