fix: Sort out Ring enum typing issues

bin/src/config.js

@@ -1,35 +1,58 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMobileViewport = exports.translate = exports.getItemPageNames = exports.assetUrl = exports.rings = exports.quadrants = exports.radarNameShort = exports.radarName = void 0;
+exports.assetUrl = exports.isMobileViewport = exports.showEmptyRings = exports.getItemPageNames = exports.chartConfig = exports.quadrantsMap = exports.homepageContent = exports.radarNameShort = exports.radarName = void 0;
+const model_1 = require("./model");
 exports.radarName = process.env.RADAR_NAME || 'AOE Technology Radar';
 exports.radarNameShort = exports.radarName;
-exports.quadrants = [
+exports.homepageContent = model_1.HomepageOption.both; // by defaul show both versions so that people can choose which one they like more (or keep both)
-    'languages-and-frameworks',
+// Quadrants positions start from the top left and go clockwise
-    'methods-and-patterns',
+exports.quadrantsMap = new Map([
-    'platforms-and-aoe-services',
+    ['languages-and-frameworks', {
-    'tools',
+            id: 'languages-and-frameworks',
-];
+            displayName: 'Languages & Frameworks',
-exports.rings = [
+            colour: '#84BFA4',
-    'all',
+            txtColour: '#444444',
-    'adopt',
+            position: 1,
-    'trial',
+            description: "We've placed development languages (such as Scala or Golang) here, as well as more low-level development frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds."
-    'assess',
+        }],
-    'hold'
+    ['methods-and-patterns', {
-];
+            id: 'methods-and-patterns',
-// todo: fix
+            displayName: 'Methods & Patterns',
-function assetUrl(file) {
+            colour: '#248EA6',
-    return process.env.PUBLIC_URL + '/' + file;
+            txtColour: 'white',
-    // return `/techradar/assets/${file}`
+            position: 2,
-}
+            description: 'Here we put information on methods and patterns concerning development, continuous x, testing, organization, architecture, etc.'
-exports.assetUrl = assetUrl;
+        }],
-exports.getItemPageNames = (items) => items.map(item => `${item.quadrant}/${item.name}`);
+    ['platforms-and-aoe-services', {
-const messages = {
+            id: 'platforms-and-aoe-services',
-    'languages-and-frameworks': 'Languages & Frameworks',
+            displayName: 'Platforms and Operations',
-    'methods-and-patterns': 'Methods & Patterns',
+            colour: '#F25244',
-    'platforms-and-aoe-services': 'Platforms and Operations',
+            txtColour: '#444444',
-    'tools': 'Tools',
+            position: 3,
+            description: 'Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of.'
+        }],
+    ['tools', {
+            id: 'tools',
+            displayName: 'Tools',
+            colour: '#F2A25C',
+            txtColour: 'white',
+            position: 4,
+            description: 'Here we put different software tools - from small helpers to bigger software projects'
+        }]
+]);
+exports.chartConfig = {
+    size: 800,
+    scale: [-16, 16],
+    blipSize: 12,
+    ringsAttributes: [
+        { radius: 8, arcWidth: 6 },
+        { radius: 11, arcWidth: 4 },
+        { radius: 14, arcWidth: 2 },
+        { radius: 16, arcWidth: 2 }
+    ]
 };
-exports.translate = (key) => (messages[key] || '-');
+exports.getItemPageNames = (items) => items.map(item => `${item.quadrant}/${item.name}`);
+exports.showEmptyRings = false;
 function isMobileViewport() {
     // return false for server side rendering
     if (typeof window == 'undefined')
@@ -38,3 +61,8 @@ function isMobileViewport() {
     return width < 1200;
 }
 exports.isMobileViewport = isMobileViewport;
+function assetUrl(file) {
+    return process.env.PUBLIC_URL + '/' + file;
+    // return `/techradar/assets/${file}`
+}
+exports.assetUrl = assetUrl;

bin/src/model.js

@@ -1,6 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFirstLetter = exports.groupByFirstLetter = exports.groupByQuadrants = exports.featuredOnly = void 0;
+exports.getFirstLetter = exports.groupByFirstLetter = exports.groupByQuadrants = exports.featuredOnly = exports.FlagType = exports.Ring = exports.HomepageOption = void 0;
+var HomepageOption;
+(function (HomepageOption) {
+    HomepageOption[HomepageOption["chart"] = 0] = "chart";
+    HomepageOption[HomepageOption["columns"] = 1] = "columns";
+    HomepageOption[HomepageOption["both"] = 2] = "both";
+})(HomepageOption = exports.HomepageOption || (exports.HomepageOption = {}));
+var Ring;
+(function (Ring) {
+    Ring[Ring["all"] = 0] = "all";
+    Ring[Ring["adopt"] = 1] = "adopt";
+    Ring[Ring["trial"] = 2] = "trial";
+    Ring[Ring["assess"] = 3] = "assess";
+    Ring[Ring["hold"] = 4] = "hold";
+})(Ring = exports.Ring || (exports.Ring = {}));
+var FlagType;
+(function (FlagType) {
+    FlagType["new"] = "new";
+    FlagType["changed"] = "changed";
+    FlagType["default"] = "default";
+})(FlagType = exports.FlagType || (exports.FlagType = {}));
 exports.featuredOnly = (items) => items.filter(item => item.featured);
 exports.groupByQuadrants = (items) => items.reduce((quadrants, item) => (Object.assign(Object.assign({}, quadrants), { [item.quadrant]: addItemToQuadrant(quadrants[item.quadrant], item) })), {});
 exports.groupByFirstLetter = (items) => {

bin/tasks/create-static.js

@@ -19,7 +19,7 @@ const config_1 = require("../src/config");
         const radar = yield radar_1.createRadar();
         fs_1.copyFileSync('build/index.html', 'build/overview.html');
         fs_1.copyFileSync('build/index.html', 'build/help-and-about-tech-radar.html');
-        config_1.quadrants.forEach(quadrant => {
+        [...config_1.quadrantsMap.keys()].forEach(quadrant => {
             fs_1.copyFileSync('build/index.html', 'build/' + quadrant + '.html');
             fs_1.mkdirSync('build/' + quadrant);
         });

bin/tasks/radar.js

@@ -20,6 +20,7 @@ const marked_1 = __importDefault(require("marked"));
 const highlight_js_1 = __importDefault(require("highlight.js"));
 const config_1 = require("../src/config");
 const file_1 = require("./file");
+const model_1 = require("../src/model");
 marked_1.default.setOptions({
     highlight: code => highlight_js_1.default.highlightAuto(code).value,
 });
@@ -35,11 +36,17 @@ exports.createRadar = () => __awaiter(void 0, void 0, void 0, function* () {
     };
 });
 const checkAttributes = (fileName, attributes) => {
-    if (attributes.ring && !config_1.rings.includes(attributes.ring)) {
+    const validRings = [];
-        throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${config_1.rings}`);
+    for (var ring in model_1.Ring) {
+        if (isNaN(Number(ring))) {
+            validRings.push(ring);
+        }
     }
-    if (attributes.quadrant && !config_1.quadrants.includes(attributes.quadrant)) {
+    if (attributes.ring && !validRings.includes(attributes.ring)) {
-        throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${config_1.quadrants}`);
+        throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${validRings}`);
+    }
+    if (attributes.quadrant && !config_1.quadrantsMap.has(attributes.quadrant)) {
+        throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${config_1.quadrantsMap.keys()}`);
     }
     if (!attributes.quadrant || attributes.quadrant === '') {
         // throw new Error(`Error: ${fileName} has no 'quadrant' set`);
@@ -47,7 +54,9 @@ const checkAttributes = (fileName, attributes) => {
     if (!attributes.title || attributes.title === '') {
         attributes.title = path_1.default.basename(fileName);
     }
-    return attributes;
+    return Object.assign(Object.assign({}, attributes), { 
+        // Convert string representation of the ring into enum value
+        ring: model_1.Ring[attributes.ring] });
 };
 const createRevisionsFromFiles = (fileNames) => Promise.all(fileNames.map(fileName => {
     return new Promise((resolve, reject) => {
@@ -94,12 +103,12 @@ const ignoreEmptyRevisionBody = (revision, item) => {
     return revision.body;
 };
 const addRevisionToItem = (item = {
-    flag: 'default',
+    flag: model_1.FlagType.default,
     featured: true,
     revisions: [],
     name: '',
     title: '',
-    ring: 'trial',
+    ring: model_1.Ring.trial,
     quadrant: '',
     body: '',
     info: '',
@@ -119,10 +128,10 @@ const isNewItem = (item, allReleases) => item.revisions.length === 1 && isInLast
 const hasItemChanged = (item, allReleases) => item.revisions.length > 1 && isInLastRelease(item, allReleases);
 const getItemFlag = (item, allReleases) => {
     if (isNewItem(item, allReleases)) {
-        return 'new';
+        return model_1.FlagType.new;
     }
     if (hasItemChanged(item, allReleases)) {
-        return 'changed';
+        return model_1.FlagType.changed;
     }
-    return 'default';
+    return model_1.FlagType.default;
 };

src/components/Chart/Axes.tsx

@@ -1,11 +1,10 @@
-// TODO remove faux-dom and start using the React hook approach
 import React, { useRef, useLayoutEffect } from 'react';
 import * as d3 from "d3";
 
 export const YAxis: React.FC<{
     scale: d3.ScaleLinear
 }> = ({ scale }) => {
-    
+
     const ref = useRef<SVGSVGElement>(null);
 
     useLayoutEffect(() => {

src/components/Chart/BlipPoints.tsx

@@ -77,9 +77,7 @@ const BlipPoints: React.FC<{
 
         let blip: Blip = { ...item,
             quadrantPosition: quadrantConfig.position,
-            // TODO get to the bottom of this
+            ringPosition: item.ring,
-            // @ts-ignore
-            ringPosition: Ring[item.ring],
             colour: quadrantConfig.colour,
             txtColour: quadrantConfig.txtColour
         };

src/components/ItemRevision/ItemRevision.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import Badge from '../Badge/Badge';
 import { formatRelease } from '../../date';
-import { Revision } from '../../model';
+import { Revision, Ring } from '../../model';
 
 export default function ItemRevision({ revision }: { revision: Revision }) {
   return (
     <div className='item-revision'>
       <div>
         <Badge type={revision.ring}>
-          {revision.ring} | {formatRelease(revision.release)}
+          {Ring[revision.ring]} | {formatRelease(revision.release)}
         </Badge>
       </div>
       <div className='markdown' dangerouslySetInnerHTML={{ __html: revision.body }} />

src/components/PageItem/PageItem.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../animation';
 import './item-page.scss';
 import {quadrantsMap} from '../../config';
-import {groupByQuadrants, Item} from '../../model';
+import {groupByQuadrants, Item, Ring} from '../../model';
 
 const getItem = (pageName: string, items: Item[]) => {
     const [quadrantName, itemName] = pageName.split('/');
@@ -199,7 +199,7 @@ export default function PageItem({pageName, items, leaving, onLeave}: PageItemPr
                             <div className='split'>
                                 <div className='split__left'>
                                     <Badge big type={item.ring}>
-                                        {item.ring}
+                                        {Ring[item.ring]}
                                     </Badge>
                                 </div>
                                 <div className='split__right'>
@@ -221,7 +221,7 @@ export default function PageItem({pageName, items, leaving, onLeave}: PageItemPr
                                 </div>
                                 <div className='split__right'>
                                     <Badge big type={item.ring}>
-                                        {item.ring}
+                                        {Ring[item.ring]}
                                     </Badge>
                                 </div>
                             </div>

src/components/PageItemMobile/PageItemMobile.tsx

@@ -7,7 +7,7 @@ import SetTitle from '../SetTitle';
 import ItemRevisions from '../ItemRevisions/ItemRevisions';
 
 import { quadrantsMap } from '../../config';
-import { groupByQuadrants, Item } from '../../model';
+import { groupByQuadrants, Item, Ring } from '../../model';
 
 type PageItemMobileProps = {
   pageName: string;
@@ -45,7 +45,7 @@ export default function PageItemMobile({ pageName, items, leaving, onLeave }: Pa
                 </div>
                 <div className='split__right'>
                   <Badge big type={item.ring}>
-                    {item.ring}
+                    {Ring[item.ring]}
                   </Badge>
                 </div>
               </div>

src/components/PageOverview/PageOverview.tsx

@@ -37,8 +37,7 @@ export default function PageOverview({ rings, search: searchProp, items, leaving
 
   const isRingActive = (ring: Ring) => selectedRing === ring;
 
-  // TODO get to the bottom of this
+  const itemMatchesRing = (item: Item) => selectedRing === Ring.all || item.ring === selectedRing;
-  const itemMatchesRing = (item: Item) => selectedRing === Ring.all || Ring[item.ring] === selectedRing;
 
   const itemMatchesSearch = (item: Item) => {
     return search.trim() === '' || containsSearchTerm(item.title, search) || containsSearchTerm(item.body, search) || containsSearchTerm(item.info, search);
@@ -109,8 +108,7 @@ export default function PageOverview({ rings, search: searchProp, items, leaving
                           <div className='nav nav--relations'>
                             <div className='nav__item'>{quadrantsMap.get(item.quadrant).displayName}</div>
                             <div className='nav__item'>
-                              {/* TODO get to the bottom of this */}
+                              <Badge type={item.ring}>{Ring[item.ring]}</Badge>
-                              <Badge type={Ring[item.ring]}>{item.ring}</Badge>
                             </div>
                           </div>
                         </div>

src/components/QuadrantSection/QuadrantSection.tsx

@@ -7,14 +7,14 @@ import ItemList from '../ItemList/ItemList';
 import Flag from '../Flag/Flag';
 import { Group, Ring } from '../../model';
 import './quadrant-section.scss';
-const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: boolean) => {
+const renderList = (ring: Ring, quadrantName: string, groups: Group, big: boolean) => {
-  const itemsInRing = groups[quadrantName][ringName] || [];
+  const itemsInRing = groups[quadrantName][ring] || [];
 
   if (big) {
     return (
       <ItemList items={itemsInRing} noLeadingBorder>
-        <Badge type={ringName} big={big}>
+        <Badge type={ring} big={big}>
-          {ringName}
+          {Ring[ring]}
         </Badge>
       </ItemList>
     );
@@ -23,7 +23,7 @@ const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: bo
   return (
     <div className='ring-list'>
       <div className='ring-list__header'>
-        <Badge type={ringName}>{ringName}</Badge>
+        <Badge type={ring}>{Ring[ring]}</Badge>
       </div>
       {itemsInRing.map((item) => (
         <span key={item.name} className='ring-list__item'>
@@ -37,13 +37,13 @@ const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: bo
   );
 };
 
-const renderRing = (ringName: Ring, quadrantName: string, groups: Group, big: boolean) => {
+const renderRing = (ring: Ring, quadrantName: string, groups: Group, big: boolean) => {
-  if (!showEmptyRings && (!groups[quadrantName] || !groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0)) {
+  if (!showEmptyRings && (!groups[quadrantName] || !groups[quadrantName][ring] || groups[quadrantName][ring].length === 0)) {
     return null;
   }
   return (
-    <div key={ringName} className='quadrant-section__ring'>
+    <div key={ring} className='quadrant-section__ring'>
-      {renderList(ringName, quadrantName, groups, big)}
+      {renderList(ring, quadrantName, groups, big)}
     </div>
   );
 };
@@ -65,7 +65,7 @@ export default function QuadrantSection({ quadrantName, groups, big = false, sho
           )}
         </div>
       </div>
-      <div className='quadrant-section__rings'>{Object.keys(Ring).map((key) => renderRing(Ring[key], quadrantName, groups, big))}</div>
+      <div className='quadrant-section__rings'>{[Ring.adopt, Ring.trial, Ring.assess, Ring.hold].map((ring) => renderRing(ring, quadrantName, groups, big))}</div>
     </div>
   );
 }

src/config.ts

@@ -43,7 +43,7 @@ export const quadrantsMap: Map<string, QuadrantConfig> = new Map([
 
 export const chartConfig = {
     size: 800, //in px
-    scale: [-16, 16],
+    scale: [-16, 16], // arbitrary scale, could have any summetric values. 16 is good for dividing the chart into rings of proportional sizes/radius
     blipSize: 12, // in px, be careful when increasing this value as it may cause a lot of calculations during placing the blips on the chart
     ringsAttributes: [ // order from the centre outwards
       { radius: 8, arcWidth: 6 }, // radius values are based on the scale (not px!), arc width is in px

tasks/radar.ts

@@ -7,7 +7,9 @@ import { quadrantsMap } from '../src/config';
 import { radarPath, getAllMarkdownFiles } from './file';
 import { Item, Revision, ItemAttributes, Radar, FlagType, Ring } from '../src/model';
 
-type FMAttributes = ItemAttributes
+type FMAttributes = Omit<ItemAttributes, 'ring'> & {
+  ring: string // when reading from file it will be a String form, not numeric representation of the enum
+}
 
 marked.setOptions({
   highlight: code => hljs.highlightAuto(code).value,
@@ -27,14 +29,19 @@ export const createRadar = async (): Promise<Radar> => {
 };
 
 const checkAttributes = (fileName: string, attributes: FMAttributes) => {
-  const validQuadrants = Object.keys(quadrantsMap);
+  const validRings = [];
-
+  for (var ring in Ring) {
-  if (attributes.ring && !Ring[attributes.ring]) {
+      if (isNaN(Number(ring))) {
-    throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${Object.values(Ring)}`);
+        validRings.push(ring);
+    }    
   }
 
-  if (attributes.quadrant && !validQuadrants.includes(attributes.quadrant)) {
+  if (attributes.ring && !validRings.includes(attributes.ring)) {
-    throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${validQuadrants}`);
+    throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${validRings}`);
+  }
+
+  if (attributes.quadrant && !quadrantsMap.has(attributes.quadrant)) {
+    throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${quadrantsMap.keys()}`);
   }
 
   if (!attributes.quadrant || attributes.quadrant === '') {
@@ -45,7 +52,11 @@ const checkAttributes = (fileName: string, attributes: FMAttributes) => {
     attributes.title = path.basename(fileName);
   }
 
-  return attributes
+  return {
+    ...attributes,
+    // Convert string representation of the ring into enum value
+    ring: Ring[attributes.ring as keyof typeof Ring]
+  }
 };
 
 const createRevisionsFromFiles = (fileNames: string[]) =>