Mercurial > gemma

changeset 4318:be7c23af783c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 04 Sep 2019 11:50:37 +0200
parents fa067eaf4e5a
children 0d516bac1aae
files client/src/components/map/styles.js
diffstat 1 files changed, 17 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- 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({