Mercurial > gemma

annotate 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
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>
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
2 <div class="fairwayprofile">
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
3 </div>
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
4 </template>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
5
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
6 <style lang="scss">
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
7 .fairwayprofile {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8 background-color: white;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9 margin-left: auto;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 margin-right: auto;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11 margin-top: auto;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
12 margin-bottom: auto;
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>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 <script>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 import * as d3 from "d3";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 const WATER_COLOR = "#005DFF";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 const GROUND_COLOR = "#4A2F06";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 name: "fairwayprofile",
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
24 props: [
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
25 "data",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
26 "width",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
27 "height",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
28 "xScale",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
29 "yScaleLeft",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
30 "yScaleRight",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
31 "margin"
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
32 ],
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 data() {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34 return {};
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
36 watch: {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
37 width() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
38 this.drawDiagram();
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
39 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
40 height() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
41 this.drawDiagram();
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
42 }
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
43 },
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 methods: {
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
45 drawDiagram() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
46 const chartDiv = document.querySelector(".fairwayprofile");
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
47 d3.select("svg").remove();
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
48 let svg = d3.select(chartDiv).append("svg");
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
49 svg.attr("width", this.width);
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
50 svg.attr("height", this.height);
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
51 const width = this.width - this.margin.right - this.margin.left;
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
52 const height = this.height - this.margin.top - this.margin.bottom;
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
53 const currentData = this.data;
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
54 const { xScale, yScaleRight, graph } = this.generateCoordinates(
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
55 svg,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
56 height,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
57 width
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
58 );
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
59 this.drawWaterlevel({
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
60 graph,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
61 xScale,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
62 yScaleRight,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
63 height,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
64 width
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
65 });
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
66 this.drawProfile({
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
67 graph,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
68 xScale,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
69 yScaleRight,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
70 currentData,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
71 height,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
72 width
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
73 });
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
74 },
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 generateCoordinates(svg, height, width) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 let xScale = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 .scaleLinear()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 .domain(this.xScale)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
79 .rangeRound([0, width]);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 xScale.ticks(5);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 let yScaleLeft = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
83 .scaleLinear()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84 .domain(this.yScaleLeft)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
85 .rangeRound([height, 0]);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
86
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
87 let yScaleRight = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
88 .scaleLinear()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
89 .domain(this.yScaleRight)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90 .rangeRound([height, 0]);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
91
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
92 let xAxis = d3.axisBottom(xScale);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
93 let yAxis = d3.axisLeft(yScaleLeft);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
94 let yAxis2 = d3.axisRight(yScaleRight);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 let graph = svg
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 .append("g")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97 .attr(
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 "transform",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
99 "translate(" + this.margin.left + "," + this.margin.top + ")"
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 );
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
101 graph
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 .append("g")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 .attr("transform", "translate(0," + height + ")")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
104 .call(xAxis.ticks(5));
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
105 graph.append("g").call(yAxis);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
106 graph
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107 .append("g")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
108 .attr("transform", "translate(" + width + ",0)")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 .call(yAxis2);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
110 return { xScale, yScaleLeft, yScaleRight, graph };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
111 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
112 drawWaterlevel({ graph, xScale, yScaleRight, height }) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
113 let waterArea = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
114 .area()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
115 .x(function(d) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
116 return xScale(d.x);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
117 })
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
118 .y0(height)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
119 .y1(function(d) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
120 return yScaleRight(d.y);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
121 });
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
122 graph
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
123 .append("path")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
124 .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }])
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
125 .attr("fill", WATER_COLOR)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
126 .attr("stroke", WATER_COLOR)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
127 .attr("d", waterArea);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
128 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
129 drawProfile({ graph, xScale, yScaleRight, currentData, height }) {
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
130 let profileLine = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
131 .line()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
132 .x(d => {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
133 return xScale(d.x);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
134 })
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
135 .y(d => {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
136 return yScaleRight(d.y);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
137 });
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
138 let profileArea = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
139 .area()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
140 .x(function(d) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
141 return xScale(d.x);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
142 })
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
143 .y0(height)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
144 .y1(function(d) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
145 return yScaleRight(d.y);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
146 });
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
147 graph
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
148 .append("path")
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
149 .datum(currentData)
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
150 .attr("fill", GROUND_COLOR)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
151 .attr("stroke", GROUND_COLOR)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
152 .attr("stroke-width", 3)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
153 .attr("d", profileArea);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
154 graph
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
155 .append("path")
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
156 .datum(currentData)
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
157 .attr("fill", "none")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
158 .attr("stroke", "black")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
159 .attr("stroke-linejoin", "round")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
160 .attr("stroke-linecap", "round")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
161 .attr("stroke-width", 3)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
162 .attr("d", profileLine);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
163 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
164 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
165 mounted() {
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
166 this.drawDiagram();
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
167 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
168 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
169 </script>