Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 2710:f393fabfdd35

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: chart extent based on selected dates instead of data The extent of the chart's x-axis (date) was based on the data that is shown. Now it is based on the fromDate and toDate set in the Guage dialog box.
author Markus Kottlaender <markus@intevation.de>
date Mon, 18 Mar 2019 17:01:47 +0100
parents e622689d73bd
children 8d96b9254465
comparison
equal deleted inserted replaced
2709:fdc392299ff1 2710:f393fabfdd35
99 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ 99 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
100 const d3 = Object.assign(d3Base, { lineChunked }); 100 const d3 = Object.assign(d3Base, { lineChunked });
101 101
102 export default { 102 export default {
103 computed: { 103 computed: {
104 ...mapState("gauges", ["waterlevels"]), 104 ...mapState("gauges", ["waterlevels", "dateFrom", "dateTo"]),
105 ...mapGetters("gauges", ["selectedGauge"]) 105 ...mapGetters("gauges", ["selectedGauge"])
106 }, 106 },
107 watch: { 107 watch: {
108 waterlevels() { 108 waterlevels() {
109 this.drawDiagram(); 109 this.drawDiagram();
158 { waterlevel: Math.max(refWaterLevels.LDC - 100, 0) } 158 { waterlevel: Math.max(refWaterLevels.LDC - 100, 0) }
159 ], 159 ],
160 d => d.waterlevel 160 d => d.waterlevel
161 ); 161 );
162 // setting the min and max values for the diagram axes 162 // setting the min and max values for the diagram axes
163 x.domain(d3.extent(this.waterlevels, d => d.date)); 163 let dateTo = new Date(this.dateTo.getTime() + 86400);
164 x.domain(d3.extent([this.dateFrom, dateTo]));
164 y.domain(WaterlevelMinMax); 165 y.domain(WaterlevelMinMax);
165 x2.domain(x.domain()); 166 x2.domain(x.domain());
166 y2.domain(y.domain()); 167 y2.domain(y.domain());
167 // creating the axes based on these scales 168 // creating the axes based on these scales
168 let xAxis = d3 169 let xAxis = d3
251 .attr("x", 0) 252 .attr("x", 0)
252 .attr("y", y(refWaterLevels.HDC)) 253 .attr("y", y(refWaterLevels.HDC))
253 .attr("width", width) 254 .attr("width", width)
254 .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC)); 255 .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC));
255 256
256 let lastDate = this.waterlevels[this.waterlevels.length - 1].date;
257 // HDC 257 // HDC
258 mainChart 258 mainChart
259 .append("path") 259 .append("path")
260 .datum([ 260 .datum([
261 { x: 0, y: refWaterLevels.HDC }, 261 { x: 0, y: refWaterLevels.HDC },
262 { x: lastDate, y: refWaterLevels.HDC } 262 { x: dateTo, y: refWaterLevels.HDC }
263 ]) 263 ])
264 .attr("class", "hdc-line") 264 .attr("class", "hdc-line")
265 .attr("d", refWaterlevelLine); 265 .attr("d", refWaterlevelLine);
266 mainChart // label 266 mainChart // label
267 .append("text") 267 .append("text")
268 .text("HDC") 268 .text("HDC")
269 .attr("class", "ref-waterlevel-label") 269 .attr("class", "ref-waterlevel-label")
270 .attr("x", x(lastDate) - 20) 270 .attr("x", x(dateTo) - 20)
271 .attr("y", y(refWaterLevels.HDC) - 3); 271 .attr("y", y(refWaterLevels.HDC) - 3);
272 // LDC 272 // LDC
273 mainChart 273 mainChart
274 .append("path") 274 .append("path")
275 .datum([ 275 .datum([
276 { x: 0, y: refWaterLevels.LDC }, 276 { x: 0, y: refWaterLevels.LDC },
277 { x: lastDate, y: refWaterLevels.LDC } 277 { x: dateTo, y: refWaterLevels.LDC }
278 ]) 278 ])
279 .attr("class", "ldc-line") 279 .attr("class", "ldc-line")
280 .attr("d", refWaterlevelLine); 280 .attr("d", refWaterlevelLine);
281 mainChart // label 281 mainChart // label
282 .append("text") 282 .append("text")
283 .text("LDC") 283 .text("LDC")
284 .attr("class", "ref-waterlevel-label") 284 .attr("class", "ref-waterlevel-label")
285 .attr("x", x(lastDate) - 20) 285 .attr("x", x(dateTo) - 20)
286 .attr("y", y(refWaterLevels.LDC) - 3); 286 .attr("y", y(refWaterLevels.LDC) - 3);
287 // MW 287 // MW
288 mainChart 288 mainChart
289 .append("path") 289 .append("path")
290 .datum([ 290 .datum([
291 { x: 0, y: refWaterLevels.MW }, 291 { x: 0, y: refWaterLevels.MW },
292 { x: lastDate, y: refWaterLevels.MW } 292 { x: dateTo, y: refWaterLevels.MW }
293 ]) 293 ])
294 .attr("class", "mw-line") 294 .attr("class", "mw-line")
295 .attr("d", refWaterlevelLine); 295 .attr("d", refWaterlevelLine);
296 mainChart // label 296 mainChart // label
297 .append("text") 297 .append("text")
298 .text("MW") 298 .text("MW")
299 .attr("class", "ref-waterlevel-label") 299 .attr("class", "ref-waterlevel-label")
300 .attr("x", x(lastDate) - 20) 300 .attr("x", x(dateTo) - 20)
301 .attr("y", y(refWaterLevels.MW) - 3); 301 .attr("y", y(refWaterLevels.MW) - 3);
302 302
303 // waterlevel chart 303 // waterlevel chart
304 mainChart 304 mainChart
305 .append("g") 305 .append("g")