Add basic typing to config objects

Also fixed the blips to be clickable

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 <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>
     );

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}) => {
         <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}/>

src/components/Chart/chart.scss

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