implimented year graph component

package.json

@@ -3,21 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.6.0",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/styled-components": "^5.1.9",
     "eslint": "^7.27.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
     "styled-components": "^5.3.0",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/styled-components": "^5.1.9",
     "typescript": "^4.2.4",
     "web-vitals": "^1.0.1"
   },

src/components/YearGraph/YearGraph.styles.css

@@ -0,0 +1,88 @@
+.wrapper {
+    margin-top: 25px;
+    margin-left: 15px;
+    margin-right: 15px;
+    margin-bottom: 25px;
+    display: flex;
+    flex-direction: column;
+    background-color:white;
+    border-style: solid;
+    border-radius: 20px;
+    border-color: #009688;
+    border-width: 10px;
+}
+
+.container-1 {
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    background-color: white;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+}
+
+.container-2 {
+    background-color: #b2dfdb;
+    display: flex-box;
+    flex-direction: row;
+    align-items: center;
+}
+
+.container-3 {
+    background-color: #80cbc4;
+}
+
+.container-4 {
+    background-color: #4db6ac;
+}
+
+.container-5 {
+    background-color: #26a69a;
+    display: flex;
+}
+
+.column-1 {
+    order:1;
+    width: 33.33%;
+    background-color: #a7ffeb;
+    text-align: center;
+    align-self: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.column-2 {
+    order:2;
+    width: 33.33%;
+    background-color: #64ffda;
+    text-align: center;
+    align-self: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.column-3 {
+    order:3;
+    width: 33.33%;
+    background-color: #1de9b6;
+    text-align: center;
+    align-self: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.container-6 {
+    background-color: #009688;
+}
+
+#icon {
+    order: 2;
+}
+
+.test {
+    color:red;
+}
+
+.test2{
+    color: blue;
+}

src/components/YearGraph/YearGraph.tsx

@@ -0,0 +1,76 @@
+// Written by Joey Essak-
+// Imported CSS
+import "./YearGraph.styles.css";
+// Imported Font Awesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCaretUp } from '@fortawesome/free-solid-svg-icons'
+import { faStar } from '@fortawesome/free-regular-svg-icons'
+import { Label } from "./YearGraphStyled";
+import { Button } from "./YearGraphStyled";
+
+
+// Creating a YearGraph JSX Element 
+const YearGraph = ( ): JSX.Element => {
+// Container 1   
+  const containerOneLabels = [
+    {id:1, value: "19.00", labelName:"currentPriceLabel"},
+    {id:2, value: <FontAwesomeIcon id="icon" icon={faCaretUp}/> , labelName:"faIconLabel"},
+    {id:3, value: " 0.10", labelName:"priceDiffernceLabel" },
+    {id:4, value: " (00.53%)", labelName:"priceDifferncePercentLabel"},
+  ];
+
+// Container 2
+
+
+// Container 3 
+const containerThreeButtons = [
+    {id:5, title: "Day"},
+    {id:6, title: "Week"},
+    {id:7, title: "Month"},
+    {id:8, title: "Year"},
+    {id:9, title: "5 Year"},
+    {id:10,title: "Max"},
+];  
+
+  return (
+   <div className="wrapper">
+      <div className="container-1">
+          { containerOneLabels.map((containerOneLabels)=>(
+            <Label id={ `${containerOneLabels.id}` } labelName={containerOneLabels.labelName}> {containerOneLabels.value} </Label>))
+          }  
+      </div>
+
+      <div className="container-2">
+         Some more Labels go here
+      </div>
+
+      <div className="container-3">
+         { containerThreeButtons.map((containerThreeButtons)=>(
+            <Button id={ `${containerThreeButtons.id}` }> {containerThreeButtons.title} </Button>))
+         }
+      </div>
+      <div className="container-4">
+        3D Chart goes here
+      </div>
+      <div className="container-5">
+          <div className="column-1">
+            Column One
+            <label> A bunch of labels go here</label>
+          </div>
+          <div className="column-2">
+            Column Two
+            <label> A bunch of labels go here</label>
+          </div>
+          <div className="column-3">
+            Column Three
+            <label> A bunch of labels go here</label>
+          </div>
+      </div>
+      <div className="container-6">
+        labels and a button go here
+      </div>
+   </div> 
+  );
+};
+// Exporting the created YearGraph JSX Element
+export default YearGraph;

src/components/YearGraph/YearGraphStyled.tsx

@@ -0,0 +1,54 @@
+// Written by Joey Essak-
+// Importorting styled-comonents 
+import styled, {css} from "styled-components";
+// Ultimate Wrapper this goes around the whole enchilada
+export const UltimateWrapper = styled.div`
+display: flex;
+min-height: 100vh;
+flex-direction: column;
+background-color:#eceff1;
+`
+export const Button = styled.button`
+width: 90px;
+height: 30px;
+border-radius: 25px;
+margin-right: 20px;
+color: #636363;
+&:hover {
+  background: #009688;
+  color: white;
+  cursor: pointer;
+}
+`
+
+export const Label =  styled.label <{ labelName: string }>`
+  display: flex;
+  font-size: 20px;
+  color: grey;
+  padding-right:4px;
+    ${props => props.labelName == "currentPriceLabel" && css`
+        color: black;
+        font-size: 2em;
+        padding-left:10px;
+      `   
+      }
+
+    ${props => props.labelName == "faIconLabel" && css`
+        align-items: flex-end;
+        color: green;
+        font-size: 20px;
+      `   
+      }  
+
+    ${props => props.labelName == "priceDiffernceLabel" && css` 
+        color: green;
+        font-size: 15px;
+    `
+    }
+
+    ${props => props.labelName == "priceDifferncePercentLabel" && css` 
+        color: green;
+        font-size: 15px;
+    `
+    }
+`

src/components/YearGraph/index.tsx

@@ -0,0 +1,4 @@
+// Written by Joey Essak-
+// YearGraph index.tsx file 
+import YearGraph  from "./YearGraph";
+export { YearGraph };

src/components/YearGraph/test/YearGraph.test.tsx

@@ -0,0 +1 @@
+import React from "react";

src/index.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+// import App from './App';
 import reportWebVitals from './reportWebVitals';
-
+import YearGraph from './components/YearGraph/YearGraph'
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    {/* <App /> */}
+    <YearGraph />
   </React.StrictMode>,
   document.getElementById('root')
 );

yarn.lock

@@ -1302,6 +1302,39 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.35":
+  version "0.2.35"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9"
+  integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==
+
+"@fortawesome/fontawesome-svg-core@^1.2.35":
+  version "1.2.35"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz#85aea8c25645fcec88d35f2eb1045c38d3e65cff"
+  integrity sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/free-regular-svg-icons@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz#1ec4f2410ff638db549c5c5484fc60b66407dbe6"
+  integrity sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/free-solid-svg-icons@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8"
+  integrity sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/react-fontawesome@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
+  integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz"