From b3166e0dd1c1f397c2e29279999bf5d7bf092b70 Mon Sep 17 00:00:00 2001 From: SaiVarunVaranasi Date: Wed, 23 Jun 2021 14:36:36 +0200 Subject: [PATCH] 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. --- .../details/ColumnChartComponent.jsx | 4 +- .../components/details/DetailsComponent.js | 8 +- .../src/components/details/TableComponent.jsx | 74 +++++++++++-------- frontend/src/interface/BackendConnect.js | 6 +- frontend/src/interface/projectInterface.js | 30 ++++++++ 5 files changed, 83 insertions(+), 39 deletions(-) diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx index 6cb1c186..71a30b76 100644 --- a/frontend/src/components/details/ColumnChartComponent.jsx +++ b/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() } ]; diff --git a/frontend/src/components/details/DetailsComponent.js b/frontend/src/components/details/DetailsComponent.js index 70e9dada..922e7f5e 100644 --- a/frontend/src/components/details/DetailsComponent.js +++ b/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 ; - } + // if (this.state.stillLoading) { + // return ; + // } if (this.state.baselineScenario) { // if state equals baseline scenario only diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx index 7f6af735..3e42ca64 100644 --- a/frontend/src/components/details/TableComponent.jsx +++ b/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 ; + } + 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 ( {/* dynamic display of product and model */} @@ -63,6 +74,7 @@ class TableComponent extends Component { ))} + {this.state.rows.map((item, index) => ( diff --git a/frontend/src/interface/BackendConnect.js b/frontend/src/interface/BackendConnect.js index 12bea88a..d1be655c 100644 --- a/frontend/src/interface/BackendConnect.js +++ b/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(); } /** diff --git a/frontend/src/interface/projectInterface.js b/frontend/src/interface/projectInterface.js index c94571b0..258ba071 100644 --- a/frontend/src/interface/projectInterface.js +++ b/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