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.

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] || "-";
-}
+}