--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Fairwayprofile.vue	Wed Sep 05 13:02:25 2018 +0200
@@ -0,0 +1,62 @@
+<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;
+}
+</style>
+
+<script>
+import * as d3 from "d3";
+
+export default {
+  name: "fairwayprofile",
+  props: ["width", "height", "xScale", "yScaleLeft", "yScaleRight"],
+  data() {
+    return {};
+  },
+  mounted() {
+    let svg = d3.select("svg");
+    const margin = { top: 20, right: 40, bottom: 20, left: 40 };
+    const width = this.width - margin.right - margin.left;
+    const height = this.height - margin.top - margin.bottom;
+    let xScale = d3
+      .scaleLinear()
+      .domain(this.xScale)
+      .range([0, width]);
+    xScale.ticks(5);
+    let yScale = d3
+      .scaleLinear()
+      .domain(this.yScaleLeft)
+      .range([height, 0]);
+
+    let yScale2 = d3
+      .scaleLinear()
+      .domain(this.yScaleRight)
+      .range([height, 0]);
+
+    let xAxis = d3.axisBottom(xScale);
+    let yAxis = d3.axisLeft(yScale);
+    let yAxis2 = d3.axisRight(yScale2);
+    let g = svg
+      .append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+    g
+      .append("g")
+      .attr("transform", "translate(0," + height + ")")
+      .call(xAxis.ticks(5));
+    g.append("g").call(yAxis);
+    g
+      .append("g")
+      .attr("transform", "translate(" + width + ",0)")
+      .call(yAxis2);
+  }
+};
+</script>