refactor(charts): Move charts into dedicated component

Relates #81 #7

src/components/careerPath/charts/Charts.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Card from 'react-bootstrap/esm/Card';
+import { CardGroupStyle, StyledCard } from '../../../templates/sharedStyles.styles';
+import Graph1 from '../../../assets/temp/lc1.png';
+import Graph2 from '../../../assets/temp/lc2.png';
+import Graph3 from '../../../assets/temp/dc.png';
+import DonutChart from '../d3charts/d3donutChart';
+// import SparklineChart from '../../d3charts/d3areaChart';
+
+import WorkingFutures from './WorkingFutures';
+
+const ReverseCardGroupStyle = styled(CardGroupStyle)`
+  grid-template-columns: 35% 60%;
+`;
+const GraphImg = styled.img`
+  width: 100%;
+`;
+const Charts: React.FC<{ soc: string; name: string }> = ({ soc, name }) => {
+  return (
+    <div className="mb-5">
+      <h2 className="mb-4">
+        Statistical Data About <strong>{name}</strong>
+      </h2>
+      <ReverseCardGroupStyle className="mb-5 mt-5">
+        <div style={{ width: `100%` }}>
+          <StyledCard className="mb-3">
+            <Card.Body>
+              <Card.Title className="mb-4">
+                <strong>Average Salary</strong>
+              </Card.Title>
+              <GraphImg src={Graph1} />
+              {/* {lmiData.loading ? (
+                `loading`
+              ) : (
+                <SparklineChart estimatePay={lmiData.lmiData.estimatePay} />
+              )} */}
+            </Card.Body>
+          </StyledCard>
+          <StyledCard>
+            <Card.Body>
+              <Card.Title className="mb-4">
+                <strong>Employment Rate</strong>
+              </Card.Title>
+              <GraphImg src={Graph2} />
+            </Card.Body>
+          </StyledCard>
+        </div>
+        <StyledCard>
+          <Card.Body>
+            <Card.Title className="mb-4">
+              <strong>Courses taken to become {name}</strong>
+            </Card.Title>
+            <GraphImg src={Graph3} />
+          </Card.Body>
+        </StyledCard>
+      </ReverseCardGroupStyle>
+      <p>
+        <StyledCard>
+          <Card.Body>
+            <Card.Title className="mb-4">
+              <strong>
+                Another card that has infomration about current number of vacancies, replacemenet
+                demand with a number over ceratin time of years. top skills in demand to become
+                {` `}
+                {name}.
+              </strong>
+              <WorkingFutures soc={soc} />
+            </Card.Title>
+          </Card.Body>
+        </StyledCard>
+      </p>
+      <p>
+        <StyledCard>
+          <Card.Body>
+            <Card.Title className="mb-4">
+              <strong>predicted Employment</strong>
+              <DonutChart />
+            </Card.Title>
+          </Card.Body>
+        </StyledCard>
+      </p>
+    </div>
+  );
+};
+
+export default Charts;

src/components/careerPath/charts/WorkingFutures.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+import useSOC from './useSOC';
+
+const WorkingFutures: React.FC<{ soc: string }> = ({ soc }) => {
+  const [, setWfData] = useState(``);
+  const [, setError] = useState(``);
+
+  useSOC({ soc, endpoint: `/wf/predict`, setWfData, setError });
+  return <p>{soc}</p>;
+};
+
+export default WorkingFutures;

src/components/careerPath/charts/useSOC.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import axios from 'axios';
+
+const apiBaseUrl = `http://api.lmiforall.org.uk/api/v1`;
+
+export default function useSOC({ endpoint, soc, setWfData }) {
+  useEffect(() => {
+    axios.get(`${apiBaseUrl + endpoint}?soc=${soc}`).then((res) => {
+      setWfData(res);
+    });
+  }, [soc, setWfData]);
+}

src/components/d3charts/d3areaChart.tsx → src/components/careerPath/d3charts/d3areaChart.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import * as d3 from 'd3';
+// import * as d3 from 'd3';
 
 const SparklineChart = ({ estimatePay }) => {
   const dataset = estimatePay;
   // .sort((a, b) => console.log(a, b));
-  console.log(dataset);
+  // console.log(dataset);
   return <div>Coming</div>;
 };
 

src/templates/CareerPath.tsx

@@ -1,32 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import React from 'react';
 
 import { PageProps, graphql } from 'gatsby';
 
-import Card from 'react-bootstrap/esm/Card';
-
-import lmi4AllData from '../utils/lmi4all';
-
-import { CardGroupStyle, StyledCard } from './sharedStyles.styles';
 import CoursesWrapper from '../components/cards/CoursesWrapper';
 import CareerPathDetail from '../components/careerPath/CareerPathDetail';
-
-import Graph1 from '../assets/temp/lc1.png';
-import Graph2 from '../assets/temp/lc2.png';
-import Graph3 from '../assets/temp/dc.png';
-import DonutChart from '../components/d3charts/d3donutChart';
-import SparklineChart from '../components/d3charts/d3areaChart';
-
-const ReverseCardGroupStyle = styled(CardGroupStyle)`
-  grid-template-columns: 35% 60%;
-`;
-
-const GraphImg = styled.img`
-  width: 100%;
-`;
+import Charts from '../components/careerPath/charts/Charts';
 
 const CareerPath: React.FC<PageProps> = ({ data }) => {
-  const [lmiData, setLmiData] = useState({ loading: true, lmiData: {} });
   const {
     description,
     color,
@@ -41,81 +21,14 @@ const CareerPath: React.FC<PageProps> = ({ data }) => {
     return { node: a };
   });
 
-  useEffect(() => {
-    return setLmiData({ loading: false, lmiData: lmi4AllData(lmiCode, name) });
-  }, []);
-
-  console.log(lmiData.lmiData.estimatePay);
-
   return (
     <main>
       <CareerPathDetail path={{ name, videoUrl, lmiCode, description }} />
       <div className="mb-5">
         <h2 className="mb-4">Career Path Courses:</h2>
         <CoursesWrapper courseData={courses} />
       </div>
-      <div className="mb-5">
-        <h2 className="mb-4">
-          Statistical Data About <strong>{name}</strong>
-        </h2>
-        <ReverseCardGroupStyle className="mb-5 mt-5">
-          <div style={{ width: `100%` }}>
-            <StyledCard className="mb-3">
-              <Card.Body>
-                <Card.Title className="mb-4">
-                  <strong>Average Salary</strong>
-                </Card.Title>
-                <GraphImg src={Graph1} />
-                {lmiData.loading ? (
-                  `loading`
-                ) : (
-                  <SparklineChart estimatePay={lmiData.lmiData.estimatePay} />
-                )}
-              </Card.Body>
-            </StyledCard>
-            <StyledCard>
-              <Card.Body>
-                <Card.Title className="mb-4">
-                  <strong>Employment Rate</strong>
-                </Card.Title>
-                <GraphImg src={Graph2} />
-              </Card.Body>
-            </StyledCard>
-          </div>
-          <StyledCard>
-            <Card.Body>
-              <Card.Title className="mb-4">
-                <strong>Courses taken to become {name}</strong>
-              </Card.Title>
-              <GraphImg src={Graph3} />
-            </Card.Body>
-          </StyledCard>
-        </ReverseCardGroupStyle>
-        <p>
-          <StyledCard>
-            <Card.Body>
-              <Card.Title className="mb-4">
-                <strong>
-                  Another card that has infomration about current number of vacancies, replacemenet
-                  demand with a number over ceratin time of years. top skills in demand to become
-                  {` `}
-                  {name}.
-                </strong>
-              </Card.Title>
-            </Card.Body>
-          </StyledCard>
-        </p>
-        <p>
-          <StyledCard>
-            <Card.Body>
-              <Card.Title className="mb-4">
-                <strong>predicted Employment</strong>
-                <DonutChart />
-              </Card.Title>
-            </Card.Body>
-          </StyledCard>
-        </p>
-      </div>
+      <Charts soc={lmiCode} name={name} />
     </main>
   );
 };

src/utils/lmi4all.tsx

@@ -13,7 +13,7 @@ interface FetchedData {
 }
 
 function lmi4AllData(lmiCode, name) {
-  const lmiData: FetchedData = {};
+  const lmiData = {};
 
   function getSkills() {
     return axios