diff --git a/plugins/tech-radar/src/components/Radar/Radar.tsx b/plugins/tech-radar/src/components/Radar/Radar.tsx index 15fcb697c2..0193c75eb1 100644 --- a/plugins/tech-radar/src/components/Radar/Radar.tsx +++ b/plugins/tech-radar/src/components/Radar/Radar.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect, useRef, useState } from 'react'; +import { useMemo, useRef, useState } from 'react'; import type { Entry, Quadrant, Ring } from '../../utils/types'; import RadarPlot from '../RadarPlot'; import { adjustEntries, adjustQuadrants, adjustRings } from './utils'; @@ -36,26 +36,23 @@ const Radar = ({ entries, ...props }: Props): JSX.Element => { - const [adjustedQuadrants, setAdjustedQuadrants] = - useState>(quadrants); - const [adjustedRings, setAdjustedRings] = useState>(rings); - const [adjustedEntries, setAdjustedEntries] = useState>(entries); - const radius = Math.min(width, height) / 2; + // State const [activeEntry, setActiveEntry] = useState(); const node = useRef(null); - useEffect(() => { - setAdjustedQuadrants(adjustQuadrants(quadrants, radius, width, height)); - }, [quadrants, radius, width, height]); - - useEffect(() => { - setAdjustedRings(adjustRings(rings, radius)); - }, [radius, rings]); - - useEffect(() => { - setAdjustedEntries( + // Adjusted props + const adjustedQuadrants = useMemo( + () => adjustQuadrants(quadrants, radius, width, height), + [quadrants, radius, width, height], + ); + const adjustedRings = useMemo( + () => adjustRings(rings, radius), + [radius, rings], + ); + const adjustedEntries = useMemo( + () => adjustEntries( entries, adjustedQuadrants, @@ -63,8 +60,8 @@ const Radar = ({ radius, activeEntry, ), - ); - }, [entries, adjustedQuadrants, adjustedRings, radius, activeEntry]); + [entries, adjustedQuadrants, adjustedRings, radius, activeEntry], + ); return ( diff --git a/plugins/tech-radar/src/components/Radar/utils.ts b/plugins/tech-radar/src/components/Radar/utils.ts index 5b458068e6..7fff038023 100644 --- a/plugins/tech-radar/src/components/Radar/utils.ts +++ b/plugins/tech-radar/src/components/Radar/utils.ts @@ -81,7 +81,7 @@ export const adjustQuadrants = ( }, ]; - return quadrants.slice().map((quadrant, index) => { + return quadrants.map((quadrant, index) => { const legendParam = legendParams[index % 4]; return { @@ -100,14 +100,14 @@ export const adjustQuadrants = ( }; export const adjustEntries = ( - _entries: Entry[], + entries: Entry[], quadrants: Quadrant[], rings: Ring[], radius: number, activeEntry?: Entry, -) => { +): Entry[] => { let seed = 42; - const entries = _entries.map((entry, index) => { + const adjustedEntries = entries.map((entry, index) => { const quadrant = quadrants.find(q => { const match = typeof entry.quadrant === 'object' ? entry.quadrant.id : entry.quadrant; @@ -145,7 +145,7 @@ export const adjustEntries = ( }); const simulation = forceSimulation() - .nodes(entries) + .nodes(adjustedEntries) .velocityDecay(0.19) .force('collision', forceCollide().radius(12).strength(0.85)) .stop(); @@ -160,7 +160,7 @@ export const adjustEntries = ( ) { simulation.tick(); - for (const entry of entries) { + for (const entry of adjustedEntries) { if (entry.segment) { entry.x = entry.segment.clipx(entry); entry.y = entry.segment.clipy(entry); @@ -168,11 +168,11 @@ export const adjustEntries = ( } } - return entries; + return adjustedEntries; }; export const adjustRings = (rings: Ring[], radius: number) => - rings.slice().map((ring, index) => ({ + rings.map((ring, index) => ({ ...ring, index, outerRadius: ((index + 2) / (rings.length + 1)) * radius,