feat: config.json option to show empty rings

The `showEmptyRings` option in `config.ts` can now be set via
`config.json`. This enables display of headers for rings that contain no
items.

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to this project will be documented in this file.
 
 ## Unreleased
+### Features
+- Added `showEmptyRings` option to `config.json`, which enables display of headers for rings containing no items.
+
+## 3.1.1
+
+## 3.1.0
 ### Bug Fixes
 - Fixed dependent projects failing to build without dependency `@types/sanitize-html`.
 

README.md

@@ -112,6 +112,8 @@ For reference have a look at [public/logo.svg](./public/logo.svg).
 
 ### Change the rings and quadrants config
 To change the default rings and quadrants of the radar, you can place a custom `config.json` file within the `public` folder.
+The `showEmptyRings` option can be enabled to display the header for a ring even when it contains no items (helpful to
+reinforce the order of the rings).
 The content should look as follows:
 
 ```json
@@ -119,10 +121,11 @@ The content should look as follows:
   "quadrants": {
     "languages-and-frameworks": "Languages & Frameworks",
     "methods-and-patterns": "Methods & Patterns",
-    "platforms-and-aoe-services": "Platforms & Operations",
+    "platforms-and-operations": "Platforms & Operations",
     "tools": "Tools"
   },
-  "rings":["all", "adopt", "trial", "assess", "hold"]
+  "rings":["all", "adopt", "trial", "assess", "hold"],
+  "showEmptyRings": true
 }
 ```
 

public/config.json

@@ -5,5 +5,6 @@
     "platforms-and-aoe-services": "Platforms & Operations",
     "tools": "Tools"
   },
-  "rings":["all", "adopt", "trial", "assess", "hold"]
-}
+  "rings":["all", "adopt", "trial", "assess", "hold"],
+  "showEmptyRings": false
+}

src/components/QuadrantSection/QuadrantSection.tsx

@@ -1,4 +1,4 @@
-import { translate, showEmptyRings, ConfigData } from "../../config";
+import { translate, ConfigData } from "../../config";
 import Badge from "../Badge/Badge";
 import Link from "../Link/Link";
 import ItemList from "../ItemList/ItemList";
@@ -44,10 +44,11 @@ const renderRing = (
   ringName: string,
   quadrantName: string,
   groups: Group,
+  renderIfEmpty: boolean,
   big: boolean
 ) => {
   if (
-    !showEmptyRings &&
+    !renderIfEmpty &&
     (!groups[quadrantName] ||
       !groups[quadrantName][ringName] ||
       groups[quadrantName][ringName].length === 0)
@@ -91,7 +92,7 @@ export default function QuadrantSection({
       </div>
       <div className="quadrant-section__rings">
         {config.rings.map((ringName: string) =>
-          renderRing(ringName, quadrantName, groups, big)
+          renderRing(ringName, quadrantName, groups, config.showEmptyRings, big)
         )}
       </div>
     </div>

src/config.ts

@@ -3,6 +3,7 @@ import { Item } from "./model";
 export interface ConfigData {
   quadrants: { [key: string]: string };
   rings: string[];
+  showEmptyRings: boolean;
 }
 
 export const radarName =
@@ -12,8 +13,6 @@ export const radarNameShort = radarName;
 export const getItemPageNames = (items: Item[]) =>
   items.map((item) => `${item.quadrant}/${item.name}`);
 
-export const showEmptyRings = false;
-
 export function isMobileViewport() {
   // return false for server side rendering
   if (typeof window == "undefined") return false;
@@ -31,4 +30,4 @@ export function assetUrl(file: string) {
 
 export function translate(config: ConfigData, key: string) {
   return config.quadrants[key] || "-";
-}
+}