feat: add axios requests and d3

package.json

@@ -43,6 +43,8 @@
     "babel-plugin-root-import": "^6.5.0",
     "babel-plugin-styled-components": "^1.11.1",
     "bootstrap": "^4.5.2",
+    "britecharts-react": "^0.5.4",
+    "d3": "^6.0.0",
     "gatsby": "^2.22.5",
     "gatsby-plugin-layout": "^1.3.10",
     "gatsby-plugin-styled-components": "^3.3.10",

src/components/d3charts/d3areaChart.tsx

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

src/components/d3charts/d3donutChart.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Donut } from 'britecharts-react';
+
+const with4Slices = () => {
+  return [
+    {
+      quantity: 60,
+      percentage: 60,
+      name: `React`,
+      id: 1,
+    },
+    {
+      quantity: 20,
+      percentage: 20,
+      name: `Ember`,
+      id: 2,
+    },
+    {
+      quantity: 10,
+      percentage: 10,
+      name: `Angular`,
+      id: 3,
+    },
+    {
+      quantity: 10,
+      percentage: 10,
+      name: `Backbone`,
+      id: 4,
+    },
+  ];
+};
+
+const DonutChart = () => {
+  return <Donut data={with4Slices()} />;
+};
+
+export default DonutChart;

src/templates/CareerPath.tsx

@@ -14,6 +14,8 @@ 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%;
@@ -43,6 +45,8 @@ const CareerPath: React.FC<PageProps> = ({ data }) => {
     return setLmiData({ loading: false, lmiData: lmi4AllData(lmiCode, name) });
   }, []);
 
+  console.log(lmiData.lmiData.estimatePay);
+
   return (
     <main>
       <CareerPathDetail path={{ name, videoUrl, lmiCode, description }} />
@@ -62,12 +66,17 @@ const CareerPath: React.FC<PageProps> = ({ data }) => {
                   <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 ratio</strong>
+                  <strong>Employment Rate</strong>
                 </Card.Title>
                 <GraphImg src={Graph2} />
               </Card.Body>
@@ -76,12 +85,36 @@ const CareerPath: React.FC<PageProps> = ({ data }) => {
           <StyledCard>
             <Card.Body>
               <Card.Title className="mb-4">
-                <strong>Success Ratio</strong>
+                <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>
     </main>
   );

src/utils/lmi4all.tsx

@@ -53,7 +53,6 @@ function lmi4AllData(lmiCode, name) {
     .catch((errors) => {
       throw new Error(errors);
     });
-
   return lmiData;
 }