diff client/src/components/identify/Identify.vue @ 4291:81ab34bd2d0d

Legend: Improve display of data availability In order to show Nash Sutcliffe data for bottleneckts the according gauge has to be determined. Every gauge is loaded at initial startup, data will be available when necessary for identification of bottlenecks. The Nash Sutcliffe data is lazy loaded and used here. Perhaps we could use this cache for the style layer too.
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 30 Aug 2019 12:11:35 +0200
parents 30f26bf7ff24
children dbd8d2416da7
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue	Fri Aug 30 11:30:11 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Fri Aug 30 12:11:35 2019 +0200
@@ -77,12 +77,12 @@
                 icon="caret-up"
                 fixed-width
                 :style="{
-                  color: forecastVsRealityColor(feature),
+                  color: gaugeStatusColor,
                   'font-size': 'x-large'
                 }"
               />
               <small class="my-auto">
-                {{ forecastVsReality(feature) }}
+                {{ gaugeStatusText }}
               </small>
             </div>
             <div>
@@ -219,16 +219,56 @@
 
 export default {
   name: "identify",
+  data() {
+    return {
+      gaugeStatus: ""
+    };
+  },
   computed: {
     ...mapGetters("application", ["versionStr"]),
     ...mapState("application", ["showIdentify", "userManualUrl", "config"]),
     ...mapGetters("map", ["filteredIdentifiedFeatures"]),
     ...mapState("map", ["currentMeasurement"]),
+    ...mapState("gauges", ["gauges"]),
     identifiedLabel() {
       return this.$gettext("Identified Features");
     },
     usermanualFilename() {
       return this.$gettext("User Manual");
+    },
+    gaugeStatusColor() {
+      return forecastVsRealityColorCodes[this.gaugeStatus];
+    },
+    gaugeStatusText() {
+      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.gaugeStatus];
+    }
+  },
+  watch: {
+    filteredIdentifiedFeatures() {
+      const bottlecks = this.filteredIdentifiedFeatures.filter(f =>
+        /bottleneck/.test(f.id_)
+      );
+      if (bottlecks.length > 0) {
+        const gauge = this.gauges.find(
+          g => g.properties.objname === bottlecks[0].get("gauge_objname")
+        );
+        const isrs = gauge.properties.isrs_code;
+        this.$store
+          .dispatch("gauges/getNashSutcliffeForISRS", isrs)
+          .then(response => {
+            this.gaugeStatus = classifications.calcForecastVsRealityForNSC(
+              response
+            );
+          });
+      }
     }
   },
   methods: {
@@ -268,22 +308,6 @@
         classifications.forecastAccuracy(feature)
       ];
     },
-    forecastVsReality(feature) {
-      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[[classifications.forecastVsReality(feature)]];
-    },
-    forecastVsRealityColor(feature) {
-      return forecastVsRealityColorCodes[
-        classifications.forecastVsReality(feature)
-      ];
-    },
     recency(feature) {
       const revisitingFactor = this.config.bn_revtime_multiplier;
       const messagesPerState = {