fix: improve label placement for grid diagrams

geops · Sep 16, 2020 · ee9388e · ee9388e
1 parent e3e6958
commit ee9388e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/components/ForestTypeDescription/Diagram.module.css b/src/components/ForestTypeDescription/Diagram.module.css
@@ -32,6 +32,11 @@
   font-size: 16px;
 }
 
+.labelBold {
+  font-size: 16px;
+  font-weight: bold;
+}
+
 .labelMiddle {
   font-size: 16px;
   text-anchor: middle;

diff --git a/src/components/ForestTypeDescription/Grid.js b/src/components/ForestTypeDescription/Grid.js
@@ -8,28 +8,28 @@ import { getStyle } from './utils';
 function Grid({ data, header, headerX, headerY, labelX, labelY }) {
   return (
     <svg viewBox="0 0 400 400" className={styles.svg}>
-      <text x="10" y="15" className={styles.header}>
+      <text x="10" y="13" className={styles.labelBold}>
         {header}
       </text>
-      <text x="10" y="45" className={styles.header}>
+      <text x="10" y="45" className={styles.labelBold}>
         {headerX}
       </text>
-      <text x="23" y="114" transform="rotate(-45 23 114)">
+      <text x="23" y="118" transform="rotate(-45 23 114)">
         {labelX[0]}
       </text>
-      <text x="68" y="114" transform="rotate(-45 67 114)">
+      <text x="68" y="118" transform="rotate(-45 67 114)">
         {labelX[1]}
       </text>
-      <text x="116" y="115" transform="rotate(-45 116 115)">
+      <text x="116" y="118" transform="rotate(-45 116 115)">
         {labelX[2]}
       </text>
-      <text x="161" y="115" transform="rotate(-45 161 115)">
+      <text x="161" y="118" transform="rotate(-45 161 115)">
         {labelX[3]}
       </text>
-      <text x="208" y="112" transform="rotate(-45 208 112)">
+      <text x="208" y="118" transform="rotate(-45 208 112)">
         {labelX[4]}
       </text>
-      <text x="255" y="114" transform="rotate(-45 255 114)">
+      <text x="255" y="118" transform="rotate(-45 255 114)">
         {labelX[5]}
       </text>
       <path d="M1 121h46v46H1z" className={getStyle(data, '0.0')} />
@@ -68,7 +68,7 @@ function Grid({ data, header, headerX, headerY, labelX, labelY }) {
       <path d="M140 354h47v46h-47z" className={getStyle(data, '5.3')} />
       <path d="M187 354h47v46h-47z" className={getStyle(data, '5.4')} />
       <path d="M233 354h47v46h-46z" className={getStyle(data, '5.5')} />
-      <text x="278" y="116" className={styles.header}>
+      <text x="278" y="116" className={styles.labelBold}>
         {headerY}
       </text>
       <text x="289" y="148">