Mercurial > gemma

comparison client/src/components/identify/Identify.vue @ 4270:e4d6c6339cb4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
identify_tool: accuracy legend improved
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 27 Aug 2019 17:07:16 +0200
parents 837f90680d4c
children 12398df5f414
comparison
equal deleted inserted replaced
4269:837f90680d4c 4270:e4d6c6339cb4
39 <font-awesome-icon icon="crosshairs" /> 39 <font-awesome-icon icon="crosshairs" />
40 </a> 40 </a>
41 </small> 41 </small>
42 <div 42 <div
43 v-if="showBottleneckMeta(feature)" 43 v-if="showBottleneckMeta(feature)"
44 class="ml-2 mb-1 text-left d-flex" 44 class="ml-2 mb-1 text-left d-flex flex-column"
45 > 45 >
46 <font-awesome-icon 46 <div>
47 icon="caret-up" 47 <font-awesome-icon
48 fixed-width 48 icon="caret-up"
49 :style="{ color: recencyColor(feature), 'font-size': 'x-large' }" 49 fixed-width
50 /> 50 :style="{
51 <small class="my-auto"> 51 color: recencyColor(feature),
52 {{ recency(feature) }} 52 'font-size': 'x-large'
53 }"
54 />
55 <small class="my-auto">
56 {{ recency(feature) }}
57 </small>
58 </div>
59 <div>
60 <small><translate>According gauge data:</translate></small>
61 </div>
62 <div>
63 <font-awesome-icon
64 icon="caret-up"
65 fixed-width
66 :style="{
67 color: forecastAccuracyColor(feature),
68 'font-size': 'x-large'
69 }"
70 />
71 <small class="my-auto">
72 {{ forecastAccuracy(feature) }}
73 </small>
74 </div>
75 <div>
76 <font-awesome-icon
77 icon="caret-up"
78 fixed-width
79 :style="{
80 color: gmAvailabilityColor(feature),
81 'font-size': 'x-large'
82 }"
83 />
84 <small class="my-auto">
85 {{ gmAvailability(feature) }}
86 </small>
87 </div>
88 <div>
89 <font-awesome-icon
90 icon="caret-up"
91 fixed-width
92 :style="{
93 color: forecastVsRealityColor(feature),
94 'font-size': 'x-large'
95 }"
96 />
97 <small class="my-auto">
98 {{ forecastVsReality(feature) }}
99 </small>
100 </div>
101 <small
102 v-for="prop in featureProps(feature)"
103 :key="prop.key"
104 v-if="prop.val"
105 class="d-flex justify-content-between px-2"
106 >
107 <b>{{ prop.key }}</b>
108 <span>{{ prop.val }}</span>
53 </small> 109 </small>
54 </div> 110 </div>
55 <small
56 v-for="prop in featureProps(feature)"
57 :key="prop.key"
58 v-if="prop.val"
59 class="d-flex justify-content-between px-2"
60 >
61 <b>{{ prop.key }}</b>
62 <span>{{ prop.val }}</span>
63 </small>
64 </div> 111 </div>
65 <div 112 <div
66 v-if="!currentMeasurement && !filteredIdentifiedFeatures.length" 113 v-if="!currentMeasurement && !filteredIdentifiedFeatures.length"
67 class="text-muted small text-center my-auto py-3 px-2" 114 class="text-muted small text-center my-auto py-3 px-2"
68 > 115 >
186 gmAvailability(feature) { 233 gmAvailability(feature) {
187 const latestInHours = this.config.gm_latest_hours; 234 const latestInHours = this.config.gm_latest_hours;
188 const measurementsIn14D = this.config.gm_min_values_14d; 235 const measurementsIn14D = this.config.gm_min_values_14d;
189 const messagesPerState = { 236 const messagesPerState = {
190 OK: 237 OK:
191 this.$gettext("Last measurement <") + 238 this.$gettext("Avail: Last measurement <") +
192 ` ${latestInHours} (${measurementsIn14D} in 14d)`, 239 ` ${latestInHours} (${measurementsIn14D} in 14d)`,
193 WARNING: 240 WARNING:
194 this.$gettext("Below treshold") + `: ${measurementsIn14D} in 14d`, 241 this.$gettext("Avail: Below treshold") +
242 `: ${measurementsIn14D} in 14d`,
195 DANGER: 243 DANGER:
196 this.$gettext("Latest measurement older than") + ` ${latestInHours} d` 244 this.$gettext("Avail: Latest measurement older than") +
245 ` ${latestInHours} d`
197 }; 246 };
198 return messagesPerState[[classifications.gmAvailability(feature)]]; 247 return messagesPerState[[classifications.gmAvailability(feature)]];
199 }, 248 },
200 gmAvailabilityColor(feature) { 249 gmAvailabilityColor(feature) {
201 return gmAvailabilityColorCodes[classifications.gmAvailability(feature)]; 250 return gmAvailabilityColorCodes[classifications.gmAvailability(feature)];
221 const nsc24 = this.config.gm_forecast_vs_reality_nsc_24h; 270 const nsc24 = this.config.gm_forecast_vs_reality_nsc_24h;
222 const nsc72 = this.config.gm_forecast_vs_reality_nsc_72h; 271 const nsc72 = this.config.gm_forecast_vs_reality_nsc_72h;
223 const messagesPerState = { 272 const messagesPerState = {
224 OK: this.$gettext("Nash-Sutcliffe") + `>${nsc24} /24h >${nsc72} / 72h`, 273 OK: this.$gettext("Nash-Sutcliffe") + `>${nsc24} /24h >${nsc72} / 72h`,
225 WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72}`, 274 WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72}`,
226 DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}` 275 DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}`,
276 NEUTRAL: this.$gettext("Nash-Sutcliffe not available")
227 }; 277 };
228 return messagesPerState[[classifications.forecastVsReality(feature)]]; 278 return messagesPerState[[classifications.forecastVsReality(feature)]];
229 }, 279 },
230 forecastVsRealityColor(feature) { 280 forecastVsRealityColor(feature) {
231 return forecastVsRealityColorCodes[ 281 return forecastVsRealityColorCodes[