Mercurial > gemma
changeset 4349:4ed2708234b9
identify: improve legend. Add numbers
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 09 Sep 2019 14:24:14 +0200 |
parents | dc5a10542e16 |
children | e4e32c77ed83 |
files | client/src/components/identify/Identify.vue client/src/main.js |
diffstat | 2 files changed, 39 insertions(+), 14 deletions(-) [+] |
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)]; },
--- a/client/src/main.js Mon Sep 09 12:35:25 2019 +0200 +++ b/client/src/main.js Mon Sep 09 14:24:14 2019 +0200 @@ -53,6 +53,7 @@ faBars, faBook, faCaretUp, + faCaretDown, faChartArea, faChartBar, faChartLine, @@ -124,6 +125,7 @@ faBars, faBook, faCaretUp, + faCaretDown, faChartArea, faChartBar, faChartLine,