Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 2648:4ffae834276e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: added background grid to chart
author Markus Kottlaender <markus@intevation.de>
date Thu, 14 Mar 2019 14:42:26 +0100
parents 30697735a7bc
children a2dd96c305be
comparison
equal deleted inserted replaced
2647:c52bf6f994c0 2648:4ffae834276e
8 .line 8 .line
9 stroke: steelblue 9 stroke: steelblue
10 stroke-width: 2 10 stroke-width: 2
11 fill: transparent 11 fill: transparent
12 clip-path: url(#clip) 12 clip-path: url(#clip)
13
14 .zoom
15 cursor: move
16 fill: none
17 pointer-events: all
18 13
19 .hdc-line, 14 .hdc-line,
20 .ldc-line, 15 .ldc-line,
21 .mw-line 16 .mw-line
22 stroke-width: 1 17 stroke-width: 1
31 .ref-waterlevel-label 26 .ref-waterlevel-label
32 font-size: 11px 27 font-size: 11px
33 fill: #999 28 fill: #999
34 .hdc-ldc-area 29 .hdc-ldc-area
35 fill: rgba(0, 255, 0, 0.15) 30 fill: rgba(0, 255, 0, 0.15)
31
32 .tick
33 line
34 stroke-dasharray: 5
35 stroke: #ccc
36
37 .zoom
38 cursor: move
39 fill: none
40 pointer-events: all
36 .brush 41 .brush
37 .selection 42 .selection
38 stroke: transparent 43 stroke: transparent
39 fill-opacity: 0.2 44 fill-opacity: 0.2
40 .handle 45 .handle
125 x.domain(d3.extent(this.waterlevels, d => d.date)); 130 x.domain(d3.extent(this.waterlevels, d => d.date));
126 y.domain(WaterlevelMinMax); 131 y.domain(WaterlevelMinMax);
127 x2.domain(x.domain()); 132 x2.domain(x.domain());
128 y2.domain(y.domain()); 133 y2.domain(y.domain());
129 // creating the axes based on these scales 134 // creating the axes based on these scales
130 let xAxis = d3.axisBottom(x), 135 let xAxis = d3
131 xAxis2 = d3.axisBottom(x2), 136 .axisTop(x)
132 yAxis = d3.axisLeft(y); 137 .tickSizeInner(mainHeight)
138 .tickSizeOuter(0);
139 let xAxis2 = d3.axisBottom(x2);
140 let yAxis = d3
141 .axisRight(y)
142 .tickSizeInner(width)
143 .tickSizeOuter(0);
133 144
134 // PREPARING CHART FUNCTIONS 145 // PREPARING CHART FUNCTIONS
135 146
136 // waterlevel line in big chart 147 // waterlevel line in big chart
137 let mainLineChart = d3 148 let mainLineChart = d3
169 180
170 // axes 181 // axes
171 mainChart 182 mainChart
172 .append("g") 183 .append("g")
173 .attr("transform", `translate(0, ${mainHeight})`) 184 .attr("transform", `translate(0, ${mainHeight})`)
174 .call(xAxis); 185 .call(xAxis)
186 .selectAll(".tick text")
187 .attr("y", 15);
175 mainChart // label 188 mainChart // label
176 .append("text") 189 .append("text")
177 .text(this.$gettext("Waterlevel [cm]")) 190 .text(this.$gettext("Waterlevel [cm]"))
178 .attr("text-anchor", "middle") 191 .attr("text-anchor", "middle")
179 .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`); 192 .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`);
180 mainChart.append("g").call(yAxis); 193 mainChart
194 .append("g")
195 .call(yAxis)
196 .selectAll(".tick text")
197 .attr("x", -25);
181 198
182 // reference waterlevels 199 // reference waterlevels
183 // filling area between HDC and LDC 200 // filling area between HDC and LDC
184 mainChart 201 mainChart
185 .append("rect") 202 .append("rect")