changeset 4293:dbd8d2416da7

Identify: Improve legend for gauges
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 30 Aug 2019 13:36:18 +0200
parents 18a34d9b289c
children c8b18408cc55
files client/src/components/identify/Identify.vue
diffstat 1 files changed, 48 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue	Fri Aug 30 12:36:27 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Fri Aug 30 13:36:18 2019 +0200
@@ -59,6 +59,11 @@
             <div>
               <small><translate>According gauge data:</translate></small>
             </div>
+          </div>
+          <div
+            v-if="showGaugeMeta(feature)"
+            class="ml-2 mb-1 text-left d-flex flex-column"
+          >
             <div>
               <font-awesome-icon
                 icon="caret-up"
@@ -77,12 +82,12 @@
                 icon="caret-up"
                 fixed-width
                 :style="{
-                  color: gaugeStatusColor,
+                  color: getGaugeStatusColor(feature),
                   'font-size': 'x-large'
                 }"
               />
               <small class="my-auto">
-                {{ gaugeStatusText }}
+                {{ getGaugeStatusText(feature) }}
               </small>
             </div>
             <div>
@@ -221,6 +226,7 @@
   name: "identify",
   data() {
     return {
+      refGaugeStatus: "",
       gaugeStatus: ""
     };
   },
@@ -249,6 +255,20 @@
         NEUTRAL: this.$gettext("Nash-Sutcliffe not available")
       };
       return messagesPerState[this.gaugeStatus];
+    },
+    refGaugeStatusColor() {
+      return forecastVsRealityColorCodes[this.refGaugeStatus];
+    },
+    refGaugeStatusText() {
+      const nsc24 = this.config.gm_forecast_vs_reality_nsc_24h;
+      const nsc72 = this.config.gm_forecast_vs_reality_nsc_72h;
+      const messagesPerState = {
+        OK: this.$gettext("Nash-Sutcliffe") + `>${nsc24} /24h >${nsc72} / 72h`,
+        WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72}`,
+        DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}`,
+        NEUTRAL: this.$gettext("Nash-Sutcliffe not available")
+      };
+      return messagesPerState[this.refGaugeStatus];
     }
   },
   watch: {
@@ -256,6 +276,19 @@
       const bottlecks = this.filteredIdentifiedFeatures.filter(f =>
         /bottleneck/.test(f.id_)
       );
+      const gauges = this.filteredIdentifiedFeatures.filter(f =>
+        /gauge/.test(f.id_)
+      );
+      if (gauges.length > 0) {
+        const isrs = gauges[0].get("isrs_code");
+        this.$store
+          .dispatch("gauges/getNashSutcliffeForISRS", isrs)
+          .then(response => {
+            this.gaugeStatus = classifications.calcForecastVsRealityForNSC(
+              response
+            );
+          });
+      }
       if (bottlecks.length > 0) {
         const gauge = this.gauges.find(
           g => g.properties.objname === bottlecks[0].get("gauge_objname")
@@ -264,7 +297,7 @@
         this.$store
           .dispatch("gauges/getNashSutcliffeForISRS", isrs)
           .then(response => {
-            this.gaugeStatus = classifications.calcForecastVsRealityForNSC(
+            this.refGaugeStatus = classifications.calcForecastVsRealityForNSC(
               response
             );
           });
@@ -272,6 +305,14 @@
     }
   },
   methods: {
+    getGaugeStatusText(feature) {
+      if (/bottleneck/.test(feature.getId())) return this.refGaugeStatusText;
+      return this.gaugeStatusText;
+    },
+    getGaugeStatusColor(feature) {
+      if (/bottleneck/.test(feature.getId())) return this.refGaugeStatusColor;
+      return this.gaugeStatusColor;
+    },
     gmAvailability(feature) {
       const latestInHours = this.config.gm_latest_hours;
       const measurementsIn14D = this.config.gm_min_values_14d;
@@ -327,6 +368,10 @@
       const result = /bottleneck/.test(feature.getId().toLowerCase());
       return result;
     },
+    showGaugeMeta(feature) {
+      const result = /bottleneck|gauge/.test(feature.getId().toLowerCase());
+      return result;
+    },
     zoomTo(feature) {
       this.$store.dispatch("map/moveMap", {
         coordinates: getCenter(