Mercurial > gemma

comparison client/src/components/Fairwayprofile.vue @ 571:fb519eaa462d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: missing component added
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 05 Sep 2018 13:02:25 +0200
parents
children 59b22dc924c8
comparison
equal deleted inserted replaced
570:7575cf0e15ff 571:fb519eaa462d
1 <template>
2 <div class="fairwayprofile">
3 <svg :width="width +'px'" :height="height +'px'">
4 </svg>
5 </div>
6 </template>
7
8 <style lang="scss">
9 .fairwayprofile {
10 background-color: white;
11 margin-left: auto;
12 margin-right: auto;
13 }
14 </style>
15
16 <script>
17 import * as d3 from "d3";
18
19 export default {
20 name: "fairwayprofile",
21 props: ["width", "height", "xScale", "yScaleLeft", "yScaleRight"],
22 data() {
23 return {};
24 },
25 mounted() {
26 let svg = d3.select("svg");
27 const margin = { top: 20, right: 40, bottom: 20, left: 40 };
28 const width = this.width - margin.right - margin.left;
29 const height = this.height - margin.top - margin.bottom;
30 let xScale = d3
31 .scaleLinear()
32 .domain(this.xScale)
33 .range([0, width]);
34 xScale.ticks(5);
35 let yScale = d3
36 .scaleLinear()
37 .domain(this.yScaleLeft)
38 .range([height, 0]);
39
40 let yScale2 = d3
41 .scaleLinear()
42 .domain(this.yScaleRight)
43 .range([height, 0]);
44
45 let xAxis = d3.axisBottom(xScale);
46 let yAxis = d3.axisLeft(yScale);
47 let yAxis2 = d3.axisRight(yScale2);
48 let g = svg
49 .append("g")
50 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
51 g
52 .append("g")
53 .attr("transform", "translate(0," + height + ")")
54 .call(xAxis.ticks(5));
55 g.append("g").call(yAxis);
56 g
57 .append("g")
58 .attr("transform", "translate(" + width + ",0)")
59 .call(yAxis2);
60 }
61 };
62 </script>