AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add basic typing to config objects

Browse Source 
Also fixed the blips to be clickable
This commit is contained in:
Jarosław Marek
2021-04-29 21:48:44 +12:00
parent 13ba3120c3
commit 725b6f9924
12 changed files with 83 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Chart/BlipPoints.tsx
View File

@@ -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 <NewBlip {...props} />;
case blipFlags.changed.name:
case FlagType.changed:
return <ChangedBlip {...props} />;
default:
return <DefaultBlip {...props} />;
@@ -105,7 +101,9 @@ export default function BlipPoints({blips, xScale, yScale, navigate}) {
return (
<g className="blips">
{enrichedBlips.map((blip, index) => (
renderBlip(blip, index)
<Link pageName={`${blip.quadrant}/${blip.name}`} key={index}>
{renderBlip(blip, index)}
</Link>
))}
</g>
);

15
src/components/Chart/RadarChart.tsx
View File

@@ -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}) => {
<g className="ring-label">
{/* Right hand-side label */}
<text x={xScale(distanceFromCentre)} y={yScale(0)} textAnchor="middle" dy=".35em">
{ring.displayName}
{Ring[ring]}
</text>
{/* Left hand-side label */}
<text x={xScale(-distanceFromCentre)} y={yScale(0)} textAnchor="middle" dy=".35em">
{ring.displayName}
{Ring[ring]}
</text>
</g>
);
@@ -51,8 +52,8 @@ export default function RadarChart({ blips }) {
<QuadrantRings key={index} quadrant={quadrantsMap[id]} xScale={xScale} />
))}
{Object.keys(ringsMap).map((id, index) => (
<RingLabel key={index} ring={ringsMap[id]} xScale={xScale} yScale={yScale} />
{[1, 2, 3, 4].map((ring, index) => (
<RingLabel key={index} ring={ring} xScale={xScale} yScale={yScale} />
))}
<BlipPoints blips={blips} xScale={xScale} yScale={yScale}/>

4
src/components/Chart/chart.scss
View File

@@ -13,4 +13,8 @@
.chart .tooltip {
padding: 5px 10px;
border-radius: 11px;
}
.chart .ring-label {
text-transform: uppercase;
}

3
src/components/Flag/Flag.tsx
View File

@@ -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) {

16
src/components/PageIndex/PageIndex.tsx
View File

@@ -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 (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title={radarNameShort} />
<div className='headline-group'>
<HeroHeadline alt={`Version #${numberOfReleases}`}>{radarName}</HeroHeadline>
</div>
<RadarGrid blips={featuredOnly(items)} />
{/*
<QuadrantGrid items={featuredOnly(items)} />
*/}
{showChart && (
<RadarGrid blips={featuredOnly(items)} />
)}
{showColumns && (
<QuadrantGrid items={featuredOnly(items)} />
)}
<div className='publish-date'>Published {formatRelease(newestRelease)}</div>
</Fadeable>
);

12
src/components/PageOverview/PageOverview.tsx
View File

@@ -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
</div>
<div className='split__right'>
<div className='nav'>
{rings.map((ringName) => (
<div className='nav__item' key={ringName}>
<Badge big onClick={handleRingClick(ringName)} type={isRingActive(ringName) ? ringName : 'empty'}>
{ringName}
{Object.keys(rings).map((key) => (
<div className='nav__item' key={Ring[key]}>
<Badge big onClick={handleRingClick(Ring[key])} type={isRingActive(Ring[key]) ? Ring[key] : 'empty'}>
{Ring[key]}
</Badge>
</div>
))}

4
src/components/QuadrantGrid/QuadrantGrid.tsx
View File

@@ -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 <div className='quadrant-grid'>{quadrants.map((quadrantName) => renderQuadrant(quadrantName, groups))}</div>;
return <div className='quadrant-grid'>{Object.keys(quadrantsMap).map((quadrantName) => renderQuadrant(quadrantName, groups))}</div>;
}

6
src/components/QuadrantSection/QuadrantSection.tsx
View File

@@ -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
)}
</div>
</div>
<div className='quadrant-section__rings'>{rings.map((ringName) => renderRing(ringName, quadrantName, groups, big))}</div>
<div className='quadrant-section__rings'>{Object.keys(Ring).map((key) => renderRing(Ring[key], quadrantName, groups, big))}</div>
</div>
);
}

6
src/components/Router.tsx
View File

@@ -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 <PageIndex leaving={leaving} items={items} onLeave={handlePageLeave} releases={releases}/>;
case page.overview:
return <PageOverview items={items} rings={rings} search={search} leaving={leaving}
return <PageOverview items={items} rings={Object.values(Ring)} search={search} leaving={leaving}
onLeave={handlePageLeave}/>;
case page.help:
return <PageHelp leaving={leaving} onLeave={handlePageLeave}/>;