Mercurial > gemma
annotate client/src/fairway/Fairwayprofile.vue @ 844:c2cba785ca4d
WIP Fairwayprofile
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 28 Sep 2018 11:40:28 +0200 |
parents | 07be3e5f99a9 |
children | 596ef3b46028 |
rev | line source |
---|---|
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
2 <div class="profiledisplay d-flex flex-row"> |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
3 <div class="fairwayprofile"> |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
4 </div> |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
5 <div class="waterlevelselection d-flex flex-column"> |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
6 <div class="form-check" v-for="level in waterLevels" :key="level.level"> |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
7 <input class="form-check-input" :id="level.year" v-model="selectedWaterLevel" :value="level.level" type="radio"> |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
8 <label class="form-check-label" :for="level.year">{{level.year}}</label> |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
9 </div> |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
10 </div> |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
11 </div> |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
12 </template> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
13 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
14 <style lang="scss"> |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
15 .waterlevelselection { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
16 margin-top: $large-offset; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
17 margin-right: $large-offset; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
18 } |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
19 |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
20 .profiledisplay { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
21 width: 100vw; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
22 } |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
23 |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
24 .fairwayprofile { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 background-color: white; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 margin-left: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
27 margin-right: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
28 margin-top: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
29 margin-bottom: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
30 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 </style> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
32 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
33 <script> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
34 import * as d3 from "d3"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
35 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
36 const GROUND_COLOR = "#4A2F06"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
37 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 export default { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 name: "fairwayprofile", |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
40 props: [ |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
41 "data", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
42 "width", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
43 "height", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
44 "xScale", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
45 "yScaleLeft", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
46 "yScaleRight", |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
47 "margin", |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
48 "totalLength", |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
49 "waterLevels", |
841 | 50 "fairwayCoordinates", |
844 | 51 "selectedWaterLevel", |
52 "minAlt", | |
53 "maxAlt" | |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
54 ], |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
55 computed: { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
56 waterColor() { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
57 const result = this.waterLevels.find( |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
58 x => x.level === this.selectedWaterLevel |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
59 ); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
60 return result.color; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
61 } |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
62 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
63 data() { |
841 | 64 return {}; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
65 }, |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
66 watch: { |
780 | 67 data() { |
68 this.drawDiagram(); | |
69 }, | |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
70 width() { |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
71 this.drawDiagram(); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
72 }, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
73 height() { |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
74 this.drawDiagram(); |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
75 }, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
76 waterLevels() { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
77 this.drawDiagram(); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
78 }, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
79 selectedWaterLevel() { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
80 this.drawDiagram(); |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
81 }, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
82 fairwayCoordinates() { |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
83 this.drawDiagram(); |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
84 } |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
85 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
86 methods: { |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
87 drawDiagram() { |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
88 const chartDiv = document.querySelector(".fairwayprofile"); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
89 d3.select("svg").remove(); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
90 let svg = d3.select(chartDiv).append("svg"); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
91 svg.attr("width", this.width); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
92 svg.attr("height", this.height); |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
93 const width = this.width - this.margin.right - 1.5 * this.margin.left; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
94 const height = this.height - this.margin.top - 2 * this.margin.bottom; |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
95 const currentData = this.data; |
780 | 96 const { |
97 xScale, | |
98 yScaleRight, | |
99 yScaleLeft, | |
100 graph | |
101 } = this.generateCoordinates(svg, height, width); | |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
102 this.drawWaterlevel({ |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
103 graph, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
104 xScale, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
105 yScaleRight, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
106 height, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
107 width |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
108 }); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
109 this.drawProfile({ |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
110 graph, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
111 xScale, |
780 | 112 yScaleLeft, |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
113 currentData, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
114 height, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
115 width |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
116 }); |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
117 this.drawLabels({ |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
118 graph, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
119 xScale, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
120 yScaleLeft, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
121 currentData, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
122 height, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
123 width |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
124 }); |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
125 this.drawFairway({ |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
126 graph, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
127 xScale, |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
128 yScaleRight, |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
129 currentData, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
130 height, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
131 width |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
132 }); |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
133 }, |
807 | 134 drawFairway({ graph, xScale, yScaleRight }) { |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
135 for (let coordinates of this.fairwayCoordinates) { |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
136 const [startPoint, endPoint, depth] = coordinates; |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
137 let fairwayArea = d3 |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
138 .area() |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
139 .x(function(d) { |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
140 return xScale(d.x); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
141 }) |
844 | 142 .y0(0) |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
143 .y1(function(d) { |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
144 return yScaleRight(d.y); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
145 }); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
146 graph |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
147 .append("path") |
807 | 148 .datum([ |
149 { x: startPoint, y: -depth + this.selectedWaterLevel }, | |
150 { x: endPoint, y: -depth + this.selectedWaterLevel } | |
151 ]) | |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
152 .attr("fill", "#002AFF") |
810 | 153 .attr("stroke-opacity", 0.65) |
154 .attr("fill-opacity", 0.65) | |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
155 .attr("stroke", "#FFD20D") |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
156 .attr("d", fairwayArea); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
157 } |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
158 }, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
159 drawLabels({ graph, height }) { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
160 graph |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
161 .append("text") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
162 .attr("transform", "rotate(-90)") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
163 .attr("y", 0 - this.margin.left) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
164 .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
165 .attr("dy", "1em") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
166 .attr("fill", "black") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
167 .style("text-anchor", "middle") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
168 .text("Height above Adria [m]"); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
169 graph |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
170 .append("text") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
171 .attr("transform", ["rotate(-90)"]) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
172 .attr("y", this.width - 60) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
173 .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
174 .attr("dy", "1em") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
175 .attr("fill", "black") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
176 .style("text-anchor", "middle") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
177 .text("Depth [m]"); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
178 graph |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
179 .append("text") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
180 .attr("y", 0 - this.margin.left) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
181 .attr("x", 0 - height / 4) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
182 .attr("dy", "1em") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
183 .attr("fill", "black") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
184 .style("text-anchor", "middle") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
185 .attr("transform", [ |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
186 "translate(" + this.width / 2 + "," + this.height + ")", |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
187 "rotate(0)" |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
188 ]) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
189 .text("Width [m]"); |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
190 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
191 generateCoordinates(svg, height, width) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
192 let xScale = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
193 .scaleLinear() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
194 .domain(this.xScale) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
195 .rangeRound([0, width]); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
196 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
197 xScale.ticks(5); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
198 let yScaleLeft = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
199 .scaleLinear() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
200 .domain(this.yScaleLeft) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
201 .rangeRound([height, 0]); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
202 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
203 let yScaleRight = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
204 .scaleLinear() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
205 .domain(this.yScaleRight) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
206 .rangeRound([height, 0]); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
207 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
208 let xAxis = d3.axisBottom(xScale); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
209 let yAxis = d3.axisLeft(yScaleLeft); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
210 let yAxis2 = d3.axisRight(yScaleRight); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
211 let graph = svg |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
212 .append("g") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
213 .attr( |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
214 "transform", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
215 "translate(" + this.margin.left + "," + this.margin.top + ")" |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
216 ); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
217 graph |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
218 .append("g") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
219 .attr("transform", "translate(0," + height + ")") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
220 .call(xAxis.ticks(5)); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
221 graph.append("g").call(yAxis); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
222 graph |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
223 .append("g") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
224 .attr("transform", "translate(" + width + ",0)") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
225 .call(yAxis2); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
226 return { xScale, yScaleLeft, yScaleRight, graph }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
227 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
228 drawWaterlevel({ graph, xScale, yScaleRight, height }) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
229 let waterArea = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
230 .area() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
231 .x(function(d) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
232 return xScale(d.x); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
233 }) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
234 .y0(height) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
235 .y1(function(d) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
236 return yScaleRight(d.y); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
237 }); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
238 graph |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
239 .append("path") |
844 | 240 .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
241 .attr("fill", this.waterColor) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
242 .attr("stroke", this.waterColor) |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
243 .attr("d", waterArea); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
244 }, |
780 | 245 drawProfile({ graph, xScale, yScaleLeft, currentData, height }) { |
246 for (let part of currentData) { | |
247 let profileLine = d3 | |
248 .line() | |
249 .x(d => { | |
250 return xScale(d.x); | |
251 }) | |
252 .y(d => { | |
253 return yScaleLeft(d.y); | |
254 }); | |
255 let profileArea = d3 | |
256 .area() | |
257 .x(function(d) { | |
258 return xScale(d.x); | |
259 }) | |
260 .y0(height) | |
261 .y1(function(d) { | |
262 return yScaleLeft(d.y); | |
263 }); | |
264 graph | |
265 .append("path") | |
266 .datum(part) | |
267 .attr("fill", GROUND_COLOR) | |
268 .attr("stroke", GROUND_COLOR) | |
269 .attr("stroke-width", 3) | |
270 .attr("d", profileArea); | |
271 graph | |
272 .append("path") | |
273 .datum(part) | |
274 .attr("fill", "none") | |
275 .attr("stroke", "black") | |
276 .attr("stroke-linejoin", "round") | |
277 .attr("stroke-linecap", "round") | |
278 .attr("stroke-width", 3) | |
279 .attr("d", profileLine); | |
280 } | |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
281 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
282 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
283 mounted() { |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
284 this.drawDiagram(); |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
285 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
286 }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
287 </script> |