From 7c08e520fc5eb2ae1db4eeb50d819191ea2a6c5c Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Fri, 22 Mar 2024 20:25:32 +0100
Subject: [PATCH] feat: allow to change order of sections on main page

closes #445
---
 README.md                |  5 +++++
 data/config.default.json |  1 +
 package-lock.json        |  4 ++--
 src/lib/config.ts        |  3 +++
 src/lib/data.ts          |  4 ++++
 src/pages/index.tsx      | 40 ++++++++++++++++++++++++++++------------
 6 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 5bad48a..7d9f7c5 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,7 @@ Open the `config.json` file and configure the radar to your needs.
 | --------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | basePath  | Set if hosting under a sub-path, otherwise set it to `/`. Default is `/techradar`                                              |
 | toggles   | (optional) Modify the behaviour and contents of the radar. See config below.                                                   |
+| sections  | (optional) Modify the order of sections (`radar`, `tags`, `list`)                                                              |
 | colors    | A map of colors for the radar. Can be any valid CSS color value                                                                |
 | quadrants | Config of the 4 quadrants of the radar. See config below.                                                                      |
 | rings     | Config of the rings of the radar. See config below.                                                                            |
@@ -91,6 +92,10 @@ Open the `config.json` file and configure the radar to your needs.
 | showQuadrantList | Render the items below the radar?                       |
 | showEmptyRings   | If set to `true` it will render empty rings in the list |
 
+#### `config.sections`
+
+An array with of `radar`, `tags`, `list` in order you want them to appear on the page.
+
 #### `config.quadrants`
 
 | Attribute   | Description                                                 |
diff --git a/data/config.default.json b/data/config.default.json
index 45cc731..c28a8ee 100644
--- a/data/config.default.json
+++ b/data/config.default.json
@@ -7,6 +7,7 @@
     "showQuadrantList": true,
     "showEmptyRings": false
   },
+  "sections": ["radar", "tags", "list"],
   "colors": {
     "foreground": "#fcf2e6",
     "background": "#113521",
diff --git a/package-lock.json b/package-lock.json
index f5064a9..26a77e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "aoe_technology_radar",
-  "version": "4.1.0-rc.1",
+  "version": "4.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aoe_technology_radar",
-      "version": "4.1.0-rc.1",
+      "version": "4.1.0",
       "hasInstallScript": true,
       "bin": {
         "techradar": "bin/techradar.js"
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 15976a0..a86176c 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -13,4 +13,7 @@ if (userConfig.labels)
 if (userConfig.toggles)
   config.toggles = { ...defaultConfig.toggles, ...userConfig.toggles };
 
+if (userConfig.sections)
+  config.sections = { ...defaultConfig.sections, ...userConfig.sections };
+
 export default config;
diff --git a/src/lib/data.ts b/src/lib/data.ts
index 53359ef..f0955a8 100644
--- a/src/lib/data.ts
+++ b/src/lib/data.ts
@@ -12,6 +12,10 @@ export function getToggle(key: keyof typeof config.toggles) {
   return config.toggles[key] || false;
 }
 
+export function getSections() {
+  return config.sections;
+}
+
 export function getAppName() {
   return getLabel("title");
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 195843c..b700583 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,6 +10,7 @@ import {
   getQuadrants,
   getReleases,
   getRings,
+  getSections,
   getTags,
   getToggle,
 } from "@/lib/data";
@@ -20,6 +21,7 @@ const Home: CustomPage = () => {
   const tag = router.query.tag as string | undefined;
   const appName = getAppName();
   const chartConfig = getChartConfig();
+  const sections = getSections();
   const version = getReleases().length;
   const rings = getRings();
   const quadrants = getQuadrants();
@@ -36,18 +38,32 @@ const Home: CustomPage = () => {
           Version #{version}
         </span>
       </h1>
-      {getToggle("showChart") && (
-        <Radar
-          size={chartConfig.size}
-          quadrants={quadrants}
-          rings={rings}
-          items={items}
-        />
-      )}
-      {getToggle("showTagFilter") && tags.length > 0 && (
-        <Tags tags={tags} activeTag={tag} />
-      )}
-      {getToggle("showQuadrantList") && <QuadrantList items={items} />}
+      {sections.map((section) => {
+        switch (section) {
+          case "radar":
+            return (
+              getToggle("showChart") && (
+                <Radar
+                  size={chartConfig.size}
+                  quadrants={quadrants}
+                  rings={rings}
+                  items={items}
+                />
+              )
+            );
+          case "tags":
+            return (
+              getToggle("showTagFilter") &&
+              tags.length > 0 && <Tags tags={tags} activeTag={tag} />
+            );
+          case "list":
+            return (
+              getToggle("showQuadrantList") && <QuadrantList items={items} />
+            );
+          default:
+            return null;
+        }
+      })}
     </>
   );
 };