Mercurial > gemma

comparison client/src/components/identify/Identify.vue @ 4438:04bdc1f444bc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
identify: improve legend
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 19 Sep 2019 16:49:25 +0200
parents a66275cf4490
children 3bcd4a27bef0
comparison
equal deleted inserted replaced
4437:a075da82e875 4438:04bdc1f444bc
37 class="btn btn-info btn-xs pointer rounded-0 zoom-btn" 37 class="btn btn-info btn-xs pointer rounded-0 zoom-btn"
38 > 38 >
39 <font-awesome-icon icon="crosshairs" /> 39 <font-awesome-icon icon="crosshairs" />
40 </a> 40 </a>
41 </small> 41 </small>
42 <div class="text-left ml-2 mt-2">
43 <small
44 class="text-muted bg-white"
45 v-if="showBottleneckMeta(feature) || showGaugeMeta(feature)"
46 >
47 Meta:
48 </small>
49 <hr style="margin-top:0.25em;margin-bottom:0.5em;" />
50 </div>
42 <div 51 <div
43 v-if="showBottleneckMeta(feature)" 52 v-if="showBottleneckMeta(feature)"
44 class="ml-1 mb-1 text-left d-flex flex-column" 53 class="ml-1 mb-1 text-left d-flex flex-column"
45 > 54 >
46 <div> 55 <div class="d-flex">
47 <font-awesome-icon 56 <font-awesome-icon
48 icon="caret-up" 57 icon="caret-up"
49 fixed-width 58 fixed-width
50 :style="{ 59 :style="{
51 color: recencyColor(feature), 60 color: recencyColor(feature),
52 'font-size': 'x-large' 61 'font-size': 'x-large'
53 }" 62 }"
54 /> 63 />
55 <small class="my-auto"> 64 <div class="d-flex flex-column">
56 {{ recency(feature) }} 65 <small
57 </small> 66 v-for="(line, index) in recency(feature)"
67 :key="index"
68 class="bg-white my-auto text-wrap"
69 >
70 {{ line }}
71 </small>
72 </div>
58 </div> 73 </div>
59 <div> 74 <div>
60 <small><translate>According gauge data:</translate></small> 75 <small><translate>According gauge data:</translate></small>
61 </div> 76 </div>
62 </div> 77 </div>
88 /> 103 />
89 </div> 104 </div>
90 <div class="d-flex flex-column"> 105 <div class="d-flex flex-column">
91 <small 106 <small
92 v-for="(line, index) in gmAvailability(feature)" 107 v-for="(line, index) in gmAvailability(feature)"
93 class="bg-white my-auto text-wrap" 108 class="bg-white my-auto"
94 :key="index" 109 :key="index"
95 > 110 >
96 {{ line }} 111 {{ line }}
97 </small> 112 </small>
98 </div> 113 </div>
99 </div> 114 </div>
100 <div> 115 <div class="mt-2 d-flex">
101 <font-awesome-icon 116 <font-awesome-icon
102 icon="caret-up" 117 icon="caret-up"
103 fixed-width 118 fixed-width
104 :style="{ 119 :style="{
105 color: getGaugeStatusColor(feature), 120 color: getGaugeStatusColor(feature),
106 'font-size': 'x-large' 121 'font-size': 'x-large'
107 }" 122 }"
108 /> 123 />
109 <small class="my-auto"> 124 <div class="d-flex flex-column">
110 {{ getGaugeStatusText(feature) }} 125 <small
111 </small> 126 v-for="(line, index) in getGaugeStatusText(feature)"
127 :key="index"
128 class="bg-white my-auto"
129 >
130 {{ line }}
131 </small>
132 </div>
112 </div> 133 </div>
113 <div> 134 <div class="mt-2 d-flex">
114 <font-awesome-icon 135 <font-awesome-icon
115 icon="caret-up" 136 icon="caret-up"
116 fixed-width 137 fixed-width
117 :style="{ 138 :style="{
118 color: forecastAccuracyColor(feature), 139 color: forecastAccuracyColor(feature),
119 'font-size': 'x-large' 140 'font-size': 'x-large'
120 }" 141 }"
121 /> 142 />
122 <small class="my-auto"> 143 <div style="line-height:1.1em" class="d-flex flex-column">
123 {{ forecastAccuracy(feature) }} 144 <small
124 </small> 145 v-for="(line, index) in forecastAccuracy(feature)"
146 :key="index"
147 class="bg-white my-auto"
148 >
149 {{ line }}
150 </small>
151 </div>
125 </div> 152 </div>
126 </div> 153 </div>
154 <hr style="margin-top:0.5em;margin-bottom:0.25em;" />
127 <div> 155 <div>
128 <small 156 <small
129 v-for="prop in featureProps(feature)" 157 v-for="prop in featureProps(feature)"
130 :key="prop.key" 158 :key="prop.key"
131 v-if="prop.val" 159 v-if="prop.val"
280 : ""; 308 : "";
281 const coeffDanger = this.gaugeCoeffs 309 const coeffDanger = this.gaugeCoeffs
282 ? Number(this.gaugeCoeffs[0].value).toFixed(2) 310 ? Number(this.gaugeCoeffs[0].value).toFixed(2)
283 : ""; 311 : "";
284 const messagesPerState = { 312 const messagesPerState = {
285 OK: 313 OK: [
286 this.$gettext("Nash-Sutcliffe") + 314 this.$gettext("Nash-Sutcliffe") +
287 `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`, 315 `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`
288 WARNING: 316 ],
289 this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`, 317 WARNING: [
290 DANGER: 318 this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`
291 this.$gettext("Nash-Sutcliffe") + 319 ],
292 ` (${coeffDanger} < ${nsc24} / 72h)`, 320 DANGER: [
293 NEUTRAL: this.$gettext("Nash-Sutcliffe not available") 321 this.$gettext("Nash-Sutcliffe") + ` (${coeffDanger} < ${nsc24} / 72h)`
322 ],
323 NEUTRAL: [this.$gettext("Nash-Sutcliffe not available")]
294 }; 324 };
295 return messagesPerState[this.gaugeStatus]; 325 return messagesPerState[this.gaugeStatus];
296 }, 326 },
297 refGaugeStatusColor() { 327 refGaugeStatusColor() {
298 return forecastVsRealityColorCodes[this.refGaugeStatus]; 328 return forecastVsRealityColorCodes[this.refGaugeStatus];
309 : ""; 339 : "";
310 const coeffDanger = this.refGaugeCoeffs 340 const coeffDanger = this.refGaugeCoeffs
311 ? Number(this.refGaugeCoeffs[0].value).toFixed(2) 341 ? Number(this.refGaugeCoeffs[0].value).toFixed(2)
312 : ""; 342 : "";
313 const messagesPerState = { 343 const messagesPerState = {
314 OK: 344 OK: [
315 this.$gettext("Nash-Sutcliffe") + 345 this.$gettext("Nash-Sutcliffe") +
316 `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`, 346 `(${coeffDanger} >${nsc24} /24h ${coeffWarn} >${nsc72} / 72h)`
317 WARNING: 347 ],
318 this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`, 348 WARNING: [
319 DANGER: 349 this.$gettext("Nash-Sutcliffe") + ` (${coeffWarn} < ${nsc72} / 72h)`
320 this.$gettext("Nash-Sutcliffe") + 350 ],
321 ` (${coeffDanger} < ${nsc24} / 72h)`, 351 DANGER: [
322 NEUTRAL: this.$gettext("Nash-Sutcliffe not available") 352 this.$gettext("Nash-Sutcliffe") + ` (${coeffDanger} < ${nsc24} / 72h)`
353 ],
354 NEUTRAL: [this.$gettext("Nash-Sutcliffe not available")]
323 }; 355 };
324 return messagesPerState[this.refGaugeStatus]; 356 return messagesPerState[this.refGaugeStatus];
325 } 357 }
326 }, 358 },
327 watch: { 359 watch: {
374 const gauge = classifications.getGauge(feature); 406 const gauge = classifications.getGauge(feature);
375 const lastMeasureDate = filters.surveyDate(gauge.get("gm_measuredate")); 407 const lastMeasureDate = filters.surveyDate(gauge.get("gm_measuredate"));
376 const in14Days = gauge.get("gm_n_14d"); 408 const in14Days = gauge.get("gm_n_14d");
377 const messagesPerState = { 409 const messagesPerState = {
378 OK: [ 410 OK: [
379 this.$gettext("Avail: Last measurement from") + `${lastMeasureDate}`, 411 this.$gettext("Avail: Latest measurement from") +
412 `${lastMeasureDate}`,
380 this.$gettext("Measurement is within") + ` ${latestInHours}h`, 413 this.$gettext("Measurement is within") + ` ${latestInHours}h`,
381 `${in14Days} / ${measurementsIn14D} ${this.$gettext( 414 `${in14Days} / ${measurementsIn14D} ${this.$gettext(
382 "measurements" 415 "measurements"
383 )} in 14d` 416 )} in 14d`
384 ], 417 ],
392 this.$gettext("Avail: Latest measurement older than") + 425 this.$gettext("Avail: Latest measurement older than") +
393 ` ${latestInHours} d`, 426 ` ${latestInHours} d`,
394 `(${lastMeasureDate})` 427 `(${lastMeasureDate})`
395 ] 428 ]
396 }; 429 };
397 let result = classifications.gmAvailability(feature); 430 return messagesPerState[classifications.gmAvailability(feature)];
398 result = "OK";
399 return messagesPerState[result];
400 }, 431 },
401 gmAvailabilityColor(feature) { 432 gmAvailabilityColor(feature) {
402 return gmAvailabilityColorCodes[classifications.gmAvailability(feature)]; 433 return gmAvailabilityColorCodes[classifications.gmAvailability(feature)];
403 }, 434 },
404 forecastAccuracy(feature) { 435 forecastAccuracy(feature) {
405 const offset24 = this.config.gm_forecast_offset_24h; 436 const offset24 = this.config.gm_forecast_offset_24h;
406 const offset72 = this.config.gm_forecast_offset_72h; 437 const offset72 = this.config.gm_forecast_offset_72h;
407 const fa3d = feature.get("forecast_accuracy_3d"); 438 const fa3d = feature.get("forecast_accuracy_3d");
408 const fa1d = feature.get("forecast_accuracy_1d"); 439 const fa1d = feature.get("forecast_accuracy_1d");
409 const messagesPerState = { 440 const messagesPerState = {
410 OK: 441 OK: [
411 this.$gettext("Highest confidence") + 442 this.$gettext("Highest confidence"),
412 ` <${offset24} cm/24h, <${offset72} cm/72h`, 443 `${fa1d} < ${offset24} cm/24h`,
413 WARNING: 444 `${fa3d} < ${offset72} cm/72h`
414 this.$gettext("Confidence per 72h") + 445 ],
415 ` (${fa3d} cm > ${offset72} cm)`, 446 WARNING: [
416 DANGER: 447 this.$gettext("Confidence per 72h") + ` (${fa3d} cm > ${offset72} cm)`
448 ],
449 DANGER: [
417 this.$gettext("Confidence per 24h") + ` (${fa1d} cm > ${offset24} cm)` 450 this.$gettext("Confidence per 24h") + ` (${fa1d} cm > ${offset24} cm)`
451 ],
452 NEUTRAL: [this.$gettext("Predictions not available")]
418 }; 453 };
419 return messagesPerState[[classifications.forecastAccuracy(feature)]]; 454 return messagesPerState[classifications.forecastAccuracy(feature)];
420 }, 455 },
421 forecastAccuracyColor(feature) { 456 forecastAccuracyColor(feature) {
422 return forecastAccuracyColorCodes[ 457 return forecastAccuracyColorCodes[
423 classifications.forecastAccuracy(feature) 458 classifications.forecastAccuracy(feature)
424 ]; 459 ];
425 }, 460 },
426 recency(feature) { 461 recency(feature) {
427 const revisitingFactor = this.config.bn_revtime_multiplier; 462 const revisitingFactor = this.config.bn_revtime_multiplier;
428 const revisitingTime = feature.get("revisiting_time"); 463 const revisitingTime = feature.get("revisiting_time");
464 if (!revisitingTime) return [this.$gettext("No revisiting time defined")];
465 const latest = feature.get("date_max");
466 if (!latest) return [this.$gettext("No survey-data available")];
467 const latestMeasurement = filters.surveyDate(new Date(latest));
429 const messagesPerState = { 468 const messagesPerState = {
430 OK: 469 OK: [
431 this.$gettext("Data within the revisiting time") + 470 this.$gettext("Data within the revisiting time") +
432 ` (${revisitingTime}d)`, 471 ` (${revisitingTime} mth)`,
433 WARNING: 472 `${this.$gettext("Latest measurement")} ${latestMeasurement}`
473 ],
474 WARNING: [
434 this.$gettext("Data within revisiting treshold") + 475 this.$gettext("Data within revisiting treshold") +
435 ` (${revisitingTime} * ${revisitingFactor})`, 476 ` (${revisitingFactor} * ${revisitingTime})`,
436 DANGER: 477 `${this.$gettext("Latest measurement")} ${latestMeasurement}`
478 ],
479 DANGER: [
437 this.$gettext("Data too old. Treshold:") + 480 this.$gettext("Data too old. Treshold:") +
438 ` (${revisitingTime}d * ${revisitingFactor})` 481 ` (${revisitingFactor} * ${revisitingTime}mth)`,
482 `${this.$gettext("Latest measurement")} ${latestMeasurement}`
483 ]
439 }; 484 };
440 return messagesPerState[classifications.surveyRecency(feature)]; 485 return messagesPerState[classifications.surveyRecency(feature)];
441 }, 486 },
442 recencyColor(feature) { 487 recencyColor(feature) {
443 return recencyColorCodes[classifications.surveyRecency(feature)]; 488 return recencyColorCodes[classifications.surveyRecency(feature)];