Mercurial > gemma
changeset 4355:60efb69c4245 fa-round-in-backend
Merged default into fa-round-in-backend branch.
| author | Sascha Wilde <wilde@intevation.de> |
|---|---|
| date | Mon, 09 Sep 2019 15:17:13 +0200 |
| parents | e357730c090a (current diff) 6365466ead83 (diff) |
| children | 8a26225b6133 |
| files | |
| diffstat | 6 files changed, 149 insertions(+), 60 deletions(-) [+] |
line wrap: on
line diff
--- a/client/docs/developers.md Mon Sep 09 15:16:31 2019 +0200 +++ b/client/docs/developers.md Mon Sep 09 15:17:13 2019 +0200 @@ -5,6 +5,23 @@ ## Hints +### svg2pdf + +https://github.com/yWorks/svg2pdf.js has known shortcomings, +which we work around. + +Not all layout possibilities of webbrowser are not supported! + +Our tactics is to report the problems, but work around them, if we can, +some examples: + + * https://github.com/yWorks/svg2pdf.js/issues/82 (Unsupported features/Known issues) + * https://github.com/yWorks/svg2pdf.js/issues/109 (alignment-baseline attribute does not work) + * https://github.com/yWorks/svg2pdf.js/issues/100 (Font-size in `em` unit does not work) + + +### Testing diagram layout and pdf export + When testing the vuex store object can be accessed from the webbrowsers console like @@ -17,7 +34,7 @@ fairwayavailability (tested with Chromium 73 und gemma-2019-09-04): ```javascript -data = store.state.fairwayavailability.csv +data = store.state.fairwayavailability.csv // see current data data=`#time,# < LDC (164.0) [h],# >= LDC (164.0) [h],# < 230.0 [h],# >= 230.0 [h],# >= 250.0 [h] 01-2019,0 ,744, 0, 0,744 @@ -34,4 +51,29 @@ store.commit("fairwayavailability/setAvailableFairwayDepthData", data) ``` +Or for the AvailableFairwayDepthLNWLDiagram: +```javascript +data = store.state.fairwayavailability.csv // see current data + +data=` +#time,# < LDC (162.0) [h],# >= LDC (162.0) [h],#d < 230.0 [%],#d >= 230.0 [%],#d >= 250.0 [%] +09-2018,100, 0,100 , 0, 0 +10-2018,100, 0, 80 , 20, 0 +11-2018,100, 0, 0 , 100, 0 +12-2018, 80, 20, 50 , 50, 0 +01-2019, 70, 30, 15 , 60, 25 +02-2019, 65, 35, 40 , 40, 20 +03-2019, 55, 45, 42 , 42, 16 +04-2019, 42, 58, 40 , 20 , 40 +05-2019, 30, 70, 2 , 30 , 68 +06-2019, 30, 70, 0 , 25 , 75 +07-2019, 20, 80, 25 , 0 , 75 +08-2019, 0,100, 10.1, 1.5, 88.4 +09-2019, 0,100, 23.5, 2.4, 74.1 +` + +store.commit("fairwayavailability/setAvailableFairwayDepthLNWLData", data) +``` + + (Depends on the code structure in store/fairwayavailability.js.)
--- a/client/src/components/App.vue Mon Sep 09 15:16:31 2019 +0200 +++ b/client/src/components/App.vue Mon Sep 09 15:17:13 2019 +0200 @@ -17,7 +17,9 @@ <AvailableFairwayDepthDialogue v-if="isMapVisible" /> </div> <div class="d-flex flex-column align-items-end"> - <Identify v-if="isMapVisible" /> + <keep-alive> + <Identify v-if="isMapVisible" /> + </keep-alive> <Layers v-if="isMapVisible" /> </div> <Toolbar v-if="isMapVisible" />
--- a/client/src/components/identify/Identify.vue Mon Sep 09 15:16:31 2019 +0200 +++ b/client/src/components/identify/Identify.vue Mon Sep 09 15:17:13 2019 +0200 @@ -64,15 +64,29 @@ v-if="showGaugeMeta(feature)" class="ml-2 mb-1 text-left d-flex flex-column" > - <div> - <font-awesome-icon - icon="caret-up" - fixed-width - :style="{ - color: gmAvailabilityColor(feature), - 'font-size': 'x-large' - }" - /> + <div class="d-flex"> + <div class="d-flex flex-column"> + <font-awesome-icon + icon="caret-up" + fixed-width + :style="{ + color: gmAvailabilityColor(feature), + 'font-size': 'x-large', + position: 'relative', + top: '0.28em' + }" + /> + <font-awesome-icon + icon="caret-down" + fixed-width + :style="{ + color: gmAvailabilityColor(feature), + 'font-size': 'x-large', + position: 'relative', + top: '-0.45em' + }" + /> + </div> <small class="my-auto"> {{ gmAvailability(feature) }} </small> @@ -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)]; },
--- 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");
--- 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,
--- 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) => {