From c7b1f324d106fc7450a9100d2b43a1f05d6ca314 Mon Sep 17 00:00:00 2001 From: Mani Date: Thu, 24 Jun 2021 12:18:15 +0200 Subject: [PATCH 01/14] Use Effect for pieChartcomponent Regarding task #82 Co-authored-by: Sai Varun Varanasi --- .../components/details/PieChartComponent.jsx | 27 +++++++++---------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx index f456f000..942830b7 100644 --- a/frontend/src/components/details/PieChartComponent.jsx +++ b/frontend/src/components/details/PieChartComponent.jsx @@ -17,24 +17,18 @@ const PieChartComponent = () => { const [series, setSeries] = useState([]); const [labels, setLabels] = useState([]); - useEffect(() => { - async function getValues() { - const values = await Array.from(getMaterialCompositionData()); - setSeries(values); + const [isLoading, setLoading] = useState(true); - console.log(values); - } - getValues(); - console.log('inside use effect'); - }, []); useEffect(() => { - async function getLabels() { - const label = await Array.from(getMaterialCompositionLabels()); + const fetchData = async () => { + const values = Array.from(getMaterialCompositionData()); + setSeries(values); + const label = Array.from(getMaterialCompositionLabels()); setLabels(label); - console.log(label); - } - getLabels(); - console.log('inside use effect'); + + setLoading(false); + }; + fetchData(); }, []); console.log('after'); @@ -85,6 +79,9 @@ const PieChartComponent = () => { } ] }; + if (isLoading) { + return
Loading ...
; + } return (
From 3a9018ec181389ec02c1665dffa2af28378bec12 Mon Sep 17 00:00:00 2001 From: SaiVarunVaranasi Date: Thu, 24 Jun 2021 13:26:50 +0200 Subject: [PATCH 02/14] filling the columnchart and table The data for table and column chart are being populated. Still need to fix errors. The data that is populated is cached data from previous request. Co-authored-by: Mani Anand --- .../details/ColumnChartComponent.jsx | 31 +++++++++++----- .../components/details/PieChartComponent.jsx | 13 +++---- .../src/components/details/TableComponent.jsx | 36 ++++++++++++------- frontend/src/interface/projectInterface.js | 4 +-- 4 files changed, 55 insertions(+), 29 deletions(-) diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx index 71a30b76..8830e862 100644 --- a/frontend/src/components/details/ColumnChartComponent.jsx +++ b/frontend/src/components/details/ColumnChartComponent.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { React, useState, useEffect } from 'react'; import ReactApexChart from 'react-apexcharts'; import { getColumnChartData, getLifeCycleStages } from 'interface/projectInterface'; @@ -8,11 +8,23 @@ import { getColumnChartData, getLifeCycleStages } from 'interface/projectInterfa * @author Julian Oelhaf */ 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 series = [ { name: 'Global warming in kg CO2 equivalents', // TODO: this data needs to be recieved from backend - data: getColumnChartData() + data: values } ]; @@ -81,12 +93,15 @@ const ColumnChartComponent = () => { ] } }; - - return ( -
- -
- ); + if (isLoading) { + return
Loading ...
; + } else { + return ( +
+ +
+ ); + } }; export default ColumnChartComponent; diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx index 942830b7..08d89ccd 100644 --- a/frontend/src/components/details/PieChartComponent.jsx +++ b/frontend/src/components/details/PieChartComponent.jsx @@ -9,7 +9,7 @@ import LoadingComponent from 'components/loading'; /** * Pie Chart Diagram * - * @author Parham Gandomkar, Julian Oelhaf, Irem Toroslu + * @author Parham Gandomkar, Julian Oelhaf, Irem Toroslu, Sai Varun Varanasi * */ @@ -81,12 +81,13 @@ const PieChartComponent = () => { }; if (isLoading) { return
Loading ...
; + } else { + return ( +
+ +
+ ); } - return ( -
- -
- ); }; export default PieChartComponent; diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx index 3e42ca64..cd522280 100644 --- a/frontend/src/components/details/TableComponent.jsx +++ b/frontend/src/components/details/TableComponent.jsx @@ -10,26 +10,27 @@ 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: [], - stillLoading: true - }; + constructor() { + super(); + this.state = { + 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 ; + headerData = Array.from(getImpactCategoriesTableHeaders()); + rowsData = Array.from(getImpactAssessmentData()); + return ; } + this.setState({ headers: headerData }); console.log('getImpactAssessmentData#6'); this.setState({ rows: [ @@ -45,16 +46,25 @@ class TableComponent extends Component { } ] }); - this.setState({ stillLoading: false }); + return true; } componentDidMount() { - this.getData(); + if (this.getData()) { + this.setState({ stillLoading: false }); + } else { + console.log('loading'); + } } componentWillUnmount() { console.log('unmount'); + this.setState({ headers: [] }); + this.setState({ rows: [] }); } render() { const idKey = this.props.tableKey; + if (this.state.stillLoading) { + return ; + } return ( {/* dynamic display of product and model */} diff --git a/frontend/src/interface/projectInterface.js b/frontend/src/interface/projectInterface.js index 258ba071..1b951eca 100644 --- a/frontend/src/interface/projectInterface.js +++ b/frontend/src/interface/projectInterface.js @@ -131,13 +131,13 @@ export function setColumnChartData() { console.log('Chart Assessment Data'); console.log(assessmentValues); let sum = 0; - for (let i = 0; i < assessmentValues.length; i++) { + for (let i = 0; i < assessmentValues.length - 2; i++) { if (!isNaN(assessmentValues[i])) { sum += Number(assessmentValues[i]); } } console.log(sum); - for (let i = 0; i < assessmentValues.length; i++) { + for (let i = 0; i < assessmentValues.length - 2; i++) { if (!isNaN(assessmentValues[i])) { chartDataInPercent[i] = Number(assessmentValues[i] / sum) * 100; } From 44a3d4dea38d75fdd738989ea6597d4495f10635 Mon Sep 17 00:00:00 2001 From: SaiVarunVaranasi Date: Thu, 24 Jun 2021 14:04:03 +0200 Subject: [PATCH 03/14] restricted the decimal value of data to 2 digits --- frontend/src/components/details/TableComponent.jsx | 1 + frontend/src/interface/projectInterface.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx index cd522280..6e0c6589 100644 --- a/frontend/src/components/details/TableComponent.jsx +++ b/frontend/src/components/details/TableComponent.jsx @@ -59,6 +59,7 @@ class TableComponent extends Component { console.log('unmount'); this.setState({ headers: [] }); this.setState({ rows: [] }); + this.setState({ stillLoading: true }); } render() { const idKey = this.props.tableKey; diff --git a/frontend/src/interface/projectInterface.js b/frontend/src/interface/projectInterface.js index 1b951eca..0aa5075f 100644 --- a/frontend/src/interface/projectInterface.js +++ b/frontend/src/interface/projectInterface.js @@ -50,7 +50,7 @@ export function setMaterialCompositionData(compositionData) { } console.log(sum); for (let i = 0; i < materialCompositionData.length; i++) { - materialDataInPercent[i] = (Number(materialCompositionData[i]) / sum) * 100; + materialDataInPercent[i] = (Number(materialCompositionData[i] / sum) * 100).toFixed(2); } console.log(materialDataInPercent); } @@ -139,7 +139,7 @@ export function setColumnChartData() { console.log(sum); for (let i = 0; i < assessmentValues.length - 2; i++) { if (!isNaN(assessmentValues[i])) { - chartDataInPercent[i] = Number(assessmentValues[i] / sum) * 100; + chartDataInPercent[i] = (Number(assessmentValues[i] / sum) * 100).toFixed(2); } } console.log(chartDataInPercent); From d2f904f841e95f798ce488727fe251d9764ceeec Mon Sep 17 00:00:00 2001 From: parham gandomkar Date: Thu, 24 Jun 2021 16:56:36 +0200 Subject: [PATCH 04/14] moving calling backend request to details component Co-authored-by: Sai Varun Varanasi --- .../components/details/DetailsComponent.js | 35 +++++++++++++-- frontend/src/interface/BackendConnect.js | 44 +++++++++---------- 2 files changed, 53 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/details/DetailsComponent.js b/frontend/src/components/details/DetailsComponent.js index 922e7f5e..f15f8c58 100644 --- a/frontend/src/components/details/DetailsComponent.js +++ b/frontend/src/components/details/DetailsComponent.js @@ -5,7 +5,10 @@ import { jsPDF } from 'jspdf'; import html2canvas from 'html2canvas'; import { Col, Container, Row } from 'react-grid-system'; import './navbar.css'; -import { postCalculationRequest } from 'interface/BackendConnect'; +import { materials, carbonImpactData } from 'interface/BackendConnect'; +import axios from 'axios'; +import LoadingComponent from 'components/loading'; + //import LoadingComponent from 'components/loading'; /** * the main component for detail page which includes @@ -13,6 +16,7 @@ import { postCalculationRequest } from 'interface/BackendConnect'; * * @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 @@ -90,11 +94,34 @@ class DetailsComponent extends Component { }; const { selectedProduct } = this.props; + // postCalculationRequest(selectedProduct.productID); + async function postCalculationRequest(projectId) { + // POST request using axios with set headers + const headers = { + Authorization: 'Bearer', + 'Access-Control-Allow-Origin': 'POST', + 'My-Custom-Header': 'foobar' + }; + let result1; + await axios + .post(`https://localhost:44323/SimaPro/api/calculation/${projectId}`, { + headers + }) + .then(function (data) { + const items = data; + result1 = items.data.Result; + materials(data); + carbonImpactData(data); + stillLoading = false; + }); + console.log('Result'); + console.log(result1); + } 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/interface/BackendConnect.js b/frontend/src/interface/BackendConnect.js index d1be655c..dffb8d2a 100644 --- a/frontend/src/interface/BackendConnect.js +++ b/frontend/src/interface/BackendConnect.js @@ -35,7 +35,7 @@ export async function getSimaProProjects() { * Maps the Material and its corresponding value. * @param data data recieved from PostCalculationRequest */ -async function materials(data) { +export async function materials(data) { const items = data; let materialData = items.data.Result.Results[0].Tables[0].Rows; let finalMaterials = []; @@ -79,27 +79,27 @@ export async function carbonImpactData(data) { * Which then checks if the calculation is stored based on the calculationId generated. * If the calculation is stored returns the results of calculation here. */ -export async function postCalculationRequest(projectId) { - // POST request using axios with set headers - const headers = { - Authorization: 'Bearer', - 'Access-Control-Allow-Origin': 'POST', - 'My-Custom-Header': 'foobar' - }; - let result1; - await axios - .post(`https://localhost:44323/SimaPro/api/calculation/${projectId}`, { - headers - }) - .then(function (data) { - const items = data; - result1 = items.data.Result; - materials(data); - carbonImpactData(data); - }); - console.log('Result'); - console.log(result1); -} +// export async function postCalculationRequest(projectId) { +// // POST request using axios with set headers +// const headers = { +// Authorization: 'Bearer', +// 'Access-Control-Allow-Origin': 'POST', +// 'My-Custom-Header': 'foobar' +// }; +// let result1; +// await axios +// .post(`https://localhost:44323/SimaPro/api/calculation/${projectId}`, { +// headers +// }) +// .then(function (data) { +// const items = data; +// result1 = items.data.Result; +// materials(data); +// carbonImpactData(data); +// }); +// console.log('Result'); +// console.log(result1); +// } /** * Post request to initiate the calculation for a project based on the project id and custom values. From 69000d5f74a670c2ec8b3fc24bb87b6547e0e1c5 Mon Sep 17 00:00:00 2001 From: Julian <63585974+ScoutAtlas@users.noreply.github.com> Date: Thu, 24 Jun 2021 20:30:33 +0200 Subject: [PATCH 05/14] Rework of processing the backend data Regarding #82 Created new file to only do the "calculations", rather it extracts the data from the huge arrays we are recieving. Thus removed all the calculations from the BackendConnect. ! Implemented callback funtion, which calls the setState in the DetailsComponent. With that we can display the LoadingComponent, while waiting for the backend data. Once the postCalculationRequest is finished, we call the callback funtion defined in DetailsComponent, which sets the stillLoading variable to false. React components automatically retrigger the render function if the state is changed. Removed all the stillLoading stuff in the charts and tables. --- .gitignore | 1 + .vs/slnx.sqlite | Bin 487424 -> 487424 bytes .../details/ColumnChartComponent.jsx | 1 - .../components/details/DetailsComponent.js | 36 ++----- .../details/MobileTableComponent.jsx | 6 +- .../src/components/details/NavbarComponent.js | 1 - .../src/components/details/PanelComponent.jsx | 1 - .../components/details/PieChartComponent.jsx | 40 ++------ .../components/details/ScenarioComponent.js | 6 +- .../details/SelectVariableComponent.jsx | 9 +- .../src/components/details/TableComponent.jsx | 53 ++-------- .../components/productGrid/LabelComponent.js | 1 - .../productGrid/ProductGridComponent.js | 7 +- frontend/src/interface/BackendConnect.js | 92 ++++-------------- frontend/src/interface/processBackendData.js | 52 ++++++++++ frontend/src/interface/projectInterface.js | 48 ++++----- 16 files changed, 125 insertions(+), 229 deletions(-) create mode 100644 frontend/src/interface/processBackendData.js diff --git a/.gitignore b/.gitignore index 2494ccb8..e8f6b3fa 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,6 @@ node_modules .idea /.vs/slnx.sqlite-journal .vs/slnx.sqlite +obj/Debug/netcoreapp5.0/amos-ss2021-carbon-footprint.csproj.AssemblyReference.cache frontend/yarn.lock diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite index 371027653b8f984fcd5dc76dba2931c1be5d7de1..52aa99023eca092f3ffa0c9f9384d1e127c20767 100644 GIT binary patch delta 9033 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 TJjuf)n_3!(@wI(64`%)oa;@-` diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx index 8830e862..711b8ae7 100644 --- a/frontend/src/components/details/ColumnChartComponent.jsx +++ b/frontend/src/components/details/ColumnChartComponent.jsx @@ -5,7 +5,6 @@ import { getColumnChartData, getLifeCycleStages } from 'interface/projectInterfa /** * Column Chart * - * @author Julian Oelhaf */ const ColumnChartComponent = () => { const [values, setValues] = useState([]); diff --git a/frontend/src/components/details/DetailsComponent.js b/frontend/src/components/details/DetailsComponent.js index f15f8c58..2ab6ec6a 100644 --- a/frontend/src/components/details/DetailsComponent.js +++ b/frontend/src/components/details/DetailsComponent.js @@ -5,11 +5,8 @@ import { jsPDF } from 'jspdf'; import html2canvas from 'html2canvas'; import { Col, Container, Row } from 'react-grid-system'; import './navbar.css'; -import { materials, carbonImpactData } from 'interface/BackendConnect'; -import axios from 'axios'; +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 @@ -87,44 +84,23 @@ class DetailsComponent extends Component { pdf.save('invoice.pdf'); }); }; - + let handleFinishedDataRequest = () => { + this.setState({ stillLoading: false }); + }; const scenarioNames = { baseline: 'Baseline Scenario', modified: 'Modified Scenario' }; const { selectedProduct } = this.props; - // postCalculationRequest(selectedProduct.productID); - async function postCalculationRequest(projectId) { - // POST request using axios with set headers - const headers = { - Authorization: 'Bearer', - 'Access-Control-Allow-Origin': 'POST', - 'My-Custom-Header': 'foobar' - }; - let result1; - await axios - .post(`https://localhost:44323/SimaPro/api/calculation/${projectId}`, { - headers - }) - .then(function (data) { - const items = data; - result1 = items.data.Result; - materials(data); - carbonImpactData(data); - stillLoading = false; - }); - console.log('Result'); - console.log(result1); - } - postCalculationRequest(selectedProduct.productID); - if (this.state.stillLoading) { + postCalculationRequest(selectedProduct.productID, handleFinishedDataRequest); return ; } if (this.state.baselineScenario) { // if state equals baseline scenario only + console.log(selectedProduct); return ( diff --git a/frontend/src/components/details/MobileTableComponent.jsx b/frontend/src/components/details/MobileTableComponent.jsx index 2874322c..76e59cf2 100644 --- a/frontend/src/components/details/MobileTableComponent.jsx +++ b/frontend/src/components/details/MobileTableComponent.jsx @@ -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(this.props.modelID), + rows: getImpactCategoriesTableData(this.props.modelID) }; render() { const idKey = this.props.tableKey; @@ -94,7 +94,7 @@ 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 diff --git a/frontend/src/components/details/NavbarComponent.js b/frontend/src/components/details/NavbarComponent.js index a2664f91..b9ab61e6 100644 --- a/frontend/src/components/details/NavbarComponent.js +++ b/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(); diff --git a/frontend/src/components/details/PanelComponent.jsx b/frontend/src/components/details/PanelComponent.jsx index 3a91d725..278835ce 100644 --- a/frontend/src/components/details/PanelComponent.jsx +++ b/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) => { diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx index 08d89ccd..e07548e1 100644 --- a/frontend/src/components/details/PieChartComponent.jsx +++ b/frontend/src/components/details/PieChartComponent.jsx @@ -1,4 +1,4 @@ -import { React, useEffect, useState } from 'react'; +import { React } from 'react'; import ReactApexChart from 'react-apexcharts'; import { getMaterialCompositionData, @@ -9,29 +9,12 @@ import LoadingComponent from 'components/loading'; /** * Pie Chart Diagram * - * @author Parham Gandomkar, Julian Oelhaf, Irem Toroslu, Sai Varun Varanasi - * */ const PieChartComponent = () => { - const [series, setSeries] = useState([]); - const [labels, setLabels] = useState([]); - - const [isLoading, setLoading] = useState(true); - - useEffect(() => { - const fetchData = async () => { - const values = Array.from(getMaterialCompositionData()); - setSeries(values); - const label = Array.from(getMaterialCompositionLabels()); - setLabels(label); + const series = getMaterialCompositionData(); + const labels = getMaterialCompositionLabels(); - setLoading(false); - }; - fetchData(); - }, []); - - console.log('after'); console.log(series); console.log(labels); if ( @@ -55,7 +38,7 @@ const PieChartComponent = () => { expandOnClick: true }, labels: labels, - // TODO: do the materials stay the same? otherwise doesn't make sense to use fixed color / hardcode them + // TODO: color map colors: [ '#fae920', '#cfd6e3', @@ -79,15 +62,12 @@ const PieChartComponent = () => { } ] }; - if (isLoading) { - return
Loading ...
; - } else { - return ( -
- -
- ); - } + + return ( +
+ +
+ ); }; export default PieChartComponent; diff --git a/frontend/src/components/details/ScenarioComponent.js b/frontend/src/components/details/ScenarioComponent.js index cd6cdef2..60fa4c93 100644 --- a/frontend/src/components/details/ScenarioComponent.js +++ b/frontend/src/components/details/ScenarioComponent.js @@ -63,7 +63,7 @@ class ScenarioComponent extends Component { > @@ -75,7 +75,7 @@ class ScenarioComponent extends Component { @@ -94,7 +94,7 @@ ScenarioComponent.propTypes = { onExportClick: PropTypes.func.isRequired, scenarioName: PropTypes.string, selectedProduct: PropTypes.shape({ - modelId: PropTypes.string, + modelID: PropTypes.string, modelName: PropTypes.string, productName: PropTypes.string }) diff --git a/frontend/src/components/details/SelectVariableComponent.jsx b/frontend/src/components/details/SelectVariableComponent.jsx index b2644354..4451af3e 100644 --- a/frontend/src/components/details/SelectVariableComponent.jsx +++ b/frontend/src/components/details/SelectVariableComponent.jsx @@ -3,7 +3,6 @@ import React, { Component } from 'react'; /** * a drop down component for selecting variable * - * @author Parham Gandomkar, Irem Toroslu */ class SelectVariableComponent extends Component { @@ -49,22 +48,18 @@ class SelectVariableComponent extends Component {
-
{this.state.variables.map((item) => ( - - ))}
diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx index 6e0c6589..9baa2144 100644 --- a/frontend/src/components/details/TableComponent.jsx +++ b/frontend/src/components/details/TableComponent.jsx @@ -10,58 +10,21 @@ import LoadingComponent from 'components/loading'; * displays the impact catagories table of the selected model of the related product. */ class TableComponent extends Component { - constructor() { - super(); - this.state = { - headers: [], - rows: [], - stillLoading: true - }; - } - getData() { + state = { + headers: [], + rows: [] + }; + + render() { let headerData = getImpactCategoriesTableHeaders(); let rowsData = getImpactAssessmentData(); - while ( + if ( (rowsData && headerData === []) || (rowsData && headerData === undefined) || (rowsData && headerData === null) ) { - headerData = Array.from(getImpactCategoriesTableHeaders()); - rowsData = Array.from(getImpactAssessmentData()); return ; } - this.setState({ headers: headerData }); - 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] - } - ] - }); - return true; - } - componentDidMount() { - if (this.getData()) { - this.setState({ stillLoading: false }); - } else { - console.log('loading'); - } - } - componentWillUnmount() { - console.log('unmount'); - this.setState({ headers: [] }); - this.setState({ rows: [] }); - this.setState({ stillLoading: true }); - } - render() { const idKey = this.props.tableKey; if (this.state.stillLoading) { return ; @@ -108,7 +71,7 @@ class TableComponent extends Component { export default TableComponent; TableComponent.propTypes = { - modelId: PropTypes.string.isRequired, + modelID: PropTypes.string.isRequired, modelName: PropTypes.string.isRequired, productName: PropTypes.string.isRequired, tableKey: PropTypes.string.isRequired diff --git a/frontend/src/components/productGrid/LabelComponent.js b/frontend/src/components/productGrid/LabelComponent.js index 9835f794..01c1fa5c 100644 --- a/frontend/src/components/productGrid/LabelComponent.js +++ b/frontend/src/components/productGrid/LabelComponent.js @@ -4,7 +4,6 @@ import React from 'react'; /** * Displaying a label. * - * @author Mani Anand, Martin Wagner */ function LabelComponent({ productName }) { diff --git a/frontend/src/components/productGrid/ProductGridComponent.js b/frontend/src/components/productGrid/ProductGridComponent.js index d6e39bd7..c1446fbb 100644 --- a/frontend/src/components/productGrid/ProductGridComponent.js +++ b/frontend/src/components/productGrid/ProductGridComponent.js @@ -18,13 +18,12 @@ import { loadProjects } from 'store/actions/productAction'; * /** * * @returns the product and model properties - * @author Irem Toroslu, Martin Wagner, Mani Anand */ function ProductGridComponent({ selectedCategory }) { const [selectedProducts, setSelectedProducts] = useContext(PrivateSectionContext); const [productList] = useState([]); - const products = useSelector(state => state.products.data) + const products = useSelector((state) => state.products.data); const dispatch = useDispatch(); /* @@ -32,7 +31,7 @@ function ProductGridComponent({ selectedCategory }) { * hooks it so the Component reloads on change. At the moment the specified change is the selectedCategory. */ useEffect(() => { - dispatch(loadProjects(selectedCategory)) + dispatch(loadProjects(selectedCategory)); }, [selectedCategory, dispatch]); // TODO: We cannot keep the selection like this, if models are implemented. See #58 @@ -60,7 +59,7 @@ function ProductGridComponent({ selectedCategory }) { { + onClick={() => { // Save selection to ContextProvider newSelectedProducts[0].productID = product.productID; newSelectedProducts[0].productName = product.productName; diff --git a/frontend/src/interface/BackendConnect.js b/frontend/src/interface/BackendConnect.js index dffb8d2a..30a154e0 100644 --- a/frontend/src/interface/BackendConnect.js +++ b/frontend/src/interface/BackendConnect.js @@ -1,10 +1,5 @@ import axios from 'axios'; -import { - setMaterialCompositionLabels, - setMaterialCompositionData, - setImpactAssessmentData, - setColumnChartData -} from 'interface/projectInterface'; +import { processBackendData } from 'interface/processBackendData'; /** * Get request to det the details of all the projects from the API via backend. * @returns the list of all the projects. @@ -24,82 +19,33 @@ export async function getSimaProProjects() { const items = data; result = items.data.Result.Data; }); - console.log('API call to get the list of Products'); - console.log(result); + //console.log('API call to get the list of Products'); + //console.log(result); return result; } -/** - * Filters the materials data recieved from API. - * Filter the materials with Unit Value "Kg" and Values > 0. - * Maps the Material and its corresponding value. - * @param data data recieved from PostCalculationRequest - */ -export async function materials(data) { - const items = data; - let materialData = items.data.Result.Results[0].Tables[0].Rows; - let finalMaterials = []; - let materialMap = new Map(); - for (let z = 0; z < materialData.length; z++) { - if (materialData[z][5] === 'kg') { - if (materialData[z][6] > 0) { - finalMaterials.push(materialData[z]); - } - } - } - for (let i = 0; i < finalMaterials.length; i++) { - materialMap.set(finalMaterials[i][0], finalMaterials[i][6]); - } - - setMaterialCompositionLabels(materialMap.keys()); - setMaterialCompositionData(materialMap.values()); -} -/** - * Filters the carbon impact data recieved from API. - * Filter the Carbon Values of GlobalWarming - * Maps the Carbon Values and its corresponding life cycle stage. - * @param data data recieved from PostCalculationRequest - */ -export async function carbonImpactData(data) { - console.log('Inside carbon impact data'); - const items = data; - 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]); - } - console.log(impactMap); - setImpactAssessmentData(impactMap.values()); - setColumnChartData(); -} - /** * Post request to initiate the calculation for a project based on the project id and preset values. * This request is caught by the backend. * Which then checks if the calculation is stored based on the calculationId generated. * If the calculation is stored returns the results of calculation here. */ -// export async function postCalculationRequest(projectId) { -// // POST request using axios with set headers -// const headers = { -// Authorization: 'Bearer', -// 'Access-Control-Allow-Origin': 'POST', -// 'My-Custom-Header': 'foobar' -// }; -// let result1; -// await axios -// .post(`https://localhost:44323/SimaPro/api/calculation/${projectId}`, { -// headers -// }) -// .then(function (data) { -// const items = data; -// result1 = items.data.Result; -// materials(data); -// carbonImpactData(data); -// }); -// console.log('Result'); -// console.log(result1); -// } +export async function postCalculationRequest(projectId, callback) { + // POST request using axios with set headers + const headers = { + Authorization: 'Bearer', + 'Access-Control-Allow-Origin': 'POST', + 'My-Custom-Header': 'foobar' + }; + await axios + .post(`https://localhost:44323/SimaPro/api/calculation/${projectId}`, { + headers + }) + + .then(function (data) { + processBackendData(data, callback); + }); +} /** * Post request to initiate the calculation for a project based on the project id and custom values. diff --git a/frontend/src/interface/processBackendData.js b/frontend/src/interface/processBackendData.js new file mode 100644 index 00000000..f86b8993 --- /dev/null +++ b/frontend/src/interface/processBackendData.js @@ -0,0 +1,52 @@ +import { + setMaterialCompositionLabels, + setMaterialCompositionData, + setImpactAssessmentData, + setColumnChartData +} from 'interface/projectInterface'; + +export function processBackendData(data, callback) { + const items = data; + let materialData = items.data.Result.Results[0].Tables[0].Rows; + let finalMaterials = []; + let materialMap = new Map(); + for (let z = 0; z < materialData.length; z++) { + if (materialData[z][5] === 'kg') { + if (materialData[z][6] > 0) { + finalMaterials.push(materialData[z]); + } + } + } + for (let i = 0; i < finalMaterials.length; i++) { + materialMap.set(finalMaterials[i][0], finalMaterials[i][6]); + } + + /** + * Filters the carbon impact data recieved from API. + * Filter the Carbon Values of GlobalWarming + * Maps the Carbon Values and its corresponding life cycle stage. + * @param data data recieved from PostCalculationRequest + */ + + 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]); + } + + /* + console.log('Material Labels'); + console.log(materialMap.keys()); + console.log('Material Values'); + console.log(materialMap.values()); + console.log('ImpactAssessmentData'); + console.log(impactMap); + */ + + setMaterialCompositionLabels(materialMap.keys()); + setMaterialCompositionData(materialMap.values()); + setImpactAssessmentData(impactMap.values()); + setColumnChartData(); + + callback(); +} diff --git a/frontend/src/interface/projectInterface.js b/frontend/src/interface/projectInterface.js index 0aa5075f..2d6bb222 100644 --- a/frontend/src/interface/projectInterface.js +++ b/frontend/src/interface/projectInterface.js @@ -1,7 +1,6 @@ /** * The projectInterface is the interface between frontend and backend. * - * @author Martin Wagner, Julian Oelhaf */ import logo_1 from 'assets/dummyImages/Image_1.PNG'; @@ -13,6 +12,11 @@ let materialDataInPercent = []; var assessmentValues; let chartDataInPercent = []; +export function handOverBackendData(data) { + console.log('data'); + console.log(data); +} + /** * should get all the Products from the backend (soon) //TODO: declare and write. * @returns @@ -58,7 +62,7 @@ export function setMaterialCompositionData(compositionData) { /** * Getter method to recieve the filtered Material Composititon Data from API */ -export async function getMaterialCompositionData() { +export function getMaterialCompositionData() { return materialDataInPercent; } @@ -68,38 +72,26 @@ export async function getMaterialCompositionData() { * @param compositionData filtered data from backendconnnect */ export function setMaterialCompositionLabels(compositionLabels) { - console.log('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 async function getMaterialCompositionLabels() { +export function getMaterialCompositionLabels() { + console.log('get material composition labels'); + console.log(materialCompositionLabels); return materialCompositionLabels; - - // return [ - // 'Plywood', - // 'TotalSteel', - // 'GlueBeam', - // 'GlassFiber', - // 'Copper', - // 'Paper', - // 'Porcelain', - // 'Electronics', - // 'Aluminium' - // ]; } /** * Gets the Life Cycle Stages filtered from API * Impact Assessment is done for each of the life cycle stage - * @param modelId id of the model, which we want to get the Data + * @param modelID id of the model, which we want to get the Data */ -export function getLifeCycleStages(modelId) { +export function getLifeCycleStages(modelID) { return ['Materials', 'Manufacturing and Transport', 'Operation 30a (75% load)', 'End of Life']; } @@ -130,16 +122,12 @@ export function getImpactAssessmentData() { export function setColumnChartData() { console.log('Chart Assessment Data'); console.log(assessmentValues); - let sum = 0; - for (let i = 0; i < assessmentValues.length - 2; i++) { - if (!isNaN(assessmentValues[i])) { - sum += Number(assessmentValues[i]); - } - } - console.log(sum); + 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] / sum) * 100).toFixed(2); + chartDataInPercent[i] = (Number(assessmentValues[i] / total) * 100).toFixed(1); } } console.log(chartDataInPercent); @@ -152,9 +140,9 @@ export function getColumnChartData() { } /** * * QUESTION: life cycle stages fixed? - * @param modelId id of the model, for which we want to get the Data + * @param modelID id of the model, for which we want to get the Data */ -export function getImpactCategoriesTableHeaders(modelId) { +export function getImpactCategoriesTableHeaders(modelID) { return [ { key: 'header-1', value: 'Impact Category' }, { key: 'header-2', value: 'Unit' }, From 80d2571a2696bac68a136b3b051c5fa3257684c5 Mon Sep 17 00:00:00 2001 From: Julian <63585974+ScoutAtlas@users.noreply.github.com> Date: Thu, 24 Jun 2021 19:57:37 +0200 Subject: [PATCH 06/14] Cleaning up code and fixed table+charts Regarding #82 Fixed the table and chart components Fixed the getter Methods --- .vs/slnx.sqlite | Bin 487424 -> 487424 bytes frontend/package.json | 4 +- .../details/ColumnChartComponent.jsx | 30 ++++-------- .../src/components/details/NavbarComponent.js | 2 +- .../components/details/PieChartComponent.jsx | 18 ++----- .../components/details/ScenarioComponent.js | 8 ++-- .../src/components/details/TableComponent.jsx | 44 +++++++----------- frontend/src/interface/processBackendData.js | 23 ++++----- frontend/src/interface/projectInterface.js | 25 ++-------- 9 files changed, 51 insertions(+), 103 deletions(-) diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite index 52aa99023eca092f3ffa0c9f9384d1e127c20767..559115f961c6274e3a9be30cbcd2f5e547d31aab 100644 GIT binary patch delta 116 zcmZp8AlvXjc7ilx%|sbz#+r=@t5&e;JgNFKWitOtWmYpQ)|+=Hn*&+qI$6yJHpj1g z&d6$Z<>Se{lf73@VztnB-g0H~qty+pX7_rgM{Q1DV-J*etob{&dG*@%)oU4nmqHr6M%Il9t5&cI2I`->Gns#-GOJvK@@(VD=0KK|LeRg-o8wnL zXJnPnR7lu1*?aXQR+*Q(ijyZlTHU}Z=%xR0{pR#F_Kd7D6IzTynpdxFU%i$Qh?#(x Q8Hibcn05Q=wQQk>06n2E?*IS* diff --git a/frontend/package.json b/frontend/package.json index e31d4c6c..a03d2bf7 100644 --- 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 index 711b8ae7..12f2efe4 100644 --- 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
Loading ...
; - } else { - return ( -
- -
- ); - } + + return ( +
+ +
+ ); }; export default ColumnChartComponent; diff --git a/frontend/src/components/details/NavbarComponent.js b/frontend/src/components/details/NavbarComponent.js index b9ab61e6..b576c52e 100644 --- a/frontend/src/components/details/NavbarComponent.js +++ b/frontend/src/components/details/NavbarComponent.js @@ -18,7 +18,7 @@ const NavbarComponent = (props) => {
history.goBack()}> -