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