Feature 2148/replace nivo with recharts radar chart teamskills

server/src/main/resources/db/dev/R__Load_testing_data.sql

@@ -1156,14 +1156,18 @@ INSERT INTO skills -- Git
 VALUES
 ('84682de9-85a7-4bf7-b74b-e9054311a61a', 'Git', true, 'Version control system', false);
 
+INSERT INTO skills -- Java
+(id, name, pending, description, extraneous)
+VALUES
+('06c03df3-85fe-4fc3-979e-9f1f6ba74a03', 'Java', false, 'Object-oriented programming language', false);
 
 -- Member Skills
 INSERT INTO member_skills -- Big Boss, React
 (id, memberid, skillid, skilllevel, lastuseddate)
 VALUES
 ('99b7b700-bba3-440b-8df5-c1b668e9e7e0', '72655c4f-1fb8-4514-b31e-7f7e19fa9bd7', 'f057af45-e627-499c-8a71-1e6b4ab2fcd2', '5', '2022-06-01');
 
-INSERT INTO member_skills -- Big Boss, 
+INSERT INTO member_skills -- Big Boss, CSS
 (id, memberid, skillid, skilllevel, lastuseddate)
 VALUES
 ('daad16fa-2268-4e72-a2ad-e13aa8b8665b', '72655c4f-1fb8-4514-b31e-7f7e19fa9bd7', '6b56f0aa-09aa-4b09-bb81-03481af7e49f', '4', '2022-06-01');
@@ -1173,6 +1177,15 @@ INSERT INTO member_skills -- Revolver Ocelot, React
 VALUES
 ('e2de59a8-71be-4972-86be-608538503195', '105f2968-a182-45a3-892c-eeff76383fe0', 'f057af45-e627-499c-8a71-1e6b4ab2fcd2', '3', '2022-05-01');
 
+INSERT INTO member_skills -- Faux Freddy, Java
+(id, memberid, skillid, skilllevel, lastuseddate)
+VALUES
+('722c3545-4f5d-459a-b66c-3ff98d5de11b', '2dee821c-de32-4d9c-9ecb-f73e5903d17a', '06c03df3-85fe-4fc3-979e-9f1f6ba74a03', '2', '2022-07-01');
+
+INSERT INTO member_skills -- Revolver Ocelot, Java
+(id, memberid, skillid, skilllevel, lastuseddate)
+VALUES
+('d27b679c-3aa8-4c4d-b08e-4eda63cea23f', '105f2968-a182-45a3-892c-eeff76383fe0', '06c03df3-85fe-4fc3-979e-9f1f6ba74a03', '5', '2022-08-01');
 
 -- Skill Categories
 INSERT INTO skillcategories

web-ui/package.json

@@ -18,8 +18,6 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@mui/styles": "^5.15.14",
     "@mui/x-date-pickers": "^7.0.0",
-    "@nivo/core": "^0.73.0",
-    "@nivo/radar": "^0.73.0",
     "@tinymce/tinymce-react": "^5.0.0",
     "axios": "^1.6.8",
     "canvas-confetti": "^1.6.0",
@@ -31,6 +29,7 @@
     "mjml": "^4.15.3",
     "mjml-browser": "^4.15.3",
     "query-string": "^7.0.1",
+    "raf": "^3.4.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
@@ -42,6 +41,7 @@
     "react-quill": "^1.3.5",
     "react-router-dom": "^5.3.0",
     "react-swipeable-views": "^0.14.0",
+    "recharts": "^2.12.4",
     "reselect": "^4.0.0",
     "sanitize-html": "^2.12.1",
     "styled-components": "^6.1.8",

web-ui/src/components/member_skill_radar/MemberSkillRadar.jsx

@@ -0,0 +1,61 @@
+import React, {useEffect, useState} from "react";
+import PropTypes from "prop-types";
+
+import {Radar, RadarChart, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, Tooltip} from "recharts";
+
+const propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    skill: PropTypes.string.isRequired
+  })),
+  members: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+const MemberSkillRadar = ({ data, members }) => {
+
+  const [colors, setColors] = useState({});
+
+  // Calculates a pair of colors for the fill and stroke
+  const calculateColors = () => {
+    const hue = Math.random() * 360;
+    return {
+      fill: `hsl(${hue}, 100%, 50%)`,
+      stroke: `hsl(${hue}, 100%, 30%)`  // Use a darker version of the same color
+    };
+  }
+
+  useEffect(() => {
+    const updatedColors = {...colors};
+    members.forEach((member) => {
+      if (!(member.name in colors)) {
+        updatedColors[member.name] = calculateColors();
+      }
+    });
+    setColors(updatedColors);
+  }, [members]);
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
+        <PolarGrid/>
+        <PolarAngleAxis dataKey="skill"/>
+        <PolarRadiusAxis domain={[0, 5]}/>
+        <Tooltip/>
+        {members?.map((member) => (
+          <Radar
+            key={member.name}
+            name={member.name}
+            dataKey={member.name}
+            fill={colors[member.name] && colors[member.name].fill}
+            stroke={colors[member.name] && colors[member.name].stroke}
+            fillOpacity={0.6}
+          />
+        ))}
+        <Legend/>
+      </RadarChart>
+    </ResponsiveContainer>
+  );
+}
+
+MemberSkillRadar.propTypes = propTypes;
+
+export default MemberSkillRadar;

web-ui/src/pages/TeamSkillReportPage.jsx

@@ -2,7 +2,6 @@ import React, {useContext, useState} from "react";
 
 import {reportSkills} from "../api/memberskill.js";
 import SearchResults from "../components/search-results/SearchResults";
-import MyResponsiveRadar from "../components/radar/Radar";
 import {UPDATE_TOAST} from "../context/actions";
 import {AppContext} from "../context/AppContext";
 import {selectCsrfToken, selectOrderedMemberFirstName, selectOrderedSkills, selectSkill,} from "../context/selectors";
@@ -15,6 +14,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import "./TeamSkillReportPage.css";
 import MemberSelector from "../components/member_selector/MemberSelector";
 import Typography from "@mui/material/Typography";
+import MemberSkillRadar from "../components/member_skill_radar/MemberSkillRadar.jsx";
 
 const TeamSkillReportPage = () => {
   const { state } = useContext(AppContext);
@@ -170,9 +170,9 @@ const TeamSkillReportPage = () => {
       {showRadar && (
         <div>
           <div style={{ height: "400px" }}>
-            <MyResponsiveRadar
+            <MemberSkillRadar
               data={chartData || []}
-              selectedMembers={selectedMembers}
+              members={selectedMembers}
             />
           </div>
           <div className="search-results">