[WIP] Refactor to support dynamic sections

README.md

@@ -79,7 +79,7 @@ Open the `config.json` file and configure the radar to your needs.
 | 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.                                                                      |
+| sections  | Config of the sections of the radar. See config below.                                                                         |
 | rings     | Config of the rings of the radar. See config below.                                                                            |
 | flags     | Config of the flags of the radar. See config below                                                                             |
 | chart     | If you hava a lot of items, you can increase the `size` to scale down the radar                                                |
@@ -102,14 +102,14 @@ Open the `config.json` file and configure the radar to your needs.
 
 An array with of `radar`, `tags`, `list` in order you want them to appear on the page.
 
-#### `config.quadrants`
+#### `config.sections`
 
 | Attribute   | Description                                                 |
 | ----------- | ----------------------------------------------------------- |
 | id          | Used as reference in the radar markdown files and URLs      |
-| title       | Title of the quadrant                                       |
-| description | Will be shown on startpage and on the quadrants detail page |
-| color       | Color of the quadrant arcs and blips                        |
+| title       | Title of the section                                        |
+| description | Will be shown on startpage and on the sections detail page  |
+| color       | Color of the section arcs and blips                         |
 
 #### `config.rings`
 
@@ -158,7 +158,7 @@ Each file has a meta header where the attributes of the item are listed:
 ---
 title: "React"
 ring: adopt
-quadrant: languages-and-frameworks
+section: languages-and-frameworks
 tags: [frontend, coding]
 ---
 
@@ -168,11 +168,11 @@ Text goes here. You can use **markdown** here.
 Following front-matter attributes are possible:
 
 - **title**: Name of the Item
-- **quadrant**: Quadrant. One of the configured quadrants in `config.quadrants`
+- **section**: Section. One of the configured sections in `config.sections`
 - **ring**: Ring section in radar. One of the configured rings in `config.rings`
 - **tags**: Optional tags for filtering.
 - **featured**: (optional, default "true") If you set this to `false`, the item
-  will not be visible in the radar quadrants but still be available in the overview.
+  will not be visible in the radar sections but still be available in the overview.
 
 The name of the .md file acts as item identifier and may overwrite items with
 the same name from older releases.

data/config.default.json

@@ -21,7 +21,7 @@
     "border": "rgba(255, 255, 255, 0.1)",
     "tag": "rgba(255, 255, 255, 0.1)"
   },
-  "quadrants": [
+  "sections": [
     {
       "id": "languages-and-frameworks",
       "title": "Languages & Frameworks",

data/radar/2017-03-01/demo-1.md

@@ -1,7 +1,7 @@
 ---
 title: "Demo 1"
 ring: assess
-quadrant: methods-and-patterns
+section: methods-and-patterns
 tags: [coding]
 ---
 

data/radar/2017-03-01/demo-2.md

@@ -1,7 +1,7 @@
 ---
 title: "Demo 2"
 ring: trial
-quadrant: platforms-and-operations
+section: platforms-and-operations
 tags: [coding]
 ---
 

data/radar/2017-03-01/demo-3.md

@@ -1,7 +1,7 @@
 ---
 title: "Demo 3"
 ring: hold
-quadrant: tools
+section: tools
 tags: [coding, frontend]
 ---
 

data/radar/2024-03-01/demo-2.md

@@ -1,7 +1,7 @@
 ---
 title: "Demo 2"
 ring: adopt
-quadrant: platforms-and-operations
+section: platforms-and-operations
 tags: [coding, backend]
 ---
 

data/radar/2024-03-01/demo-4.md

@@ -1,7 +1,7 @@
 ---
 title: "Demo 4"
 ring: trial
-quadrant: languages-and-frameworks
+section: languages-and-frameworks
 tags: [new]
 ---
 

scripts/buildData.ts

@@ -17,10 +17,10 @@ const {
 } = config;
 
 const ringIds = rings.map((r) => r.id);
-const quadrants = config.quadrants.map((q, i) => ({ ...q, position: i + 1 }));
-const quadrantIds = quadrants.map((q) => q.id);
+const sections = config.sections.map((s, i) => ({ ...s, position: i + 1 }));
+const sectionIds = sections.map((s) => s.id);
 const tags = (config as { tags?: string[] }).tags || [];
-const positioner = new Positioner(size, quadrants, rings);
+const positioner = new Positioner(size, sections, rings);
 
 const marked = new Marked(
   markedHighlight({
@@ -87,7 +87,7 @@ async function parseDirectory(dirPath: string): Promise<Item[]> {
             release: releaseDate,
             title: data.title || id,
             ring: data.ring,
-            quadrant: data.quadrant,
+            section: data.section,
             body,
             featured: data.featured !== false,
             flag: Flag.Default,
@@ -100,7 +100,7 @@ async function parseDirectory(dirPath: string): Promise<Item[]> {
           items[id].body = body || items[id].body;
           items[id].title = data.title || items[id].title;
           items[id].ring = data.ring || items[id].ring;
-          items[id].quadrant = data.quadrant || items[id].quadrant;
+          items[id].section = data.section || items[id].section;
           items[id].tags = data.tags || items[id].tags;
           items[id].featured =
             typeof data.featured === "boolean"
@@ -168,14 +168,14 @@ function postProcessItems(items: Item[]): {
   items: Item[];
 } {
   const filteredItems = items.filter((item) => {
-    // check if the items' quadrant and ring are valid
-    if (!item.quadrant || !item.ring) {
-      console.warn(`Item ${item.id} has no quadrant or ring`);
+    // check if the items' section and ring are valid
+    if (!item.section || !item.ring) {
+      console.warn(`Item ${item.id} has no section or ring`);
       return false;
     }
 
-    if (!quadrantIds.includes(item.quadrant)) {
-      console.warn(`Item ${item.id} has invalid quadrant ${item.quadrant}`);
+    if (!sectionIds.includes(item.section)) {
+      console.warn(`Item ${item.id} has invalid section ${item.section}`);
       return false;
     }
 
@@ -198,7 +198,7 @@ function postProcessItems(items: Item[]): {
   const processedItems = filteredItems.map((item) => {
     const processedItem = {
       ...item,
-      position: positioner.getNextPosition(item.quadrant, item.ring),
+      position: positioner.getNextPosition(item.section, item.ring),
       flag: getFlag(item, releases),
       // only keep revision which ring or body is different
       revisions: item.revisions

scripts/positioner.ts

@@ -3,9 +3,6 @@ import { Quadrant, Ring } from "@/lib/types";
 type Position = [x: number, y: number];
 type RingDimension = [innerRadius: number, outerRadius: number];
 
-// Corresponding to positions 1, 2, 3, and 4 respectively
-const startAngles = [270, 0, 180, 90];
-
 export default class Positioner {
   private readonly centerRadius: number;
   private readonly minDistance: number = 20;
@@ -18,8 +15,10 @@ export default class Positioner {
   constructor(size: number, quadrants: Quadrant[], rings: Ring[]) {
     this.centerRadius = size / 2;
 
-    quadrants.forEach((quadrant) => {
-      this.quadrantAngles[quadrant.id] = startAngles[quadrant.position - 1];
+    const startAngles = this.calculateStartAngles(quadrants.length);
+
+    quadrants.forEach((quadrant, index) => {
+      this.quadrantAngles[quadrant.id] = startAngles[index];
     });
 
     rings.forEach((ring, index) => {
@@ -31,6 +30,11 @@ export default class Positioner {
     });
   }
 
+  private calculateStartAngles(numQuadrants: number): number[] {
+    const angleIncrement = 360 / numQuadrants;
+    return Array.from({ length: numQuadrants }, (_, i) => i * angleIncrement);
+  }
+
   static getDistance(a: Position, b: Position): number {
     const [x1, y1] = a;
     const [x2, y2] = b;

src/components/Radar/Chart.tsx

@@ -23,7 +23,6 @@ const _Chart: FC<ChartProps> = ({
 }) => {
   const viewBoxSize = size;
   const center = size / 2;
-  const startAngles = [270, 0, 180, 90]; // Corresponding to positions 1, 2, 3, and 4 respectively
 
   // Helper function to convert polar coordinates to cartesian
   const polarToCartesian = (
@@ -38,10 +37,11 @@ const _Chart: FC<ChartProps> = ({
   };
 
   // Function to generate the path for a ring segment
-  const describeArc = (radiusPercentage: number, position: number): string => {
-    // Define the start and end angles based on the quadrant position
-    const startAngle = startAngles[position - 1];
-    const endAngle = startAngle + 90;
+  const describeArc = (radiusPercentage: number, position: number, numQuadrants: number): string => {
+    // Calculate the start and end angles based on the number of quadrants
+    const angleIncrement = 360 / numQuadrants;
+    const startAngle = (position - 1) * angleIncrement;
+    const endAngle = startAngle + angleIncrement;
 
     const radius = radiusPercentage * center; // Convert percentage to actual radius
     const start = polarToCartesian(radius, endAngle);
@@ -54,14 +54,19 @@ const _Chart: FC<ChartProps> = ({
     ].join(" ");
   };
 
-  const renderGlow = (position: number, color: string) => {
+  const renderGlow = (position: number, color: string, numQuadrants: number) => {
     const gradientId = `glow-${position}`;
 
-    const cx = position === 1 || position === 3 ? 1 : 0;
-    const cy = position === 1 || position === 2 ? 1 : 0;
+    const angleIncrement = 360 / numQuadrants;
+    const startAngle = (position - 1) * angleIncrement;
+    const endAngle = startAngle + angleIncrement;
+
+    const cx = (startAngle + endAngle) / 2 > 180 ? 1 : 0;
+    const cy = (startAngle + endAngle) / 2 > 90 && (startAngle + endAngle) / 2 < 270 ? 1 : 0;
+
+    const x = cx === 1 ? 0 : center;
+    const y = cy === 1 ? 0 : center;
 
-    const x = position === 1 || position === 3 ? 0 : center;
-    const y = position === 1 || position === 2 ? 0 : center;
     return (
       <>
         <defs>
@@ -141,12 +146,12 @@ const _Chart: FC<ChartProps> = ({
     >
       {quadrants.map((quadrant) => (
         <g key={quadrant.id} data-quadrant={quadrant.id}>
-          {renderGlow(quadrant.position, quadrant.color)}
+          {renderGlow(quadrant.position, quadrant.color, quadrants.length)}
           {rings.map((ring) => (
             <path
               key={`${ring.id}-${quadrant.id}`}
               data-key={`${ring.id}-${quadrant.id}`}
-              d={describeArc(ring.radius || 0.5, quadrant.position)}
+              d={describeArc(ring.radius || 0.5, quadrant.position, quadrants.length)}
               fill="none"
               stroke={quadrant.color}
               strokeWidth={ring.strokeWidth || 2}

src/components/Radar/Label.tsx

@@ -25,7 +25,7 @@ export function Label({ quadrant }: LabelProps) {
     >
       <div className={styles.header}>
         <span>
-          {getLabel("quadrant")} {quadrant.position}
+          {getLabel("section")} {quadrant.position}
         </span>
         <QuadrantLink quadrant={quadrant} />
       </div>

src/lib/data.ts

@@ -72,7 +72,7 @@ export function getEditUrl(props: { id: string; release: string }) {
 }
 
 export function getQuadrants(): Quadrant[] {
-  return config.quadrants.map((q, i) => ({ ...q, position: i + 1 }));
+  return config.sections.map((s, i) => ({ ...s, position: i + 1 }));
 }
 
 export function getQuadrant(id: string): Quadrant | undefined {