Mercurial > gemma
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"; } };