Merge pull request #85 from tech-for-better/81-D3-LMI4all

81 d3 lmi4all

.eslintrc

@@ -35,7 +35,7 @@
     "object-curly-newline": "off",
     "arrow-body-style": ["error", "always"],
     "camelcase": "off",
-    "@typescript-eslint/camelcase": ["error", {"allow": ["online_only", "career_paths", "soc_code", "total_price"]}]
+    "@typescript-eslint/camelcase": ["error", {"allow": ["online_only", "career_paths", "soc_code", "total_price", "start_year", "end_year"]}]
   },
   "overrides": [
     {

src/components/careerPath/charts/Charts.tsx

@@ -0,0 +1,99 @@
+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 EstimatedPay from './EstimatedPay';
+import WorkingFuturesPrediction from './WorkingFuturesPrediction';
+import WorkingFuturesReplacemendDemand from './WorkingFuturesReplacementDemand';
+
+// 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>
+      <WorkingFuturesPrediction soc={soc} />
+      <WorkingFuturesReplacemendDemand soc={soc} />
+      <EstimatedPay soc={soc} />
+    </div>
+  );
+  // );
+  // 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} />
+  //             <EstimatedPay />
+  //           </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/EstimatedPay.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import useSOC from './useSOC';
+
+const EstimatedPay: React.FC<{ soc: string }> = ({ soc }) => {
+  const [estimatedPay, setEstimatedPay] = useState(``);
+  const [, setError] = useState(``);
+
+  useSOC({ soc, endpoint: `/ashe/estimatePay`, setter: setEstimatedPay, setError });
+
+  return (
+    <p>
+      {estimatedPay?.data?.series?.reduce((acc, year) => {
+        return acc + year.estpay;
+      }, 0) / estimatedPay?.data?.series?.length || null}
+    </p>
+  );
+};
+
+export default EstimatedPay;

src/components/careerPath/charts/WorkingFuturesPrediction.tsx

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

src/components/careerPath/charts/WorkingFuturesReplacementDemand.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import useSOC from './useSOC';
+
+const WorkingFuturesReplacementDemand: React.FC<{ soc: string }> = ({ soc }) => {
+  const [wfData, setWfData] = useState(``);
+  const [, setError] = useState(``);
+
+  useSOC({ soc, endpoint: `/wf/replacement_demand`, setter: setWfData, setError });
+
+  if (wfData) {
+    const { start_year, end_year, rate } = wfData?.data;
+    return (
+      <p>
+        Between {start_year} and {end_year} the rate of replacement for {soc} is predicted to be
+        {rate}.
+      </p>
+    );
+  }
+
+  return <p />;
+};
+
+export default WorkingFuturesReplacementDemand;

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, setter, setError }) {
+  useEffect(() => {
+    axios.get(`${apiBaseUrl + endpoint}?soc=${soc}`).then((res) => {
+      setter(res);
+    });
+  }, [endpoint, soc, setter, setError]);
+}

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>
+      {lmiCode && <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