# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1568904565 -7200
# Node ID 04bdc1f444bcc7ab2bdeb7d445cdba71f9400e65
# Parent  a075da82e875844ea95947671507c4130e739028
identify: improve legend

diff -r a075da82e875 -r 04bdc1f444bc client/src/components/identify/Identify.vue
--- a/client/src/components/identify/Identify.vue	Thu Sep 19 15:33:22 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Thu Sep 19 16:49:25 2019 +0200
@@ -39,11 +39,20 @@
               <font-awesome-icon icon="crosshairs" />
             </a>
           </small>
+          <div class="text-left ml-2 mt-2">
+            <small
+              class="text-muted bg-white"
+              v-if="showBottleneckMeta(feature) || showGaugeMeta(feature)"
+            >
+              Meta:
+            </small>
+            <hr style="margin-top:0.25em;margin-bottom:0.5em;" />
+          </div>
           <div
             v-if="showBottleneckMeta(feature)"
             class="ml-1 mb-1 text-left d-flex flex-column"
           >
-            <div>
+            <div class="d-flex">
               <font-awesome-icon
                 icon="caret-up"
                 fixed-width
@@ -52,9 +61,15 @@
                   'font-size': 'x-large'
                 }"
               />
-              <small class="my-auto">
-                {{ recency(feature) }}
-              </small>
+              <div class="d-flex flex-column">
+                <small
+                  v-for="(line, index) in recency(feature)"
+                  :key="index"
+                  class="bg-white my-auto text-wrap"
+                >
+                  {{ line }}
+                </small>
+              </div>
             </div>
             <div>
               <small><translate>According gauge data:</translate></small>
@@ -90,14 +105,14 @@
               <div class="d-flex flex-column">
                 <small
                   v-for="(line, index) in gmAvailability(feature)"
-                  class="bg-white my-auto text-wrap"
+                  class="bg-white my-auto"
                   :key="index"
                 >
                   {{ line }}
                 </small>
               </div>
             </div>
-            <div>
+            <div class="mt-2 d-flex">
               <font-awesome-icon
                 icon="caret-up"
                 fixed-width
@@ -106,11 +121,17 @@
                   'font-size': 'x-large'
                 }"
               />
-              <small class="my-auto">
-                {{ getGaugeStatusText(feature) }}
-              </small>
+              <div class="d-flex flex-column">
+                <small
+                  v-for="(line, index) in getGaugeStatusText(feature)"
+                  :key="index"
+                  class="bg-white my-auto"
+                >
+                  {{ line }}
+                </small>
+              </div>
             </div>
-            <div>
+            <div class="mt-2 d-flex">
               <font-awesome-icon
                 icon="caret-up"
                 fixed-width
@@ -119,11 +140,18 @@
                   'font-size': 'x-large'
                 }"
               />
-              <small class="my-auto">
-                {{ forecastAccuracy(feature) }}
-              </small>
+              <div style="line-height:1.1em" class="d-flex flex-column">
+                <small
+                  v-for="(line, index) in forecastAccuracy(feature)"
+                  :key="index"
+                  class="bg-white my-auto"
+                >
+                  {{ line }}
+                </small>
+              </div>
             </div>
           </div>
+          <hr style="margin-top:0.5em;margin-bottom:0.25em;" />
           <div>
             <small
               v-for="prop in featureProps(feature)"
@@ -282,15 +310,17 @@
         ? Number(this.gaugeCoeffs[0].value).toFixed(2)
         : "";
       const messagesPerState = {
-        OK:
+        OK: [
           this.$gettext("Nash-Sutcliffe") +
-          `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`,
-        WARNING:
-          this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`,
-        DANGER:
-          this.$gettext("Nash-Sutcliffe") +
-          ` (${coeffDanger} < ${nsc24} / 72h)`,
-        NEUTRAL: this.$gettext("Nash-Sutcliffe not available")
+            `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`
+        ],
+        WARNING: [
+          this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`
+        ],
+        DANGER: [
+          this.$gettext("Nash-Sutcliffe") + ` (${coeffDanger} < ${nsc24} / 72h)`
+        ],
+        NEUTRAL: [this.$gettext("Nash-Sutcliffe not available")]
       };
       return messagesPerState[this.gaugeStatus];
     },
@@ -311,15 +341,17 @@
         ? Number(this.refGaugeCoeffs[0].value).toFixed(2)
         : "";
       const messagesPerState = {
-        OK:
+        OK: [
           this.$gettext("Nash-Sutcliffe") +
-          `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`,
-        WARNING:
-          this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`,
-        DANGER:
-          this.$gettext("Nash-Sutcliffe") +
-          ` (${coeffDanger} < ${nsc24} / 72h)`,
-        NEUTRAL: this.$gettext("Nash-Sutcliffe not available")
+            `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`
+        ],
+        WARNING: [
+          this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`
+        ],
+        DANGER: [
+          this.$gettext("Nash-Sutcliffe") + ` (${coeffDanger} < ${nsc24} / 72h)`
+        ],
+        NEUTRAL: [this.$gettext("Nash-Sutcliffe not available")]
       };
       return messagesPerState[this.refGaugeStatus];
     }
@@ -376,7 +408,8 @@
       const in14Days = gauge.get("gm_n_14d");
       const messagesPerState = {
         OK: [
-          this.$gettext("Avail: Last measurement from") + `${lastMeasureDate}`,
+          this.$gettext("Avail: Latest measurement from") +
+            `${lastMeasureDate}`,
           this.$gettext("Measurement is within") + ` ${latestInHours}h`,
           `${in14Days} / ${measurementsIn14D} ${this.$gettext(
             "measurements"
@@ -394,9 +427,7 @@
           `(${lastMeasureDate})`
         ]
       };
-      let result = classifications.gmAvailability(feature);
-      result = "OK";
-      return messagesPerState[result];
+      return messagesPerState[classifications.gmAvailability(feature)];
     },
     gmAvailabilityColor(feature) {
       return gmAvailabilityColorCodes[classifications.gmAvailability(feature)];
@@ -407,16 +438,20 @@
       const fa3d = feature.get("forecast_accuracy_3d");
       const fa1d = feature.get("forecast_accuracy_1d");
       const messagesPerState = {
-        OK:
-          this.$gettext("Highest confidence") +
-          ` <${offset24} cm/24h, <${offset72} cm/72h`,
-        WARNING:
-          this.$gettext("Confidence per 72h") +
-          ` (${fa3d} cm > ${offset72} cm)`,
-        DANGER:
+        OK: [
+          this.$gettext("Highest confidence"),
+          `${fa1d} < ${offset24} cm/24h`,
+          `${fa3d} < ${offset72} cm/72h`
+        ],
+        WARNING: [
+          this.$gettext("Confidence per 72h") + ` (${fa3d} cm > ${offset72} cm)`
+        ],
+        DANGER: [
           this.$gettext("Confidence per 24h") + ` (${fa1d} cm > ${offset24} cm)`
+        ],
+        NEUTRAL: [this.$gettext("Predictions not available")]
       };
-      return messagesPerState[[classifications.forecastAccuracy(feature)]];
+      return messagesPerState[classifications.forecastAccuracy(feature)];
     },
     forecastAccuracyColor(feature) {
       return forecastAccuracyColorCodes[
@@ -426,16 +461,26 @@
     recency(feature) {
       const revisitingFactor = this.config.bn_revtime_multiplier;
       const revisitingTime = feature.get("revisiting_time");
+      if (!revisitingTime) return [this.$gettext("No revisiting time defined")];
+      const latest = feature.get("date_max");
+      if (!latest) return [this.$gettext("No survey-data available")];
+      const latestMeasurement = filters.surveyDate(new Date(latest));
       const messagesPerState = {
-        OK:
+        OK: [
           this.$gettext("Data within the revisiting time") +
-          ` (${revisitingTime}d)`,
-        WARNING:
+            ` (${revisitingTime} mth)`,
+          `${this.$gettext("Latest measurement")} ${latestMeasurement}`
+        ],
+        WARNING: [
           this.$gettext("Data within revisiting treshold") +
-          ` (${revisitingTime} * ${revisitingFactor})`,
-        DANGER:
+            ` (${revisitingFactor} * ${revisitingTime})`,
+          `${this.$gettext("Latest measurement")} ${latestMeasurement}`
+        ],
+        DANGER: [
           this.$gettext("Data too old. Treshold:") +
-          ` (${revisitingTime}d * ${revisitingFactor})`
+            ` (${revisitingFactor} * ${revisitingTime}mth)`,
+          `${this.$gettext("Latest measurement")} ${latestMeasurement}`
+        ]
       };
       return messagesPerState[classifications.surveyRecency(feature)];
     },