refactor(tech-radar): variable names + undefined check

plugins/tech-radar/src/components/Radar/Radar.tsx

@@ -32,7 +32,7 @@ const Radar = (props: Props): JSX.Element => {
   const { width, height, quadrants, rings, entries } = props;
   const radius = Math.min(width, height) / 2;
 
-  const [activeEntry, setActiveEntry] = useState<Entry | null>();
+  const [activeEntry, setActiveEntry] = useState<Entry>();
   const node = useRef<SVGSVGElement>(null);
 
   // TODO(dflemstr): most of this can be heavily memoized if performance becomes a problem
@@ -49,9 +49,9 @@ const Radar = (props: Props): JSX.Element => {
         entries={entries}
         quadrants={quadrants}
         rings={rings}
-        activeEntry={activeEntry || undefined}
+        activeEntry={activeEntry}
         onEntryMouseEnter={entry => setActiveEntry(entry)}
-        onEntryMouseLeave={() => setActiveEntry(null)}
+        onEntryMouseLeave={() => setActiveEntry(undefined)}
       />
     </svg>
   );

plugins/tech-radar/src/components/Radar/utils.ts

@@ -81,14 +81,14 @@ export const adjustQuadrants = (
     },
   ];
 
-  quadrants.forEach((quadrant, idx) => {
-    const legendParam = legendParams[idx % 4];
+  quadrants.forEach((quadrant, index) => {
+    const legendParam = legendParams[index % 4];
 
-    quadrant.idx = idx;
-    quadrant.radialMin = (idx * Math.PI) / 2;
-    quadrant.radialMax = ((idx + 1) * Math.PI) / 2;
-    quadrant.offsetX = idx % 4 === 0 || idx % 4 === 3 ? 1 : -1;
-    quadrant.offsetY = idx % 4 === 0 || idx % 4 === 1 ? 1 : -1;
+    quadrant.index = index;
+    quadrant.radialMin = (index * Math.PI) / 2;
+    quadrant.radialMax = ((index + 1) * Math.PI) / 2;
+    quadrant.offsetX = index % 4 === 0 || index % 4 === 3 ? 1 : -1;
+    quadrant.offsetY = index % 4 === 0 || index % 4 === 1 ? 1 : -1;
     quadrant.legendX = legendParam.x;
     quadrant.legendY = legendParam.y;
     quadrant.legendWidth = legendParam.width;
@@ -101,10 +101,10 @@ export const adjustEntries = (
   quadrants: Quadrant[],
   rings: Ring[],
   radius: number,
-  activeEntry?: Entry | null,
+  activeEntry?: Entry,
 ) => {
   let seed = 42;
-  entries.forEach((entry, idx) => {
+  entries.forEach((entry, index) => {
     const quadrant = quadrants.find(q => {
       const match =
         typeof entry.quadrant === 'object' ? entry.quadrant.id : entry.quadrant;
@@ -124,7 +124,7 @@ export const adjustEntries = (
       throw new Error(`Unknown ring ${entry.ring} for entry ${entry.id}!`);
     }
 
-    entry.idx = idx;
+    entry.index = index;
     entry.quadrant = quadrant;
     entry.ring = ring;
     entry.segment = new Segment(quadrant, ring, radius, () => seed++);
@@ -163,10 +163,10 @@ export const adjustEntries = (
 };
 
 export const adjustRings = (rings: Ring[], radius: number) => {
-  rings.forEach((ring, idx) => {
-    ring.idx = idx;
-    ring.outerRadius = ((idx + 2) / (rings.length + 1)) * radius;
+  rings.forEach((ring, index) => {
+    ring.index = index;
+    ring.outerRadius = ((index + 2) / (rings.length + 1)) * radius;
     ring.innerRadius =
-      ((idx === 0 ? 0 : idx + 1) / (rings.length + 1)) * radius;
+      ((index === 0 ? 0 : index + 1) / (rings.length + 1)) * radius;
   });
 };

plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx

@@ -49,7 +49,7 @@ const RadarGrid = (props: Props) => {
   const { radius, rings } = props;
   const classes = useStyles(props);
 
-  const makeRingNode = (ringRadius: number | undefined, ringIndex: number) => [
+  const makeRingNode = (ringIndex: number, ringRadius?: number) => [
     <circle
       key={`c${ringIndex}`}
       cx={0}
@@ -88,7 +88,9 @@ const RadarGrid = (props: Props) => {
     />,
   ];
 
-  const ringNodes = rings.map(r => r.outerRadius).map(makeRingNode);
+  const ringNodes = rings
+    .map(r => r.outerRadius)
+    .map((ringRadius, ringIndex) => makeRingNode(ringIndex, ringRadius));
 
   return <>{axisNodes.concat(...ringNodes)}</>;
 };

plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx

@@ -101,10 +101,13 @@ const RadarLegend = (props: Props): JSX.Element => {
     ring: Ring,
     ringOffset = 0,
   ) => {
-    const qidx = quadrant.idx;
-    const ridx = ring.idx;
-    const segmentedData = qidx === undefined ? {} : segmented[qidx] || {};
-    return ridx === undefined ? [] : segmentedData[ridx + ringOffset] || [];
+    const quadrantIndex = quadrant.index;
+    const ringIndex = ring.index;
+    const segmentedData =
+      quadrantIndex === undefined ? {} : segmented[quadrantIndex] || {};
+    return ringIndex === undefined
+      ? []
+      : segmentedData[ringIndex + ringOffset] || [];
   };
 
   const renderRing = (
@@ -116,14 +119,14 @@ const RadarLegend = (props: Props): JSX.Element => {
     return (
       <div key={ring.id} className={classes.ring}>
         <h3 className={classes.ringHeading}>{ring.name}</h3>
-        {entries.length === 0 ? (
+        {!entries.length ? (
           <p>(empty)</p>
         ) : (
           <ol className={classes.ringList}>
             {entries.map(entry => (
               <li
                 key={entry.id}
-                value={(entry.idx || 0) + 1}
+                value={(entry.index || 0) + 1}
                 onMouseEnter={
                   onEntryMouseEnter && (() => onEntryMouseEnter(entry))
                 }
@@ -178,24 +181,24 @@ const RadarLegend = (props: Props): JSX.Element => {
     const segments: Segments = {};
 
     for (const entry of entries) {
-      const qidx = entry.quadrant.idx;
-      const ridx = entry.ring.idx;
+      const quadrantIndex = entry.quadrant.index;
+      const ringIndex = entry.ring.index;
       let quadrantData: { [k: number]: Entry[] } = {};
-      if (qidx !== undefined) {
-        if (segments[qidx] === undefined) {
-          segments[qidx] = {};
+      if (quadrantIndex !== undefined) {
+        if (segments[quadrantIndex] === undefined) {
+          segments[quadrantIndex] = {};
         }
 
-        quadrantData = segments[qidx];
+        quadrantData = segments[quadrantIndex];
       }
 
       let ringData = [];
-      if (ridx !== undefined) {
-        if (quadrantData[ridx] === undefined) {
-          quadrantData[ridx] = [];
+      if (ringIndex !== undefined) {
+        if (quadrantData[ringIndex] === undefined) {
+          quadrantData[ringIndex] = [];
         }
 
-        ringData = quadrantData[ridx];
+        ringData = quadrantData[ringIndex];
       }
 
       ringData.push(entry);

plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx

@@ -71,7 +71,7 @@ const RadarPlot = (props: Props): JSX.Element => {
             x={entry.x || 0}
             y={entry.y || 0}
             color={entry.color || ''}
-            value={((entry && entry.idx) || 0) + 1}
+            value={((entry && entry.index) || 0) + 1}
             url={entry.url}
             moved={entry.moved}
             onMouseEnter={onEntryMouseEnter && (() => onEntryMouseEnter(entry))}

plugins/tech-radar/src/utils/types.ts

@@ -17,7 +17,7 @@
 // Parameters for a ring; its index in an array determines how close to the center this ring is.
 export type Ring = {
   id: string;
-  idx?: number;
+  index?: number;
   name: string;
   color: string;
   outerRadius?: number;
@@ -27,7 +27,7 @@ export type Ring = {
 // Parameters for a quadrant (there should be exactly 4 of course)
 export type Quadrant = {
   id: string;
-  idx?: number;
+  index?: number;
   name: string;
   legendX?: number;
   legendY?: number;
@@ -47,7 +47,7 @@ export type Segment = {
 
 export type Entry = {
   id: string;
-  idx?: number;
+  index?: number;
   x?: number;
   y?: number;
   color?: string;