Mercurial > gemma
changeset 4270:e4d6c6339cb4
identify_tool: accuracy legend improved
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 27 Aug 2019 17:07:16 +0200 |
parents | 837f90680d4c |
children | 315474a66589 |
files | client/src/components/identify/Identify.vue client/src/lib/classifications.js |
diffstat | 2 files changed, 82 insertions(+), 22 deletions(-) [+] |
line wrap: on
line diff
--- 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)]]; },
--- 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; };