Mercurial > gemma
changeset 3433:e56b280582ae
client: spuc05: use real data for diagrams on map
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 24 May 2019 09:40:43 +0200 |
parents | 6e15c3c1e9b7 |
children | 9fba1be118e7 |
files | client/src/components/map/layers.js client/src/components/map/styles.js |
diffstat | 2 files changed, 28 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/layers.js Thu May 23 18:36:26 2019 +0200 +++ b/client/src/components/map/layers.js Fri May 24 09:40:43 2019 +0200 @@ -483,15 +483,13 @@ ) { f.set("fa_data", data.data); } else { - let from = new Date(); - from.setDate(from.getDate() - 30); - let to = new Date(); + let date = new Date(); data = await store.dispatch( "fairwayavailability/loadAvailableFairwayDepthLNWL", { feature: f, - from: from.toISOString().split("T")[0], - to: to.toISOString().split("T")[0], + from: date.toISOString().split("T")[0], + to: date.toISOString().split("T")[0], frequency: "monthly", LOS: 3 }
--- a/client/src/components/map/styles.js Thu May 23 18:36:26 2019 +0200 +++ b/client/src/components/map/styles.js Fri May 24 09:40:43 2019 +0200 @@ -192,11 +192,32 @@ feature.get("fa_data") && resolution > 15 ) { + let data = feature.get("fa_data"); + let lnwlHeight = + (80 / 100) * data.ldc.find(d => d.hasOwnProperty("from")).percent; + let belowThresholdHeight = + (80 / 100) * + data.afd.find(d => d.hasOwnProperty("to") && !d.hasOwnProperty("from")) + .percent; + let betweenThresholdHeight = + (80 / 100) * + data.afd.find(d => d.hasOwnProperty("to") && d.hasOwnProperty("from")) + .percent; + let aboveThresholdHeight = + (80 / 100) * + data.afd.find(d => !d.hasOwnProperty("to") && d.hasOwnProperty("from")) + .percent; + let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`; - let lnwl = `<rect x='2' y='22' width='10' height='60' stroke-width='0' fill='aqua'/>`; - let range1 = `<rect x='12' y='2' width='18' height='25' stroke-width='0' fill='hotpink'/>`; - let range2 = `<rect x='12' y='27' width='18' height='5' stroke-width='0' fill='darksalmon'/>`; - let range3 = `<rect x='12' y='32' width='18' height='50' stroke-width='0' fill='blue'/>`; + let lnwl = `<rect x='2' y='${80 - + lnwlHeight + + 2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`; + let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`; + let range2 = `<rect x='12' y='${belowThresholdHeight + + 2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`; + let range3 = `<rect x='12' y='${80 - + aboveThresholdHeight + + 2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`; let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`; let bnCenter = getCenter(feature.getGeometry().getExtent()); s.push(