Mercurial > gemma

comparison client/src/fairway/Fairwayprofile.vue @ 585:ef307bd6b5d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: restructured client application To make the application more accessible for developers, the structure was reorganized. Instead of sticking to technical terminology, the application terminology is according to the domain: I.e. "map" contains everything regarding map (including store).
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 07 Sep 2018 11:13:56 +0200
parents
children c4a4dc612191
comparison
equal deleted inserted replaced
584:8b66a10aaf8a 585:ef307bd6b5d8
1 <template>
2 <div class="fairwayprofile">
3 <svg :width="width +'px'" :height="height +'px'">
4 </svg>
5 </div>
6 </template>
7
8 <style lang="scss">
9 .fairwayprofile {
10 background-color: white;
11 margin-left: auto;
12 margin-right: auto;
13 margin-top: auto;
14 margin-bottom: auto;
15 }
16 </style>
17
18 <script>
19 import * as d3 from "d3";
20
21 const WATER_COLOR = "#005DFF";
22 const GROUND_COLOR = "#4A2F06";
23
24 const sampleData = [
25 { x: 0, y: -3.0 },
26 { x: 25, y: -2.0 },
27 { x: 50, y: -4.5 },
28 { x: 75, y: -4.0 },
29 { x: 100, y: -3.0 },
30 { x: 125, y: -4.0 },
31 { x: 150, y: -5.0 },
32 { x: 175, y: -4.0 },
33 { x: 200, y: -3.0 },
34 { x: 225, y: -3.5 },
35 { x: 250, y: -3.0 },
36 { x: 300, y: -2.5 }
37 ];
38
39 export default {
40 name: "fairwayprofile",
41 props: ["width", "height", "xScale", "yScaleLeft", "yScaleRight", "margin"],
42 data() {
43 return {};
44 },
45 methods: {
46 generateCoordinates(svg, height, width) {
47 let xScale = d3
48 .scaleLinear()
49 .domain(this.xScale)
50 .rangeRound([0, width]);
51
52 xScale.ticks(5);
53 let yScaleLeft = d3
54 .scaleLinear()
55 .domain(this.yScaleLeft)
56 .rangeRound([height, 0]);
57
58 let yScaleRight = d3
59 .scaleLinear()
60 .domain(this.yScaleRight)
61 .rangeRound([height, 0]);
62
63 let xAxis = d3.axisBottom(xScale);
64 let yAxis = d3.axisLeft(yScaleLeft);
65 let yAxis2 = d3.axisRight(yScaleRight);
66 let graph = svg
67 .append("g")
68 .attr(
69 "transform",
70 "translate(" + this.margin.left + "," + this.margin.top + ")"
71 );
72 graph
73 .append("g")
74 .attr("transform", "translate(0," + height + ")")
75 .call(xAxis.ticks(5));
76 graph.append("g").call(yAxis);
77 graph
78 .append("g")
79 .attr("transform", "translate(" + width + ",0)")
80 .call(yAxis2);
81 return { xScale, yScaleLeft, yScaleRight, graph };
82 },
83 drawWaterlevel({ graph, xScale, yScaleRight, height }) {
84 let waterArea = d3
85 .area()
86 .x(function(d) {
87 return xScale(d.x);
88 })
89 .y0(height)
90 .y1(function(d) {
91 return yScaleRight(d.y);
92 });
93 graph
94 .append("path")
95 .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }])
96 .attr("fill", WATER_COLOR)
97 .attr("stroke", WATER_COLOR)
98 .attr("d", waterArea);
99 },
100 drawProfile({ graph, xScale, yScaleRight, sampleData, height }) {
101 let profileLine = d3
102 .line()
103 .x(d => {
104 return xScale(d.x);
105 })
106 .y(d => {
107 return yScaleRight(d.y);
108 });
109 let profileArea = d3
110 .area()
111 .x(function(d) {
112 return xScale(d.x);
113 })
114 .y0(height)
115 .y1(function(d) {
116 return yScaleRight(d.y);
117 });
118 graph
119 .append("path")
120 .datum(sampleData)
121 .attr("fill", GROUND_COLOR)
122 .attr("stroke", GROUND_COLOR)
123 .attr("stroke-width", 3)
124 .attr("d", profileArea);
125 graph
126 .append("path")
127 .datum(sampleData)
128 .attr("fill", "none")
129 .attr("stroke", "black")
130 .attr("stroke-linejoin", "round")
131 .attr("stroke-linecap", "round")
132 .attr("stroke-width", 3)
133 .attr("d", profileLine);
134 }
135 },
136 mounted() {
137 let svg = d3.select("svg");
138 const width = this.width - this.margin.right - this.margin.left;
139 const height = this.height - this.margin.top - this.margin.bottom;
140
141 const { xScale, yScaleRight, graph } = this.generateCoordinates(
142 svg,
143 height,
144 width
145 );
146 this.drawWaterlevel({
147 graph,
148 xScale,
149 yScaleRight,
150 height,
151 width
152 });
153 this.drawProfile({
154 graph,
155 xScale,
156 yScaleRight,
157 sampleData,
158 height,
159 width
160 });
161 }
162 };
163 </script>