Mercurial > gemma

comparison client/src/fairway/Fairwayprofile.vue @ 646:4450f2ab41e0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: Fairwawprofile view adapted 1) Made view responsive to browser resize events 2) Factored out sample data into separate store component
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 13 Sep 2018 13:02:04 +0200
parents c4a4dc612191
children c98f88ac08a4
comparison
equal deleted inserted replaced
645:794592cad75a 646:4450f2ab41e0
1 <template> 1 <template>
2 <div class="fairwayprofile"> 2 <div class="fairwayprofile">
3 <svg :width="width +'px'" :height="height +'px'"> 3 </div>
4 </svg>
5 </div>
6 </template> 4 </template>
7 5
8 <style lang="scss"> 6 <style lang="scss">
9 .fairwayprofile { 7 .fairwayprofile {
10 background-color: white; 8 background-color: white;
19 import * as d3 from "d3"; 17 import * as d3 from "d3";
20 18
21 const WATER_COLOR = "#005DFF"; 19 const WATER_COLOR = "#005DFF";
22 const GROUND_COLOR = "#4A2F06"; 20 const GROUND_COLOR = "#4A2F06";
23 21
24 const sampleData = [
25 { x: 0, y: 1.0 },
26 { x: 10, y: 1.0 },
27 { x: 25, y: -2.0 },
28 { x: 50, y: -4.5 },
29 { x: 75, y: -4.0 },
30 { x: 100, y: -3.0 },
31 { x: 125, y: -4.0 },
32 { x: 150, y: -5.0 },
33 { x: 175, y: -4.0 },
34 { x: 200, y: -3.0 },
35 { x: 225, y: -3.5 },
36 { x: 250, y: -3.0 },
37 { x: 290, y: 1 },
38 { x: 300, y: 1 }
39 ];
40
41 export default { 22 export default {
42 name: "fairwayprofile", 23 name: "fairwayprofile",
43 props: ["width", "height", "xScale", "yScaleLeft", "yScaleRight", "margin"], 24 props: [
25 "data",
26 "width",
27 "height",
28 "xScale",
29 "yScaleLeft",
30 "yScaleRight",
31 "margin"
32 ],
44 data() { 33 data() {
45 return {}; 34 return {};
46 }, 35 },
36 watch: {
37 width() {
38 this.drawDiagram();
39 },
40 height() {
41 this.drawDiagram();
42 }
43 },
47 methods: { 44 methods: {
45 drawDiagram() {
46 const chartDiv = document.querySelector(".fairwayprofile");
47 d3.select("svg").remove();
48 let svg = d3.select(chartDiv).append("svg");
49 svg.attr("width", this.width);
50 svg.attr("height", this.height);
51 const width = this.width - this.margin.right - this.margin.left;
52 const height = this.height - this.margin.top - this.margin.bottom;
53 const currentData = this.data;
54 const { xScale, yScaleRight, graph } = this.generateCoordinates(
55 svg,
56 height,
57 width
58 );
59 this.drawWaterlevel({
60 graph,
61 xScale,
62 yScaleRight,
63 height,
64 width
65 });
66 this.drawProfile({
67 graph,
68 xScale,
69 yScaleRight,
70 currentData,
71 height,
72 width
73 });
74 },
48 generateCoordinates(svg, height, width) { 75 generateCoordinates(svg, height, width) {
49 let xScale = d3 76 let xScale = d3
50 .scaleLinear() 77 .scaleLinear()
51 .domain(this.xScale) 78 .domain(this.xScale)
52 .rangeRound([0, width]); 79 .rangeRound([0, width]);
97 .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }]) 124 .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }])
98 .attr("fill", WATER_COLOR) 125 .attr("fill", WATER_COLOR)
99 .attr("stroke", WATER_COLOR) 126 .attr("stroke", WATER_COLOR)
100 .attr("d", waterArea); 127 .attr("d", waterArea);
101 }, 128 },
102 drawProfile({ graph, xScale, yScaleRight, sampleData, height }) { 129 drawProfile({ graph, xScale, yScaleRight, currentData, height }) {
103 let profileLine = d3 130 let profileLine = d3
104 .line() 131 .line()
105 .x(d => { 132 .x(d => {
106 return xScale(d.x); 133 return xScale(d.x);
107 }) 134 })
117 .y1(function(d) { 144 .y1(function(d) {
118 return yScaleRight(d.y); 145 return yScaleRight(d.y);
119 }); 146 });
120 graph 147 graph
121 .append("path") 148 .append("path")
122 .datum(sampleData) 149 .datum(currentData)
123 .attr("fill", GROUND_COLOR) 150 .attr("fill", GROUND_COLOR)
124 .attr("stroke", GROUND_COLOR) 151 .attr("stroke", GROUND_COLOR)
125 .attr("stroke-width", 3) 152 .attr("stroke-width", 3)
126 .attr("d", profileArea); 153 .attr("d", profileArea);
127 graph 154 graph
128 .append("path") 155 .append("path")
129 .datum(sampleData) 156 .datum(currentData)
130 .attr("fill", "none") 157 .attr("fill", "none")
131 .attr("stroke", "black") 158 .attr("stroke", "black")
132 .attr("stroke-linejoin", "round") 159 .attr("stroke-linejoin", "round")
133 .attr("stroke-linecap", "round") 160 .attr("stroke-linecap", "round")
134 .attr("stroke-width", 3) 161 .attr("stroke-width", 3)
135 .attr("d", profileLine); 162 .attr("d", profileLine);
136 } 163 }
137 }, 164 },
138 mounted() { 165 mounted() {
139 let svg = d3.select("svg"); 166 this.drawDiagram();
140 const width = this.width - this.margin.right - this.margin.left;
141 const height = this.height - this.margin.top - this.margin.bottom;
142
143 const { xScale, yScaleRight, graph } = this.generateCoordinates(
144 svg,
145 height,
146 width
147 );
148 this.drawWaterlevel({
149 graph,
150 xScale,
151 yScaleRight,
152 height,
153 width
154 });
155 this.drawProfile({
156 graph,
157 xScale,
158 yScaleRight,
159 sampleData,
160 height,
161 width
162 });
163 } 167 }
164 }; 168 };
165 </script> 169 </script>