Cleaning up code and fixed table+charts

Regarding #82 Fixed the table and chart components Fixed the getter Methods
amosproj · Jun 24, 2021 · 80d2571 · 80d2571
1 parent 69000d5
commit 80d2571
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 103 deletions.
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
diff --git a/frontend/package.json b/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",

diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -1,4 +1,4 @@
-import { React, useState, useEffect } from 'react';
+import { React } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import { getColumnChartData, getLifeCycleStages } from 'interface/projectInterface';
 
@@ -7,18 +7,7 @@ import { getColumnChartData, getLifeCycleStages } from 'interface/projectInterfa
  *
  */
 const ColumnChartComponent = () => {
-    const [values, setValues] = useState([]);
-    const [isLoading, setLoading] = useState(true);
-
-    useEffect(() => {
-        const fetchData = async () => {
-            const values = Array.from(getColumnChartData());
-            setValues(values);
-            setLoading(false);
-        };
-        fetchData();
-    }, []);
-
+    const values = getColumnChartData();
     const series = [
         {
             name: 'Global warming in kg CO2 equivalents',
@@ -92,15 +81,12 @@ const ColumnChartComponent = () => {
             ]
         }
     };
-    if (isLoading) {
-        return <div> Loading ... </div>;
-    } else {
-        return (
-            <div className='ChartItems' id='chart'>
-                <ReactApexChart options={options} series={series} type='bar' height={350} />
-            </div>
-        );
-    }
+
+    return (
+        <div className='ChartItems' id='chart'>
+            <ReactApexChart options={options} series={series} type='bar' height={350} />
+        </div>
+    );
 };
 
 export default ColumnChartComponent;
diff --git a/frontend/src/components/details/NavbarComponent.js b/frontend/src/components/details/NavbarComponent.js
@@ -18,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'>

diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
@@ -5,10 +5,8 @@ import {
     getMaterialCompositionLabels
 } from 'interface/projectInterface';
 import theme from 'resources/theme';
-import LoadingComponent from 'components/loading';
 /**
  * Pie Chart Diagram
- *
  */
 
 const PieChartComponent = () => {
@@ -17,13 +15,7 @@ const PieChartComponent = () => {
 
     console.log(series);
     console.log(labels);
-    if (
-        (series && labels === []) ||
-        (series && labels === undefined) ||
-        (series && labels === null)
-    ) {
-        return <LoadingComponent />;
-    }
+
     const options = {
         //TODO
         maintainAspectRatio: true,
@@ -34,9 +26,7 @@ const PieChartComponent = () => {
         chart: {
             type: 'donut'
         },
-        pie: {
-            expandOnClick: true
-        },
+
         labels: labels,
         // TODO: color map
         colors: [
@@ -52,9 +42,7 @@ const PieChartComponent = () => {
             {
                 breakpoint: 5600,
                 options: {
-                    chart: {
-                        height: '300px'
-                    },
+                    chart: {},
                     legend: {
                         position: 'bottom'
                     }

diff --git a/frontend/src/components/details/ScenarioComponent.js b/frontend/src/components/details/ScenarioComponent.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import SelectVariableComponent from './SelectVariableComponent';
 import NavbarComponent from './NavbarComponent';
-import PieChart from './PieChartComponent';
-import ColumnChart from './ColumnChartComponent';
+import PieChartComponent from './PieChartComponent';
+import ColumnChartComponent from './ColumnChartComponent';
 import TableComponent from './TableComponent';
 import { Col, Container, Row } from 'react-grid-system';
 import { Hidden } from '@material-ui/core';
@@ -37,7 +37,7 @@ class ScenarioComponent extends Component {
                             <div className='CardTitle'>
                                 <span>Results of the impact assessment</span>
                             </div>
-                            <ColumnChart />
+                            <ColumnChartComponent />
                         </Col>
                         <Col
                             xs={12}
@@ -50,7 +50,7 @@ class ScenarioComponent extends Component {
                             <div className='CardTitle'>
                                 <span>Material Composition</span>
                             </div>
-                            <PieChart />
+                            <PieChartComponent />
                         </Col>
                     </Row>
                     <Row>

diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx
@@ -5,30 +5,16 @@ import {
     getImpactCategoriesTableHeaders,
     getImpactAssessmentData
 } from 'interface/projectInterface';
-import LoadingComponent from 'components/loading';
 /**
  * displays the impact catagories table of the selected model of the related product.
  */
 class TableComponent extends Component {
     state = {
-        headers: [],
-        rows: []
+        headers: getImpactCategoriesTableHeaders(),
+        rows: getImpactAssessmentData()
     };
-
     render() {
-        let headerData = getImpactCategoriesTableHeaders();
-        let rowsData = getImpactAssessmentData();
-        if (
-            (rowsData && headerData === []) ||
-            (rowsData && headerData === undefined) ||
-            (rowsData && headerData === null)
-        ) {
-            return <LoadingComponent loading />;
-        }
         const idKey = this.props.tableKey;
-        if (this.state.stillLoading) {
-            return <LoadingComponent loading />;
-        }
         return (
             <Container fluid={true}>
                 {/* dynamic display of product and model */}
@@ -50,17 +36,21 @@ class TableComponent extends Component {
                     </thead>
 
                     <tbody>
-                        {this.state.rows.map((item, index) => (
-                            <tr key={'tr' + idKey + index} className='TableItems'>
-                                <td key={idKey + 'td-a' + item.key}>{item.impactCategory}</td>
-                                <td key={idKey + 'td-b' + item.key}>{item.unit}</td>
-                                <td key={idKey + 'td-c' + item.key}>{item.total}</td>
-                                <td key={idKey + 'td-e' + item.key}>{item.materialsLPT}</td>
-                                <td key={idKey + 'td-f' + item.key}>{item.manufacturing}</td>
-                                <td key={idKey + 'td-g' + item.key}>{item.operations}</td>
-                                <td key={idKey + 'td-h' + item.key}>{item.endOfLife}</td>
-                            </tr>
-                        ))}
+                        <tr className='TableItems' key={'Data'}>
+                            <td key={idKey + 'Global Warming'}>{'Global Warming'}</td>
+                            <td key={idKey + 'kg CO2 eq'}>
+                                {'kg CO'}
+                                <sub>2</sub>
+                                {' eq'}{' '}
+                            </td>
+                            <td key={idKey + 'td-c'}>{this.state.rows.get('Total')}</td>
+                            <td key={idKey + 'td-e'}>{this.state.rows.get('Materials')}</td>
+                            <td key={idKey + 'td-b'}>
+                                {this.state.rows.get('Manufacturing and Transportation')}
+                            </td>
+                            <td key={idKey + 'td-g'}>{this.state.rows.get('Operation')}</td>
+                            <td key={idKey + 'td-h'}>{this.state.rows.get('End of life')}</td>
+                        </tr>
                     </tbody>
                 </table>
             </Container>

diff --git a/frontend/src/interface/processBackendData.js b/frontend/src/interface/processBackendData.js
@@ -31,22 +31,23 @@ export function processBackendData(data, callback) {
     let carbonData = items.data.Result.Results[0].Tables[1].Rows;
     let impactMap = new Map();
     for (let i = 0; i < carbonData.length; i++) {
-        impactMap.set(carbonData[i][0], carbonData[i][2]);
+        impactMap.set(carbonData[i][0], Number(carbonData[i][2]).toFixed(0));
     }
 
-    /*
-    console.log('Material Labels');
-    console.log(materialMap.keys());
-    console.log('Material Values');
-    console.log(materialMap.values());
-    console.log('ImpactAssessmentData');
-    console.log(impactMap);
-    */
+    let assessmentDataInPercent = [];
+    let assessmentValues = Array.from(impactMap.values());
+    let total = assessmentValues[4];
+
+    for (let i = 0; i < assessmentValues.length - 2; i++) {
+        if (!isNaN(assessmentValues[i])) {
+            assessmentDataInPercent[i] = (Number(assessmentValues[i] / total) * 100).toFixed(1);
+        }
+    }
 
     setMaterialCompositionLabels(materialMap.keys());
     setMaterialCompositionData(materialMap.values());
-    setImpactAssessmentData(impactMap.values());
-    setColumnChartData();
+    setImpactAssessmentData(impactMap);
+    setColumnChartData(assessmentDataInPercent);
 
     callback();
 }
diff --git a/frontend/src/interface/projectInterface.js b/frontend/src/interface/projectInterface.js
@@ -54,7 +54,7 @@ export function setMaterialCompositionData(compositionData) {
     }
     console.log(sum);
     for (let i = 0; i < materialCompositionData.length; i++) {
-        materialDataInPercent[i] = (Number(materialCompositionData[i] / sum) * 100).toFixed(2);
+        materialDataInPercent[i] = (Number(materialCompositionData[i] / sum) * 100).toFixed(0);
     }
     console.log(materialDataInPercent);
 }
@@ -73,16 +73,13 @@ export function getMaterialCompositionData() {
  */
 export function setMaterialCompositionLabels(compositionLabels) {
     materialCompositionLabels = Array.from(compositionLabels);
-    console.log('set material composition labels');
     console.log(materialCompositionLabels);
 }
 
 /**
  * Getter method to recieve the filtered Material Composititon Labels from API
  */
 export function getMaterialCompositionLabels() {
-    console.log('get material composition labels');
-    console.log(materialCompositionLabels);
     return materialCompositionLabels;
 }
 
@@ -101,9 +98,7 @@ export function getLifeCycleStages(modelID) {
  * @param assessmentData recieved from Backendconnect
  */
 export function setImpactAssessmentData(assessmentData) {
-    assessmentValues = Array.from(assessmentData);
-    console.log('Impact Assessment Data');
-    console.log(assessmentValues);
+    assessmentValues = assessmentData;
 }
 
 /**
@@ -119,18 +114,8 @@ export function getImpactAssessmentData() {
  * Percentage is calulated
  * @param assessmentData recieved from Backendconnect
  */
-export function setColumnChartData() {
-    console.log('Chart Assessment Data');
-    console.log(assessmentValues);
-    let total = assessmentValues[4];
-    console.log(total);
-
-    for (let i = 0; i < assessmentValues.length - 2; i++) {
-        if (!isNaN(assessmentValues[i])) {
-            chartDataInPercent[i] = (Number(assessmentValues[i] / total) * 100).toFixed(1);
-        }
-    }
-    console.log(chartDataInPercent);
+export function setColumnChartData(assessmentDataInPercent) {
+    chartDataInPercent = assessmentDataInPercent;
 }
 /**
  * Getter method to recieve the filtered Impact Assessment Data from API
@@ -159,7 +144,5 @@ export function getImpactCategoriesTableHeaders(modelID) {
  * @param assessmentData recieved from Backendconnect and filtered here
  */
 export function getImpactCategoriesTableData() {
-    console.log('Impact Categories Table Data');
-    console.log(assessmentValues);
     return assessmentValues;
 }