changeset 4266:fbe2f1aa2757

styles: refactor color coding accuracy colors
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 27 Aug 2019 14:22:45 +0200
parents 2596a028dc3a
children c5642480eb9b
files client/src/components/identify/Identify.vue client/src/components/map/styles.js client/src/lib/classifications.js
diffstat 3 files changed, 46 insertions(+), 19 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue	Tue Aug 27 11:46:51 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Tue Aug 27 14:22:45 2019 +0200
@@ -161,7 +161,7 @@
 import classifications from "../../lib/classifications";
 import { styleFactory } from "@/components/map/styles";
 
-const colorCodes = styleFactory().colorCodes;
+const { currencyColorCodes } = styleFactory();
 
 export default {
   name: "identify",
@@ -191,7 +191,7 @@
       return messagesPerState[classifications.surveyCurrency(feature)];
     },
     currencyColor(feature) {
-      return colorCodes[classifications.surveyCurrency(feature)];
+      return currencyColorCodes[classifications.surveyCurrency(feature)];
     },
     showBottleneckMeta(feature) {
       const result = /bottleneck/.test(feature.getId().toLowerCase());
--- a/client/src/components/map/styles.js	Tue Aug 27 11:46:51 2019 +0200
+++ b/client/src/components/map/styles.js	Tue Aug 27 14:22:45 2019 +0200
@@ -130,14 +130,36 @@
 };
 
 const styleFactory = function(mapId) {
-  const colorCodes = {
+  const currencyColorCodes = {
+    OK: "lime",
+    WARNING: "yellow",
+    DANGER: "red",
+    NEUTRAL: "white"
+  };
+  const gmAvailabilityColorCodes = {
+    OK: "lime",
+    WARNING: "yellow",
+    DANGER: "red",
+    NEUTRAL: "white"
+  };
+  const forecastAccuracyColorCodes = {
+    OK: "lime",
+    WARNING: "yellow",
+    DANGER: "red",
+    NEUTRAL: "white"
+  };
+
+  const forecastVsRealityColorCodes = {
     OK: "lime",
     WARNING: "yellow",
     DANGER: "red",
     NEUTRAL: "white"
   };
   return {
-    colorCodes: colorCodes,
+    currencyColorCodes: currencyColorCodes,
+    gmAvailabilityColorCodes: gmAvailabilityColorCodes,
+    forecastAccuracyColorCodes: forecastAccuracyColorCodes,
+    forecastVsRealityColorCodes: forecastVsRealityColorCodes,
     stretches(feature) {
       let style = styles.yellow2;
       if (feature.get("highlighted")) {
@@ -242,9 +264,14 @@
         );
       } else {
         // TODO: Get information from feature and check the ranges according to #423, #424, #425
-        let colorWaterlevel = classifications.gmAvailability(feature);
-        let colorComparison = classifications.forecastVsReality(feature);
-        let colorAccuracy = classifications.forecastAccuracy(feature);
+        let colorWaterlevel =
+          gmAvailabilityColorCodes[classifications.gmAvailability(feature)];
+        let colorComparison =
+          forecastVsRealityColorCodes[
+            classifications.forecastVsReality(feature)
+          ];
+        let colorAccuracy =
+          forecastAccuracyColorCodes[classifications.forecastAccuracy(feature)];
         let map = store.getters["map/openLayersMap"](mapId);
         let geom = feature.getGeometry();
         if (!(geom instanceof Point)) {
@@ -281,7 +308,7 @@
           feature.getId().indexOf("bottlenecks") > -1
         ) {
           let colorUniformTriangle =
-            colorCodes[classifications.surveyCurrency(feature)];
+            currencyColorCodes[classifications.surveyCurrency(feature)];
           let frame = `<polyline points='16,0 32,28 0,28 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`;
           let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='28'><g>${frame}</g></svg>`;
           s.push(
--- a/client/src/lib/classifications.js	Tue Aug 27 11:46:51 2019 +0200
+++ b/client/src/lib/classifications.js	Tue Aug 27 14:22:45 2019 +0200
@@ -60,11 +60,11 @@
       // at least configured amount of measurements in last 14 days
       const valuesAtLeast = store.state.application.config.gm_min_values_14d;
       if (gmN !== undefined && gmN !== null && gmN >= valuesAtLeast) {
-        return "lime";
+        return "OK";
       }
-      return "yellow";
+      return "WARNING";
     }
-    return "red";
+    return "DANGER";
   },
   forecastAccuracy(feature) {
     let gauge = getGauge(feature);
@@ -72,14 +72,14 @@
     let fa1d = gauge.get("forecast_accuracy_1d");
     if (typeof fa3d == "number" && typeof fa1d == "number") {
       if (fa1d > store.state.application.config.gm_forecast_offset_24h) {
-        return "red";
+        return "DANGER";
       } else if (fa3d > store.state.application.config.gm_forecast_offset_72h) {
-        return "yellow";
+        return "WARNING";
       } else {
-        return "lime";
+        return "OK";
       }
     }
-    return "white";
+    return "NEUTRAL";
   },
   forecastVsReality(feature) {
     let gauge = getGauge(feature);
@@ -91,18 +91,18 @@
         nsc.coeffs[0].value <
           store.state.application.config.gm_forecast_vs_reality_nsc_24h
       )
-        return "red";
+        return "DANGER";
       // 72h < configured value
       if (
         nsc.coeffs[2].samples &&
         nsc.coeffs[2].value <
           store.state.application.config.gm_forecast_vs_reality_nsc_72h
       )
-        return "yellow";
+        return "WARNING";
       // both > configured value
-      return "lime";
+      return "OK";
     }
     // no data available
-    return "white";
+    return "NEUTRAL";
   }
 };