--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Apr 29 12:58:27 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Apr 29 13:27:50 2019 +0200
@@ -5,6 +5,8 @@
   </div>
 </template>
 
+<style></style>
+
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -25,7 +27,6 @@
 export default {
   data() {
     return {
-      plainAvailability: [],
       loading: false
     };
   },
@@ -35,79 +36,91 @@
     }
   },
   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 width = 1000;
+      const height = 600;
+      const data = [
+        { month: "feb", values: [30, 20, 10, 0] },
+        { month: "mar", values: [25, 23, 0, 0] },
+        { month: "apr", values: [17, 18, 16, 13] }
+      ];
+
       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
+        .domain([-30, 30])
+        .range([height - 30, 0]);
+
+      const diagram = d3
+        .select("svg")
+        .attr("width", width)
+        .attr("height", height);
+      drawBars({ diagram, data, yScale });
+      drawLabel(diagram, height);
+      drawScale(diagram, yScale);
+    },
+    drawBars({ diagram, data, yScale }) {
+      const paddingRight = 100;
+      const paddingTop = 30;
+
+      const bars = diagram
+        .selectAll("g")
+        .data(data)
+        .enter()
         .append("g")
-        .attr("transform", `translate(0, ${height})`)
-        .call(d3.axisBottom(xScale));
-      chart
-        .selectAll()
-        .data(this.availability)
+        .attr("transform", (d, i) => {
+          return (
+            "translate(" + (paddingRight + i * 60) + "," + yScale(-1) + ")"
+          );
+        });
+      const bar = bars.append("g");
+
+      bar
+        .selectAll("rect")
+        .data(d => d.values)
         .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());
+        .attr("width", 30)
+        .attr("height", (d, i) => {
+          console.log(d);
+          return yScale(0) - yScale(d);
+        })
+        .attr("transform", d => {
+          return "translate(0 -" + (yScale(0) - yScale(d)) + ")";
+        })
+        .attr("fill", (d, i) => {
+          return colors[i];
+        });
+
+      bars
+        .append("text")
+        .text((d, i) => {
+          return d.month;
+        })
+        .attr("text-anchor", "middle")
+        .attr("x", 15)
+        .attr("y", 0)
+        .attr("dy", "1em");
+    },
+    drawLabel(diagram, height) {
+      const dy = height / 2;
+      diagram
+        .append("text")
+        .text("sum of days / Summe der Tage")
+        .attr("text-anchor", "middle")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("dy", "1em")
+        .attr("transform", "translate(0, " + dy + "), rotate(-90)");
+    },
+    drawScale(diagram, yScale) {
+      const paddingLeft = 50;
+      const paddingTop = 10;
+      const yAxis = d3.axisLeft().scale(yScale);
+      diagram
+        .append("g")
+        .attr("transform", "translate(" + paddingLeft + " " + paddingTop + ")")
+        .call(yAxis);
     }
   }
 };
 </script>
-
-<style></style>