feat(ExtraInfo.tsx): add graph to dispaly courses taken by other over…

… the years

Relates #81

src/components/careerPath/charts/Charts.tsx

@@ -5,8 +5,8 @@ import { mediaQuery } from '../../../styles';
 import EstimatedPay from './charts/EstimatedPay';
 import EmploymentRate from './charts/EmploymentRate';
 import WorkingFuturesPrediction from './charts/WorkingFuturesPrediction';
-import WorkingFuturesReplacemendDemand from './charts/WorkingFuturesReplacementDemand';
 import Abilities from './charts/Abilities';
+import ExtraInfo from './charts/ExtraInfo';
 
 const GraphGrid = styled.div`
   display: grid;
@@ -28,11 +28,7 @@ const Charts: React.FC<MotherChart> = ({ soc, name, color }) => {
         </div>
         <Abilities onetCode={onetCode} name={name} color={color} />
       </GraphGrid>
-      <div>
-        <h1>vacancies availble at the moment</h1>
-        <h2>courses taken by others</h2>
-        <WorkingFuturesReplacemendDemand soc={soc} name={name} color={color} />
-      </div>
+      <ExtraInfo soc={soc} name={name} color={color} />
       <WorkingFuturesPrediction soc={soc} name={name} color={color} />
     </div>
   );

src/components/careerPath/charts/charts/CoursesChart.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Radar, RadarChart, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis } from 'recharts';
+
+function CoursesChart({ soc }) {
+  const [courses, setCourses] = useState({});
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    axios
+      .get(`http://api.lmiforall.org.uk/api/v1/hesa/courses/${soc}`)
+      .then((res) => {
+        setCourses(res);
+      })
+      .catch(() => {
+        setError(true);
+      });
+  }, [setCourses, soc, setError]);
+
+  const processedData = [];
+    const fakeData = courses?.data.years;
+
+  const keys = [];
+  const subjects = [];
+  const subjectPercentageByYear = [];
+
+  fakeData.map((e) => {
+    keys.push(e.year);
+    const sortedCourses = e.courses
+      .sort((a, b) => {
+        return b.percentage - a.percentage;
+      })
+      .slice(0, 6);
+    sortedCourses.map((a) => {
+      subjectPercentageByYear.push({ name: a.name, [e.year]: a.percentage });
+      return !subjects.includes(a.name) ? subjects.push(a.name) : 1;
+    });
+  });
+  subjects.map((e) => {
+    const dataEntry = keys.reduce(
+      (a, b) => {
+        // eslint-disable-next-line no-return-assign
+        return (a[b] = 0), a;
+      },
+      {
+        subject: e.replace(/\(\w+\)\s+/gi, ``),
+        fullMark: 100,
+      },
+    );
+    processedData.push(dataEntry);
+  });
+
+  processedData.map((e) => {
+    const filteredYears = subjectPercentageByYear.filter((a) => {
+      return a.name.replace(/\(\w+\)\s+/gi, ``) === e.subject;
+    });
+    filteredYears.map((a) => {
+      e[Object.keys(a)[1]] = a[Object.keys(a)[1]];
+    });
+    return filteredYears;
+  });
+
+  if (error) {
+    return <></>;
+  }
+  return (
+    <RadarChart outerRadius={90} width={730} height={250} data={processedData}>
+      <PolarGrid />
+      <PolarAngleAxis dataKey="subject" />
+      <PolarRadiusAxis angle={30} domain={[0, 0]} />
+      <Radar name="2011/12" dataKey="2011/12" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
+      <Radar name="2012/13" dataKey="2012/13" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
+      <Radar name="2013/14" dataKey="2013/14" stroke="#ff2122" fill="#8884d8" fillOpacity={0.6} />
+      <Radar name="2014/15" dataKey="2014/15" stroke="#879012" fill="#82ca9d" fillOpacity={0.6} />
+      <Legend />
+    </RadarChart>
+  );
+}
+
+export default CoursesChart;

src/components/careerPath/charts/charts/ExtraInfo.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import WorkingFuturesReplacemendDemand from './WorkingFuturesReplacementDemand';
+// import CoursesChart from './CoursesChart';
+
+function ExtraInfo({ soc, name, color }) {
+  return (
+    <div>
+      <h2>courses taken by others</h2>
+      {/* <CoursesChart soc={soc} /> */}
+      <WorkingFuturesReplacemendDemand soc={soc} name={name} color={color} />
+    </div>
+  );
+}
+
+export default ExtraInfo;

src/components/layouts/footer/InternalLinks.tsx

@@ -3,7 +3,6 @@ import { useStaticQuery, graphql } from 'gatsby';
 import styled from 'styled-components';
 import * as SC from './styled-components';
 import { mediaQuery } from '../../../styles';
-import footerDecoration from '../../../assets/footerDecoration.png';
 
 type page = {
   node: {
@@ -41,12 +40,6 @@ const FooterLinksDecor = styled.div`
   }`)}
 `;
 
-const Image = styled.img`
-  height: 50%;
-  width: auto;
-  align-self: flex-end;
-`;
-
 const InternalLinks: React.FC<{}> = () => {
   const pages = useStaticQuery(graphql`
     query {

src/components/layouts/nav/Nav.tsx

@@ -13,19 +13,7 @@ const Logo = styled.img`
   width: auto;
   max-height: 1.5em;
 `;
-const Navitem = styled(Nav)`
-  :after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 100%;
-    height: 3px;
-    content: '';
-    color: transparent;
-  }
-`;
+
 const LinkItem = styled(Link)`
   font-weight: bold;