Mercurial > gemma

annotate client/src/components/fairway/Fairwayprofile.vue @ 2549:9bf6b767a56a

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