Mercurial > gemma

annotate client/src/components/fairway/Fairwayprofile.vue @ 2860:dbc799261811

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: fairway profile: removed old code
author Markus Kottlaender <markus@intevation.de>
date Thu, 28 Mar 2019 18:24:02 +0100
parents 1b5acce6120d
children 792d4476d5d5
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
2 <div class="d-flex flex-fill">
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
3 <DiagramLegend>
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
4 <div class="legend">
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
5 <span style="background-color: #5995ff"></span> Water
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
6 </div>
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
7 <div class="legend">
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
8 <span style="background-color: #1f4fff"></span> Fairway
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
9 </div>
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
10 <div class="legend">
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
11 <span style="background-color: #4a2f06"></span>
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
12 Ground
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
13 </div>
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
14 </DiagramLegend>
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
15 <div
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
16 class="d-flex flex-fill justify-content-center align-items-center diagram-container"
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
17 >
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
18 <div v-if="!fairwayData">
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
19 <translate>No data available.</translate>
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
20 </div>
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
21 </div>
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
22 </div>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 <script>
1362
ca33ad696594 remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1361
diff changeset
26 /* 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
27 * 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
28 *
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 * SPDX-License-Identifier: AGPL-3.0-or-later
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 * 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
31 *
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1313
diff changeset
32 * Copyright (C) 2018 by via donau
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 * – Österreichische Wasserstraßen-Gesellschaft mbH
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 * 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
35 *
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 * Author(s):
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 * Thomas Junk <thomas.junk@intevation.de>
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2540
diff changeset
38 * Markus Kottländer <markus.kottlaender@intevation.de>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 */
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 import * as d3 from "d3";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 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
42 import debounce from "debounce";
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 const GROUND_COLOR = "#4A2F06";
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
45 const WATER_COLOR = "#005DFF";
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 name: "fairwayprofile",
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
49 components: {
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
50 DiagramLegend: () => import("@/components/DiagramLegend")
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
51 },
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 data() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 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
54 width: null,
1372
553aadd97087 new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents: 1362
diff changeset
55 height: null,
553aadd97087 new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents: 1362
diff changeset
56 margin: {
553aadd97087 new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents: 1362
diff changeset
57 top: 20,
553aadd97087 new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents: 1362
diff changeset
58 right: 40,
553aadd97087 new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents: 1362
diff changeset
59 bottom: 30,
553aadd97087 new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents: 1362
diff changeset
60 left: 40
553aadd97087 new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents: 1362
diff changeset
61 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 computed: {
1394
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
65 ...mapGetters("fairwayprofile", ["totalLength"]),
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 ...mapState("fairwayprofile", [
2392
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
67 "additionalSurvey",
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
68 "currentProfile",
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
69 "startPoint",
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 "endPoint",
2392
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
71 "fairwayData",
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 "maxAlt",
2392
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
73 "referenceWaterLevel",
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 "selectedWaterLevel",
2392
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
75 "waterLevels"
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 ]),
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2540
diff changeset
77 ...mapState("bottlenecks", ["selectedSurvey"]),
2392
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
78 relativeWaterLevelDelta() {
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
79 return this.selectedWaterLevel.value - this.referenceWaterLevel;
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
80 },
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 currentData() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 if (
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 !this.selectedSurvey ||
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 )
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 return [];
1394
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
87 return this.currentProfile[this.selectedSurvey.date_info].points;
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 additionalData() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 if (
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 !this.additionalSurvey ||
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 )
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 return [];
1394
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
95 return this.currentProfile[this.additionalSurvey.date_info].points;
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 },
1394
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
97 xScale() {
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
98 return [0, this.totalLength];
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
99 },
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
100 yScaleRight() {
2392
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
101 //ToDO calcReleativeDepth(this.maxAlt) to get the
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
102 // maximum depth according to the actual waterlevel
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
103 // 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
104 const DELTA = this.maxAlt * 1.1 - this.maxAlt;
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
105 return [this.maxAlt * 1 + DELTA, -DELTA];
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 watch: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 currentData() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 this.drawDiagram();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 },
1382
8b85032ed3cd added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
112 additionalData() {
8b85032ed3cd added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
113 this.drawDiagram();
8b85032ed3cd added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
114 },
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 width() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 this.drawDiagram();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 height() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 this.drawDiagram();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 waterLevels() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 this.drawDiagram();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 selectedWaterLevel() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 this.drawDiagram();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 },
2264
627bfcbbf631 client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents: 2154
diff changeset
127 fairwayData() {
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 this.drawDiagram();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 methods: {
2392
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
132 calcRelativeDepth(depth) {
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
133 /* 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
134 * 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
135 * thus, the depth is lower.
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
136 *
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
137 * E.g.:
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
138 *
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
139 * Reference waterlevel 5m, current 4m => delta = -1m
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
140 * 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
141 * 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
142 *
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
143 * Vice versa:
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
144 *
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
145 * 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
146 * 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
147 *
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
148 */
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
149 return depth - this.relativeWaterLevelDelta;
0b8793a1947c fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2389
diff changeset
150 },
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 drawDiagram() {
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
152 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
153 this.scaleFairwayProfile();
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
154 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
155 svg.attr("width", "100%");
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
156 svg.attr("height", "100%");
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 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
158 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
159 const currentData = this.currentData;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 const additionalData = this.additionalData;
1394
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
161 const { xScale, yScaleRight, graph } = this.generateCoordinates(
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
162 svg,
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 height,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 width
1394
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
165 );
1588
2888bfacd331 fairwayprofile: do not try to render fairwayprofile without dimensions
Thomas Junk <thomas.junk@intevation.de>
parents: 1558
diff changeset
166 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
167 this.drawWaterlevel({ graph, xScale, yScaleRight, height });
b350b0b5cb6c refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents: 1391
diff changeset
168 this.drawLabels({ graph, height });
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 if (currentData) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 this.drawProfile({
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 graph,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 xScale,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 yScaleRight,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 currentData,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 height,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 color: GROUND_COLOR,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177 strokeColor: "black",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
178 opacity: 1
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
179 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
180 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
181 if (additionalData) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
182 this.drawProfile({
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
183 graph,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
184 xScale,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
185 yScaleRight,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
186 currentData: additionalData,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
187 height,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
188 color: GROUND_COLOR,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
189 strokeColor: "#943007",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
190 opacity: 0.6
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
191 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
192 }
2358
da75385887b9 fairway_profile: render riverbed on layer behind LOS
Thomas Junk <thomas.junk@intevation.de>
parents: 2265
diff changeset
193 this.drawFairway({ graph, xScale, yScaleRight });
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
194 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
195 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
196 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
197 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
198 }
627bfcbbf631 client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents: 2154
diff changeset
199 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
200 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
201 const style = data.style();
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
202 let fairwayArea = d3
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
203 .area()
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
204 .x(function(d) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
205 return xScale(d.x);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
206 })
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
207 .y0(yScaleRight(0))
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
208 .y1(function(d) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
209 return yScaleRight(d.y);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
210 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
211 graph
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
212 .append("path")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
213 .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }])
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
214 .attr("fill", "#002AFF")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
215 .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
216 .attr("stroke", style[0].getStroke().getColor())
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
217 .attr("d", fairwayArea);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
218 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
219 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
220 drawLabels({ graph, height }) {
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 .append("text")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
223 .attr("transform", ["rotate(-90)"])
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
224 .attr("y", this.width - 70)
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
225 .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
226 .attr("dy", "1em")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
227 .attr("fill", "black")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
228 .style("text-anchor", "middle")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
229 .text("Depth [m]");
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
230 graph
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
231 .append("text")
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
232 .attr("y", -50)
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
233 .attr("x", -(height / 4))
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
234 .attr("dy", "1em")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
235 .attr("fill", "black")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
236 .style("text-anchor", "middle")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
237 .attr("transform", [
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
238 "translate(" + this.width / 2 + "," + this.height + ")",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
239 "rotate(0)"
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
240 ])
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
241 .text("Width [m]");
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 generateCoordinates(svg, height, width) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
244 let xScale = d3
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
245 .scaleLinear()
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
246 .domain(this.xScale)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
247 .rangeRound([0, width]);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
248
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
249 xScale.ticks(5);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
250
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
251 let yScaleRight = d3
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
252 .scaleLinear()
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
253 .domain(this.yScaleRight)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
254 .rangeRound([height, 0]);
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 let xAxis = d3.axisBottom(xScale);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
257 let yAxis2 = d3.axisRight(yScaleRight);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
258 let graph = svg
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
259 .append("g")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
260 .attr(
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
261 "transform",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
262 "translate(" + this.margin.left + "," + this.margin.top + ")"
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
263 );
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
264 graph
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
265 .append("g")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
266 .attr("transform", "translate(0," + height + ")")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
267 .call(xAxis.ticks(5));
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
268 graph
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
269 .append("g")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
270 .attr("transform", "translate(" + width + ",0)")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
271 .call(yAxis2);
2368
96b0314f2bd6 fairway_profile: consuming the offered waterlevel WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 2358
diff changeset
272 return { xScale, yScaleRight, graph };
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
273 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
274 drawWaterlevel({ graph, xScale, yScaleRight, height }) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
275 let waterArea = d3
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
276 .area()
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
277 .x(function(d) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
278 return xScale(d.x);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
279 })
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
280 .y0(height)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
281 .y1(function(d) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
282 return yScaleRight(d.y);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
283 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
284 graph
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
285 .append("path")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
286 .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
287 .attr("fill-opacity", 0.65)
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
288 .attr("fill", WATER_COLOR)
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
289 .attr("stroke", WATER_COLOR)
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
290 .attr("d", waterArea);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
291 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
292 drawProfile({
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
293 graph,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
294 xScale,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
295 yScaleRight,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
296 currentData,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
297 height,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
298 color,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
299 strokeColor,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
300 opacity
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
301 }) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
302 for (let part of currentData) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
303 let profileLine = d3
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
304 .line()
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
305 .x(d => {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
306 return xScale(d.x);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
307 })
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
308 .y(d => {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
309 return yScaleRight(d.y);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
310 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
311 let profileArea = d3
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
312 .area()
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
313 .x(function(d) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
314 return xScale(d.x);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
315 })
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
316 .y0(height)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
317 .y1(function(d) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
318 return yScaleRight(d.y);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
319 });
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("path")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
322 .datum(part)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
323 .attr("fill", color)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
324 .attr("stroke", color)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
325 .attr("stroke-width", 3)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
326 .attr("stroke-opacity", opacity)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
327 .attr("fill-opacity", opacity)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
328 .attr("d", profileArea);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
329 graph
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
330 .append("path")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
331 .datum(part)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
332 .attr("fill", "none")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
333 .attr("stroke", strokeColor)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
334 .attr("stroke-linejoin", "round")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
335 .attr("stroke-linecap", "round")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
336 .attr("stroke-width", 3)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
337 .attr("stroke-opacity", opacity)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
338 .attr("fill-opacity", opacity)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
339 .attr("d", profileLine);
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 },
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
342 scaleFairwayProfile() {
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
343 if (!document.querySelector(".diagram-container")) return;
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
344 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
345 .clientHeight;
2854
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
346 const clientWidth = document.querySelector(".diagram-container")
1b5acce6120d client: added legend to cross profile diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
347 .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
348 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
349 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
350 this.width = clientWidth;
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
351 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
352 },
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
353 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
354 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
355 },
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
356 mounted() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
357 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
358 },
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
359 updated() {
2860
dbc799261811 client: fairway profile: removed old code
Markus Kottlaender <markus@intevation.de>
parents: 2854
diff changeset
360 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
361 },
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
362 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
363 window.removeEventListener("resize", debounce(this.drawDiagram));
1272
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 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
366 </script>