diff client/src/components/identify/Identify.vue @ 4349:4ed2708234b9

identify: improve legend. Add numbers
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 09 Sep 2019 14:24:14 +0200
parents dbd8d2416da7
children e4e32c77ed83
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue	Mon Sep 09 12:35:25 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Mon Sep 09 14:24:14 2019 +0200
@@ -64,15 +64,29 @@
             v-if="showGaugeMeta(feature)"
             class="ml-2 mb-1 text-left d-flex flex-column"
           >
-            <div>
-              <font-awesome-icon
-                icon="caret-up"
-                fixed-width
-                :style="{
-                  color: gmAvailabilityColor(feature),
-                  'font-size': 'x-large'
-                }"
-              />
+            <div class="d-flex">
+              <div class="d-flex flex-column">
+                <font-awesome-icon
+                  icon="caret-up"
+                  fixed-width
+                  :style="{
+                    color: gmAvailabilityColor(feature),
+                    'font-size': 'x-large',
+                    position: 'relative',
+                    top: '0.28em'
+                  }"
+                />
+                <font-awesome-icon
+                  icon="caret-down"
+                  fixed-width
+                  :style="{
+                    color: gmAvailabilityColor(feature),
+                    'font-size': 'x-large',
+                    position: 'relative',
+                    top: '-0.45em'
+                  }"
+                />
+              </div>
               <small class="my-auto">
                 {{ gmAvailability(feature) }}
               </small>
@@ -335,12 +349,17 @@
     forecastAccuracy(feature) {
       const offset24 = this.config.gm_forecast_offset_24h;
       const offset72 = this.config.gm_forecast_offset_72h;
+      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") + ` > ${offset72} cm`,
-        DANGER: this.$gettext("Confidence per 24h") + ` > ${offset24} cm`
+        WARNING:
+          this.$gettext("Confidence per 72h") +
+          ` (${fa3d} cm > ${offset72} cm)`,
+        DANGER:
+          this.$gettext("Confidence per 24h") + ` (${fa1d} cm > ${offset24} cm)`
       };
       return messagesPerState[[classifications.forecastAccuracy(feature)]];
     },
@@ -351,13 +370,17 @@
     },
     recency(feature) {
       const revisitingFactor = this.config.bn_revtime_multiplier;
+      const revisitingTime = feature.get("revisiting_time");
       const messagesPerState = {
-        OK: this.$gettext("Data within the revisiting time"),
+        OK:
+          this.$gettext("Data within the revisiting time") +
+          ` (${revisitingTime}d)`,
         WARNING:
           this.$gettext("Data within revisiting treshold") +
-          ` (${revisitingFactor})`,
+          ` (${revisitingTime} * ${revisitingFactor})`,
         DANGER:
-          this.$gettext("Data too old. Treshold:") + ` (${revisitingFactor})`
+          this.$gettext("Data too old. Treshold:") +
+          ` (${revisitingTime}d * ${revisitingFactor})`
       };
       return messagesPerState[classifications.surveyRecency(feature)];
     },