Mercurial > gemma

comparison client/src/components/identify/Identify.vue @ 4349:4ed2708234b9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
identify: improve legend. Add numbers
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 09 Sep 2019 14:24:14 +0200
parents dbd8d2416da7
children e4e32c77ed83
comparison
equal deleted inserted replaced
4348:dc5a10542e16 4349:4ed2708234b9
62 </div> 62 </div>
63 <div 63 <div
64 v-if="showGaugeMeta(feature)" 64 v-if="showGaugeMeta(feature)"
65 class="ml-2 mb-1 text-left d-flex flex-column" 65 class="ml-2 mb-1 text-left d-flex flex-column"
66 > 66 >
67 <div> 67 <div class="d-flex">
68 <font-awesome-icon 68 <div class="d-flex flex-column">
69 icon="caret-up" 69 <font-awesome-icon
70 fixed-width 70 icon="caret-up"
71 :style="{ 71 fixed-width
72 color: gmAvailabilityColor(feature), 72 :style="{
73 'font-size': 'x-large' 73 color: gmAvailabilityColor(feature),
74 }" 74 'font-size': 'x-large',
75 /> 75 position: 'relative',
76 top: '0.28em'
77 }"
78 />
79 <font-awesome-icon
80 icon="caret-down"
81 fixed-width
82 :style="{
83 color: gmAvailabilityColor(feature),
84 'font-size': 'x-large',
85 position: 'relative',
86 top: '-0.45em'
87 }"
88 />
89 </div>
76 <small class="my-auto"> 90 <small class="my-auto">
77 {{ gmAvailability(feature) }} 91 {{ gmAvailability(feature) }}
78 </small> 92 </small>
79 </div> 93 </div>
80 <div> 94 <div>
333 return gmAvailabilityColorCodes[classifications.gmAvailability(feature)]; 347 return gmAvailabilityColorCodes[classifications.gmAvailability(feature)];
334 }, 348 },
335 forecastAccuracy(feature) { 349 forecastAccuracy(feature) {
336 const offset24 = this.config.gm_forecast_offset_24h; 350 const offset24 = this.config.gm_forecast_offset_24h;
337 const offset72 = this.config.gm_forecast_offset_72h; 351 const offset72 = this.config.gm_forecast_offset_72h;
352 const fa3d = feature.get("forecast_accuracy_3d");
353 const fa1d = feature.get("forecast_accuracy_1d");
338 const messagesPerState = { 354 const messagesPerState = {
339 OK: 355 OK:
340 this.$gettext("Highest confidence") + 356 this.$gettext("Highest confidence") +
341 ` <${offset24} cm/24h, <${offset72} cm/72h`, 357 ` <${offset24} cm/24h, <${offset72} cm/72h`,
342 WARNING: this.$gettext("Confidence per 72h") + ` > ${offset72} cm`, 358 WARNING:
343 DANGER: this.$gettext("Confidence per 24h") + ` > ${offset24} cm` 359 this.$gettext("Confidence per 72h") +
360 ` (${fa3d} cm > ${offset72} cm)`,
361 DANGER:
362 this.$gettext("Confidence per 24h") + ` (${fa1d} cm > ${offset24} cm)`
344 }; 363 };
345 return messagesPerState[[classifications.forecastAccuracy(feature)]]; 364 return messagesPerState[[classifications.forecastAccuracy(feature)]];
346 }, 365 },
347 forecastAccuracyColor(feature) { 366 forecastAccuracyColor(feature) {
348 return forecastAccuracyColorCodes[ 367 return forecastAccuracyColorCodes[
349 classifications.forecastAccuracy(feature) 368 classifications.forecastAccuracy(feature)
350 ]; 369 ];
351 }, 370 },
352 recency(feature) { 371 recency(feature) {
353 const revisitingFactor = this.config.bn_revtime_multiplier; 372 const revisitingFactor = this.config.bn_revtime_multiplier;
373 const revisitingTime = feature.get("revisiting_time");
354 const messagesPerState = { 374 const messagesPerState = {
355 OK: this.$gettext("Data within the revisiting time"), 375 OK:
376 this.$gettext("Data within the revisiting time") +
377 ` (${revisitingTime}d)`,
356 WARNING: 378 WARNING:
357 this.$gettext("Data within revisiting treshold") + 379 this.$gettext("Data within revisiting treshold") +
358 ` (${revisitingFactor})`, 380 ` (${revisitingTime} * ${revisitingFactor})`,
359 DANGER: 381 DANGER:
360 this.$gettext("Data too old. Treshold:") + ` (${revisitingFactor})` 382 this.$gettext("Data too old. Treshold:") +
383 ` (${revisitingTime}d * ${revisitingFactor})`
361 }; 384 };
362 return messagesPerState[classifications.surveyRecency(feature)]; 385 return messagesPerState[classifications.surveyRecency(feature)];
363 }, 386 },
364 recencyColor(feature) { 387 recencyColor(feature) {
365 return recencyColorCodes[classifications.surveyRecency(feature)]; 388 return recencyColorCodes[classifications.surveyRecency(feature)];