Colum chart and Table data population

The data for column chart and Table are being filled.
There are some more errors that needs to be fixed.

frontend/src/components/details/ColumnChartComponent.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactApexChart from 'react-apexcharts';
-import { getImpactAssessmentData, getLifeCycleStages } from 'interface/projectInterface';
+import { getColumnChartData, getLifeCycleStages } from 'interface/projectInterface';
 
 /**
  * Column Chart
@@ -12,7 +12,7 @@ const ColumnChartComponent = () => {
         {
             name: 'Global warming in kg CO2 equivalents',
             // TODO: this data needs to be recieved from backend
-            data: getImpactAssessmentData()
+            data: getColumnChartData()
         }
     ];
 

frontend/src/components/details/DetailsComponent.js

@@ -6,7 +6,7 @@ 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
@@ -92,9 +92,9 @@ class DetailsComponent extends Component {
 
         postCalculationRequest(selectedProduct.productID);
 
-        if (this.state.stillLoading) {
-            return <LoadingComponent loading />;
-        }
+        // if (this.state.stillLoading) {
+        //     return <LoadingComponent loading />;
+        // }
 
         if (this.state.baselineScenario) {
             // if state equals baseline scenario only

frontend/src/components/details/TableComponent.jsx

@@ -5,45 +5,56 @@ 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: getImpactCategoriesTableHeaders(),
-        rows: [
-            {
-                key: 'row-1',
-                impactCategory: 'Global Warming',
-                unit: getImpactAssessmentData[6],
-                total: getImpactAssessmentData[5],
-                materialsLPT: getImpactAssessmentData[4],
-                manufacturing: getImpactAssessmentData[0],
-                operations: getImpactAssessmentData[3],
-                endOfLife: getImpactAssessmentData[2]
-            }
-        ]
+        headers: [],
+        rows: [],
+        stillLoading: true
     };
+    getData() {
+        let headerData = getImpactCategoriesTableHeaders();
+        let rowsData = getImpactAssessmentData();
+
+        this.setState({ headers: headerData });
+
+        while (
+            (rowsData && headerData === []) ||
+            (rowsData && headerData === undefined) ||
+            (rowsData && headerData === null)
+        ) {
+            rowsData = getImpactAssessmentData();
+            headerData = getImpactCategoriesTableHeaders();
+            return <LoadingComponent />;
+        }
+        console.log('getImpactAssessmentData#6');
+        this.setState({
+            rows: [
+                {
+                    key: 'row-1',
+                    impactCategory: 'Global Warming',
+                    unit: rowsData[5],
+                    total: rowsData[4],
+                    materialsLPT: rowsData[3],
+                    manufacturing: rowsData[0],
+                    operations: rowsData[2],
+                    endOfLife: rowsData[1]
+                }
+            ]
+        });
+        this.setState({ stillLoading: false });
+    }
+    componentDidMount() {
+        this.getData();
+    }
+    componentWillUnmount() {
+        console.log('unmount');
+    }
     render() {
-        console.log('getImpactAssessmentData[6]');
-        var ImpactData = getImpactAssessmentData();
-        console.log(ImpactData[6]);
         const idKey = this.props.tableKey;
-
-        this.setState(this.state.header, getImpactCategoriesTableHeaders());
-        this.setState(this.state.rows, [
-            {
-                key: 'row-1',
-                impactCategory: 'Global Warming',
-                unit: ImpactData[6],
-                total: ImpactData[5],
-                materialsLPT: ImpactData[4],
-                manufacturing: ImpactData[0],
-                operations: ImpactData[3],
-                endOfLife: ImpactData[2]
-            }
-        ]);
         return (
             <Container fluid={true}>
                 {/* dynamic display of product and model */}
@@ -63,6 +74,7 @@ class TableComponent extends Component {
                             ))}
                         </tr>
                     </thead>
+
                     <tbody>
                         {this.state.rows.map((item, index) => (
                             <tr key={'tr' + idKey + index} className='TableItems'>

frontend/src/interface/BackendConnect.js

@@ -2,7 +2,8 @@ import axios from 'axios';
 import {
     setMaterialCompositionLabels,
     setMaterialCompositionData,
-    setImpactAssessmentData
+    setImpactAssessmentData,
+    setColumnChartData
 } from 'interface/projectInterface';
 /**
  * Get request to det the details of all the projects from the API via backend.
@@ -24,7 +25,7 @@ export async function getSimaProProjects() {
             result = items.data.Result.Data;
         });
     console.log('API call to get the list of Products');
-    console.log(result.Id);
+    console.log(result);
     return result;
 }
 
@@ -69,6 +70,7 @@ export async function carbonImpactData(data) {
     }
     console.log(impactMap);
     setImpactAssessmentData(impactMap.values());
+    setColumnChartData();
 }
 
 /**

frontend/src/interface/projectInterface.js

@@ -11,6 +11,7 @@ var materialCompositionLabels;
 var materialCompositionData;
 let materialDataInPercent = [];
 var assessmentValues;
+let chartDataInPercent = [];
 
 /**
  * should get all the Products from the backend (soon) //TODO: declare and write.
@@ -120,6 +121,35 @@ export function getImpactAssessmentData() {
     return assessmentValues;
 }
 
+/**
+ * Gets the Impact Assessment Data filtered from API
+ * Impact Assessment is done for each of the life cycle stage
+ * Percentage is calulated
+ * @param assessmentData recieved from Backendconnect
+ */
+export function setColumnChartData() {
+    console.log('Chart Assessment Data');
+    console.log(assessmentValues);
+    let sum = 0;
+    for (let i = 0; i < assessmentValues.length; i++) {
+        if (!isNaN(assessmentValues[i])) {
+            sum += Number(assessmentValues[i]);
+        }
+    }
+    console.log(sum);
+    for (let i = 0; i < assessmentValues.length; i++) {
+        if (!isNaN(assessmentValues[i])) {
+            chartDataInPercent[i] = Number(assessmentValues[i] / sum) * 100;
+        }
+    }
+    console.log(chartDataInPercent);
+}
+/**
+ * Getter method to recieve the filtered Impact Assessment Data from API
+ */
+export function getColumnChartData() {
+    return chartDataInPercent;
+}
 /**
  * * QUESTION: life cycle stages fixed?
  * @param modelId id of the model, for which we want to get the Data