diff --git a/package.json b/package.json index b459066..3b8e157 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,10 @@ "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", @@ -10,14 +14,14 @@ "@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" }, diff --git a/src/components/YearGraph/YearGraph.styles.css b/src/components/YearGraph/YearGraph.styles.css new file mode 100644 index 0000000..92c6a7f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx new file mode 100644 index 0000000..a5b706c --- /dev/null +++ b/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: , 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 ( +
+
+ { containerOneLabels.map((containerOneLabels)=>( + )) + } +
+ +
+ Some more Labels go here +
+ +
+ { containerThreeButtons.map((containerThreeButtons)=>( + )) + } +
+
+ 3D Chart goes here +
+
+
+ Column One + +
+
+ Column Two + +
+
+ Column Three + +
+
+
+ labels and a button go here +
+
+ ); +}; +// Exporting the created YearGraph JSX Element +export default YearGraph; \ No newline at end of file diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx new file mode 100644 index 0000000..7184d36 --- /dev/null +++ b/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; + ` + } +` \ No newline at end of file diff --git a/src/components/YearGraph/index.tsx b/src/components/YearGraph/index.tsx new file mode 100644 index 0000000..f4e0640 --- /dev/null +++ b/src/components/YearGraph/index.tsx @@ -0,0 +1,4 @@ +// Written by Joey Essak- +// YearGraph index.tsx file +import YearGraph from "./YearGraph"; +export { YearGraph }; \ No newline at end of file diff --git a/src/components/YearGraph/test/YearGraph.test.tsx b/src/components/YearGraph/test/YearGraph.test.tsx new file mode 100644 index 0000000..4eee36c --- /dev/null +++ b/src/components/YearGraph/test/YearGraph.test.tsx @@ -0,0 +1 @@ +import React from "react"; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index de46f4a..de36dea 100644 --- a/src/index.tsx +++ b/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( - + {/* */} + , document.getElementById('root') ); diff --git a/yarn.lock b/yarn.lock index 146f646..99ad2b6 100644 --- a/yarn.lock +++ b/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"