feat: initial ecogram visualisation

src/components/Ecogram.js

@@ -0,0 +1,86 @@
+import propTypes from 'prop-types';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function Ecogram({ data }) {
+  const { t } = useTranslation();
+  return (
+    <svg x="0px" y="0px" viewBox="0 0 1200 1200">
+      <g transform="translate(100,100)">
+        <line x1="200" y1="0" x2="200" y2="1000" stroke="#b0cdeb" />
+        <line x1="500" y1="0" x2="500" y2="1000" stroke="#b0cdeb" />
+        <line x1="800" y1="0" x2="800" y2="1000" stroke="#b0cdeb" />
+        <line x1="0" y1="200" x2="1000" y2="200" stroke="#b0cdeb" />
+        <line x1="0" y1="500" x2="1000" y2="500" stroke="#b0cdeb" />
+        <line x1="0" y1="800" x2="1000" y2="800" stroke="#b0cdeb" />
+        <rect
+          x={0}
+          y={0}
+          width={1000}
+          height={1000}
+          fill="transparent"
+          stroke="black"
+          strokeWidth="2"
+        />
+        {data.forestTypes.map(({ x: [x1, x2], y: [y1, y2], forestTypes }) => {
+          const x = x1 * 1000;
+          const width = x2 * 1000 - x;
+          const height = 1000 - y1 * 1000 - (1000 - y2 * 1000);
+          const y = 1000 - y1 * 1000 - height;
+          return (
+            <>
+              <rect
+                x={x}
+                y={y}
+                width={width}
+                height={height}
+                fill="#b0cdeb"
+                stroke="#365bb7"
+                strokeWidth="2"
+                onClick={() => console.log(forestTypes)}
+              />
+              <text
+                x={x + width / 2}
+                y={y + height / 2 + 10}
+                fontSize="2em"
+                textAnchor="middle"
+              >
+                {forestTypes.join(' ')}
+              </text>
+            </>
+          );
+        })}
+      </g>
+      <text
+        x="0"
+        y="80"
+        transform="rotate(270,100,100)"
+        fontSize="2em"
+        textAnchor="middle"
+      >
+        {t('ecogram.dry')}
+      </text>
+      <text
+        x="-820"
+        y="80"
+        transform="rotate(270,100,100)"
+        fontSize="2em"
+        textAnchor="middle"
+      >
+        {t('ecogram.wet')}
+      </text>
+      <text x="180" y="1140" fontSize="2em" textAnchor="middle">
+        {t('ecogram.acid')}
+      </text>
+      <text x="1000" y="1140" fontSize="2em" textAnchor="middle">
+        {t('ecogram.alkaline')}
+      </text>
+    </svg>
+  );
+}
+
+Ecogram.propTypes = {
+  data: propTypes.objectOf.isRequired,
+};
+
+export default Ecogram;

src/components/LocationPage.js

@@ -1,15 +1,13 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Message } from 'semantic-ui-react';
 
-import styles from './LocationPage.module.css';
+import Ecogram from './Ecogram';
+import ecogramData from './ecogram.json';
 
 function LocationPage() {
-  const { t } = useTranslation();
   return (
-    <Message className={styles.message} size="big">
-      {t('location.underConstruction')}
-    </Message>
+    <div>
+      <Ecogram data={ecogramData} />
+    </div>
   );
 }
 

src/components/ecogram.json

@@ -0,0 +1,62 @@
+{
+  "forestEcoregions": ["M", "J", "1"],
+  "altitudinalZones": ["20"],
+  "forestTypes": [
+    {
+      "x": ["0.442", "0.785"],
+      "y": ["-0.002", "0.057"],
+      "z": "1",
+      "forestTypes": ["44"],
+      "otherForestTypes": []
+    },
+    {
+      "x": ["0.465", "0.595"],
+      "y": ["0.068", "0.128"],
+      "z": "1",
+      "forestTypes": ["30"],
+      "otherForestTypes": []
+    },
+    {
+      "x": ["0.581", "0.709"],
+      "y": ["0.516", "0.632"],
+      "z": "1",
+      "forestTypes": ["35A"],
+      "otherForestTypes": []
+    },
+    {
+      "x": ["0.562", "0.433"],
+      "y": ["0.809"],
+      "z": "1",
+      "forestTypes": ["35"],
+      "otherForestTypes": []
+    },
+    {
+      "x": ["0.826", "0.955"],
+      "y": ["0.817", "0.895"],
+      "z": "1",
+      "forestTypes": ["25e"],
+      "otherForestTypes": []
+    },
+    {
+      "x": ["0.526", "0.774"],
+      "y": ["0.817", "0.901"],
+      "z": "1",
+      "forestTypes": ["39", "39*", "40*"],
+      "otherForestTypes": []
+    },
+    {
+      "x": ["0.241", "0.487"],
+      "y": ["0.817", "0.899"],
+      "z": "1",
+      "forestTypes": ["41"],
+      "otherForestTypes": []
+    },
+    {
+      "x": ["0.012", "0.228"],
+      "y": ["0.812", "0.937"],
+      "z": "1",
+      "forestTypes": ["41*"],
+      "otherForestTypes": []
+    }
+  ]
+}

src/i18n/resources/de/translation.json

@@ -8,6 +8,12 @@
     "ribbon": "Test",
     "title": "Tree App"
   },
+  "ecogram": {
+    "acid": "Sauer",
+    "alkaline": "Basisch",
+    "wet": "Nass",
+    "dry": "Trocken"
+  },
   "help": {
     "recommendationPositiveHeader": "Empfohlene Baumarten",
     "recommendationPositive": "Dominante oder wichtige beigemischte Naturwaldbaumarten, die <strong>in allen Klimaprojektionen geeignet sind (fett)</strong> bzw. die im heutigen Klima und entweder bei «mässigem» oder «starkem» Klimawandel geeignet sind (Normalschrift; will man wissen, bei welcher Klimaprojektion eine Baumart geeignet ist, sind die Reiter rechts zu konsultieren). Diese Baumarten sollen gefördert werden.",