Merge pull request #43 from amosproj/frontend-dev-#37

Implementation of #37
amosproj · May 17, 2021 · 19da4fe · 19da4fe
2 parents 300b6df + 9ce70ff
commit 19da4fe
Show file tree

Hide file tree

Showing 38 changed files with 619 additions and 286 deletions.
diff --git a/frontend/public/LogoCarbonteam.ico b/frontend/public/LogoCarbonteam.ico
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -2,39 +2,42 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link rel="shortcut icon" href="%PUBLIC_URL%/LogoCarbonteam.ico" />
         <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
         <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2018.css" />
         <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2019.css" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=2" />
         <meta name="theme-color" content="#000000" />
         <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+          manifest.json provides metadata used when your web app is installed on a
+          user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+        -->
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
         <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+          Notice the use of %PUBLIC_URL% in the tags above.
+          It will be replaced with the URL of the `public` folder during the build.
+          Only files inside the `public` folder can be referenced from the HTML.
+    
+          Unlike "/LogoCarbonteam.ico" or "LogoCarbonteam.ico", "%PUBLIC_URL%/favicon.ico" will
+          work correctly both with client-side routing and a non-root public URL.
+          Learn how to configure a non-root public URL by running `npm run build`.
+        -->
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-        <title>Dashboard Kit</title>
+        <title>Carbon Footprint Visualization</title>
     </head>
+
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
         <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    --></body>
+          This HTML file is a template.
+          If you open it directly in the browser, you will see an empty page.
+    
+          You can add webfonts, meta tags, or analytics to this file.
+          The build step will place the bundled scripts into the <body> tag.
+    
+          To begin the development, run `npm start` or `yarn start`.
+          To create a production bundle, use `npm run build` or `yarn build`.
+         -->
+    </body>
 </html>
diff --git a/frontend/src/assets/dummyImages/Logo2.png b/frontend/src/assets/dummyImages/Logo2.png
diff --git a/frontend/src/assets/icons/icon-arrow.js b/frontend/src/assets/icons/icon-arrow.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default (props) => (
-<svg  width="20" height="20" fill='none' xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
+<svg  width="20" height="20"  fill='none' xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
   <path opacity={props.opacity || ''}  d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z"
   fill={props.fill || "#9FA2B4"}/>
 </svg>

diff --git a/frontend/src/assets/icons/icon-building.js b/frontend/src/assets/icons/icon-building.js
@@ -2,7 +2,7 @@
 import React from 'react';
 
 export default (props) => (
-<svg width="20" height="20" fill ='none' xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20" >
+<svg width="18" height="18" fill ='none' xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20" >
   <path opacity={props.opacity || ''}  d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" fillRule="evenodd"
 
   fill={props.fill || "#9FA2B4"}/>

diff --git a/frontend/src/assets/icons/icon-circle.js b/frontend/src/assets/icons/icon-circle.js
@@ -0,0 +1,8 @@
+
+import React from 'react';
+
+export default (props) => (
+<svg width="25" height="50" fill ='grey'>
+  <circle opacity={props.opacity || ''} cx="15" cy="25" r="4"  fill = {props.fill || "#9FA2B4"}/>
+</svg>
+)
diff --git a/frontend/src/assets/icons/icon-home.js b/frontend/src/assets/icons/icon-home.js
@@ -2,7 +2,7 @@ import React from "react";
 
 
 export default (props) => (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+    <svg width="20" height="20" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
         <path opacity={props.opacity || ''} d="M3 10v11h6v-7h6v7h6v-11L12,3z"
             fill={props.fill || "#9FA2B4"}
         />

diff --git a/frontend/src/assets/icons/icon-logout.js b/frontend/src/assets/icons/icon-logout.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default (props) => (
-    <svg width="16" height="16" viewBox="0 0 297 297" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="20" height="20" viewBox="0 0 290 290" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path opacity={props.opacity || ''} d="M155,6.5c-30.147,0-58.95,9.335-83.294,26.995c-2.789,2.023-3.547,5.853-1.739,8.787L92.83,79.374
 				c0.962,1.559,2.53,2.649,4.328,3.004c1.796,0.354,3.661-0.054,5.145-1.129c14.23-10.323,31.069-15.78,48.698-15.78
 				c45.783,0,83.03,37.247,83.03,83.03c0,45.783-37.247,83.03-83.03,83.03c-17.629,0-34.468-5.456-48.698-15.78

diff --git a/frontend/src/assets/icons/icon-overview.js b/frontend/src/assets/icons/icon-overview.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default (props) => (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+    <svg width="20" height="20" viewBox="0 0 16 16" fill="none"
         xmlns="http://www.w3.org/2000/svg">
         <g clipPath="url(#clip0)">
             <path opacity={props.opacity || ''} d="M15.5232 8.94116H8.54412L13.1921 13.5891C13.3697 13.7667 13.6621 13.7812 13.8447 13.6091C14.9829 12.5367 15.7659 11.0912 15.9956 9.46616C16.035 9.18793 15.8041 8.94116 15.5232 8.94116V8.94116ZM15.0576 7.03528C14.8153 3.52176 12.0076 0.714119 8.49412 0.471767C8.22589 0.453237 8 0.679413 8 0.948236V7.5294H14.5815C14.8503 7.5294 15.0762 7.30352 15.0576 7.03528ZM6.58824 8.94116V1.96206C6.58824 1.68118 6.34147 1.45029 6.06353 1.48971C2.55853 1.985 -0.120585 5.04705 0.00412089 8.71675C0.132356 12.4856 3.37736 15.5761 7.14794 15.5288C8.6303 15.5103 10 15.0326 11.1262 14.2338C11.3585 14.0691 11.3738 13.727 11.1724 13.5256L6.58824 8.94116Z"
@@ -10,7 +10,7 @@ export default (props) => (
         </g>
         <defs>
             <clipPath id="clip0">
-                <rect width="16" height="16" fill="white" />
+                <rect width="20" height="20" fill="white" />
             </clipPath>
         </defs>
     </svg>

diff --git a/frontend/src/assets/icons/icon-power.js b/frontend/src/assets/icons/icon-power.js
@@ -3,7 +3,7 @@ import React from 'react';
 
 export default (props) => (
 
- <svg width="20" height="20" fill='grey' xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
+ <svg width="18" height="18" fill='grey' xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
     <path opacity={props.opacity || ''} d="M705.6 124.9a8 8 0 0 0-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0 1 62.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0 1 27.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 0 1-76.3 113.3 353.06 353.06 0 0 1-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 0 1-113.2-76.4A355.92 355.92 0 0 1 184 650.4a355 355 0 0 1-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
     fill={props.fill || "#9FA2B4"}/>
   </svg>

diff --git a/frontend/src/assets/icons/icon-settings.js b/frontend/src/assets/icons/icon-settings.js
diff --git a/frontend/src/assets/icons/icon-transmission.js b/frontend/src/assets/icons/icon-transmission.js
@@ -3,7 +3,7 @@ import React from 'react';
 
 export default (props) => (
 
-<svg width="20" height="20" version="1.1" id="Power_plug" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
+<svg width="18" height="18" version="1.1" id="Power_plug" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
 	 viewBox="0 0 20 20" enableBackground="new 0 0 20 20"fill='none'>
 <path  opacity={props.opacity || ''} d="M0,14v1.498C0,15.775,0.225,16,0.502,16h0.997C1.775,16,2,15.775,2,15.498V14c0-0.959,0.801-2.273,2-2.779V9.116
 	C1.684,9.652,0,11.97,0,14z M12.065,4.701L9.535,6.599C9.188,6.859,8.766,7,8.332,7H6.005C5.45,7,5,7.45,5,8.005v3.991

diff --git a/frontend/src/assets/icons/icon-user.js b/frontend/src/assets/icons/icon-user.js
@@ -0,0 +1,10 @@
+
+import React from 'react';
+
+export default (props) => (
+<svg widht='30' height='30' xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill='none'>
+  <path opacity={props.opacity || ''} fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" 
+  fill={props.fill || "#9FA2B4"}/>
+</svg>
+
+)
diff --git a/frontend/src/assets/icons/index.js b/frontend/src/assets/icons/index.js
@@ -23,6 +23,8 @@ import IconArrow from './icon-arrow';
 import IconBrowse from './icon-browse';
 import IconBuilding from './icon-building';
 import IconArrowDown from './icon-arrow-down';
+import IconCircle from './icon-circle'
+import IconUser from './icon-user'
 
 export {
     IconCheckboxOff,
@@ -49,5 +51,7 @@ export {
     IconArrow,
     IconBrowse,
     IconBuilding,
-    IconArrowDown
+    IconArrowDown,
+    IconCircle, 
+    IconUser
 };
diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
@@ -1,21 +1,22 @@
 import React from 'react';
 import { Column } from 'simple-flexbox';
 import { createUseStyles, useTheme } from 'react-jss';
-
+import theme from 'resources/theme';
 //reconfiguration of the dropdown boxes
 const useStyles = createUseStyles((theme) => ({
 
     container: {
         backgroundColor: '#FFFFFF',
-        border: `1px solid ${theme.color.lightGrayishBlue2}`,
+        border: `3px solid ${theme.color.lightGrayishBlue2}`,
         borderRadius: 4,
         cursor: 'pointer',
-        maxWidth: 205,
-        maxHeight:160,
-        marginTop:50,
-        padding: '8px 16px 8px 16px',
+        maxWidth: 350,
+        minWidth:210, // resizing the card min width
+        maxHeight:150,
+        // marginTop:50,
+        // padding: '8px 16px 8px 16px',
         '&:hover': {
-            borderColor: theme.color.lightBlue,
+            borderColor: theme.uniformStyle.color.tableHeaderColor ,
             '&:nth-child(n) > span': {
                 color: theme.color.lightBlue
             }
@@ -30,8 +31,8 @@ const useStyles = createUseStyles((theme) => ({
     },
     value: {
         color: theme.color.veryDarkGrayishBlue,
-        fontWeight: 'bold',
-        fontSize: 20,
+        fontWeight: 'inherit',
+        fontSize: 14,
         letterSpacing: '1px',
         lineHeight: '50px',
         textAlign: 'center'
@@ -47,12 +48,10 @@ function MiniCardComponent({ className = '', title, value, path }) {
     return (
         <Column flexGrow={1} className={composedClassName} horizontal='center' vertical='center'>
         {/*  Resize the image on the cards (product images)            */}
-            <div style={{width: 150, paddingLeft: 20, paddingTop: 20, paddingBottom: 20 }}>
-            {/* define the image path */}
-            <img src={path} alt=''/>
+            <div style={{ width: 130,  paddingTop: 20, paddingBottom: 20 }}>
+                    {/* define the image path */}
+                    <img src={path} alt='' />
             </div>
-            <span className={classes.title}>{title}</span>
-            <span className={classes.value}>{value}</span>
 
         </Column>
     );

diff --git a/frontend/src/components/details/CanvasComponent.jsx b/frontend/src/components/details/CanvasComponent.jsx
@@ -2,7 +2,7 @@
 in this main component come all the canvas page components 
 such as diagrams and tables 
 
-@author parham, 08.05
+@author parham, 08.05, Irem Toroslu
 */
 
 import React, { Component } from 'react';
@@ -11,25 +11,30 @@ import ColumnChart from './ColumnChartComponent';
 import Table from './TableComponent'
 import './canvas.css';
 import {Container, Row, Col } from 'react-grid-system';
+import theme from 'resources/theme';
+
 
 
 class CanvasPage extends Component {
     render() {
         return (
-            <Container fluid={true}>
+            <Container  fluid={true}>
             <Row>
-                <Col xs={5}>
-                    <h3> Material Composition </h3>
+                <Col xs={5} style={{marginTop:30}}>
+                    <h3  style={{fontSize:theme.typography.subtitle.fontSize,fontWeight:theme.typography.subtitle.fontWeight, lineHeight:theme.typography.subtitle.lineHeight,
+                    letterSpacing:theme.typography.subtitle.letterSpacing,marginLeft:100}}> Material Composition </h3>
                     <PieChart></PieChart>
                 </Col>
-                <Col xs={5}>
-                    <h3> Results of the impact assessment </h3>
+                <Col xs={5} style={{marginTop:30,marginLeft:20}}>
+                    <h3 style={{fontSize:theme.typography.subtitle.fontSize,fontWeight:theme.typography.subtitle.fontWeight, lineHeight:theme.typography.subtitle.lineHeight,
+                    letterSpacing:theme.typography.subtitle.letterSpacing,marginLeft:90}}> Results of the impact assessment </h3>
                     <ColumnChart></ColumnChart>
                 </Col>
             </Row>
             <Row>
-            <Col xs={10}>
-                <h3> Impact categories </h3>
+            <Col xs={10} style={{marginTop:30,marginBottom:30}}>
+                <h3 style={{fontSize:theme.typography.subtitle.fontSize,fontWeight:theme.typography.subtitle.fontWeight, lineHeight:theme.typography.subtitle.lineHeight,
+                letterSpacing:theme.typography.subtitle.letterSpacing}} > Impact categories </h3>
                 <Table></Table>
             </Col>
             </Row>

diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -1,11 +1,12 @@
 /**
  * Column Chart
  *
- * @author Julian Oelhaf
+ * @author Julian Oelhaf, Irem Toroslu
  */
 import React, { Component } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import {getResultsImpactAssessment} from 'interface/projectInterface';
+import theme from 'resources/theme';
 
 const ColumnChartComponent = () => {
     const series = [{
@@ -20,11 +21,15 @@ const ColumnChartComponent = () => {
           type: 'bar',
           height: '150'
         },
+
         plotOptions: {
           bar: {
-            color: '#00308F',
             columnWidth: '60%',
           }
+
+        },
+        fill: {
+          colors: [theme.uniformStyle.color.barChartColor]
         },
         dataLabels: {
           enabled: false,
@@ -39,15 +44,25 @@ const ColumnChartComponent = () => {
           labels: {
             formatter: function (y) {
               return y.toFixed(0) + "%";
-            }
+            },
+            style: {
+              fontSize: theme.typography.chartItemstitle.fontSize,
+              fontWeight: theme.typography.chartItemstitle.fontWeight
+          }
+
+
           }
         },
         xaxis: {
           categories: [
             'Materials', 'Manufacturing and Transport', 'Operation 30a (75% load)', 'End of Life'
           ],
           labels: {
-            rotate: -90
+            rotate: -90,
+            style: {
+              fontSize: theme.typography.chartItemstitle.fontSize,
+              fontWeight: theme.typography.chartItemstitle.fontWeight
+          }
           }
         }
     };
@@ -57,7 +72,7 @@ const ColumnChartComponent = () => {
 
     return (
         <div id='chart'>
-            <ReactApexChart options={options} series={series} type="bar" height={350} />
+            <ReactApexChart options={options} series={series} type="bar" color='green' height={350} />
         </div>
     );