- +

+ + +

{{ gmAvailability(feature) }} @@ -250,8 +264,8 @@ const nsc72 = this.config.gm_forecast_vs_reality_nsc_72h; const messagesPerState = { OK: this.$gettext("Nash-Sutcliffe") + `>${nsc24} /24h >${nsc72} / 72h`, - WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72}`, - DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}`, + WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72} / 72h`, + DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24} / 72h`, NEUTRAL: this.$gettext("Nash-Sutcliffe not available") }; return messagesPerState[this.gaugeStatus]; @@ -264,8 +278,8 @@ const nsc72 = this.config.gm_forecast_vs_reality_nsc_72h; const messagesPerState = { OK: this.$gettext("Nash-Sutcliffe") + `>${nsc24} /24h >${nsc72} / 72h`, - WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72}`, - DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}`, + WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72} / 72h`, + DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24} / 72h`, NEUTRAL: this.$gettext("Nash-Sutcliffe not available") }; return messagesPerState[this.refGaugeStatus]; @@ -335,12 +349,17 @@ forecastAccuracy(feature) { const offset24 = this.config.gm_forecast_offset_24h; const offset72 = this.config.gm_forecast_offset_72h; + 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") + ` > ${offset72} cm`, - DANGER: this.$gettext("Confidence per 24h") + ` > ${offset24} cm` + WARNING: + this.$gettext("Confidence per 72h") + + ` (${fa3d} cm > ${offset72} cm)`, + DANGER: + this.$gettext("Confidence per 24h") + ` (${fa1d} cm > ${offset24} cm)` }; return messagesPerState[[classifications.forecastAccuracy(feature)]]; }, @@ -351,13 +370,17 @@ }, recency(feature) { const revisitingFactor = this.config.bn_revtime_multiplier; + const revisitingTime = feature.get("revisiting_time"); const messagesPerState = { - OK: this.$gettext("Data within the revisiting time"), + OK: + this.$gettext("Data within the revisiting time") + + ` (${revisitingTime}d)`, WARNING: this.$gettext("Data within revisiting treshold") + - ` (${revisitingFactor})`, + ` (${revisitingTime} * ${revisitingFactor})`, DANGER: - this.$gettext("Data too old. Treshold:") + ` (${revisitingFactor})` + this.$gettext("Data too old. Treshold:") + + ` (${revisitingTime}d * ${revisitingFactor})` }; return messagesPerState[classifications.surveyRecency(feature)]; }, diff -r e357730c090a -r 60efb69c4245 client/src/components/layers/LegendElement.vue --- a/client/src/components/layers/LegendElement.vue Mon Sep 09 15:16:31 2019 +0200 +++ b/client/src/components/layers/LegendElement.vue Mon Sep 09 15:17:13 2019 +0200 @@ -29,9 +29,11 @@ import Feature from "ol/Feature"; import { Vector as VectorLayer } from "ol/layer"; import { Vector as VectorSource } from "ol/source"; +import Polygon from "ol/geom/Polygon"; import LineString from "ol/geom/LineString"; import Point from "ol/geom/Point"; import { HTTP } from "@/lib/http"; +import { Stroke, Style, Fill } from "ol/style"; export default { props: ["layer"], @@ -135,7 +137,8 @@ recreateLayers() { let vector = this.createVectorLayer(); - this.myMap.removeLayer(this.myMap.getLayers()[0]); + this.myMap.removeLayer(this.myMap.getLayers().getArray()[0]); + this.myMap.addLayer(vector); }, initMap() { @@ -155,11 +158,29 @@ }, createVectorLayer() { let mapStyle = this.layer.getStyle(); - - let feature = new Feature({ - geometry: new LineString([[-1, -1], [0, 0], [1, 1]]) - }); - + let feature; + // show bottleneck legend as polygon + if (this.layer.get("id") === "BOTTLENECKS") { + feature = new Feature({ + geometry: new Polygon([ + [[-1.7, -1.2], [-1.7, 0.5], [1.7, 1.2], [1.7, -0.5]] + ]) + }); + mapStyle = new Style({ + stroke: new Stroke({ + color: mapStyle.getStroke().getColor(), + // reduce the stroke width for better layout in map legend. + width: 2 + }), + fill: new Fill({ + color: mapStyle.getFill().getColor() + }) + }); + } else { + feature = new Feature({ + geometry: new LineString([[-1, -1], [0, 0], [1, 1]]) + }); + } // special case if we need to call the style function with a special // parameter or to detect a point layer let legendStyle = this.layer.get("forLegendStyle"); diff -r e357730c090a -r 60efb69c4245 client/src/main.js --- a/client/src/main.js Mon Sep 09 15:16:31 2019 +0200 +++ b/client/src/main.js Mon Sep 09 15:17:13 2019 +0200 @@ -53,6 +53,7 @@ faBars, faBook, faCaretUp, + faCaretDown, faChartArea, faChartBar, faChartLine, @@ -124,6 +125,7 @@ faBars, faBook, faCaretUp, + faCaretDown, faChartArea, faChartBar, faChartLine, diff -r e357730c090a -r 60efb69c4245 client/src/store/fairwayavailability.js --- a/client/src/store/fairwayavailability.js Mon Sep 09 15:16:31 2019 +0200 +++ b/client/src/store/fairwayavailability.js Mon Sep 09 15:17:13 2019 +0200 @@ -178,12 +178,6 @@ setSelectedFairwayAvailability: (state, feature) => { state.selectedFairwayAvailabilityFeature = feature; }, - setFwLNWLData: (state, fwLNWLData) => { - state.fwLNWLData = fwLNWLData; - }, - setCSV: (state, csv) => { - state.csv = csv; - }, addFwLNWLOverviewData: (state, data) => { let existingIndex = state.fwLNWLOverviewData.findIndex( d => d.feature.get("id") === data.feature.get("id") @@ -212,6 +206,37 @@ }); state.fwData = transformAFD(csv); + }, + // See docs/developers.md for an example how to directly + // call this method for testing. + setAvailableFairwayDepthLNWLData: (state, data) => { + state.csv = data; + + data = data.split("\n").filter(d => d); + data.shift(); // remove header line + data = data.map(d => { + let columns = d.split(","); + let result; + if (columns.length === 6) { + result = { + date: columns[0], + ldc: Number(columns[2]), + below: Number(columns[3]), + between: Number(columns[4]), + above: Number(columns[5]) + }; + } else { + result = { + date: columns[0], + ldc: Number(columns[2]), + below: Number(columns[3]), + between: null, + above: Number(columns[4]) + }; + } + return result; + }); + state.fwLNWLData = data; } }, actions: { @@ -306,34 +331,8 @@ }); }, loadAvailableFairwayDepthLNWLDiagram: ({ commit, dispatch }, options) => { - dispatch("loadAvailableFairwayDepthLNWL", options).then(response => { - commit("setCSV", response); - let data = response.split("\n").filter(d => d); - data.shift(); // remove header line - data = data.map(d => { - let columns = d.split(","); - let result; - if (columns.length === 6) { - result = { - date: columns[0], - ldc: Number(columns[2]), - below: Number(columns[3]), - between: Number(columns[4]), - above: Number(columns[5]) - }; - } else { - result = { - date: columns[0], - ldc: Number(columns[2]), - below: Number(columns[3]), - between: null, - above: Number(columns[4]) - }; - } - return result; - }); - commit("setFwLNWLData", data); - return data; + dispatch("loadAvailableFairwayDepthLNWL", options).then(data => { + commit("setAvailableFairwayDepthLNWLData", data); }); }, loadAvailableFairwayDepthLNWLForMap: ({ dispatch }, options) => {