Mercurial > gemma

changeset 3726:be939dcdfdfd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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",