From 725b6f9924c10c32b0b43ed7dc09ba8ee819b058 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaros=C5=82aw=20Marek?= Date: Thu, 29 Apr 2021 21:48:44 +1200 Subject: [PATCH] Add basic typing to config objects Also fixed the blips to be clickable --- src/components/Chart/BlipPoints.tsx | 24 ++++----- src/components/Chart/RadarChart.tsx | 15 +++--- src/components/Chart/chart.scss | 4 ++ src/components/Flag/Flag.tsx | 3 +- src/components/PageIndex/PageIndex.tsx | 16 +++--- src/components/PageOverview/PageOverview.tsx | 12 ++--- src/components/QuadrantGrid/QuadrantGrid.tsx | 4 +- .../QuadrantSection/QuadrantSection.tsx | 6 +-- src/components/Router.tsx | 6 +-- src/config.ts | 51 +++---------------- src/model.ts | 20 +++++++- tasks/radar.ts | 19 ++++--- 12 files changed, 83 insertions(+), 97 deletions(-) diff --git a/src/components/Chart/BlipPoints.tsx b/src/components/Chart/BlipPoints.tsx index e3a5a26..3cad78f 100644 --- a/src/components/Chart/BlipPoints.tsx +++ b/src/components/Chart/BlipPoints.tsx @@ -1,5 +1,7 @@ import React from 'react'; -import { quadrantsMap, ringsMap, chartConfig, blipFlags } from '../..//config'; +import {FlagType, Ring} from '../../model'; +import { quadrantsMap, chartConfig } from '../../config'; +import Link from '../Link/Link'; import { NewBlip, ChangedBlip, DefaultBlip } from './BlipShapes'; /* @@ -11,7 +13,7 @@ const generateCoordinates = (enrichedBlip, xScale, yScale) => { const pi = Math.PI, ringRadius = chartConfig.ringsAttributes[enrichedBlip.ringPosition - 1].radius, previousRingRadius = enrichedBlip.ringPosition == 1 ? 0 : chartConfig.ringsAttributes[enrichedBlip.ringPosition - 2].radius, - ringPadding = 0.6; + ringPadding = 0.7; // radian between 0 and 90 degrees const randomDegree = ((Math.random() * 90) * pi) / 180; @@ -39,7 +41,7 @@ const distanceBetween = (point1, point2) => { return Math.sqrt((a * a) + (b * b)); }; -export default function BlipPoints({blips, xScale, yScale, navigate}) { +export default function BlipPoints({blips, xScale, yScale}) { const enrichedBlips = blips.reduce((list, blip) => { if (!blip.ring || !blip.quadrant) { @@ -47,8 +49,8 @@ export default function BlipPoints({blips, xScale, yScale, navigate}) { return list; } let enrichedBlip = { ...blip, - ringPosition: ringsMap[blip.ring].position, quadrantPosition: quadrantsMap[blip.quadrant].position, + ringPosition: Ring[blip.ring], colour: quadrantsMap[blip.quadrant].colour, txtColour: quadrantsMap[blip.quadrant].txtColour }; @@ -76,11 +78,6 @@ export default function BlipPoints({blips, xScale, yScale, navigate}) { return list; }, []); - const handleClick = (pageName, event) => { - event.preventDefault(); - navigate(pageName); - } - const renderBlip = (blip, index) => { const props = { blip, @@ -89,13 +86,12 @@ export default function BlipPoints({blips, xScale, yScale, navigate}) { 'data-background-color': blip.colour, 'data-text-color': blip.txtColour, 'data-tip': blip.title, - onClick: handleClick.bind(this, `${blip.quadrant}/${blip.name}`), key: index } switch (blip.flag) { - case blipFlags.new.name: + case FlagType.new: return ; - case blipFlags.changed.name: + case FlagType.changed: return ; default: return ; @@ -105,7 +101,9 @@ export default function BlipPoints({blips, xScale, yScale, navigate}) { return ( {enrichedBlips.map((blip, index) => ( - renderBlip(blip, index) + + {renderBlip(blip, index)} + ))} ); diff --git a/src/components/Chart/RadarChart.tsx b/src/components/Chart/RadarChart.tsx index 14cce3b..cbaf67c 100644 --- a/src/components/Chart/RadarChart.tsx +++ b/src/components/Chart/RadarChart.tsx @@ -1,7 +1,8 @@ import React from 'react'; import * as d3 from "d3"; import ReactTooltip from 'react-tooltip'; -import { chartConfig, quadrantsMap, ringsMap } from '../../config'; +import { Ring } from '../../model'; +import { chartConfig, quadrantsMap } from '../../config'; import { YAxis, XAxis } from './Axes'; import QuadrantRings from './QuadrantRings'; import BlipPoints from './BlipPoints'; @@ -9,8 +10,8 @@ import BlipPoints from './BlipPoints'; import './chart.scss'; const RingLabel = ({ring, xScale, yScale}) => { - const ringRadius = chartConfig.ringsAttributes[ring.position - 1].radius, - previousRingRadius = ring.position == 1 ? 0 : chartConfig.ringsAttributes[ring.position - 2].radius, + const ringRadius = chartConfig.ringsAttributes[ring - 1].radius, + previousRingRadius = ring == 1 ? 0 : chartConfig.ringsAttributes[ring - 2].radius, // middle point in between two ring arcs distanceFromCentre = previousRingRadius + (ringRadius - previousRingRadius) / 2; @@ -19,11 +20,11 @@ const RingLabel = ({ring, xScale, yScale}) => { {/* Right hand-side label */} - {ring.displayName} + {Ring[ring]} {/* Left hand-side label */} - {ring.displayName} + {Ring[ring]} ); @@ -51,8 +52,8 @@ export default function RadarChart({ blips }) { ))} - {Object.keys(ringsMap).map((id, index) => ( - + {[1, 2, 3, 4].map((ring, index) => ( + ))} diff --git a/src/components/Chart/chart.scss b/src/components/Chart/chart.scss index a707795..6ad6ae1 100644 --- a/src/components/Chart/chart.scss +++ b/src/components/Chart/chart.scss @@ -13,4 +13,8 @@ .chart .tooltip { padding: 5px 10px; border-radius: 11px; +} + +.chart .ring-label { + text-transform: uppercase; } \ No newline at end of file diff --git a/src/components/Flag/Flag.tsx b/src/components/Flag/Flag.tsx index 6f2df55..122fb32 100644 --- a/src/components/Flag/Flag.tsx +++ b/src/components/Flag/Flag.tsx @@ -1,7 +1,6 @@ import React from 'react'; import './flag.scss'; import {FlagType} from "../../model"; -import {blipFlags} from "../../config"; interface ItemFlag { flag: FlagType; @@ -10,7 +9,7 @@ interface ItemFlag { export default function Flag({ item, short = false }: { item: ItemFlag; short?: boolean }) { const ucFirst = (s: string) => s.charAt(0).toUpperCase() + s.slice(1); - if (item.flag !== blipFlags.default.name) { + if (item.flag !== FlagType.default) { let name = item.flag.toUpperCase(); let title = ucFirst(item.flag); if (short === true) { diff --git a/src/components/PageIndex/PageIndex.tsx b/src/components/PageIndex/PageIndex.tsx index 09cf657..03eab7f 100644 --- a/src/components/PageIndex/PageIndex.tsx +++ b/src/components/PageIndex/PageIndex.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { formatRelease } from '../../date'; -import { featuredOnly, Item } from '../../model'; +import { featuredOnly, Item, HomepageOption } from '../../model'; import HeroHeadline from '../HeroHeadline/HeroHeadline'; import QuadrantGrid from '../QuadrantGrid/QuadrantGrid'; import RadarGrid from '../RadarGrid/RadarGrid'; import Fadeable from '../Fadeable/Fadeable'; import SetTitle from '../SetTitle'; -import { radarName, radarNameShort } from '../../config'; +import { radarName, radarNameShort, homepageContent } from '../../config'; import { MomentInput } from 'moment'; type PageIndexProps = { @@ -19,16 +19,20 @@ type PageIndexProps = { export default function PageIndex({ leaving, onLeave, items, releases }: PageIndexProps) { const newestRelease = releases.slice(-1)[0]; const numberOfReleases = releases.length; + const showChart = homepageContent === HomepageOption.chart || homepageContent === HomepageOption.both; + const showColumns = homepageContent === HomepageOption.columns || homepageContent === HomepageOption.both; return (
{radarName}
- - {/* - - */} + {showChart && ( + + )} + {showColumns && ( + + )}
Published {formatRelease(newestRelease)}
 ); diff --git a/src/components/PageOverview/PageOverview.tsx b/src/components/PageOverview/PageOverview.tsx index fec08fa..6fc5784 100644 --- a/src/components/PageOverview/PageOverview.tsx +++ b/src/components/PageOverview/PageOverview.tsx @@ -7,8 +7,8 @@ import Search from '../Search/Search'; import Fadeable from '../Fadeable/Fadeable'; import SetTitle from '../SetTitle'; import Flag from '../Flag/Flag'; -import { groupByFirstLetter, Item } from '../../model'; -import { quadrantsMap, Ring } from '../../config'; +import { groupByFirstLetter, Item, Ring } from '../../model'; +import { quadrantsMap } from '../../config'; const containsSearchTerm = (text = '', term = '') => { // TODO search refinement @@ -75,10 +75,10 @@ export default function PageOverview({ rings, search: searchProp, items, leaving
- {rings.map((ringName) => ( -
- - {ringName} + {Object.keys(rings).map((key) => ( +
+ + {Ring[key]}
))} diff --git a/src/components/QuadrantGrid/QuadrantGrid.tsx b/src/components/QuadrantGrid/QuadrantGrid.tsx index fbdd5e2..216e802 100644 --- a/src/components/QuadrantGrid/QuadrantGrid.tsx +++ b/src/components/QuadrantGrid/QuadrantGrid.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { groupByQuadrants, Item, Group } from '../../model'; -import { quadrants } from '../../config'; +import { quadrantsMap } from '../../config'; import QuadrantSection from '../QuadrantSection/QuadrantSection'; import './quadrant-grid.scss'; const renderQuadrant = (quadrantName: string, groups: Group) => { @@ -13,5 +13,5 @@ const renderQuadrant = (quadrantName: string, groups: Group) => { export default function QuadrantGrid({ items }: { items: Item[] }) { const groups = groupByQuadrants(items); - return
{quadrants.map((quadrantName) => renderQuadrant(quadrantName, groups))}
; + return
{Object.keys(quadrantsMap).map((quadrantName) => renderQuadrant(quadrantName, groups))}
; } diff --git a/src/components/QuadrantSection/QuadrantSection.tsx b/src/components/QuadrantSection/QuadrantSection.tsx index 037a1cd..f8b35c7 100644 --- a/src/components/QuadrantSection/QuadrantSection.tsx +++ b/src/components/QuadrantSection/QuadrantSection.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { rings, quadrantsMap, Ring, showEmptyRings } from '../../config'; +import { quadrantsMap, showEmptyRings } from '../../config'; import Badge from '../Badge/Badge'; import Link from '../Link/Link'; import IconLink from '../IconLink/IconLink'; import ItemList from '../ItemList/ItemList'; import Flag from '../Flag/Flag'; -import { Group } from '../../model'; +import { Group, Ring } from '../../model'; import './quadrant-section.scss'; const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: boolean) => { const itemsInRing = groups[quadrantName][ringName] || []; @@ -65,7 +65,7 @@ export default function QuadrantSection({ quadrantName, groups, big = false, sho )}
-
{rings.map((ringName) => renderRing(ringName, quadrantName, groups, big))}
+
{Object.keys(Ring).map((key) => renderRing(Ring[key], quadrantName, groups, big))}
); } diff --git a/src/components/Router.tsx b/src/components/Router.tsx index e9214ff..ce0e93b 100644 --- a/src/components/Router.tsx +++ b/src/components/Router.tsx @@ -5,8 +5,8 @@ import PageHelp from './PageHelp/PageHelp'; import PageQuadrant from './PageQuadrant/PageQuadrant'; import PageItem from './PageItem/PageItem'; import PageItemMobile from './PageItemMobile/PageItemMobile'; -import {quadrantsMap, getItemPageNames, isMobileViewport, rings} from '../config'; -import {Item} from '../model'; +import {quadrantsMap, getItemPageNames, isMobileViewport} from '../config'; +import {Item, Ring} from '../model'; type RouterProps = { pageName: string @@ -75,7 +75,7 @@ export default function Router({pageName, items, releases, search}: RouterProps) case page.index: return ; case page.overview: - return ; case page.help: return ; diff --git a/src/config.ts b/src/config.ts index e0eaff8..df840c4 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,8 +1,10 @@ -import {Item} from './model'; +import {Item, HomepageOption} from './model'; export const radarName = process.env.RADAR_NAME || 'AOE Technology Radar' export const radarNameShort = radarName; +export const homepageContent = HomepageOption.both; // by defaul show both versions so that people can choose which one they like more (or keep both) + // Quadrants positions start from the top right and go clockwise export const quadrantsMap = { 'methods-and-patterns': { @@ -11,7 +13,7 @@ export const quadrantsMap = { colour: '#248EA6', txtColour: 'white', position: 1, - description: 'Optional description goes here' + description: 'Here we put information on methods and patterns concerning development, continuous x, testing, organization, architecture, etc.' }, 'platforms-and-aoe-services': { id: 'platforms-and-aoe-services', @@ -19,7 +21,7 @@ export const quadrantsMap = { colour: '#F25244', txtColour: '#444444', position: 2, - description: 'Optional description goes here' + 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', @@ -27,7 +29,7 @@ export const quadrantsMap = { colour: '#F2A25C', txtColour: 'white', position: 3, - description: 'Optional descrption goes here' + description: 'Here we put different software tools - from small helpers to bigger software projects' }, 'languages-and-frameworks': { id: 'languages-and-frameworks', @@ -35,7 +37,7 @@ export const quadrantsMap = { colour: '#84BFA4', txtColour: '#444444', position: 4, - description: 'Optional description goes here' + 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." }, }; @@ -44,50 +46,13 @@ export const chartConfig = { scale: [-16, 16], 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!) + { radius: 8, arcWidth: 6 }, // radius values are based on the scale (not px!), arc width is in px { radius: 11, arcWidth: 4 }, { radius: 14, arcWidth: 2 }, { radius: 16, arcWidth: 2 } ] }; -export const rings = [ - 'all', - 'adopt', - 'trial', - 'assess', - 'hold' -] as const; - -// rings positions start at the centre and go outwards -export const ringsMap = { - 'adopt': { - displayName: 'ADOPT', - position: 1 - }, - 'trial': { - displayName: 'EXPLORE', - position: 2 - }, - 'assess': { - displayName: 'ENDURE', - position: 3 - }, - 'hold': { - displayName: 'RETIRE', - position: 4 - } -}; - -// TODO replace with TS enum -export const blipFlags = { - new: { name: 'new', short: 'N' }, - changed: { name: 'changed', short: 'C' }, - default: { name: 'default', short: '' } -} - -export type Ring = typeof rings[number] - export const getItemPageNames = (items: Item[]) => items.map(item => `${item.quadrant}/${item.name}`); export const showEmptyRings = false; diff --git a/src/model.ts b/src/model.ts index a73f9f6..e639e83 100644 --- a/src/model.ts +++ b/src/model.ts @@ -1,4 +1,16 @@ -import { Ring } from "./config" +export enum HomepageOption { + chart, + columns, + both +} + +export enum Ring { + all = 0, + adopt = 1, + trial = 2, + assess = 3, + hold = 4 +} export type ItemAttributes = { name: string @@ -8,7 +20,11 @@ export type ItemAttributes = { featured: boolean } -export type FlagType = 'new' | 'changed' | 'default' +export enum FlagType { + new = 'new', + changed = 'changed', + default = 'default' +} export type Item = ItemAttributes & { featured: boolean diff --git a/tasks/radar.ts b/tasks/radar.ts index 2c3cd2f..8ab301b 100644 --- a/tasks/radar.ts +++ b/tasks/radar.ts @@ -3,9 +3,9 @@ import path from 'path'; import frontmatter from 'front-matter'; import marked from 'marked'; import hljs from 'highlight.js'; -import { quadrantsMap, ringsMap, blipFlags } from '../src/config'; +import { quadrantsMap } from '../src/config'; import { radarPath, getAllMarkdownFiles } from './file'; -import { Item, Revision, ItemAttributes, Radar } from '../src/model'; +import { Item, Revision, ItemAttributes, Radar, FlagType, Ring } from '../src/model'; type FMAttributes = ItemAttributes @@ -28,10 +28,9 @@ export const createRadar = async (): Promise => { const checkAttributes = (fileName: string, attributes: FMAttributes) => { const validQuadrants = Object.keys(quadrantsMap); - const validRings = Object.keys(ringsMap); - if (attributes.ring && !validRings.includes(attributes.ring)) { - throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${validRings}`); + if (attributes.ring && !Ring[attributes.ring]) { + throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${Object.values(Ring)}`); } if (attributes.quadrant && !validQuadrants.includes(attributes.quadrant)) { @@ -116,12 +115,12 @@ const ignoreEmptyRevisionBody = (revision: Revision, item: Item) => { const addRevisionToItem = ( item: Item = { - flag: 'default', + flag: FlagType.default, featured: true, revisions: [], name: '', title: '', - ring: 'trial', + ring: Ring.trial, quadrant: '', body: '', info: '', @@ -168,10 +167,10 @@ const hasItemChanged = (item: Item, allReleases: string[]) => const getItemFlag = (item: Item, allReleases: string[]): string => { if (isNewItem(item, allReleases)) { - return blipFlags.new.name; + return FlagType.new; } if (hasItemChanged(item, allReleases)) { - return blipFlags.changed.name; + return FlagType.changed; } - return blipFlags.default.name; + return FlagType.default; };