Mercurial > gemma
changeset 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 | 18777f6df3ef |
children | d4a5d11e23a0 |
files | client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
diffstat | 2 files changed, 17 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Thu Jun 20 18:42:52 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Thu Jun 20 19:16:26 2019 +0200 @@ -543,6 +543,7 @@ updaters.push(this.drawWaterlevelLineChart("q75")); updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels)); updaters.push(this.drawNowLines()); + if (refWaterLevels) { this.drawRefLines(refWaterLevels); // static, doesn't need an updater } @@ -750,6 +751,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)) @@ -757,7 +763,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] )})` ); @@ -766,10 +772,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 @@ -782,10 +785,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",
--- 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",