Mercurial > gemma

annotate client/src/fairway/Fairwayprofile.vue @ 1018:ab64c76af1b0

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