Mercurial > gemma
changeset 4438:04bdc1f444bc
identify: improve legend
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 19 Sep 2019 16:49:25 +0200 |
parents | a075da82e875 |
children | 3bcd4a27bef0 |
files | client/src/components/identify/Identify.vue |
diffstat | 1 files changed, 92 insertions(+), 47 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue Thu Sep 19 15:33:22 2019 +0200 +++ b/client/src/components/identify/Identify.vue Thu Sep 19 16:49:25 2019 +0200 @@ -39,11 +39,20 @@ <font-awesome-icon icon="crosshairs" /> </a> </small> + <div class="text-left ml-2 mt-2"> + <small + class="text-muted bg-white" + v-if="showBottleneckMeta(feature) || showGaugeMeta(feature)" + > + Meta: + </small> + <hr style="margin-top:0.25em;margin-bottom:0.5em;" /> + </div> <div v-if="showBottleneckMeta(feature)" class="ml-1 mb-1 text-left d-flex flex-column" > - <div> + <div class="d-flex"> <font-awesome-icon icon="caret-up" fixed-width @@ -52,9 +61,15 @@ 'font-size': 'x-large' }" /> - <small class="my-auto"> - {{ recency(feature) }} - </small> + <div class="d-flex flex-column"> + <small + v-for="(line, index) in recency(feature)" + :key="index" + class="bg-white my-auto text-wrap" + > + {{ line }} + </small> + </div> </div> <div> <small><translate>According gauge data:</translate></small> @@ -90,14 +105,14 @@ <div class="d-flex flex-column"> <small v-for="(line, index) in gmAvailability(feature)" - class="bg-white my-auto text-wrap" + class="bg-white my-auto" :key="index" > {{ line }} </small> </div> </div> - <div> + <div class="mt-2 d-flex"> <font-awesome-icon icon="caret-up" fixed-width @@ -106,11 +121,17 @@ 'font-size': 'x-large' }" /> - <small class="my-auto"> - {{ getGaugeStatusText(feature) }} - </small> + <div class="d-flex flex-column"> + <small + v-for="(line, index) in getGaugeStatusText(feature)" + :key="index" + class="bg-white my-auto" + > + {{ line }} + </small> + </div> </div> - <div> + <div class="mt-2 d-flex"> <font-awesome-icon icon="caret-up" fixed-width @@ -119,11 +140,18 @@ 'font-size': 'x-large' }" /> - <small class="my-auto"> - {{ forecastAccuracy(feature) }} - </small> + <div style="line-height:1.1em" class="d-flex flex-column"> + <small + v-for="(line, index) in forecastAccuracy(feature)" + :key="index" + class="bg-white my-auto" + > + {{ line }} + </small> + </div> </div> </div> + <hr style="margin-top:0.5em;margin-bottom:0.25em;" /> <div> <small v-for="prop in featureProps(feature)" @@ -282,15 +310,17 @@ ? Number(this.gaugeCoeffs[0].value).toFixed(2) : ""; const messagesPerState = { - OK: + OK: [ this.$gettext("Nash-Sutcliffe") + - `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`, - WARNING: - this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`, - DANGER: - this.$gettext("Nash-Sutcliffe") + - ` (${coeffDanger} < ${nsc24} / 72h)`, - NEUTRAL: this.$gettext("Nash-Sutcliffe not available") + `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)` + ], + WARNING: [ + this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)` + ], + DANGER: [ + this.$gettext("Nash-Sutcliffe") + ` (${coeffDanger} < ${nsc24} / 72h)` + ], + NEUTRAL: [this.$gettext("Nash-Sutcliffe not available")] }; return messagesPerState[this.gaugeStatus]; }, @@ -311,15 +341,17 @@ ? Number(this.refGaugeCoeffs[0].value).toFixed(2) : ""; const messagesPerState = { - OK: + OK: [ this.$gettext("Nash-Sutcliffe") + - `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`, - WARNING: - this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`, - DANGER: - this.$gettext("Nash-Sutcliffe") + - ` (${coeffDanger} < ${nsc24} / 72h)`, - NEUTRAL: this.$gettext("Nash-Sutcliffe not available") + `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)` + ], + WARNING: [ + this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)` + ], + DANGER: [ + this.$gettext("Nash-Sutcliffe") + ` (${coeffDanger} < ${nsc24} / 72h)` + ], + NEUTRAL: [this.$gettext("Nash-Sutcliffe not available")] }; return messagesPerState[this.refGaugeStatus]; } @@ -376,7 +408,8 @@ const in14Days = gauge.get("gm_n_14d"); const messagesPerState = { OK: [ - this.$gettext("Avail: Last measurement from") + `${lastMeasureDate}`, + this.$gettext("Avail: Latest measurement from") + + `${lastMeasureDate}`, this.$gettext("Measurement is within") + ` ${latestInHours}h`, `${in14Days} / ${measurementsIn14D} ${this.$gettext( "measurements" @@ -394,9 +427,7 @@ `(${lastMeasureDate})` ] }; - let result = classifications.gmAvailability(feature); - result = "OK"; - return messagesPerState[result]; + return messagesPerState[classifications.gmAvailability(feature)]; }, gmAvailabilityColor(feature) { return gmAvailabilityColorCodes[classifications.gmAvailability(feature)]; @@ -407,16 +438,20 @@ 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") + - ` (${fa3d} cm > ${offset72} cm)`, - DANGER: + OK: [ + this.$gettext("Highest confidence"), + `${fa1d} < ${offset24} cm/24h`, + `${fa3d} < ${offset72} cm/72h` + ], + WARNING: [ + this.$gettext("Confidence per 72h") + ` (${fa3d} cm > ${offset72} cm)` + ], + DANGER: [ this.$gettext("Confidence per 24h") + ` (${fa1d} cm > ${offset24} cm)` + ], + NEUTRAL: [this.$gettext("Predictions not available")] }; - return messagesPerState[[classifications.forecastAccuracy(feature)]]; + return messagesPerState[classifications.forecastAccuracy(feature)]; }, forecastAccuracyColor(feature) { return forecastAccuracyColorCodes[ @@ -426,16 +461,26 @@ recency(feature) { const revisitingFactor = this.config.bn_revtime_multiplier; const revisitingTime = feature.get("revisiting_time"); + if (!revisitingTime) return [this.$gettext("No revisiting time defined")]; + const latest = feature.get("date_max"); + if (!latest) return [this.$gettext("No survey-data available")]; + const latestMeasurement = filters.surveyDate(new Date(latest)); const messagesPerState = { - OK: + OK: [ this.$gettext("Data within the revisiting time") + - ` (${revisitingTime}d)`, - WARNING: + ` (${revisitingTime} mth)`, + `${this.$gettext("Latest measurement")} ${latestMeasurement}` + ], + WARNING: [ this.$gettext("Data within revisiting treshold") + - ` (${revisitingTime} * ${revisitingFactor})`, - DANGER: + ` (${revisitingFactor} * ${revisitingTime})`, + `${this.$gettext("Latest measurement")} ${latestMeasurement}` + ], + DANGER: [ this.$gettext("Data too old. Treshold:") + - ` (${revisitingTime}d * ${revisitingFactor})` + ` (${revisitingFactor} * ${revisitingTime}mth)`, + `${this.$gettext("Latest measurement")} ${latestMeasurement}` + ] }; return messagesPerState[classifications.surveyRecency(feature)]; },