- {item.title}
-
-
-
- );
-}
-
-function TagComponent({ backgroundColor, classes, color, index, onClick, text }) {
- return (
- onClick(index)}
- >
- {text}
-
- );
-}
-
-export default TasksComponent;
diff --git a/frontend/src/components/details/CanvasComponent.jsx b/frontend/src/components/details/CanvasComponent.jsx
deleted file mode 100644
index 1f8da40d..00000000
--- a/frontend/src/components/details/CanvasComponent.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
-in this main component come all the canvas page components
-such as diagrams and tables
-
-@author Parham Gandomkar, Irem Toroslu
-*/
-
-import React, { Component } from 'react';
-import PieChart from './PieChartComponent';
-import ColumnChart from './ColumnChartComponent';
-import Table from './TableComponent';
-
-class CanvasComponent extends Component {
- render() {
- /*
- if the loadComparePage state from its parrent (the detail Component)
- is set to true, here the canvas page should be divided into two canvases
- */
- return (
-
-
-
-
- {' '}
- Results of the impact assessment{' '}
-
-
-
-
-
- {' '}
- Material Composition{' '}
-
-
-
-
-
-
-
Impact categories
-
-
-
-
- );
- }
-}
-
-export default CanvasComponent;
diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
index 2f0690b3..6cb1c186 100644
--- a/frontend/src/components/details/ColumnChartComponent.jsx
+++ b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -1,7 +1,6 @@
import React from 'react';
import ReactApexChart from 'react-apexcharts';
import { getImpactAssessmentData, getLifeCycleStages } from 'interface/projectInterface';
-import theme from 'resources/theme';
/**
* Column Chart
@@ -33,7 +32,7 @@ const ColumnChartComponent = () => {
}
},
fill: {
- colors: [theme.uniformStyle.color.barChartColor]
+ colors: ['#21cc82'] //['#2cb5de']
},
dataLabels: {
@@ -44,7 +43,7 @@ const ColumnChartComponent = () => {
offsetY: -20,
style: {
fontSize: '12px',
- colors: ['#304758']
+ colors: ['#21cc82']
}
},
yaxis: {
diff --git a/frontend/src/components/details/CompareVariablesComponent.jsx b/frontend/src/components/details/CompareVariablesComponent.jsx
deleted file mode 100644
index d8c90d6c..00000000
--- a/frontend/src/components/details/CompareVariablesComponent.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from 'react';
-import theme from 'resources/theme';
-
-/**
-a drop down component for selecting variables
-if we need to compare two variables
-
- @author Parham Gandomkar
-*/
-const CompareVariablesComponent = (props) => {
- const { state } = props;
- return (
-
-
-
Select variables to compare:
-
-
-
-
-
- {state.variables.map((item) => (
-
- ))}
-
-
-
-
-
-
-
- {state.variables.map((item) => (
-
- ))}
-
-
-
-
-
-
-
-
- );
-};
-
-export default CompareVariablesComponent;
diff --git a/frontend/src/components/details/DetailsComponent.js b/frontend/src/components/details/DetailsComponent.js
index 10aba463..f3014fd5 100644
--- a/frontend/src/components/details/DetailsComponent.js
+++ b/frontend/src/components/details/DetailsComponent.js
@@ -58,22 +58,27 @@ class DetailsComponent extends Component {
const scenarioNames = {
baseline: 'Baseline Scenario',
- modified: 'modified Scenario'
+ modified: 'Modified Scenario'
};
const { selectedProduct } = this.props;
postCalculationRequest(selectedProduct.productID);
+ // The styling of the Container, Row and Col can not be moved to css, as the css has a lower priority than the react-grid-system default.
+ const noPaddingStyle = {
+ padding: 0,
+ margin: 0
+ };
if (!this.state.loadComparePage) {
return (
-
-
-
+ {/* Spacing between the two columns is specified by paddingLeft */}
+
diff --git a/frontend/src/components/details/MobileTableComponent.jsx b/frontend/src/components/details/MobileTableComponent.jsx
new file mode 100644
index 00000000..9d85727b
--- /dev/null
+++ b/frontend/src/components/details/MobileTableComponent.jsx
@@ -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 (
+
+ {/* dynamic display of product and model */}
+
{this.props.productName}
+
+ {/* 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}
+
+
+
+ {/* style needs to be defined in js */}
+
+ {this.state.headers.map((header, index) => (
+
);
diff --git a/frontend/src/components/details/ScenarioComponent.js b/frontend/src/components/details/ScenarioComponent.js
index 4b5df951..11233a71 100644
--- a/frontend/src/components/details/ScenarioComponent.js
+++ b/frontend/src/components/details/ScenarioComponent.js
@@ -3,9 +3,10 @@ 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 './navbar.css';
+import { Hidden } from '@material-ui/core';
+import MobileTableComponent from './MobileTableComponent';
/**
* Displays one Scenario, containing a ColumnChart, a PieChart and a Table,
@@ -13,14 +14,13 @@ import './navbar.css';
*/
class ScenarioComponent extends Component {
render() {
- console.log(this.props);
-
+ // The styling of the Container, Row and Col can not be moved to css, as the css has a lower priority than the react-grid-system default.
return (
-
+
@@ -50,9 +50,30 @@ class ScenarioComponent extends Component {
-
-
-
+
+ {/* Swaps out the table with a mobile version for screens <= sm
+ And when on the compare version already swap out for screens <= lg */}
+
+
+
+
+
+
+
diff --git a/frontend/src/components/details/ScenarioComponent.jsx b/frontend/src/components/details/ScenarioComponent.jsx
deleted file mode 100644
index c87ddfca..00000000
--- a/frontend/src/components/details/ScenarioComponent.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { Component } from 'react';
-import SelectVariableComponent from './SelectVariableComponent';
-import NavbarComponent from './NavbarComponent';
-import PieChart from './PieChartComponent';
-import ColumnChart from './ColumnChartComponent';
-import Table from './TableComponent';
-import { Col, Container, Row } from 'react-grid-system';
-import './navbar.css';
-
-class ScenarioComponent extends Component {
- render() {
- console.log(this.props);
-
- return (
-
-
-
-
- The chosen Model is {this.props.selectedProduct.modelName}
-
diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx
index 2519be21..b563a00a 100644
--- a/frontend/src/components/details/TableComponent.jsx
+++ b/frontend/src/components/details/TableComponent.jsx
@@ -5,12 +5,7 @@ import {
getImpactAssessmentData
} 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 {
@@ -49,15 +44,19 @@ class TableComponent extends Component {
}
]);
return (
- // TODO:left margin value needed to be fixed
- {/* TODO: dynamic display of product and model */}
-
-