<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>