# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1558683643 -7200
# Node ID e56b280582aec2ee60324838a30d47c5f2be4e29
# Parent  6e15c3c1e9b735d2989254fcf8526ee37fe56769
client: spuc05: use real data for diagrams on map

diff -r 6e15c3c1e9b7 -r e56b280582ae client/src/components/map/layers.js
--- 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
                     }
diff -r 6e15c3c1e9b7 -r e56b280582ae client/src/components/map/styles.js
--- 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(