Mercurial > gemma
annotate client/src/components/fairway/Fairwayprofile.vue @ 3235:0c5a28ffe9ee
available_fairway_depth: flexible layouting options
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 10 May 2019 10:49:37 +0200 |
parents | a90091aaef67 |
children | 5240f5440b62 |
rev | line source |
---|---|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
2 <div class="d-flex flex-column flex-fill"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
4 <div class="d-flex flex-fill"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
5 <DiagramLegend> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
6 <div class="legend"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
7 <span style="background-color: #5995ff"></span> Water |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
8 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
9 <div class="legend"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
10 <span style="background-color: #1f4fff"></span> Fairway |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
11 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
12 <div class="legend"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
13 <span style="background-color: #4a2f06"></span> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
14 Ground |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
15 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
16 <div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
17 <button |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
18 @click="downloadPDF" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
19 type="button" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
20 class="btn btn-sm btn-info d-block w-100 mt-2" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
21 > |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
22 <translate>Export to PDF</translate> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
23 </button> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
24 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
25 </DiagramLegend> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
26 <div |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
27 ref="diagramContainer" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
28 class="d-flex flex-fill justify-content-center align-items-center diagram-container" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
29 > |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
30 <div v-if="!fairwayData"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
31 <translate>No data available.</translate> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
32 </div> |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
33 </div> |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
34 </div> |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
35 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1361
diff
changeset
|
39 /* 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
|
40 * 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
|
41 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 * 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
|
44 * |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
45 * Copyright (C) 2018 by via donau |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 * 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
|
48 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 * Thomas Junk <thomas.junk@intevation.de> |
2549
9bf6b767a56a
client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2540
diff
changeset
|
51 * Markus Kottländer <markus.kottlaender@intevation.de> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 */ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 import * as d3 from "d3"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 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
|
55 import debounce from "debounce"; |
3007
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
56 import jsPDF from "jspdf"; |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
57 import canvg from "canvg"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 const GROUND_COLOR = "#4A2F06"; |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
60 const WATER_COLOR = "#005DFF"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 export default { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 name: "fairwayprofile", |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
64 components: { |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
65 DiagramLegend: () => import("@/components/DiagramLegend") |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
66 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 data() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 return { |
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
|
69 width: null, |
1372
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
70 height: null, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
71 margin: { |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
72 top: 20, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
73 right: 40, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
74 bottom: 30, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
75 left: 40 |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
76 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 computed: { |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
80 ...mapGetters("fairwayprofile", ["totalLength"]), |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 ...mapState("fairwayprofile", [ |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
82 "additionalSurvey", |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
83 "currentProfile", |
2566
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2549
diff
changeset
|
84 "startPoint", |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 "endPoint", |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
86 "fairwayData", |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 "maxAlt", |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
88 "referenceWaterLevel", |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 "selectedWaterLevel", |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
90 "waterLevels" |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 ]), |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
92 ...mapState("application", ["paneSetup"]), |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
93 title() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
94 let dates = [this.selectedSurvey.date_info]; |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
95 if (this.additionalSurvey) dates.push(this.additionalSurvey.date_info); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
96 dates.map(d => this.$options.filters.dateTime(d, true)); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
97 return `${this.$gettext("Fairwayprofile")}: ${ |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
98 this.selectedBottleneck |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
99 } (${dates.join(", ")})`; |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
100 }, |
3061
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
101 selectedSurvey: { |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
102 get() { |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
103 return this.$store.state.bottlenecks.selectedSurvey; |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
104 } |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
105 }, |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
106 selectedBottleneck: { |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
107 get() { |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
108 return this.$store.state.bottlenecks.selectedBottleneck; |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
109 } |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
110 }, |
2549
9bf6b767a56a
client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2540
diff
changeset
|
111 ...mapState("bottlenecks", ["selectedSurvey"]), |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
112 relativeWaterLevelDelta() { |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
113 return this.selectedWaterLevel.value - this.referenceWaterLevel; |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
114 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 currentData() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 if ( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 !this.selectedSurvey || |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info) |
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 return []; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
121 return this.currentProfile[this.selectedSurvey.date_info].points; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 additionalData() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 if ( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 !this.additionalSurvey || |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 ) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 return []; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
129 return this.currentProfile[this.additionalSurvey.date_info].points; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 }, |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
131 xScale() { |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
132 return [0, this.totalLength]; |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
133 }, |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
134 yScaleRight() { |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
135 //ToDO calcReleativeDepth(this.maxAlt) to get the |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
136 // maximum depth according to the actual waterlevel |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
137 // additionally: take the one which is higher reference or current waterlevel |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
138 const DELTA = this.maxAlt * 1.1 - this.maxAlt; |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
139 return [this.maxAlt * 1 + DELTA, -DELTA]; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
142 watch: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
143 currentData() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
144 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
145 }, |
1382
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
146 additionalData() { |
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
147 this.drawDiagram(); |
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
148 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
149 width() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
150 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
151 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
152 height() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
153 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
154 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
155 waterLevels() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
156 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
157 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
158 selectedWaterLevel() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 }, |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
161 fairwayData() { |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
162 this.drawDiagram(); |
3149
a90091aaef67
client: fairwayprofile: close profile diagram when switching bottlenecks
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
163 }, |
a90091aaef67
client: fairwayprofile: close profile diagram when switching bottlenecks
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
164 selectedBottleneck() { |
a90091aaef67
client: fairwayprofile: close profile diagram when switching bottlenecks
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
165 this.$store.commit("application/paneSetup", "DEFAULT"); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
166 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
167 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
168 methods: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
169 close() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
170 this.$store.commit( |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
171 "application/paneSetup", |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
172 this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
173 ? "COMPARESURVEYS" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
174 : "DEFAULT" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
175 ); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
176 this.$store.dispatch("fairwayprofile/clearCurrentProfile"); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
177 }, |
3007
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
178 downloadPDF() { |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
179 var svg = this.$refs.diagramContainer.innerHTML; |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
180 if (svg) { |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
181 svg = svg.replace(/\r?\n|\r/g, "").trim(); |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
182 } |
3032
3aca036e11f1
client: improve pdf properties for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3020
diff
changeset
|
183 var pdf = new jsPDF("l", "mm", "a3"); |
3007
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
184 var canvas = document.createElement("canvas"); |
3018
42d1e31de844
client:give the generated pdf name and improve canvas size
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3007
diff
changeset
|
185 canvas.width = window.innerWidth; |
3020 | 186 canvas.height = window.innerHeight / 2; |
3007
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
187 canvg(canvas, svg, { |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
188 ignoreMouse: true, |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
189 ignoreAnimation: true, |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
190 ignoreDimensions: true |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
191 }); |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
192 var imgData = canvas.toDataURL("image/png"); |
3032
3aca036e11f1
client: improve pdf properties for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3020
diff
changeset
|
193 pdf.addImage(imgData, "PNG", 40, 60, 380, 130); |
3061
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
194 // Fairway profile info for the pdf title |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
195 this.addDiagramTitle(pdf, 140, 30, 22, "steelblue"); |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
196 this.addDiagramLegend(pdf, 60, 190, "black"); |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
197 pdf.save("Fairwayprofile diagram"); |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
198 }, |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
199 addDiagramTitle(pdf, x, y, size, color) { |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
200 let fairwayInfo = |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
201 this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")"; |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
202 pdf.setTextColor(color); |
3061
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
203 pdf.setFontSize(22); |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
204 pdf.setFontStyle("bold"); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
205 pdf.text(fairwayInfo, x, y); |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
206 }, |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
207 // Diagram legend |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
208 addDiagramLegend(pdf, x, y, color) { |
3061
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
209 pdf.setFontSize(10); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
210 pdf.setTextColor(color); |
3061
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
211 pdf.setDrawColor("white"); |
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
212 pdf.setFillColor("#5995ff"); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
213 pdf.circle(x, y, 2, "FD"); |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
214 pdf.text(x + 3, y + 1, "Water"); |
3061
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
215 pdf.setFillColor("#1f4fff"); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
216 pdf.circle(x, y + 5, 2, "FD"); |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
217 pdf.text(x + 3, y + 6, "Fairway"); |
3061
563176194d74
client: add infos and diagram legend for the generated pdf(Fairway profiles)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
218 pdf.setFillColor("#4a2f06"); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
219 pdf.circle(x, y + 10, 2, "FD"); |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3061
diff
changeset
|
220 pdf.text(x + 3, y + 11, "Ground"); |
3007
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
221 }, |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
222 calcRelativeDepth(depth) { |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
223 /* takes a depth value and substracts the delta of the relative waterlevel |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
224 * say the reference level is above the current level, the ground is nearer, |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
225 * thus, the depth is lower. |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
226 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
227 * E.g.: |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
228 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
229 * Reference waterlevel 5m, current 4m => delta = -1m |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
230 * If the distance to the ground was 3m from the 5m mark |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
231 * it is now only 2m from the current waterlevel. |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
232 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
233 * Vice versa: |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
234 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
235 * If the reference level is 5m and the current 6m => delta = +1m |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
236 * The ground is one meter farer away from the current waterlevel |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
237 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
238 */ |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
239 return depth - this.relativeWaterLevelDelta; |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
240 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
241 drawDiagram() { |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
242 d3.select(".diagram-container 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
|
243 this.scaleFairwayProfile(); |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
244 let svg = d3.select(".diagram-container").append("svg"); |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
245 svg.attr("width", "100%"); |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
246 svg.attr("height", "100%"); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
247 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
|
248 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
|
249 const currentData = this.currentData; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
250 const additionalData = this.additionalData; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
251 const { xScale, yScaleRight, graph } = this.generateCoordinates( |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
252 svg, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
253 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
254 width |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
255 ); |
1588
2888bfacd331
fairwayprofile: do not try to render fairwayprofile without dimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
1558
diff
changeset
|
256 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
|
257 this.drawWaterlevel({ graph, xScale, yScaleRight, height }); |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
258 this.drawLabels({ graph, height }); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
259 if (currentData) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
260 this.drawProfile({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
261 graph, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
262 xScale, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
263 yScaleRight, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
264 currentData, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
265 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
266 color: GROUND_COLOR, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
267 strokeColor: "black", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
268 opacity: 1 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
269 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
270 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
271 if (additionalData) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
272 this.drawProfile({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
273 graph, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
274 xScale, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
275 yScaleRight, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
276 currentData: additionalData, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
277 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
278 color: GROUND_COLOR, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
279 strokeColor: "#943007", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
280 opacity: 0.6 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
281 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
282 } |
2358
da75385887b9
fairway_profile: render riverbed on layer behind LOS
Thomas Junk <thomas.junk@intevation.de>
parents:
2265
diff
changeset
|
283 this.drawFairway({ graph, xScale, yScaleRight }); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
284 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
285 drawFairway({ graph, xScale, yScaleRight }) { |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
286 if (this.fairwayData === undefined) { |
2265
940ae7c20326
client: pdf-gen: use default template when backend does not provide any
Markus Kottlaender <markus@intevation.de>
parents:
2264
diff
changeset
|
287 return; |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
288 } |
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
289 for (let data of this.fairwayData) { |
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
290 const [startPoint, endPoint, depth] = data.coordinates[0]; |
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
291 const style = data.style(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
292 let fairwayArea = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
293 .area() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
294 .x(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
295 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
296 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
297 .y0(yScaleRight(0)) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
298 .y1(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
299 return yScaleRight(d.y); |
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 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
302 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
303 .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
304 .attr("fill", "#002AFF") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
305 .attr("fill-opacity", 0.65) |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
306 .attr("stroke", style[0].getStroke().getColor()) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
307 .attr("d", fairwayArea); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
308 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
309 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
310 drawLabels({ graph, height }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
311 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
312 .append("text") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
313 .attr("transform", ["rotate(-90)"]) |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
314 .attr("y", this.width - 70) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
315 .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
|
316 .attr("dy", "1em") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
317 .attr("fill", "black") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
318 .style("text-anchor", "middle") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
319 .text("Depth [m]"); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
320 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
321 .append("text") |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
322 .attr("y", -50) |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
323 .attr("x", -(height / 4)) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
324 .attr("dy", "1em") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
325 .attr("fill", "black") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
326 .style("text-anchor", "middle") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
327 .attr("transform", [ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
328 "translate(" + this.width / 2 + "," + this.height + ")", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
329 "rotate(0)" |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
330 ]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
331 .text("Width [m]"); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
332 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
333 generateCoordinates(svg, height, width) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
334 let xScale = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
335 .scaleLinear() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
336 .domain(this.xScale) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
337 .rangeRound([0, width]); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
338 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
339 xScale.ticks(5); |
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 let yScaleRight = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
342 .scaleLinear() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
343 .domain(this.yScaleRight) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
344 .rangeRound([height, 0]); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
345 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
346 let xAxis = d3.axisBottom(xScale); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
347 let yAxis2 = d3.axisRight(yScaleRight); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
348 let graph = svg |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
349 .append("g") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
350 .attr( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
351 "transform", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
352 "translate(" + this.margin.left + "," + this.margin.top + ")" |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
353 ); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
354 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
355 .append("g") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
356 .attr("transform", "translate(0," + height + ")") |
3007
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
357 .call(xAxis.ticks(5)) |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
358 .selectAll(".tick text") |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
359 .attr("fill", "black") |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
360 .select(function() { |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
361 return this.parentNode; |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
362 }) |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
363 .selectAll(".tick line") |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
364 .attr("stroke", "black"); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
365 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
366 .append("g") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
367 .attr("transform", "translate(" + width + ",0)") |
3007
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
368 .call(yAxis2) |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
369 .selectAll(".tick text") |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
370 .attr("fill", "black") |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
371 .select(function() { |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
372 return this.parentNode; |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
373 }) |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
374 .selectAll(".tick line") |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
375 .attr("stroke", "black"); |
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
376 graph.selectAll(".domain").attr("stroke", "black"); |
2368
96b0314f2bd6
fairway_profile: consuming the offered waterlevel WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2358
diff
changeset
|
377 return { xScale, yScaleRight, graph }; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
378 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
379 drawWaterlevel({ graph, xScale, yScaleRight, height }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
380 let waterArea = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
381 .area() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
382 .x(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
383 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
384 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
385 .y0(height) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
386 .y1(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
387 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
388 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
389 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
390 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
391 .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
392 .attr("fill-opacity", 0.65) |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
393 .attr("fill", WATER_COLOR) |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
394 .attr("stroke", WATER_COLOR) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
395 .attr("d", waterArea); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
396 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
397 drawProfile({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
398 graph, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
399 xScale, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
400 yScaleRight, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
401 currentData, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
402 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
403 color, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
404 strokeColor, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
405 opacity |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
406 }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
407 for (let part of currentData) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
408 let profileLine = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
409 .line() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
410 .x(d => { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
411 return xScale(d.x); |
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 .y(d => { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
414 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
415 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
416 let profileArea = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
417 .area() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
418 .x(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
419 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
420 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
421 .y0(height) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
422 .y1(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
423 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
424 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
425 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
426 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
427 .datum(part) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
428 .attr("fill", color) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
429 .attr("stroke", color) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
430 .attr("stroke-width", 3) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
431 .attr("stroke-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
432 .attr("fill-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
433 .attr("d", profileArea); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
434 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
435 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
436 .datum(part) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
437 .attr("fill", "none") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
438 .attr("stroke", strokeColor) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
439 .attr("stroke-linejoin", "round") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
440 .attr("stroke-linecap", "round") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
441 .attr("stroke-width", 3) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
442 .attr("stroke-opacity", opacity) |
3007
792d4476d5d5
client:implemented pdf-generation for profiles diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2860
diff
changeset
|
443 .attr("fill-opacity", 0) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
444 .attr("d", profileLine); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
445 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
446 }, |
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
|
447 scaleFairwayProfile() { |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
448 if (!document.querySelector(".diagram-container")) return; |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
449 const clientHeight = document.querySelector(".diagram-container") |
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
|
450 .clientHeight; |
2854
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
451 const clientWidth = document.querySelector(".diagram-container") |
1b5acce6120d
client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
452 .clientWidth; |
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
|
453 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
|
454 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
|
455 this.width = clientWidth; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
456 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
457 }, |
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
|
458 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
|
459 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
|
460 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
461 mounted() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
462 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
|
463 }, |
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
|
464 updated() { |
2860
dbc799261811
client: fairway profile: removed old code
Markus Kottlaender <markus@intevation.de>
parents:
2854
diff
changeset
|
465 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
|
466 }, |
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
|
467 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
|
468 window.removeEventListener("resize", debounce(this.drawDiagram)); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
469 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
470 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
471 </script> |