--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/fairway/Fairwayprofile.vue	Fri Sep 07 11:13:56 2018 +0200
@@ -0,0 +1,163 @@
+<template>
+  <div class="fairwayprofile">
+    <svg :width="width +'px'" :height="height +'px'">
+    </svg>
+  </div>
+</template>
+
+<style lang="scss">
+.fairwayprofile {
+  background-color: white;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+</style>
+
+<script>
+import * as d3 from "d3";
+
+const WATER_COLOR = "#005DFF";
+const GROUND_COLOR = "#4A2F06";
+
+const sampleData = [
+  { x: 0, y: -3.0 },
+  { x: 25, y: -2.0 },
+  { x: 50, y: -4.5 },
+  { x: 75, y: -4.0 },
+  { x: 100, y: -3.0 },
+  { x: 125, y: -4.0 },
+  { x: 150, y: -5.0 },
+  { x: 175, y: -4.0 },
+  { x: 200, y: -3.0 },
+  { x: 225, y: -3.5 },
+  { x: 250, y: -3.0 },
+  { x: 300, y: -2.5 }
+];
+
+export default {
+  name: "fairwayprofile",
+  props: ["width", "height", "xScale", "yScaleLeft", "yScaleRight", "margin"],
+  data() {
+    return {};
+  },
+  methods: {
+    generateCoordinates(svg, height, width) {
+      let xScale = d3
+        .scaleLinear()
+        .domain(this.xScale)
+        .rangeRound([0, width]);
+
+      xScale.ticks(5);
+      let yScaleLeft = d3
+        .scaleLinear()
+        .domain(this.yScaleLeft)
+        .rangeRound([height, 0]);
+
+      let yScaleRight = d3
+        .scaleLinear()
+        .domain(this.yScaleRight)
+        .rangeRound([height, 0]);
+
+      let xAxis = d3.axisBottom(xScale);
+      let yAxis = d3.axisLeft(yScaleLeft);
+      let yAxis2 = d3.axisRight(yScaleRight);
+      let graph = svg
+        .append("g")
+        .attr(
+          "transform",
+          "translate(" + this.margin.left + "," + this.margin.top + ")"
+        );
+      graph
+        .append("g")
+        .attr("transform", "translate(0," + height + ")")
+        .call(xAxis.ticks(5));
+      graph.append("g").call(yAxis);
+      graph
+        .append("g")
+        .attr("transform", "translate(" + width + ",0)")
+        .call(yAxis2);
+      return { xScale, yScaleLeft, yScaleRight, graph };
+    },
+    drawWaterlevel({ graph, xScale, yScaleRight, height }) {
+      let waterArea = d3
+        .area()
+        .x(function(d) {
+          return xScale(d.x);
+        })
+        .y0(height)
+        .y1(function(d) {
+          return yScaleRight(d.y);
+        });
+      graph
+        .append("path")
+        .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }])
+        .attr("fill", WATER_COLOR)
+        .attr("stroke", WATER_COLOR)
+        .attr("d", waterArea);
+    },
+    drawProfile({ graph, xScale, yScaleRight, sampleData, height }) {
+      let profileLine = d3
+        .line()
+        .x(d => {
+          return xScale(d.x);
+        })
+        .y(d => {
+          return yScaleRight(d.y);
+        });
+      let profileArea = d3
+        .area()
+        .x(function(d) {
+          return xScale(d.x);
+        })
+        .y0(height)
+        .y1(function(d) {
+          return yScaleRight(d.y);
+        });
+      graph
+        .append("path")
+        .datum(sampleData)
+        .attr("fill", GROUND_COLOR)
+        .attr("stroke", GROUND_COLOR)
+        .attr("stroke-width", 3)
+        .attr("d", profileArea);
+      graph
+        .append("path")
+        .datum(sampleData)
+        .attr("fill", "none")
+        .attr("stroke", "black")
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round")
+        .attr("stroke-width", 3)
+        .attr("d", profileLine);
+    }
+  },
+  mounted() {
+    let svg = d3.select("svg");
+    const width = this.width - this.margin.right - this.margin.left;
+    const height = this.height - this.margin.top - this.margin.bottom;
+
+    const { xScale, yScaleRight, graph } = this.generateCoordinates(
+      svg,
+      height,
+      width
+    );
+    this.drawWaterlevel({
+      graph,
+      xScale,
+      yScaleRight,
+      height,
+      width
+    });
+    this.drawProfile({
+      graph,
+      xScale,
+      yScaleRight,
+      sampleData,
+      height,
+      width
+    });
+  }
+};
+</script>