Mercurial > gemma
annotate client/src/fairway/Fairwayprofile.vue @ 1021:957613a71b35
display start/end coordinates next to fairway profile
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 24 Oct 2018 11:20:30 +0200 |
parents | ca628dce90dd |
children | bf10a7f990cc |
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> |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
5 <div class="additionalsurveys d-flex flex-column"> |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
6 <small class="label">Available Additional Surveys</small> |
1018
ab64c76af1b0
additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents:
1015
diff
changeset
|
7 <select v-model="additionalSurvey" @change="selectAdditionalSurveyData"> |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
8 <option value="">None</option> |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
9 <option v-for="survey in additionalSurveys" :key="survey.date_info"> |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
10 {{survey.date_info}} |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
11 </option> |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
12 </select> |
1021
957613a71b35
display start/end coordinates next to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
13 <small class="mt-2"> |
957613a71b35
display start/end coordinates next to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
14 <b>Start:</b><br> |
957613a71b35
display start/end coordinates next to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
15 Lat: {{ startPoint[1] }}<br> |
957613a71b35
display start/end coordinates next to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
16 Lon: {{ startPoint[0] }}<br> |
957613a71b35
display start/end coordinates next to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
17 <b>End:</b><br> |
957613a71b35
display start/end coordinates next to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
18 Lat: {{ endPoint[1] }}<br> |
957613a71b35
display start/end coordinates next to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
19 Lon: {{ endPoint[0] }}<br> |
957613a71b35
display start/end coordinates next to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
20 </small> |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
21 </div> |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
22 </div> |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
23 </template> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
24 |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
25 <style scoped lang="scss"> |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
26 .label { |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
27 margin-bottom: $small-offset; |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
28 } |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
29 .waterlevelselection { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
30 margin-top: $large-offset; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
31 margin-right: $large-offset; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
32 } |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
33 |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
34 .additionalsurveys { |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
35 width: 300px; |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
36 margin-top: $large-offset; |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
37 margin-bottom: auto; |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
38 margin-right: $large-offset; |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
39 margin-left: auto; |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
40 } |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
41 |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
42 .additionalsurveys input { |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
43 margin-right: $small-offset; |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
44 } |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
45 |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
46 .profiledisplay { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
47 width: 100vw; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
48 } |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
49 |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
50 .fairwayprofile { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
51 background-color: white; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
52 margin-left: auto; |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
53 margin-right: $offset; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
54 margin-top: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
55 margin-bottom: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
56 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
57 </style> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
58 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
59 <script> |
1019
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
60 /* |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
61 * This is Free Software under GNU Affero General Public License v >= 3.0 |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
62 * without warranty, see README.md and license for details. |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
63 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
64 * SPDX-License-Identifier: AGPL-3.0-or-later |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
65 * License-Filename: LICENSES/AGPL-3.0.txt |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
66 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
67 * Copyright (C) 2018 by via donau |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
68 * – Österreichische Wasserstraßen-Gesellschaft mbH |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
69 * Software engineering by Intevation GmbH |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
70 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
71 * Author(s): |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
72 * Thomas Junk <thomas.junk@intevation.de> |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
73 */ |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
74 import * as d3 from "d3"; |
1018
ab64c76af1b0
additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents:
1015
diff
changeset
|
75 import { mapState } from "vuex"; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
76 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
77 const GROUND_COLOR = "#4A2F06"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
78 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
79 export default { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
80 name: "fairwayprofile", |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
81 props: [ |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
82 "data", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
83 "width", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
84 "height", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
85 "xScale", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
86 "yScaleLeft", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
87 "yScaleRight", |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
88 "margin", |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
89 "totalLength", |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
90 "waterLevels", |
841 | 91 "fairwayCoordinates", |
844 | 92 "selectedWaterLevel", |
93 "minAlt", | |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
94 "maxAlt", |
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
95 "additionalSurveys" |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
96 ], |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
97 computed: { |
1018
ab64c76af1b0
additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents:
1015
diff
changeset
|
98 ...mapState("fairwayprofile", ["startPoint", "endPoint"]), |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
99 waterColor() { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
100 const result = this.waterLevels.find( |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
101 x => x.level === this.selectedWaterLevel |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
102 ); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
103 return result.color; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
104 } |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
105 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
106 data() { |
1018
ab64c76af1b0
additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents:
1015
diff
changeset
|
107 return { |
ab64c76af1b0
additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents:
1015
diff
changeset
|
108 additionalSurvey: "" |
ab64c76af1b0
additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents:
1015
diff
changeset
|
109 }; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
110 }, |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
111 watch: { |
780 | 112 data() { |
113 this.drawDiagram(); | |
114 }, | |
646
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 this.drawDiagram(); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
117 }, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
118 height() { |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
119 this.drawDiagram(); |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
120 }, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
121 waterLevels() { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
122 this.drawDiagram(); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
123 }, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
124 selectedWaterLevel() { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
125 this.drawDiagram(); |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
126 }, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
127 fairwayCoordinates() { |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
128 this.drawDiagram(); |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
129 } |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
130 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
131 methods: { |
1018
ab64c76af1b0
additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents:
1015
diff
changeset
|
132 selectAdditionalSurveyData() { |
ab64c76af1b0
additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents:
1015
diff
changeset
|
133 // |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
134 }, |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
135 drawDiagram() { |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
136 const chartDiv = document.querySelector(".fairwayprofile"); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
137 d3.select("svg").remove(); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
138 let svg = d3.select(chartDiv).append("svg"); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
139 svg.attr("width", this.width); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
140 svg.attr("height", this.height); |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
141 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
|
142 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
|
143 const currentData = this.data; |
780 | 144 const { |
145 xScale, | |
146 yScaleRight, | |
147 yScaleLeft, | |
148 graph | |
149 } = this.generateCoordinates(svg, height, width); | |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
150 this.drawWaterlevel({ |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
151 graph, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
152 xScale, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
153 yScaleRight, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
154 height, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
155 width |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
156 }); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
157 this.drawProfile({ |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
158 graph, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
159 xScale, |
909 | 160 yScaleRight, |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
161 currentData, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
162 height, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
163 width |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
164 }); |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
165 this.drawLabels({ |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
166 graph, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
167 xScale, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
168 yScaleLeft, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
169 currentData, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
170 height, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
171 width |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
172 }); |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
173 this.drawFairway({ |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
174 graph, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
175 xScale, |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
176 yScaleRight, |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
177 currentData, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
178 height, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
179 width |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
180 }); |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
181 }, |
807 | 182 drawFairway({ graph, xScale, yScaleRight }) { |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
183 for (let coordinates of this.fairwayCoordinates) { |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
184 const [startPoint, endPoint, depth] = coordinates; |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
185 let fairwayArea = d3 |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
186 .area() |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
187 .x(function(d) { |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
188 return xScale(d.x); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
189 }) |
849 | 190 .y0(yScaleRight(0)) |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
191 .y1(function(d) { |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
192 return yScaleRight(d.y); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
193 }); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
194 graph |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
195 .append("path") |
849 | 196 .datum([{ x: startPoint, y: -depth }, { x: endPoint, y: -depth }]) |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
197 .attr("fill", "#002AFF") |
810 | 198 .attr("stroke-opacity", 0.65) |
199 .attr("fill-opacity", 0.65) | |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
200 .attr("stroke", "#FFD20D") |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
201 .attr("d", fairwayArea); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
202 } |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
203 }, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
204 drawLabels({ graph, height }) { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
205 graph |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
206 .append("text") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
207 .attr("transform", ["rotate(-90)"]) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
208 .attr("y", this.width - 60) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
209 .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
|
210 .attr("dy", "1em") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
211 .attr("fill", "black") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
212 .style("text-anchor", "middle") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
213 .text("Depth [m]"); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
214 graph |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
215 .append("text") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
216 .attr("y", 0 - this.margin.left) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
217 .attr("x", 0 - height / 4) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
218 .attr("dy", "1em") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
219 .attr("fill", "black") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
220 .style("text-anchor", "middle") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
221 .attr("transform", [ |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
222 "translate(" + this.width / 2 + "," + this.height + ")", |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
223 "rotate(0)" |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
224 ]) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
225 .text("Width [m]"); |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
226 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
227 generateCoordinates(svg, height, width) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
228 let xScale = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
229 .scaleLinear() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
230 .domain(this.xScale) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
231 .rangeRound([0, width]); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
232 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
233 xScale.ticks(5); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
234 let yScaleLeft = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
235 .scaleLinear() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
236 .domain(this.yScaleLeft) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
237 .rangeRound([height, 0]); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
238 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
239 let yScaleRight = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
240 .scaleLinear() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
241 .domain(this.yScaleRight) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
242 .rangeRound([height, 0]); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
243 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
244 let xAxis = d3.axisBottom(xScale); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
245 let yAxis2 = d3.axisRight(yScaleRight); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
246 let graph = svg |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
247 .append("g") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
248 .attr( |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
249 "transform", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
250 "translate(" + this.margin.left + "," + this.margin.top + ")" |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
251 ); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
252 graph |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
253 .append("g") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
254 .attr("transform", "translate(0," + height + ")") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
255 .call(xAxis.ticks(5)); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
256 graph |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
257 .append("g") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
258 .attr("transform", "translate(" + width + ",0)") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
259 .call(yAxis2); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
260 return { xScale, yScaleLeft, yScaleRight, graph }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
261 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
262 drawWaterlevel({ graph, xScale, yScaleRight, height }) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
263 let waterArea = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
264 .area() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
265 .x(function(d) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
266 return xScale(d.x); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
267 }) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
268 .y0(height) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
269 .y1(function(d) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
270 return yScaleRight(d.y); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
271 }); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
272 graph |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
273 .append("path") |
844 | 274 .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
|
275 .attr("fill", this.waterColor) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
276 .attr("stroke", this.waterColor) |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
277 .attr("d", waterArea); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
278 }, |
909 | 279 drawProfile({ graph, xScale, yScaleRight, currentData, height }) { |
780 | 280 for (let part of currentData) { |
281 let profileLine = d3 | |
282 .line() | |
283 .x(d => { | |
284 return xScale(d.x); | |
285 }) | |
286 .y(d => { | |
909 | 287 return yScaleRight(-d.y); |
780 | 288 }); |
289 let profileArea = d3 | |
290 .area() | |
291 .x(function(d) { | |
292 return xScale(d.x); | |
293 }) | |
294 .y0(height) | |
295 .y1(function(d) { | |
909 | 296 return yScaleRight(-d.y); |
780 | 297 }); |
298 graph | |
299 .append("path") | |
300 .datum(part) | |
301 .attr("fill", GROUND_COLOR) | |
302 .attr("stroke", GROUND_COLOR) | |
303 .attr("stroke-width", 3) | |
304 .attr("d", profileArea); | |
305 graph | |
306 .append("path") | |
307 .datum(part) | |
308 .attr("fill", "none") | |
309 .attr("stroke", "black") | |
310 .attr("stroke-linejoin", "round") | |
311 .attr("stroke-linecap", "round") | |
312 .attr("stroke-width", 3) | |
313 .attr("d", profileLine); | |
314 } | |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
315 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
316 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
317 mounted() { |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
318 this.drawDiagram(); |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
319 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
320 }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
321 </script> |