diff --git a/.gitignore b/.gitignore index 4d29575..f60f236 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +*.gif \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 83c6a63..c1261d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2434,6 +2434,11 @@ "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=" }, + "art": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/art/-/art-0.10.3.tgz", + "integrity": "sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==" + }, "asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", @@ -3987,6 +3992,16 @@ "sha.js": "^2.4.8" } }, + "create-react-class": { + "version": "15.6.3", + "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz", + "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==", + "requires": { + "fbjs": "^0.8.9", + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -4803,6 +4818,24 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", + "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "requires": { + "iconv-lite": "^0.6.2" + }, + "dependencies": { + "iconv-lite": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz", + "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==", + "requires": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + } + } + } + }, "end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -5804,6 +5837,35 @@ "bser": "2.1.1" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, "figgy-pudding": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", @@ -7149,6 +7211,15 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -7908,6 +7979,11 @@ "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==" }, + "konva": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/konva/-/konva-7.1.3.tgz", + "integrity": "sha512-yYL6Ie6bEwxIvmWxRdoeUW4lSiAKvM2yg++Z4qx6vuiLgtICJFX1i5LwUeMIN9Z5RSLbJ4h7wG+6kMtAxL+ltg==" + }, "last-call-webpack-plugin": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz", @@ -8572,6 +8648,15 @@ "tslib": "^1.10.0" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", @@ -10589,6 +10674,19 @@ "whatwg-fetch": "^3.0.0" } }, + "react-art": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-art/-/react-art-16.13.1.tgz", + "integrity": "sha512-IDXRZCUlyl3AkQ6Xf3qg0C6MSDxKhOhf7amYzWNMaelH5K2W9KqUOUHL8mGwC0k/1BXFhhusSgsE1Bekz3aHEQ==", + "requires": { + "art": "^0.10.1", + "create-react-class": "^15.6.2", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.19.1" + } + }, "react-dev-utils": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz", @@ -10811,6 +10909,26 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-konva": { + "version": "16.13.0-6", + "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-16.13.0-6.tgz", + "integrity": "sha512-wqIrZSneJWn2D2ExwtSqp9U804OUA3RhkxzzRbp/2s+54mx9iU2lpP2CNGHMAnxNccR03mcLwGirb6wvPOOPLA==", + "requires": { + "react-reconciler": "^0.25.1", + "scheduler": "^0.19.1" + } + }, + "react-reconciler": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.25.1.tgz", + "integrity": "sha512-R5UwsIvRcSs3w8n9k3tBoTtUHdVhu9u84EG7E5M0Jk9F5i6DA1pQzPfUZd6opYWGy56MJOtV3VADzy6DRwYDjw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.19.1" + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -12915,6 +13033,11 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "ua-parser-js": { + "version": "0.7.22", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz", + "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==" + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", diff --git a/package.json b/package.json index d28b26f..5f604aa 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,11 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "konva": "^7.1.3", "react": "^16.13.1", + "react-art": "^16.13.1", "react-dom": "^16.13.1", + "react-konva": "^16.13.0-6", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3", "styled-components": "^5.2.0" diff --git a/src/components/calculate/index.js b/src/components/calculate/index.js index 41725a7..fc22ab1 100644 --- a/src/components/calculate/index.js +++ b/src/components/calculate/index.js @@ -1,40 +1,40 @@ import React, { useState } from "react"; import styled from "styled-components"; -import CalculateComponent from './calculateComponent'; +import CalculateComponent from "./calculateComponent"; const CalculateContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - background-color: #83D86F; - min-height: 70vh; - padding: 10vh 0 10vh 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: #83d86f; + min-height: 70vh; + padding: 10vh 0 10vh 0; `; const ComponentContainer = styled.div` - width: 80%; - display: flex; - flex-direction: column; - align-items: flex-start; + width: 80%; + display: flex; + flex-direction: column; + align-items: flex-start; `; const CalculateTitle = styled.h1` - color: white; - font-size: 4rem; - font-weight: bold; - margin-bottom: 20px; + color: white; + font-size: 4rem; + font-weight: bold; + margin-bottom: 20px; `; const CalculateDescription = styled.p` - color: white; - font-size: 1.75rem; - text-align: justify; - text-justify: auto; + color: white; + font-size: 1.75rem; + text-align: justify; + text-justify: auto; `; const CalculateA = styled.a` - color: white; + color: white; `; const Sub = styled.sub` @@ -43,19 +43,32 @@ const Sub = styled.sub` `; function Calculate() { - const [step, setStep] = useState(1); - - return ( - - - Calculate Your Impact - Find the carbon impact of a machine learning model computation by indicating indicating relevant configuration options. -
- Data obtained from OpenGenus IQ and MLCO2 Impact. - - - - ) + const [step, setStep] = useState(1); + + return ( + + + Calculate Your Impact + + Find the carbon impact of a machine learning model computation by + indicating indicating relevant configuration options. + +
+ + Calculated using data from{" "} + + OpenGenus IQ + {" "} + and{" "} + + MLCO2 Impact + + . + + + + + ); } -export default Calculate; \ No newline at end of file +export default Calculate; diff --git a/src/components/calculate/visualization.js b/src/components/calculate/visualization.js index 7d781df..dfaaf5b 100644 --- a/src/components/calculate/visualization.js +++ b/src/components/calculate/visualization.js @@ -1,13 +1,81 @@ -import React from 'react'; -// import styled from 'styled-components'; +import React, { useState } from "react"; +import styled from "styled-components"; +import { Stage, Layer, Star, Text } from "react-konva"; +import car from "../../assets/images/car.png"; + +const VisualizationTitle = styled.h2` + font-weight: bold; + font-size: 1.5rem; +`; + +const VisualizationButton = styled.button` + border: none; + padding: 20px; + border-radius: 25px; + background-color: #45aa29; + color: white; + font-family: Quicksand, sans-serif; + font-weight: medium; + font-size: 1.25rem; +`; + +//const VisualizationStage = styled.Stage``; + +const generateShapes = () => { + return [...Array(10)].map((_, i) => ({ + id: i.toString(), + x: Math.random() * window.innerWidth, + y: Math.random() * window.innerHeight, + rotation: Math.random() * 180, + isDragging: false, + })); +}; + +const INITIAL_STATE = generateShapes(); function Visualization(props) { - return ( - <> - Visualization - - - ) + const [stars, setStars] = useState(INITIAL_STATE); + + return ( + <> + + Putting your data into perspective + + + + {stars.map((star) => ( + + ))} + + + { + props.setStep(1); + }} + > + Start over + + + ); } -export default Visualization; \ No newline at end of file +export default Visualization;