Mercurial > gemma

annotate client/src/fairway/Fairwayprofile.vue @ 909:d612bc4dc3e9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
profile redrawn
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 02 Oct 2018 17:40:22 +0200
parents fb39ec3b95a8
children d2f30a784fb3
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>
849
d63e60b868bf WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 845
diff changeset
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
d63e60b868bf WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 845
diff changeset
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
d63e60b868bf WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 845
diff changeset
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
07be3e5f99a9 WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 810
diff changeset
50 "fairwayCoordinates",
844
c2cba785ca4d WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 841
diff changeset
51 "selectedWaterLevel",
c2cba785ca4d WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 841
diff changeset
52 "minAlt",
c2cba785ca4d WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 841
diff changeset
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
07be3e5f99a9 WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 810
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
67 data() {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
68 this.drawDiagram();
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
fb39ec3b95a8 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 849
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
97 const {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
98 xScale,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
99 yScaleRight,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
100 yScaleLeft,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
101 graph
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
d612bc4dc3e9 profile redrawn
Thomas Junk <thomas.junk@intevation.de>
parents: 853
diff changeset
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
34b2cfcab24c Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 803
diff changeset
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
d63e60b868bf WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 845
diff changeset
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
d63e60b868bf WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 845
diff changeset
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
68a39aea942a Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 807
diff changeset
151 .attr("stroke-opacity", 0.65)
68a39aea942a Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 807
diff changeset
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
c2cba785ca4d WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 841
diff changeset
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
d612bc4dc3e9 profile redrawn
Thomas Junk <thomas.junk@intevation.de>
parents: 853
diff changeset
232 drawProfile({ graph, xScale, yScaleRight, currentData, height }) {
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
233 for (let part of currentData) {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
234 let profileLine = d3
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
235 .line()
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
236 .x(d => {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
237 return xScale(d.x);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
238 })
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
239 .y(d => {
909
d612bc4dc3e9 profile redrawn
Thomas Junk <thomas.junk@intevation.de>
parents: 853
diff changeset
240 return yScaleRight(-d.y);
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
241 });
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
242 let profileArea = d3
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
243 .area()
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
244 .x(function(d) {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
245 return xScale(d.x);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
246 })
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
247 .y0(height)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
248 .y1(function(d) {
909
d612bc4dc3e9 profile redrawn
Thomas Junk <thomas.junk@intevation.de>
parents: 853
diff changeset
249 return yScaleRight(-d.y);
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
250 });
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
251 graph
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
252 .append("path")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
253 .datum(part)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
254 .attr("fill", GROUND_COLOR)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
255 .attr("stroke", GROUND_COLOR)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
256 .attr("stroke-width", 3)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
257 .attr("d", profileArea);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
258 graph
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
259 .append("path")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
260 .datum(part)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
261 .attr("fill", "none")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
262 .attr("stroke", "black")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
263 .attr("stroke-linejoin", "round")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
264 .attr("stroke-linecap", "round")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
265 .attr("stroke-width", 3)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
266 .attr("d", profileLine);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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>