# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1566918436 -7200
# Node ID e4d6c6339cb474c1d67713222cff77b5a31fa270
# Parent  837f90680d4c96b3d944d29d3d765a451c480c5e
identify_tool: accuracy legend improved

diff -r 837f90680d4c -r e4d6c6339cb4 client/src/components/identify/Identify.vue
--- a/client/src/components/identify/Identify.vue	Tue Aug 27 15:51:05 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Tue Aug 27 17:07:16 2019 +0200
@@ -41,26 +41,73 @@
           </small>
           <div
             v-if="showBottleneckMeta(feature)"
-            class="ml-2 mb-1 text-left d-flex"
+            class="ml-2 mb-1 text-left d-flex flex-column"
           >
-            <font-awesome-icon
-              icon="caret-up"
-              fixed-width
-              :style="{ color: recencyColor(feature), 'font-size': 'x-large' }"
-            />
-            <small class="my-auto">
-              {{ recency(feature) }}
+            <div>
+              <font-awesome-icon
+                icon="caret-up"
+                fixed-width
+                :style="{
+                  color: recencyColor(feature),
+                  'font-size': 'x-large'
+                }"
+              />
+              <small class="my-auto">
+                {{ recency(feature) }}
+              </small>
+            </div>
+            <div>
+              <small><translate>According gauge data:</translate></small>
+            </div>
+            <div>
+              <font-awesome-icon
+                icon="caret-up"
+                fixed-width
+                :style="{
+                  color: forecastAccuracyColor(feature),
+                  'font-size': 'x-large'
+                }"
+              />
+              <small class="my-auto">
+                {{ forecastAccuracy(feature) }}
+              </small>
+            </div>
+            <div>
+              <font-awesome-icon
+                icon="caret-up"
+                fixed-width
+                :style="{
+                  color: gmAvailabilityColor(feature),
+                  'font-size': 'x-large'
+                }"
+              />
+              <small class="my-auto">
+                {{ gmAvailability(feature) }}
+              </small>
+            </div>
+            <div>
+              <font-awesome-icon
+                icon="caret-up"
+                fixed-width
+                :style="{
+                  color: forecastVsRealityColor(feature),
+                  'font-size': 'x-large'
+                }"
+              />
+              <small class="my-auto">
+                {{ forecastVsReality(feature) }}
+              </small>
+            </div>
+            <small
+              v-for="prop in featureProps(feature)"
+              :key="prop.key"
+              v-if="prop.val"
+              class="d-flex justify-content-between px-2"
+            >
+              <b>{{ prop.key }}</b>
+              <span>{{ prop.val }}</span>
             </small>
           </div>
-          <small
-            v-for="prop in featureProps(feature)"
-            :key="prop.key"
-            v-if="prop.val"
-            class="d-flex justify-content-between px-2"
-          >
-            <b>{{ prop.key }}</b>
-            <span>{{ prop.val }}</span>
-          </small>
         </div>
         <div
           v-if="!currentMeasurement && !filteredIdentifiedFeatures.length"
@@ -188,12 +235,14 @@
       const measurementsIn14D = this.config.gm_min_values_14d;
       const messagesPerState = {
         OK:
-          this.$gettext("Last measurement <") +
+          this.$gettext("Avail: Last measurement <") +
           ` ${latestInHours} (${measurementsIn14D} in 14d)`,
         WARNING:
-          this.$gettext("Below treshold") + `: ${measurementsIn14D} in 14d`,
+          this.$gettext("Avail: Below treshold") +
+          `: ${measurementsIn14D} in 14d`,
         DANGER:
-          this.$gettext("Latest measurement older than") + ` ${latestInHours} d`
+          this.$gettext("Avail: Latest measurement older than") +
+          ` ${latestInHours} d`
       };
       return messagesPerState[[classifications.gmAvailability(feature)]];
     },
@@ -223,7 +272,8 @@
       const messagesPerState = {
         OK: this.$gettext("Nash-Sutcliffe") + `>${nsc24} /24h >${nsc72} / 72h`,
         WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72}`,
-        DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}`
+        DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}`,
+        NEUTRAL: this.$gettext("Nash-Sutcliffe not available")
       };
       return messagesPerState[[classifications.forecastVsReality(feature)]];
     },
diff -r 837f90680d4c -r e4d6c6339cb4 client/src/lib/classifications.js
--- a/client/src/lib/classifications.js	Tue Aug 27 15:51:05 2019 +0200
+++ b/client/src/lib/classifications.js	Tue Aug 27 17:07:16 2019 +0200
@@ -16,7 +16,17 @@
 
 const getGauge = f => {
   if (f.getId().indexOf("bottlenecks") > -1) {
-    return f.get("gauge_obj");
+    const GaugeProxy = (function(feature) {
+      const gauge = feature.get("gauge_obj");
+      const get = function(propName) {
+        if (gauge) return gauge.get(propName);
+        return feature.get(propName);
+      };
+      return {
+        get: get
+      };
+    })(f);
+    return GaugeProxy;
   }
   return f;
 };