From 36c2c844735e7e908e030b3d3731458107079234 Mon Sep 17 00:00:00 2001
From: Mathias Schopmans <mathias.schopmans@aoe.com>
Date: Thu, 22 Feb 2024 09:17:31 +0100
Subject: [PATCH] feat: add radar labels

---
 src/components/Radar/Radar.module.css       |  8 ++++-
 src/components/Radar/Radar.tsx              | 36 +++++++++++++++++++--
 src/components/RingList/RingList.module.css |  4 ++-
 src/styles/globals.css                      |  3 +-
 4 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/components/Radar/Radar.module.css b/src/components/Radar/Radar.module.css
index 619d67e..c3be43f 100644
--- a/src/components/Radar/Radar.module.css
+++ b/src/components/Radar/Radar.module.css
@@ -9,10 +9,16 @@
   max-width: 100%;
   height: auto;
   margin: 0 auto;
+  fill: currentColor;
+}
+
+.ringLabels {
+  text-transform: uppercase;
 }
 
 @media (max-width: 767px) {
-  .labels {
+  .labels,
+  .ringLabels {
     display: none;
   }
 }
diff --git a/src/components/Radar/Radar.tsx b/src/components/Radar/Radar.tsx
index 5ef7e4d..77fed81 100644
--- a/src/components/Radar/Radar.tsx
+++ b/src/components/Radar/Radar.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import React, { FC } from "react";
+import React, { FC, Fragment } from "react";
 
 import styles from "./Radar.module.css";
 
@@ -115,6 +115,37 @@ export const Radar: FC<RadarProps> = ({
     );
   };
 
+  const renderRingLabels = () => {
+    return rings.map((ring, index) => {
+      const outerRadius = ring.radius || 1;
+      const innerRadius = rings[index - 1]?.radius || 0;
+      const position = ((outerRadius + innerRadius) / 2) * center;
+
+      return (
+        <Fragment key={ring.id}>
+          <text
+            x={center + position}
+            y={center}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontSize="12"
+          >
+            {ring.title}
+          </text>
+          <text
+            x={center - position}
+            y={center}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontSize="12"
+          >
+            {ring.title}
+          </text>
+        </Fragment>
+      );
+    });
+  };
+
   return (
     <div className={styles.radar}>
       <svg
@@ -138,7 +169,8 @@ export const Radar: FC<RadarProps> = ({
             ))}
           </g>
         ))}
-        <g>{items.map((item) => renderItem(item))}</g>
+        <g className={styles.items}>{items.map((item) => renderItem(item))}</g>
+        <g className={styles.ringLabels}>{renderRingLabels()}</g>
       </svg>
       <div className={styles.labels}>
         {quadrants.map((quadrant) => (
diff --git a/src/components/RingList/RingList.module.css b/src/components/RingList/RingList.module.css
index 9a5ec0b..9d0e897 100644
--- a/src/components/RingList/RingList.module.css
+++ b/src/components/RingList/RingList.module.css
@@ -22,11 +22,13 @@
 .list {
 }
 
-@media (min-width: 768px) {
+@media (min-width: 480px) {
   .ring {
     --cols: 2;
   }
+}
 
+@media (min-width: 768px) {
   .isSmall .ring {
     --cols: 4;
   }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d71746e..646af5a 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -67,7 +67,7 @@ h1,
 h2,
 h3,
 h4 {
-  line-height: 1.1em;
+  line-height: 1.2em;
   margin-bottom: 1em;
   font-weight: 700;
 }
@@ -77,6 +77,7 @@ h1 {
 }
 
 h2 {
+  font-weight: 400;
   font-size: 26px;
 }