Mercurial > gemma
diff client/src/components/gauge/Waterlevel.vue @ 3726:be939dcdfdfd
client: waterlevel diagrams: make now line label not update its position when zooming
Of course the line and label could both be updated and move with the time but since all other data is static after generating
the diagram once, a moving now line would be to fancy... but I was tempted.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 20 Jun 2019 19:16:26 +0200 |
parents | 05bbd1a97567 |
children | 2b6734a6730a |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Thu Jun 20 18:42:52 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Thu Jun 20 19:16:26 2019 +0200 @@ -862,6 +862,11 @@ ); }, drawNowLines() { + const now = new Date(); + const nowCoords = [ + { x: now, y: this.extent.waterlevel[0] }, + { x: now, y: this.extent.waterlevel[1] } + ]; const nowLine = d3 .line() .x(d => this.scale.x(d.x)) @@ -869,7 +874,7 @@ const nowLabel = selection => { selection.attr( "transform", - `translate(${this.scale.x(new Date())}, ${this.scale.y( + `translate(${this.scale.x(now)}, ${this.scale.y( this.extent.waterlevel[1] )})` ); @@ -878,10 +883,7 @@ // draw in main this.diagram .append("path") - .datum([ - { x: new Date(), y: this.extent.waterlevel[0] }, - { x: new Date(), y: this.extent.waterlevel[1] } - ]) + .datum(nowCoords) .attr("class", "now-line") .attr("d", nowLine); this.diagram // label @@ -894,10 +896,7 @@ // draw in nav this.navigation .append("path") - .datum([ - { x: new Date(), y: this.extent.waterlevel[0] }, - { x: new Date(), y: this.extent.waterlevel[1] } - ]) + .datum(nowCoords) .attr("class", "now-line") .attr( "d",