Mercurial > gemma
comparison client/src/fairway/Fairwayprofile.vue @ 585:ef307bd6b5d8
refac: restructured client application
To make the application more accessible for developers, the structure was reorganized.
Instead of sticking to technical terminology, the application terminology is according to the domain:
I.e. "map" contains everything regarding map (including store).
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 07 Sep 2018 11:13:56 +0200 |
parents | |
children | c4a4dc612191 |
comparison
equal
deleted
inserted
replaced
584:8b66a10aaf8a | 585:ef307bd6b5d8 |
---|---|
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 margin-top: auto; | |
14 margin-bottom: auto; | |
15 } | |
16 </style> | |
17 | |
18 <script> | |
19 import * as d3 from "d3"; | |
20 | |
21 const WATER_COLOR = "#005DFF"; | |
22 const GROUND_COLOR = "#4A2F06"; | |
23 | |
24 const sampleData = [ | |
25 { x: 0, y: -3.0 }, | |
26 { x: 25, y: -2.0 }, | |
27 { x: 50, y: -4.5 }, | |
28 { x: 75, y: -4.0 }, | |
29 { x: 100, y: -3.0 }, | |
30 { x: 125, y: -4.0 }, | |
31 { x: 150, y: -5.0 }, | |
32 { x: 175, y: -4.0 }, | |
33 { x: 200, y: -3.0 }, | |
34 { x: 225, y: -3.5 }, | |
35 { x: 250, y: -3.0 }, | |
36 { x: 300, y: -2.5 } | |
37 ]; | |
38 | |
39 export default { | |
40 name: "fairwayprofile", | |
41 props: ["width", "height", "xScale", "yScaleLeft", "yScaleRight", "margin"], | |
42 data() { | |
43 return {}; | |
44 }, | |
45 methods: { | |
46 generateCoordinates(svg, height, width) { | |
47 let xScale = d3 | |
48 .scaleLinear() | |
49 .domain(this.xScale) | |
50 .rangeRound([0, width]); | |
51 | |
52 xScale.ticks(5); | |
53 let yScaleLeft = d3 | |
54 .scaleLinear() | |
55 .domain(this.yScaleLeft) | |
56 .rangeRound([height, 0]); | |
57 | |
58 let yScaleRight = d3 | |
59 .scaleLinear() | |
60 .domain(this.yScaleRight) | |
61 .rangeRound([height, 0]); | |
62 | |
63 let xAxis = d3.axisBottom(xScale); | |
64 let yAxis = d3.axisLeft(yScaleLeft); | |
65 let yAxis2 = d3.axisRight(yScaleRight); | |
66 let graph = svg | |
67 .append("g") | |
68 .attr( | |
69 "transform", | |
70 "translate(" + this.margin.left + "," + this.margin.top + ")" | |
71 ); | |
72 graph | |
73 .append("g") | |
74 .attr("transform", "translate(0," + height + ")") | |
75 .call(xAxis.ticks(5)); | |
76 graph.append("g").call(yAxis); | |
77 graph | |
78 .append("g") | |
79 .attr("transform", "translate(" + width + ",0)") | |
80 .call(yAxis2); | |
81 return { xScale, yScaleLeft, yScaleRight, graph }; | |
82 }, | |
83 drawWaterlevel({ graph, xScale, yScaleRight, height }) { | |
84 let waterArea = d3 | |
85 .area() | |
86 .x(function(d) { | |
87 return xScale(d.x); | |
88 }) | |
89 .y0(height) | |
90 .y1(function(d) { | |
91 return yScaleRight(d.y); | |
92 }); | |
93 graph | |
94 .append("path") | |
95 .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }]) | |
96 .attr("fill", WATER_COLOR) | |
97 .attr("stroke", WATER_COLOR) | |
98 .attr("d", waterArea); | |
99 }, | |
100 drawProfile({ graph, xScale, yScaleRight, sampleData, height }) { | |
101 let profileLine = d3 | |
102 .line() | |
103 .x(d => { | |
104 return xScale(d.x); | |
105 }) | |
106 .y(d => { | |
107 return yScaleRight(d.y); | |
108 }); | |
109 let profileArea = d3 | |
110 .area() | |
111 .x(function(d) { | |
112 return xScale(d.x); | |
113 }) | |
114 .y0(height) | |
115 .y1(function(d) { | |
116 return yScaleRight(d.y); | |
117 }); | |
118 graph | |
119 .append("path") | |
120 .datum(sampleData) | |
121 .attr("fill", GROUND_COLOR) | |
122 .attr("stroke", GROUND_COLOR) | |
123 .attr("stroke-width", 3) | |
124 .attr("d", profileArea); | |
125 graph | |
126 .append("path") | |
127 .datum(sampleData) | |
128 .attr("fill", "none") | |
129 .attr("stroke", "black") | |
130 .attr("stroke-linejoin", "round") | |
131 .attr("stroke-linecap", "round") | |
132 .attr("stroke-width", 3) | |
133 .attr("d", profileLine); | |
134 } | |
135 }, | |
136 mounted() { | |
137 let svg = d3.select("svg"); | |
138 const width = this.width - this.margin.right - this.margin.left; | |
139 const height = this.height - this.margin.top - this.margin.bottom; | |
140 | |
141 const { xScale, yScaleRight, graph } = this.generateCoordinates( | |
142 svg, | |
143 height, | |
144 width | |
145 ); | |
146 this.drawWaterlevel({ | |
147 graph, | |
148 xScale, | |
149 yScaleRight, | |
150 height, | |
151 width | |
152 }); | |
153 this.drawProfile({ | |
154 graph, | |
155 xScale, | |
156 yScaleRight, | |
157 sampleData, | |
158 height, | |
159 width | |
160 }); | |
161 } | |
162 }; | |
163 </script> |