Merge pull request #138 from amosproj/dev-#82

distributing code from branch Dev #82

.gitignore

@@ -2,5 +2,9 @@ node_modules
 .idea
 /.vs/slnx.sqlite-journal
 .vs/slnx.sqlite
+obj/Debug/netcoreapp5.0/amos-ss2021-carbon-footprint.csproj.AssemblyReference.cache
 
 frontend/yarn.lock
+.vs/slnx.sqlite
+.vs/amos-ss2021-carbon-footprint/v16/.suo
+.vs/slnx.sqlite

frontend/package.json

@@ -7,7 +7,7 @@
         "@material-ui/core": "^4.11.4",
         "@react-pdf/renderer": "^2.0.12",
         "@reduxjs/toolkit": "^1.6.0",
-        "apexcharts": "^3.26.1",
+        "apexcharts": "^3.27.1",
         "axios": "^0.21.1",
         "cors": "^2.8.5",
         "html2canvas": "^1.0.0-rc.7",
@@ -58,7 +58,7 @@
         "@testing-library/react": "^11.2.7",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.6",
-        "gh-pages": "^2.2.0",
+        "gh-pages": "^3.2.3",
         "identity-obj-proxy": "^3.0.0",
         "jest": "26.6.0",
         "jest-transform-stub": "^2.0.0",

frontend/src/components/details/ColumnChartComponent.jsx

@@ -1,18 +1,18 @@
-import React from 'react';
+import { React } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import { getColumnChartData, getLifeCycleStages } from 'interface/projectInterface';
 
 /**
  * Column Chart
- *
- * @author Julian Oelhaf
+ * Recieves the data from projectInterface.js using "getColumnChartData()"
+ * populates the data ito the column chart in Details Page.
  */
 const ColumnChartComponent = () => {
+    const values = getColumnChartData();
     const series = [
         {
             name: 'Global warming in kg CO2 equivalents',
-            // TODO: this data needs to be recieved from backend
-            data: getColumnChartData()
+            data: values
         }
     ];
 

frontend/src/components/details/DetailsComponent.js

@@ -6,13 +6,14 @@ import html2canvas from 'html2canvas';
 import { Col, Container, Row } from 'react-grid-system';
 import './navbar.css';
 import { postCalculationRequest } from 'interface/BackendConnect';
-//import LoadingComponent from 'components/loading';
+import LoadingComponent from 'components/loading';
 /**
  * the main component for detail page which includes
  * canvas page and variable drop down list
  *
  * @param props the recently selected model of a product.
  */
+
 class DetailsComponent extends Component {
     /* State consists of three variable one for each of the possible state
      * baselineScenario: only display the baseline scenario
@@ -83,21 +84,29 @@ class DetailsComponent extends Component {
                 pdf.save('invoice.pdf');
             });
         };
-
+        /*
+         * Important function that is given as the callback parameter to the postCalculationRequest in order to be called
+         * when the data processing is finished. Then the state stillLoading will be set to false.
+         * This change of state trigger the DetailsComponent to rerender and now display the charts and tables
+         * instead of the LoadingComponent.
+         */
+        let handleFinishedDataRequest = () => {
+            this.setState({ stillLoading: false });
+        };
         const scenarioNames = {
             baseline: 'Baseline Scenario',
             modified: 'Modified Scenario'
         };
         const { selectedProduct } = this.props;
 
-        postCalculationRequest(selectedProduct.productID);
-
-        // if (this.state.stillLoading) {
-        //     return <LoadingComponent loading />;
-        // }
+        if (this.state.stillLoading) {
+            postCalculationRequest(selectedProduct.productID, handleFinishedDataRequest);
+            return <LoadingComponent loading />;
+        }
 
         if (this.state.baselineScenario) {
             // if state equals baseline scenario only
+            console.log(selectedProduct);
             return (
                 <Container className='ScenarioContainer' id='capture' fluid>
                     <Row>

frontend/src/components/details/MobileTableComponent.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Container } from 'react-grid-system';
 import {
     getImpactCategoriesTableHeaders,
-    getImpactCategoriesTableData
+    getImpactAssessmentData
 } from 'interface/projectInterface';
 import PropTypes from 'prop-types';
 
@@ -12,8 +12,8 @@ import PropTypes from 'prop-types';
  */
 class MobileTableComponent extends Component {
     state = {
-        headers: getImpactCategoriesTableHeaders(this.props.modelId),
-        rows: getImpactCategoriesTableData(this.props.modelId)
+        headers: getImpactCategoriesTableHeaders(),
+        rows: getImpactAssessmentData()
     };
     render() {
         const idKey = this.props.tableKey;
@@ -44,46 +44,16 @@ class MobileTableComponent extends Component {
                                 <th key={'table1' + idKey + 'thead' + header.key + index}>
                                     {header.value}
                                 </th>
-                                <td key={'table1' + idKey + 'thead' + header.key + index + '3'}>
+                                {getRowDataHelper(idKey, index, this.state.rows)}
+                                {/* <td key={'table1' + idKey + 'thead' + header.key + index + '3'}>
                                     {Object.values(this.state.rows[3])[index + 1]}
                                 </td>
                                 <td key={'table1' + idKey + 'thead' + header.key + index + '4'}>
                                     {Object.values(this.state.rows[4])[index + 1]}
                                 </td>
                                 <td key={'table1' + idKey + 'thead' + header.key + index + '5'}>
                                     {Object.values(this.state.rows[5])[index + 1]}
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-
-                <div style={{ margin: '20px' }} />
-
-                <table className='w3-table-all w3-card-4 w3-small w3-center'>
-                    {/* style needs to be defined in js */}
-                    <tbody>
-                        {this.state.headers.map((header, index) => (
-                            <tr
-                                style={
-                                    index === 0
-                                        ? { backgroundColor: '#d1a675', fontWeight: 'bold' }
-                                        : {}
-                                }
-                                key={'table2' + idKey + 'tr' + index}
-                            >
-                                <th key={'table2' + idKey + 'thead' + header.key + index}>
-                                    {header.value}
-                                </th>
-                                <td key={'table2' + idKey + 'thead' + header.key + index + '0'}>
-                                    {Object.values(this.state.rows[0])[index + 1]}
-                                </td>
-                                <td key={'table2' + idKey + 'thead' + header.key + index + '1'}>
-                                    {Object.values(this.state.rows[1])[index + 1]}
-                                </td>
-                                <td key={'table2' + idKey + 'thead' + header.key + index + '2'}>
-                                    {Object.values(this.state.rows[2])[index + 1]}
-                                </td>
+                                </td> */}
                             </tr>
                         ))}
                     </tbody>
@@ -94,10 +64,47 @@ class MobileTableComponent extends Component {
 }
 
 MobileTableComponent.propTypes = {
-    modelId: PropTypes.string.isRequired,
+    modelID: PropTypes.string.isRequired,
     productName: PropTypes.string.isRequired,
     modelName: PropTypes.string.isRequired,
     tableKey: PropTypes.string.isRequired
 };
 
 export default MobileTableComponent;
+
+/**
+ * Makes life a little bit easier, and developers a little bit happier.
+ * (By translating the row data to column data for the Mobile component)
+ *
+ * @param {*} idKey - allows unique id to be generated
+ * @param {number} rowIndex - the index of the current row
+ * @param rows - the rowdata that will be accesed
+ * @returns the <td/> element of the corresponding row
+ */
+function getRowDataHelper(idKey, rowIndex, rows) {
+    switch (rowIndex) {
+        case 0:
+            return <td key={idKey + 'Global Warming Mobile'}>{'Global Warming'}</td>;
+        case 1:
+            return (
+                <td key={idKey + 'kg CO2 eq Mobile'}>
+                    {'kg CO'}
+                    <sub>2</sub>
+                    {' eq'}{' '}
+                </td>
+            );
+        case 2:
+            return <td key={idKey + 'td-c'}>{rows.get('Total')}</td>;
+
+        case 3:
+            return <td key={idKey + 'td-e'}>{rows.get('Materials')}</td>;
+        case 4:
+            return <td key={idKey + 'td-b'}>{rows.get('Manufacturing and Transportation')}</td>;
+        case 5:
+            return <td key={idKey + 'td-g'}>{rows.get('Operation')}</td>;
+        case 6:
+            return <td key={idKey + 'td-h'}>{rows.get('End of life')}</td>;
+        default:
+            return <td />;
+    }
+}

frontend/src/components/details/NavbarComponent.js

@@ -8,7 +8,6 @@ import { useHistory } from 'react-router-dom';
  * a divider Pannel for seperating search compoents and result components
  * and also providing the comparison feature by compare button
  *
- * @author Parham Gandomkar, Irem Toroslu, Julian Oelhaf, Mani Anand
  */
 const NavbarComponent = (props) => {
     const history = useHistory();
@@ -19,7 +18,7 @@ const NavbarComponent = (props) => {
 
                 <div className='BackButton'>
                     <Link onClick={() => history.goBack()}>
-                        <i class='fa fa-chevron-left' aria-hidden='true' />
+                        <i className='fa fa-chevron-left' aria-hidden='true' />
                     </Link>
                 </div>
                 <div className='NavbarTitle'>

frontend/src/components/details/PanelComponent.jsx

@@ -6,7 +6,6 @@ import slugs from 'resources/slugs';
  * a divider Pannel for seperating search compoents and result components
  * and also providing the comparison feature by compare button
  *
- * @author Parham Gandomkar, Irem Toroslu, Julian Oelhaf
  */
 
 const PanelComponent = (props) => {

frontend/src/components/details/PieChartComponent.jsx

@@ -1,52 +1,21 @@
-import { React, useEffect, useState } from 'react';
+import { React } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import {
     getMaterialCompositionData,
     getMaterialCompositionLabels
 } from 'interface/projectInterface';
-import theme from 'resources/theme';
-import LoadingComponent from 'components/loading';
+//import theme from 'resources/theme';
 /**
  * Pie Chart Diagram
- *
- * @author Parham Gandomkar, Julian Oelhaf, Irem Toroslu
- *
  */
 
 const PieChartComponent = () => {
-    const [series, setSeries] = useState([]);
-    const [labels, setLabels] = useState([]);
+    const series = getMaterialCompositionData();
+    const labels = getMaterialCompositionLabels();
 
-    useEffect(() => {
-        async function getValues() {
-            const values = await Array.from(getMaterialCompositionData());
-            setSeries(values);
-
-            console.log(values);
-        }
-        getValues();
-        console.log('inside use effect');
-    }, []);
-    useEffect(() => {
-        async function getLabels() {
-            const label = await Array.from(getMaterialCompositionLabels());
-            setLabels(label);
-            console.log(label);
-        }
-        getLabels();
-        console.log('inside use effect');
-    }, []);
-
-    console.log('after');
     console.log(series);
     console.log(labels);
-    if (
-        (series && labels === []) ||
-        (series && labels === undefined) ||
-        (series && labels === null)
-    ) {
-        return <LoadingComponent />;
-    }
+
     const options = {
         //TODO
         maintainAspectRatio: true,
@@ -57,26 +26,26 @@ const PieChartComponent = () => {
         chart: {
             type: 'donut'
         },
-        pie: {
-            expandOnClick: true
-        },
+
         labels: labels,
-        // TODO: do the materials stay the same? otherwise doesn't make sense to use fixed color / hardcode them
-        colors: [
-            '#fae920',
-            '#cfd6e3',
-            '#eb8fa1',
-            '#89b5c4',
-            theme.color.Alminium,
-            '#36a6c7',
-            '#eb8323'
-        ],
+        // TODO: color map
+        // fill: {
+        //     colors: [
+        //         '#fae920',
+        //         '#cfd6e3',
+        //         '#eb8fa1',
+        //         '#89b5c4',
+        //         theme.color.Alminium,
+        //         '#36a6c7',
+        //         '#eb8323'
+        //     ]
+        // },
         responsive: [
             {
                 breakpoint: 5600,
                 options: {
                     chart: {
-                        height: '300px'
+                        heigt: 'auto'
                     },
                     legend: {
                         position: 'bottom'
@@ -85,6 +54,8 @@ const PieChartComponent = () => {
             }
         ]
     };
+    //lassName='ChartItems' cause PieChart to overlap: needs to be fixed in charts_tables.css
+    // works fine if className is taken out
     return (
         <div className='ChartItems' id='chart'>
             <ReactApexChart options={options} series={series} type='donut' />