Mercurial > gemma
annotate client/src/components/fairway/Fairwayprofile.vue @ 1588:2888bfacd331
fairwayprofile: do not try to render fairwayprofile without dimensions
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 14 Dec 2018 11:24:50 +0100 |
parents | 0ded4c56978e |
children | a08e0f532304 |
rev | line source |
---|---|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
1480 | 2 <div :class="['position-relative', { show: showSplitscreen }]"> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
3 <button |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
4 class="rounded-bottom bg-white border-0 position-absolute splitscreen-toggle" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
5 @click="$store.commit('application/showSplitscreen', false)" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
6 v-if="showSplitscreen" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
7 > |
1480 | 8 <font-awesome-icon icon="angle-down" /> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
9 </button> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
10 <button |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
11 class="rounded-bottom bg-white border-0 position-absolute clear-selection" |
1480 | 12 @click="$store.dispatch('fairwayprofile/clearSelection')" |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
13 v-if="showSplitscreen" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
14 > |
1480 | 15 <font-awesome-icon icon="times" /> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
16 </button> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
17 <div class="profile bg-white position-relative d-flex flex-column"> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
18 <h5 |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
19 class="headline border-bottom mb-0 py-2" |
1382
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
20 v-if="selectedBottleneck && selectedSurvey" |
1480 | 21 > |
22 {{ selectedBottleneck }} ({{ selectedSurvey.date_info }}) | |
23 </h5> | |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
24 <div class="d-flex flex-fill"> |
1449 | 25 <div |
26 class="loading d-flex justify-content-center align-items-center" | |
27 v-if="surveysLoading || profileLoading" | |
28 > | |
1480 | 29 <font-awesome-icon icon="spinner" spin /> |
1382
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
30 </div> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
31 <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
32 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 </div> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
34 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 |
1449 | 37 <style lang="scss" scoped> |
38 .profile { | |
39 width: 100vw; | |
40 height: 0; | |
41 overflow: hidden; | |
42 z-index: 2; | |
43 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 .splitscreen-toggle, |
1449 | 46 .clear-selection { |
47 width: 2rem; | |
48 height: 2rem; | |
49 margin-top: 8px; | |
50 z-index: 3; | |
51 outline: none; | |
52 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 |
1449 | 54 .splitscreen-toggle svg path, |
55 .clear-selection svg path { | |
56 fill: #666; | |
57 } | |
58 | |
59 .splitscreen-toggle { | |
60 right: 2.5rem; | |
61 } | |
1305
6c0c204f6bce
improved fairwayprofile headline/buttons style
Markus Kottlaender <markus@intevation.de>
parents:
1299
diff
changeset
|
62 |
1449 | 63 .clear-selection { |
64 right: 0.5rem; | |
65 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 |
1449 | 67 .show .profile { |
68 height: 50vh; | |
69 } | |
1382
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
70 |
1449 | 71 .loading { |
72 background: rgba(255, 255, 255, 0.96); | |
73 position: absolute; | |
74 z-index: 99; | |
75 top: 0; | |
76 right: 0; | |
77 bottom: 0; | |
78 left: 0; | |
79 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 </style> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1361
diff
changeset
|
83 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 * without warranty, see README.md and license for details. |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
85 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 * License-Filename: LICENSES/AGPL-3.0.txt |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
88 * |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
89 * Copyright (C) 2018 by via donau |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 * Software engineering by Intevation GmbH |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
92 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 * Thomas Junk <thomas.junk@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 */ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 import * as d3 from "d3"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 import { mapState, mapGetters } from "vuex"; |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
98 import debounce from "debounce"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 const GROUND_COLOR = "#4A2F06"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 export default { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 name: "fairwayprofile", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 data() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 return { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 coordinatesInput: "", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 coordinatesSelect: null, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 cutLabel: "", |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
109 showLabelInput: false, |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
110 width: null, |
1372
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
111 height: null, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
112 margin: { |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
113 top: 20, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
114 right: 40, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
115 bottom: 30, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
116 left: 40 |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
117 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 computed: { |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
121 ...mapGetters("fairwayprofile", ["totalLength"]), |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 ...mapState("application", ["showSplitscreen"]), |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 ...mapState("fairwayprofile", [ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 "startPoint", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 "endPoint", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 "currentProfile", |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
127 "additionalSurvey", |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 "minAlt", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 "maxAlt", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 "fairwayCoordinates", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 "waterLevels", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 "selectedWaterLevel", |
1382
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
133 "profileLoading" |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 ]), |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
135 ...mapState("bottlenecks", [ |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
136 "selectedBottleneck", |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
137 "selectedSurvey", |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
138 "surveysLoading" |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
139 ]), |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 currentData() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 if ( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
142 !this.selectedSurvey || |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
143 !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
144 ) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
145 return []; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
146 return this.currentProfile[this.selectedSurvey.date_info].points; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
147 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
148 additionalData() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
149 if ( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
150 !this.additionalSurvey || |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
151 !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
152 ) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
153 return []; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
154 return this.currentProfile[this.additionalSurvey.date_info].points; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
155 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
156 waterColor() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
157 const result = this.waterLevels.find( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
158 x => x.level === this.selectedWaterLevel |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 ); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 return result.color; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
161 }, |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
162 xScale() { |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
163 return [0, this.totalLength]; |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
164 }, |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
165 yScaleLeft() { |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
166 const hi = Math.max(this.maxAlt, this.selectedWaterLevel); |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
167 return [this.minAlt, hi]; |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
168 }, |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
169 yScaleRight() { |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
170 const DELTA = this.maxAlt * 1.1 - this.maxAlt; |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
171 return [this.maxAlt * 1 + DELTA, -DELTA]; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
172 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
173 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
174 watch: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
175 currentData() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
176 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
177 }, |
1382
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
178 additionalData() { |
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
179 this.drawDiagram(); |
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
180 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
181 width() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
182 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
183 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
184 height() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
185 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
186 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
187 waterLevels() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
188 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
189 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
190 selectedWaterLevel() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
191 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
192 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
193 fairwayCoordinates() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
194 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
195 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
196 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
197 methods: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
198 drawDiagram() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
199 this.coordinatesSelect = null; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
200 const chartDiv = document.querySelector(".fairwayprofile"); |
1299
2738a6ae9ad8
fontawesome 4 -> 5
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
201 d3.select(".fairwayprofile svg").remove(); |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
202 this.scaleFairwayProfile(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
203 let svg = d3.select(chartDiv).append("svg"); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
204 svg.attr("width", this.width); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
205 svg.attr("height", this.height); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
206 const width = this.width - this.margin.right - 1.5 * this.margin.left; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
207 const height = this.height - this.margin.top - 2 * this.margin.bottom; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
208 const currentData = this.currentData; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
209 const additionalData = this.additionalData; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
210 const { xScale, yScaleRight, graph } = this.generateCoordinates( |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
211 svg, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
212 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
213 width |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
214 ); |
1588
2888bfacd331
fairwayprofile: do not try to render fairwayprofile without dimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
1558
diff
changeset
|
215 if (!this.height || !this.width) return; // do not try to render when height and width are unknown |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
216 this.drawWaterlevel({ graph, xScale, yScaleRight, height }); |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
217 this.drawLabels({ graph, height }); |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
218 this.drawFairway({ graph, xScale, yScaleRight }); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
219 if (currentData) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
220 this.drawProfile({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
221 graph, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
222 xScale, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
223 yScaleRight, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
224 currentData, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
225 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
226 color: GROUND_COLOR, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
227 strokeColor: "black", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
228 opacity: 1 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
229 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
230 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
231 if (additionalData) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
232 this.drawProfile({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
233 graph, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
234 xScale, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
235 yScaleRight, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
236 currentData: additionalData, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
237 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
238 color: GROUND_COLOR, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
239 strokeColor: "#943007", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
240 opacity: 0.6 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
241 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
242 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
243 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
244 drawFairway({ graph, xScale, yScaleRight }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
245 for (let coordinates of this.fairwayCoordinates) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
246 const [startPoint, endPoint, depth] = coordinates; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
247 let fairwayArea = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
248 .area() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
249 .x(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
250 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
251 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
252 .y0(yScaleRight(0)) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
253 .y1(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
254 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
255 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
256 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
257 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
258 .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
259 .attr("fill", "#002AFF") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
260 .attr("stroke-opacity", 0.65) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
261 .attr("fill-opacity", 0.65) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
262 .attr("stroke", "#FFD20D") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
263 .attr("d", fairwayArea); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
264 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
265 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
266 drawLabels({ graph, height }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
267 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
268 .append("text") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
269 .attr("transform", ["rotate(-90)"]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
270 .attr("y", this.width - 60) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
271 .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
272 .attr("dy", "1em") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
273 .attr("fill", "black") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
274 .style("text-anchor", "middle") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
275 .text("Depth [m]"); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
276 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
277 .append("text") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
278 .attr("y", 0 - this.margin.left) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
279 .attr("x", 0 - height / 4) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
280 .attr("dy", "1em") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
281 .attr("fill", "black") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
282 .style("text-anchor", "middle") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
283 .attr("transform", [ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
284 "translate(" + this.width / 2 + "," + this.height + ")", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
285 "rotate(0)" |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
286 ]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
287 .text("Width [m]"); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
288 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
289 generateCoordinates(svg, height, width) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
290 let xScale = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
291 .scaleLinear() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
292 .domain(this.xScale) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
293 .rangeRound([0, width]); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
294 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
295 xScale.ticks(5); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
296 let yScaleLeft = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
297 .scaleLinear() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
298 .domain(this.yScaleLeft) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
299 .rangeRound([height, 0]); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
300 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
301 let yScaleRight = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
302 .scaleLinear() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
303 .domain(this.yScaleRight) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
304 .rangeRound([height, 0]); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
305 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
306 let xAxis = d3.axisBottom(xScale); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
307 let yAxis2 = d3.axisRight(yScaleRight); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
308 let graph = svg |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
309 .append("g") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
310 .attr( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
311 "transform", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
312 "translate(" + this.margin.left + "," + this.margin.top + ")" |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
313 ); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
314 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
315 .append("g") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
316 .attr("transform", "translate(0," + height + ")") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
317 .call(xAxis.ticks(5)); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
318 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
319 .append("g") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
320 .attr("transform", "translate(" + width + ",0)") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
321 .call(yAxis2); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
322 return { xScale, yScaleLeft, yScaleRight, graph }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
323 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
324 drawWaterlevel({ graph, xScale, yScaleRight, height }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
325 let waterArea = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
326 .area() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
327 .x(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
328 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
329 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
330 .y0(height) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
331 .y1(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
332 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
333 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
334 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
335 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
336 .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
337 .attr("fill", this.waterColor) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
338 .attr("stroke", this.waterColor) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
339 .attr("d", waterArea); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
340 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
341 drawProfile({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
342 graph, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
343 xScale, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
344 yScaleRight, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
345 currentData, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
346 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
347 color, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
348 strokeColor, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
349 opacity |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
350 }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
351 for (let part of currentData) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
352 let profileLine = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
353 .line() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
354 .x(d => { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
355 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
356 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
357 .y(d => { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
358 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
359 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
360 let profileArea = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
361 .area() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
362 .x(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
363 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
364 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
365 .y0(height) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
366 .y1(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
367 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
368 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
369 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
370 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
371 .datum(part) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
372 .attr("fill", color) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
373 .attr("stroke", color) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
374 .attr("stroke-width", 3) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
375 .attr("stroke-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
376 .attr("fill-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
377 .attr("d", profileArea); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
378 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
379 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
380 .datum(part) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
381 .attr("fill", "none") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
382 .attr("stroke", strokeColor) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
383 .attr("stroke-linejoin", "round") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
384 .attr("stroke-linecap", "round") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
385 .attr("stroke-width", 3) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
386 .attr("stroke-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
387 .attr("fill-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
388 .attr("d", profileLine); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
389 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
390 }, |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
391 scaleFairwayProfile() { |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
392 if (!document.querySelector(".fairwayprofile")) return; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
393 const clientHeight = document.querySelector(".fairwayprofile") |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
394 .clientHeight; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
395 const clientWidth = document.querySelector(".fairwayprofile").clientWidth; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
396 if (!clientHeight || !clientWidth) return; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
397 this.height = clientHeight; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
398 this.width = clientWidth; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
399 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
400 }, |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
401 created() { |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
402 window.addEventListener("resize", debounce(this.drawDiagram), 100); |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
403 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
404 mounted() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
405 this.drawDiagram(); |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
406 }, |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
407 updated() { |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
408 this.scaleFairwayProfile(); |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
409 }, |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
410 destroyed() { |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
411 window.removeEventListener("resize", debounce(this.drawDiagram)); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
412 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
413 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
414 </script> |