Mercurial > gemma
changeset 4279:30f26bf7ff24
Reordering of elements
In order to improve user experience the configuration of avail, forceast vs. real and accuracy was
changed in such a way, that it now mirrors the optics of the displayed triangle.
The order in the identify tool was changed accordingly 1) avail 2) forcast vs. real 3) accuracy
"Currency" was cleaned up to "recency"
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 29 Aug 2019 15:04:02 +0200 |
parents | 1d4e588a61df |
children | 2f2dbd3ebaea |
files | client/src/components/identify/Identify.vue client/src/components/map/styles.js client/src/components/systemconfiguration/DataAccuracy.vue client/src/lib/classifications.js |
diffstat | 4 files changed, 89 insertions(+), 89 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue Thu Aug 29 09:42:34 2019 +0200 +++ b/client/src/components/identify/Identify.vue Thu Aug 29 15:04:02 2019 +0200 @@ -64,19 +64,6 @@ 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' }" @@ -98,6 +85,19 @@ {{ forecastVsReality(feature) }} </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> <div> <small @@ -294,10 +294,10 @@ DANGER: this.$gettext("Data too old. Treshold:") + ` (${revisitingFactor})` }; - return messagesPerState[classifications.surveyCurrency(feature)]; + return messagesPerState[classifications.surveyRecency(feature)]; }, recencyColor(feature) { - return recencyColorCodes[classifications.surveyCurrency(feature)]; + return recencyColorCodes[classifications.surveyRecency(feature)]; }, showBottleneckMeta(feature) { const result = /bottleneck/.test(feature.getId().toLowerCase());
--- a/client/src/components/map/styles.js Thu Aug 29 09:42:34 2019 +0200 +++ b/client/src/components/map/styles.js Thu Aug 29 15:04:02 2019 +0200 @@ -308,7 +308,7 @@ feature.getId().indexOf("bottlenecks") > -1 ) { let colorUniformTriangle = - recencyColorCodes[classifications.surveyCurrency(feature)]; + recencyColorCodes[classifications.surveyRecency(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/components/systemconfiguration/DataAccuracy.vue Thu Aug 29 09:42:34 2019 +0200 +++ b/client/src/components/systemconfiguration/DataAccuracy.vue Thu Aug 29 15:04:02 2019 +0200 @@ -4,7 +4,7 @@ <div class="row"> <div class="col-sm-6 d-flex flex-column"> <h6 class="font-weight-bold"> - <translate>Currency of Bottleneck Surveys</translate> + <translate>Recency of Bottleneck Surveys</translate> </h6> <div class="d-flex flex-grow-1 text-center small"> <div class="card rounded-left"> @@ -122,6 +122,77 @@ </div> <div class="col-sm-6 d-flex flex-column"> <h6 class="font-weight-bold mt-3"> + <translate>Gauge Forecast vs. Reality</translate> + </h6> + <div class="d-flex flex-grow-1 text-center small"> + <div class="card rounded-left"> + <div class="card-header">OK</div> + <div + class="card-body d-flex align-items-center justify-content-center" + > + <span + v-translate="{ + nsc24: Number( + config.gm_forecast_vs_reality_nsc_24h + ).toLocaleString(), + nsc72: Number( + config.gm_forecast_vs_reality_nsc_72h + ).toLocaleString() + }" + >The Nash-Sutcliffe coefficient is greater than + <b>%{nsc24}</b> + for last 24 hours and greater than + <b>%{nsc72}</b> + for last 72 hours.</span + > + </div> + </div> + <div class="card border-left-0 border-right-0 rounded-0"> + <div class="card-header rounded-0"> + Warning + </div> + <div + class="card-body d-flex flex-column align-items-center justify-content-center" + > + <div class="form-inline justify-content-center"> + <translate + >The Nash-Sutcliffe coefficient for last 72 hours is less + than</translate + > + <input + type="number" + step="0.1" + class="form-control form-control-sm mx-1" + style="width: 70px" + v-model="config.gm_forecast_vs_reality_nsc_72h" + /> + </div> + </div> + </div> + <div class="card rounded-right"> + <div class="card-header">Critical</div> + <div + class="card-body d-flex flex-column align-items-center justify-content-center" + > + <div class="form-inline justify-content-center"> + <translate + >The Nash-Sutcliffe coefficient for last 24 hours is less + than</translate + > + <input + type="number" + step="0.1" + class="form-control form-control-sm mx-1" + style="width: 70px" + v-model="config.gm_forecast_vs_reality_nsc_24h" + /> + </div> + </div> + </div> + </div> + </div> + <div class="col-sm-6 d-flex flex-column"> + <h6 class="font-weight-bold mt-3"> <translate>Gauge Forecast Confidence</translate> </h6> <div class="d-flex flex-grow-1 text-center small"> @@ -193,77 +264,6 @@ </div> </div> </div> - <div class="col-sm-6 d-flex flex-column"> - <h6 class="font-weight-bold mt-3"> - <translate>Gauge Forecast vs. Reality</translate> - </h6> - <div class="d-flex flex-grow-1 text-center small"> - <div class="card rounded-left"> - <div class="card-header">OK</div> - <div - class="card-body d-flex align-items-center justify-content-center" - > - <span - v-translate="{ - nsc24: Number( - config.gm_forecast_vs_reality_nsc_24h - ).toLocaleString(), - nsc72: Number( - config.gm_forecast_vs_reality_nsc_72h - ).toLocaleString() - }" - >The Nash-Sutcliffe coefficient is greater than - <b>%{nsc24}</b> - for last 24 hours and greater than - <b>%{nsc72}</b> - for last 72 hours.</span - > - </div> - </div> - <div class="card border-left-0 border-right-0 rounded-0"> - <div class="card-header rounded-0"> - Warning - </div> - <div - class="card-body d-flex flex-column align-items-center justify-content-center" - > - <div class="form-inline justify-content-center"> - <translate - >The Nash-Sutcliffe coefficient for last 72 hours is less - than</translate - > - <input - type="number" - step="0.1" - class="form-control form-control-sm mx-1" - style="width: 70px" - v-model="config.gm_forecast_vs_reality_nsc_72h" - /> - </div> - </div> - </div> - <div class="card rounded-right"> - <div class="card-header">Critical</div> - <div - class="card-body d-flex flex-column align-items-center justify-content-center" - > - <div class="form-inline justify-content-center"> - <translate - >The Nash-Sutcliffe coefficient for last 24 hours is less - than</translate - > - <input - type="number" - step="0.1" - class="form-control form-control-sm mx-1" - style="width: 70px" - v-model="config.gm_forecast_vs_reality_nsc_24h" - /> - </div> - </div> - </div> - </div> - </div> </div> </div>
--- a/client/src/lib/classifications.js Thu Aug 29 09:42:34 2019 +0200 +++ b/client/src/lib/classifications.js Thu Aug 29 15:04:02 2019 +0200 @@ -32,7 +32,7 @@ }; export default { - surveyCurrency(bottleneck) { + surveyRecency(bottleneck) { if ( bottleneck.get("revisiting_time") === null || bottleneck.get("revisiting_time") === 0