Mercurial > gemma

changeset 3211:f76927849ef8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
author Markus Kottlaender <markus@intevation.de>
date Thu, 09 May 2019 10:08:49 +0200
parents 66e90b48387a
children f87fd173f750
files client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue
diffstat 2 files changed, 62 insertions(+), 142 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue	Thu May 09 09:53:02 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Thu May 09 10:08:49 2019 +0200
@@ -479,14 +479,14 @@
       const updaters = [];
 
       // draw
-      this.drawRefLines(refWaterLevels); // static, doesn't need an updater
       updaters.push(this.drawAxes());
-      updaters.push(this.drawNowLines());
       updaters.push(this.drawWaterlevelMinMaxAreaChart());
       updaters.push(this.drawWaterlevelLineChart("median"));
       updaters.push(this.drawWaterlevelLineChart("q25"));
       updaters.push(this.drawWaterlevelLineChart("q75"));
       updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels));
+      updaters.push(this.drawNowLines());
+      this.drawRefLines(refWaterLevels); // static, doesn't need an updater
 
       // INTERACTIONS
 
@@ -534,8 +534,11 @@
       this.svg.selectAll(".rn-line").attr("stroke", "grey");
       this.svg
         .selectAll(".ref-waterlevel-label")
-        .style("font-size", "11px")
-        .attr("fill", "#999");
+        .style("font-size", "10px")
+        .attr("fill", "black");
+      this.svg
+        .selectAll(".ref-waterlevel-label-background")
+        .attr("fill", "rgba(255, 255, 255, 0.6)");
       this.svg
         .selectAll(".now-line")
         .attr("stroke", "#999")
@@ -812,73 +815,30 @@
         .x(d => this.scale.x(d.x))
         .y(d => this.scale.y(d.y));
 
-      // HDC
-      if (refWaterLevels.HDC) {
-        this.diagram
-          .append("path")
-          .datum([
-            { x: 0, y: refWaterLevels.HDC },
-            { x: this.extent.date[1], y: refWaterLevels.HDC }
-          ])
-          .attr("class", "hdc-line")
-          .attr("d", refWaterlevelLine);
-        this.diagram // label
-          .append("text")
-          .text(`HDC (${refWaterLevels.HDC})`)
-          .attr("class", "ref-waterlevel-label")
-          .attr("x", 5)
-          .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
-      }
-      // LDC
-      if (refWaterLevels.LDC) {
-        this.diagram
-          .append("path")
-          .datum([
-            { x: 0, y: refWaterLevels.LDC },
-            { x: this.extent.date[1], y: refWaterLevels.LDC }
-          ])
-          .attr("class", "ldc-line")
-          .attr("d", refWaterlevelLine);
-        this.diagram // label
-          .append("text")
-          .text(`LDC (${refWaterLevels.LDC})`)
-          .attr("class", "ref-waterlevel-label")
-          .attr("x", 5)
-          .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
-      }
-      // MW
-      if (refWaterLevels.MW) {
-        this.diagram
-          .append("path")
-          .datum([
-            { x: 0, y: refWaterLevels.MW },
-            { x: this.extent.date[1], y: refWaterLevels.MW }
-          ])
-          .attr("class", "mw-line")
-          .attr("d", refWaterlevelLine);
-        this.diagram // label
-          .append("text")
-          .text(`MW (${refWaterLevels.MW})`)
-          .attr("class", "ref-waterlevel-label")
-          .attr("x", 5)
-          .attr("y", this.scale.y(refWaterLevels.MW) - 3);
-      }
-      // RN
-      if (refWaterLevels.RN) {
-        this.diagram
-          .append("path")
-          .datum([
-            { x: 0, y: refWaterLevels.RN },
-            { x: this.extent.date[1], y: refWaterLevels.RN }
-          ])
-          .attr("class", "rn-line")
-          .attr("d", refWaterlevelLine);
-        this.diagram // label
-          .append("text")
-          .text(`RN (${refWaterLevels.RN})`)
-          .attr("class", "ref-waterlevel-label")
-          .attr("x", 5)
-          .attr("y", this.scale.y(refWaterLevels.RN) - 3);
+      for (let ref in refWaterLevels) {
+        if (refWaterLevels[ref]) {
+          this.diagram
+            .append("path")
+            .datum([
+              { x: 0, y: refWaterLevels[ref] },
+              { x: this.extent.date[1], y: refWaterLevels[ref] }
+            ])
+            .attr("class", ref.toLowerCase() + "-line")
+            .attr("d", refWaterlevelLine);
+          this.diagram // label
+            .append("rect")
+            .attr("class", "ref-waterlevel-label-background")
+            .attr("x", 1)
+            .attr("y", this.scale.y(refWaterLevels[ref]) - 13)
+            .attr("width", 55)
+            .attr("height", 12);
+          this.diagram
+            .append("text")
+            .text(`${ref} (${refWaterLevels[ref]})`)
+            .attr("class", "ref-waterlevel-label")
+            .attr("x", 5)
+            .attr("y", this.scale.y(refWaterLevels[ref]) - 3);
+        }
       }
     },
     createZoom(updaters, eventRect) {
--- a/client/src/components/gauge/Waterlevel.vue	Thu May 09 09:53:02 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu May 09 10:08:49 2019 +0200
@@ -502,14 +502,14 @@
       const updaters = [];
 
       // draw
-      this.drawRefLines(refWaterLevels); // static, doesn't need an updater
       updaters.push(this.drawAxes());
       updaters.push(this.drawWaterlevelCharts());
-      updaters.push(this.drawNowLines());
       updaters.push(this.drawPredictionAreas());
       updaters.push(this.drawNashSutcliffe(24));
       updaters.push(this.drawNashSutcliffe(48));
       updaters.push(this.drawNashSutcliffe(72));
+      updaters.push(this.drawNowLines());
+      this.drawRefLines(refWaterLevels); // static, doesn't need an updater
 
       // INTERACTIONS
 
@@ -564,8 +564,11 @@
       this.svg.selectAll(".rn-line").attr("stroke", "grey");
       this.svg
         .selectAll(".ref-waterlevel-label")
-        .style("font-size", "11px")
-        .attr("fill", "#999");
+        .style("font-size", "10px")
+        .attr("fill", "black");
+      this.svg
+        .selectAll(".ref-waterlevel-label-background")
+        .attr("fill", "rgba(255, 255, 255, 0.6)");
       this.svg.selectAll(".hdc-ldc-area").attr("fill", "rgba(0, 255, 0, 0.1)");
       this.svg
         .selectAll(".now-line")
@@ -865,73 +868,30 @@
         .x(d => this.scale.x(d.x))
         .y(d => this.scale.y(d.y));
 
-      // HDC
-      if (refWaterLevels.HDC) {
-        this.diagram
-          .append("path")
-          .datum([
-            { x: 0, y: refWaterLevels.HDC },
-            { x: this.extent.date[1], y: refWaterLevels.HDC }
-          ])
-          .attr("class", "hdc-line")
-          .attr("d", refWaterlevelLine);
-        this.diagram // label
-          .append("text")
-          .text(`HDC (${refWaterLevels.HDC})`)
-          .attr("class", "ref-waterlevel-label")
-          .attr("x", 5)
-          .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
-      }
-      // LDC
-      if (refWaterLevels.LDC) {
-        this.diagram
-          .append("path")
-          .datum([
-            { x: 0, y: refWaterLevels.LDC },
-            { x: this.extent.date[1], y: refWaterLevels.LDC }
-          ])
-          .attr("class", "ldc-line")
-          .attr("d", refWaterlevelLine);
-        this.diagram // label
-          .append("text")
-          .text(`LDC (${refWaterLevels.LDC})`)
-          .attr("class", "ref-waterlevel-label")
-          .attr("x", 5)
-          .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
-      }
-      // MW
-      if (refWaterLevels.MW) {
-        this.diagram
-          .append("path")
-          .datum([
-            { x: 0, y: refWaterLevels.MW },
-            { x: this.extent.date[1], y: refWaterLevels.MW }
-          ])
-          .attr("class", "mw-line")
-          .attr("d", refWaterlevelLine);
-        this.diagram // label
-          .append("text")
-          .text(`MW (${refWaterLevels.MW})`)
-          .attr("class", "ref-waterlevel-label")
-          .attr("x", 5)
-          .attr("y", this.scale.y(refWaterLevels.MW) - 3);
-      }
-      // RN
-      if (refWaterLevels.RN) {
-        this.diagram
-          .append("path")
-          .datum([
-            { x: 0, y: refWaterLevels.RN },
-            { x: this.extent.date[1], y: refWaterLevels.RN }
-          ])
-          .attr("class", "rn-line")
-          .attr("d", refWaterlevelLine);
-        this.diagram // label
-          .append("text")
-          .text(`RN (${refWaterLevels.RN})`)
-          .attr("class", "ref-waterlevel-label")
-          .attr("x", 5)
-          .attr("y", this.scale.y(refWaterLevels.RN) - 3);
+      for (let ref in refWaterLevels) {
+        if (refWaterLevels[ref]) {
+          this.diagram
+            .append("path")
+            .datum([
+              { x: 0, y: refWaterLevels[ref] },
+              { x: this.extent.date[1], y: refWaterLevels[ref] }
+            ])
+            .attr("class", ref.toLowerCase() + "-line")
+            .attr("d", refWaterlevelLine);
+          this.diagram // label
+            .append("rect")
+            .attr("class", "ref-waterlevel-label-background")
+            .attr("x", 1)
+            .attr("y", this.scale.y(refWaterLevels[ref]) - 13)
+            .attr("width", 55)
+            .attr("height", 12);
+          this.diagram
+            .append("text")
+            .text(`${ref} (${refWaterLevels[ref]})`)
+            .attr("class", "ref-waterlevel-label")
+            .attr("x", 5)
+            .attr("y", this.scale.y(refWaterLevels[ref]) - 3);
+        }
       }
     },
     drawNashSutcliffe(hours) {