Mercurial > gemma
changeset 571:fb519eaa462d
fix: missing component added
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 05 Sep 2018 13:02:25 +0200 |
parents | 7575cf0e15ff |
children | 59b22dc924c8 |
files | client/src/components/Fairwayprofile.vue |
diffstat | 1 files changed, 62 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /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>