Mercurial > gemma

changeset 4153:7c44af0b9370

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: Waterleveldiagram Since there is no convention for the nameing of reference waterlevels we have to do some guesswork. Levels containing /HDC/ are considered hdc and ldc accordingly are determined by /LDC/. For now, we assume having only a max of one LDC and one HDC. If there are multiple instances of LDC and HDC, LDCs are red and HDCs are green.
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 02 Aug 2019 12:59:23 +0200
parents 78ec61acf72e
children d54d86d27e82
files client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js
diffstat 2 files changed, 39 insertions(+), 21 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Fri Aug 02 12:00:15 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Aug 02 12:59:23 2019 +0200
@@ -106,7 +106,7 @@
 import { endOfDay } from "date-fns";
 import debounce from "debounce";
 import { saveAs } from "file-saver";
-import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
+import { diagram, pdfgen, templateLoader, refwaterlevels } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
@@ -116,7 +116,7 @@
 const d3 = Object.assign(d3Base, { lineChunked });
 
 export default {
-  mixins: [diagram, pdfgen, templateLoader],
+  mixins: [diagram, pdfgen, templateLoader, refwaterlevels],
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
   },
@@ -454,12 +454,13 @@
         .attr("fill-opacity", 0.6);
 
       svg
-        .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line")
+        .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line ")
         .attr("stroke-width", 1)
         .attr("fill", "none")
         .attr("clip-path", "url(#waterlevel-clip)");
       svg.selectAll(".hdc-line").attr("stroke", "red");
       svg.selectAll(".ldc-line").attr("stroke", "green");
+
       svg.selectAll(".mw-line").attr("stroke", "rgb(128,128,128)");
       svg.selectAll(".rn-line").attr("stroke", "rgb(128,128,128)");
       svg
@@ -558,17 +559,13 @@
       if (refWaterLevels) {
         // set min/max values for the waterlevel axis
         // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
+        const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
         rest = [
           {
-            waterlevel:
-              refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8
+            waterlevel: HDC + (HDC - LDC) / 8
           },
           {
-            waterlevel: Math.max(
-              refWaterLevels.LDC -
-                (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
-              0
-            )
+            waterlevel: Math.max(LDC - (HDC - LDC) / 4, 0)
           }
         ];
       } else {
@@ -774,16 +771,16 @@
     drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) {
       // filling area between HDC and LDC
       if (refWaterLevels) {
-        diagram
-          .append("rect")
-          .attr("class", "hdc-ldc-area")
-          .attr("x", 0)
-          .attr("y", scale.y(refWaterLevels.HDC))
-          .attr("width", dimensions.width)
-          .attr(
-            "height",
-            scale.y(refWaterLevels.LDC) - scale.y(refWaterLevels.HDC)
-          );
+        const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
+        if (LDC && HDC) {
+          diagram
+            .append("rect")
+            .attr("class", "hdc-ldc-area")
+            .attr("x", 0)
+            .attr("y", scale.y(HDC))
+            .attr("width", dimensions.width)
+            .attr("height", refWaterLevels ? scale.y(LDC) - scale.y(HDC) : 0);
+        }
       }
 
       const refWaterlevelLine = d3
@@ -791,6 +788,12 @@
         .x(d => scale.x(d.x))
         .y(d => scale.y(d.y));
 
+      const levelStyle = name => {
+        if (/HDC/.test(name)) return "hdc-line";
+        if (/LDC/.test(name)) return "ldc-line";
+        return `${name.toLowerCase()}-line`;
+      };
+
       for (let ref in refWaterLevels) {
         if (refWaterLevels[ref]) {
           diagram
@@ -799,7 +802,7 @@
               { x: 0, y: refWaterLevels[ref] },
               { x: extent.date[1], y: refWaterLevels[ref] }
             ])
-            .attr("class", ref.toLowerCase() + "-line")
+            .attr("class", levelStyle(ref))
             .attr("d", refWaterlevelLine);
           diagram // label
             .append("rect")
--- a/client/src/lib/mixins.js	Fri Aug 02 12:00:15 2019 +0200
+++ b/client/src/lib/mixins.js	Fri Aug 02 12:59:23 2019 +0200
@@ -47,6 +47,21 @@
     }
   }
 };
+/**
+ * Since the names of LDC and HDC aren't normalized, we have to do guesswork
+ * best fit is key with HDC or LDC in it
+ */
+export const refwaterlevels = {
+  methods: {
+    determineLDCHDC(refWaterLevels) {
+      let HDC =
+        refWaterLevels[Object.keys(refWaterLevels).find(e => /HDC/.test(e))];
+      let LDC =
+        refWaterLevels[Object.keys(refWaterLevels).find(e => /LDC/.test(e))];
+      return { LDC, HDC };
+    }
+  }
+};
 
 export const diagram = {
   methods: {