From 506bab56edfcd7fa28d0df95f6340cabf6b3b8c4 Mon Sep 17 00:00:00 2001
From: Friedjoff Trautwein <friedjoff.trautwein@geops.de>
Date: Thu, 19 Mar 2020 10:00:41 +0100
Subject: [PATCH] feat: improve styling for ecogram

---
 src/components/Ecogram.js         | 72 ++++++++++++++++++-------------
 src/components/Ecogram.module.css | 33 ++++++++++++++
 2 files changed, 74 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Ecogram.module.css

diff --git a/src/components/Ecogram.js b/src/components/Ecogram.js
index 2e09df24..407ae2e2 100644
--- a/src/components/Ecogram.js
+++ b/src/components/Ecogram.js
@@ -4,6 +4,8 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { setForestTypes } from '../store/actions';
 
+import styles from './Ecogram.module.css';
+
 function Ecogram() {
   const dispatch = useDispatch();
   const { ecogram } = useSelector(state => state.locateResult);
@@ -16,50 +18,59 @@ function Ecogram() {
   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"
-        />
+        <line x1="200" y1="0" x2="200" y2="1000" className={styles.grid} />
+        <line x1="500" y1="0" x2="500" y2="1000" className={styles.grid} />
+        <line x1="800" y1="0" x2="800" y2="1000" className={styles.grid} />
+        <line x1="0" y1="200" x2="1000" y2="200" className={styles.grid} />
+        <line x1="0" y1="500" x2="1000" y2="500" className={styles.grid} />
+        <line x1="0" y1="800" x2="1000" y2="800" className={styles.grid} />
         {ecogram
           .sort((a, b) => a.z - b.z)
-          .map(({ x, y, w, h, f }) => (
+          .map(({ x, y, w, h, f, r }) => (
             <>
               <rect
                 x={x}
                 y={y}
+                rx="5"
+                ry="5"
                 width={w}
                 height={h}
-                fill="#b0cdeb"
+                className={styles.box}
                 onClick={() => dispatch(setForestTypes(f))}
               />
-              <text
-                x={x + w / 2}
-                y={y + h / 2 + 10}
-                fontSize="2em"
-                textAnchor="middle"
-              >
-                {f.join(' ')}
-              </text>
+              {r ? (
+                [...new Array(r)].map((_, i) => (
+                  <text
+                    x={x + w / 2}
+                    y={y + h / 2 + 45 - (35 * r || 0) + 35 * (i + 1)}
+                    className={styles.boxText}
+                  >
+                    {f
+                      .slice(
+                        Math.floor(f.length / r) * i,
+                        Math.floor(f.length / r) * (i + 1),
+                      )
+                      .join(' ')}
+                  </text>
+                ))
+              ) : (
+                <text
+                  x={x + w / 2}
+                  y={y + h / 2 + 10}
+                  className={styles.boxText}
+                >
+                  {f.join(' ')}
+                </text>
+              )}
             </>
           ))}
+        <rect x={0} y={0} width={1000} height={1000} className={styles.frame} />
       </g>
       <text
         x="0"
         y="80"
         transform="rotate(270,100,100)"
-        fontSize="2em"
-        textAnchor="middle"
+        className={styles.label}
       >
         {t('ecogram.dry')}
       </text>
@@ -67,15 +78,14 @@ function Ecogram() {
         x="-820"
         y="80"
         transform="rotate(270,100,100)"
-        fontSize="2em"
-        textAnchor="middle"
+        className={styles.label}
       >
         {t('ecogram.wet')}
       </text>
-      <text x="180" y="1140" fontSize="2em" textAnchor="middle">
+      <text x="180" y="1140" className={styles.label}>
         {t('ecogram.acid')}
       </text>
-      <text x="1000" y="1140" fontSize="2em" textAnchor="middle">
+      <text x="1000" y="1140" className={styles.label}>
         {t('ecogram.alkaline')}
       </text>
     </svg>
diff --git a/src/components/Ecogram.module.css b/src/components/Ecogram.module.css
new file mode 100644
index 00000000..cfa44a57
--- /dev/null
+++ b/src/components/Ecogram.module.css
@@ -0,0 +1,33 @@
+.box {
+  cursor: pointer;
+  fill: var(--primary-color-500);
+  stroke: white;
+  stroke-width: 2;
+}
+.box:hover {
+  fill: var(--primary-color-200);
+}
+
+.boxText {
+  pointer-events: none;
+  fill: white;
+  font-size: 2em;
+  text-anchor: middle;
+}
+
+.frame {
+  pointer-events: none;
+  fill: transparent;
+  stroke: #999999;
+  stroke-width: 2;
+}
+
+.grid {
+  stroke: var(--primary-color-100);
+}
+
+.label {
+  fill: #999999;
+  font-size: 2em;
+  text-anchor: middle;
+}