# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1567590637 -7200
# Node ID be7c23af783c45b740bad789c9c65f0244ac2456
# Parent  fa067eaf4e5a93cf064f525958a5e9998f69305a
bottleneck fairway availability: layout corresponding to AFDLNWL diagram

diff -r fa067eaf4e5a -r be7c23af783c client/src/components/map/styles.js
--- a/client/src/components/map/styles.js	Wed Sep 04 11:13:04 2019 +0200
+++ b/client/src/components/map/styles.js	Wed Sep 04 11:50:37 2019 +0200
@@ -221,22 +221,27 @@
       }
       if (feature.get("fa_critical") && feature.get("fa_data")) {
         let data = feature.get("fa_data");
-        let lnwlHeight = (80 / 100) * data.ldc;
-        let belowThresholdHeight = (80 / 100) * data.below;
-        let betweenThresholdHeight = (80 / 100) * data.between;
-        let aboveThresholdHeight = (80 / 100) * data.above;
-
-        let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
-        let lnwl = `<rect x='2' y='${80 -
+        const heightInPixel = 80;
+        const relativeHeightInPercent = heightInPixel / 100;
+        let lnwlHeight = relativeHeightInPercent * data.ldc;
+        let belowThresholdHeight = relativeHeightInPercent * data.below;
+        let betweenThresholdHeight = relativeHeightInPercent * data.between;
+        let aboveThresholdHeight = relativeHeightInPercent * data.above;
+        let lnwl = `<rect x='2' y='${heightInPixel -
           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 -
+        let above = `<rect x='12' y='${heightInPixel -
           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 between = `<rect x='12' y='${heightInPixel -
+          aboveThresholdHeight -
+          betweenThresholdHeight}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`;
+        let below = `<rect x='12' y='${heightInPixel -
+          aboveThresholdHeight -
+          betweenThresholdHeight -
+          belowThresholdHeight}' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`;
+        let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
+        let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${above}${between}${below}</g></svg>`;
         let bnCenter = getCenter(feature.getGeometry().getExtent());
         s.push(
           new Style({