Skip to content

Commit

Permalink
Merge branch 'dev-#84' into dev-#78
Browse files Browse the repository at this point in the history
  • Loading branch information
@Waldleufer
Waldleufer committed Jun 14, 2021
2 parents 72004c5 + edd33e2 commit 87fadfc
Show file tree
Hide file tree
Showing 9 changed files with 229 additions and 13,686 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@ node_modules
.idea
/.vs/slnx.sqlite-journal
.vs/slnx.sqlite

frontend/yarn.lock
1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.4",
"@react-pdf/renderer": "^2.0.12",
"apexcharts": "^3.26.1",
"axios": "^0.21.1",
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/details/DetailsComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class DetailsComponent extends Component {

const scenarioNames = {
baseline: 'Baseline Scenario',
modified: 'modified Scenario'
modified: 'Modified Scenario'
};
const { selectedProduct } = this.props;

Expand All @@ -73,7 +73,7 @@ class DetailsComponent extends Component {
loadComparePage={this.state.loadComparePage}
onCompareClick={handleCompareButton}
onExportClicked={handleExportPdfButton}
scenarioName={scenarioNames}
scenarioName={scenarioNames.baseline}
selectedProduct={selectedProduct}
/>
</Col>
Expand All @@ -88,7 +88,7 @@ class DetailsComponent extends Component {
<ScenarioComponent
loadComparePage={this.state.loadComparePage}
onCompareClick={handleCompareButton}
scenarioName={scenarioNames}
scenarioName={scenarioNames.baseline}
selectedProduct={selectedProduct}
onExportClicked={handleExportPdfButton}
/>
Expand All @@ -98,7 +98,7 @@ class DetailsComponent extends Component {
<ScenarioComponent
loadComparePage={this.state.loadComparePage}
onCompareClick={handleCompareButton}
scenarioName={scenarioNames}
scenarioName={scenarioNames.modified}
selectedProduct={selectedProduct}
onExportClicked={handleExportPdfButton}
/>
Expand Down
95 changes: 95 additions & 0 deletions frontend/src/components/details/MobileTableComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React, { Component } from 'react';
import { Container } from 'react-grid-system';
import {
getImpactCategoriesTableHeaders,
getImpactCategoriesTableData
} from 'interface/projectInterface';

/**
* Mobile version of the TableComponent. Restructures the Table to be displayable on a mobile screen.
* Switches Rows and Headers and splits the table in two parts.
*/
class MobileTableComponent extends Component {
state = {
headers: getImpactCategoriesTableHeaders(this.props.modelId),
rows: getImpactCategoriesTableData(this.props.modelId)
};
render() {
const idKey = this.props.key;
return (
<Container fluid={true}>
{/* dynamic display of product and model */}
<h5 className='TableTitle'>{this.props.productName}</h5>
<h6 className='TableSubTitle'>
{/* Don't display model name if model name == product name or undefined */}
{this.props.modelName === this.props.productName ||
this.props.modelName === undefined
? ''
: this.props.modelName}
</h6>

<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: '#82baa9', fontWeight: 'bold' }
: {}
}
key={'table1' + idKey + 'tr' + index}
>
<th key={'table1' + idKey + 'thead' + header.key + index}>
{header.value}
</th>
<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: '#82baa9', 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>
</tr>
))}
</tbody>
</table>
</Container>
);
}
}

export default MobileTableComponent;
37 changes: 29 additions & 8 deletions frontend/src/components/details/ScenarioComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ import SelectVariableComponent from './SelectVariableComponent';
import NavbarComponent from './NavbarComponent';
import PieChart from './PieChartComponent';
import ColumnChart from './ColumnChartComponent';
import Table from './TableComponent';
import TableComponent from './TableComponent';
import { Col, Container, Row } from 'react-grid-system';
import { Hidden } from '@material-ui/core';
import MobileTableComponent from './MobileTableComponent';

/**
* Displays one Scenario, containing a ColumnChart, a PieChart and a Table,
* with information about the current Scenario
*/
class ScenarioComponent extends Component {
render() {
console.log(this.props);

return (
<Container fluid={true} style={{ padding: 0, margin: 10, backgroundColor: 'white' }}>
<NavbarComponent
loadComparePage={this.props.compareCanvas}
loadComparePage={this.props.loadComparePage}
onCompareClick={this.props.onCompareClick}
scenarioName={this.props.scenarioName.baseline}
scenarioName={this.props.scenarioName}
onExportClicked={this.props.onExportClicked}
/>
<Container fluid={true} style={{ padding: 'auto' }}>
Expand Down Expand Up @@ -49,9 +49,30 @@ class ScenarioComponent extends Component {
</Col>
</Row>
<Row>
<Col xs={12} sm={12} md={12} lg={11} className='TableContainer'>
<Table />
</Col>
<div className='TableContainer'>
{/* Swaps out the table with a mobile version for screens <= sm
And when on the compare version already swap out for screens <= lg */}
<Hidden
smDown={this.props.loadComparePage ? false : true}
lgDown={this.props.loadComparePage ? true : false}
>
<TableComponent
productName={this.props.selectedProduct.productName}
modelName={this.props.selectedProduct.modelName}
key={this.props.scenarioName}
/>
</Hidden>
<Hidden
mdUp={this.props.loadComparePage ? false : true}
xlUp={this.props.loadComparePage ? true : false}
>
<MobileTableComponent
productName={this.props.selectedProduct.productName}
modelName={this.props.selectedProduct.modelName}
key={this.props.scenarioName}
/>
</Hidden>
</div>
</Row>
</Container>
</Container>
Expand Down
94 changes: 18 additions & 76 deletions frontend/src/components/details/TableComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,30 @@
import React, { Component } from 'react';
import { Container } from 'react-grid-system';
import { getImpactCategoriesTableHeaders } from 'interface/projectInterface';
import {
getImpactCategoriesTableHeaders,
getImpactCategoriesTableData
} from 'interface/projectInterface';

/**
*
* @returns the impact catagories table of the selected model of the related product.
*
* @author Parham Gandomkar, Irem Toroslu
*
*
* 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: 'kg CO2 eq',
total: '2,350,811',
materialsLPT: '874,356',
manufacturing: '71,532',
operations: '2,114,344',
endOfLife: '-790,420'
},
{
key: 'row-2',
impactCategory: 'Ozon layer depletion',
unit: 'kg CFC-11 eq',
total: '12',
materialsLPT: '0',
manufacturing: '0',
operations: '12',
endOfLife: '0'
},
{
key: 'row-3',
impactCategory: 'Photochemical oxidant formation (POCP)',
unit: 'kg C2H4 eq',
total: '2,350,811',
materialsLPT: '874,356',
manufacturing: '71,532',
operations: '2,114,344',
endOfLife: '-332'
},
{
key: 'row-4',
impactCategory: 'Acidification',
unit: 'kg SO2 eq',
total: '12',
materialsLPT: '0',
manufacturing: '0',
operations: '12',
endOfLife: '12,159'
},
{
key: 'row-5',
impactCategory: 'Eutrophication',
unit: 'kg PO4 eq',
total: '12',
materialsLPT: '0',
manufacturing: '0',
operations: '12',
endOfLife: '–5,016'
},
{
key: 'row-6',
impactCategory: 'Nonrenewable energy',
unit: 'MJ eq',
total: '2,781,500,619',
materialsLPT: '14,672,424',
manufacturing: '1,454,845',
operations: '2,774,610,300',
endOfLife: '–9,236,950'
}
]
headers: getImpactCategoriesTableHeaders(this.props.modelId),
rows: getImpactCategoriesTableData(this.props.modelId)
};
render() {
const idKey = this.props.id;
const idKey = this.props.key;
return (
// TODO:left margin value needed to be fixed
<Container fluid={true}>
{/* TODO: dynamic display of product and model */}
<h5 className='TableTitle'>Large Power Transformer</h5>
<h6 className='TableSubTitle'>3 Phase GSU transformer</h6>
{/* dynamic display of product and model */}
<h5 className='TableTitle'>{this.props.productName}</h5>
<h6 className='TableSubTitle'>
{this.props.modelName === this.props.productName ||
this.props.modelName === undefined
? ''
: this.props.modelName}
</h6>

<table className='w3-table-all w3-card-4 w3-small w3-center'>
<thead>
Expand All @@ -94,7 +36,7 @@ class TableComponent extends Component {
</thead>
<tbody>
{this.state.rows.map((item, index) => (
<tr key={idKey + index} className='TableItems'>
<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>
Expand Down
8 changes: 6 additions & 2 deletions frontend/src/components/details/charts_tables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,11 @@
cursor: 'pointer';
/* min-width: 500px;
max-width: 500px; */
margin-left: 10px;
margin-right: 10px;
padding: 10px; /* To make it display the shadow properly */
/* To center it: */
/* margin-left: auto;
margin-right: auto; */
margin-top: 15px;
margin-bottom: 15px;
overflow: auto; /* To make it scrollable whenever it does not fit for some reason. */
}
Loading

0 comments on commit 87fadfc

Please sign in to comment.