Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 2645:6374fc404fdc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: draw filled area between HDC and LDC
author Markus Kottlaender <markus@intevation.de>
date Thu, 14 Mar 2019 13:36:13 +0100
parents ffef5f89b31c
children 30697735a7bc
comparison
equal deleted inserted replaced
2644:50cfb12a54a4 2645:6374fc404fdc
29 .mw-line 29 .mw-line
30 stroke: grey 30 stroke: grey
31 .ref-waterlevel-label 31 .ref-waterlevel-label
32 font-size: 11px 32 font-size: 11px
33 fill: #999 33 fill: #999
34 .hdc-ldc-area
35 fill: rgba(0, 255, 0, 0.15)
34 .brush 36 .brush
35 .selection 37 .selection
36 stroke: transparent 38 stroke: transparent
37 fill-opacity: 0.2 39 fill-opacity: 0.2
38 .handle 40 .handle
174 .text(this.$gettext("Waterlevel [cm]")) 176 .text(this.$gettext("Waterlevel [cm]"))
175 .attr("text-anchor", "middle") 177 .attr("text-anchor", "middle")
176 .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`); 178 .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`);
177 mainChart.append("g").call(yAxis); 179 mainChart.append("g").call(yAxis);
178 180
179 // waterlevel chart
180 mainChart
181 .append("path")
182 .datum(this.waterlevels)
183 .attr("class", "line")
184 .attr("d", mainLineChart);
185
186 // reference waterlevels 181 // reference waterlevels
182 // filling area between HDC and LDC
183 mainChart
184 .append("rect")
185 .attr("class", "hdc-ldc-area")
186 .attr("x", 0)
187 .attr("y", y(refWaterLevels.HDC))
188 .attr("width", width)
189 .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC));
190
187 let lastDate = this.waterlevels[this.waterlevels.length - 1].date; 191 let lastDate = this.waterlevels[this.waterlevels.length - 1].date;
188 // HDC 192 // HDC
189 mainChart 193 mainChart
190 .append("path") 194 .append("path")
191 .datum([ 195 .datum([
228 .append("text") 232 .append("text")
229 .text("MW") 233 .text("MW")
230 .attr("class", "ref-waterlevel-label") 234 .attr("class", "ref-waterlevel-label")
231 .attr("x", x(lastDate) - 20) 235 .attr("x", x(lastDate) - 20)
232 .attr("y", y(refWaterLevels.MW) - 3); 236 .attr("y", y(refWaterLevels.MW) - 3);
237
238 // waterlevel chart
239 mainChart
240 .append("path")
241 .datum(this.waterlevels)
242 .attr("class", "line")
243 .attr("d", mainLineChart);
233 244
234 // DRAWING NAVCHART 245 // DRAWING NAVCHART
235 246
236 let navChart = svg 247 let navChart = svg
237 .append("g") 248 .append("g")