diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa192c8038174e4394fe2813dc045165df843f67
--- /dev/null
+++ b/src/components/Performance/ImpactChart.js
@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+ ResponsiveContainer,
+ PieChart,
+ Pie,
+ Cell,
+ Sector,
+} from 'recharts';
+import './styles.css';
+
+const renderActiveShape = (props) => {
+ const {
+ cx,
+ cy,
+ innerRadius,
+ outerRadius,
+ startAngle,
+ endAngle,
+ fill,
+ payload,
+ } = props;
+
+ return (
+
| + Impacts + | +
|
+
+
+
+ Occupants
+
+
+
+ |
+ |||||||||
|
Number of Units
diff --git a/src/components/Performance/RetrofitRow.js b/src/components/Performance/RetrofitRow.js
index cc0804b63ecdf22ddb9eb9968283836348dd6b69..677cc9fd470e355567ff107e151c884015c255fb 100644
--- a/src/components/Performance/RetrofitRow.js
+++ b/src/components/Performance/RetrofitRow.js
@@ -3,123 +3,52 @@ import PropTypes from 'prop-types';
import {
Input,
Button,
- Dropdown,
- DropdownToggle,
- DropdownMenu,
- DropdownItem,
} from 'reactstrap';
class RetrofitRow extends Component {
constructor(props) {
super(props);
- this.handleOnChange = this.handleOnChange.bind(this);
- this.toggleRetrofit = this.toggleRetrofit.bind(this);
- this.togglePrimaryUtility = this.togglePrimaryUtility.bind(this);
- this.toggleSecondUtility = this.toggleSecondUtility.bind(this);
- this.changeRetrofit = this.changeRetrofit.bind(this);
- this.changePrimaryUtility = this.changePrimaryUtility.bind(this);
- this.changeSecondUtility = this.changeSecondUtility.bind(this);
this.handleCreateRetrofit = this.handleCreateRetrofit.bind(this);
this.handleUpdateRetrofit = this.handleUpdateRetrofit.bind(this);
this.handleDeleteRetrofit = this.handleDeleteRetrofit.bind(this);
+ this.retrofitCats = {};
+ this.retrofitMeta = {};
+ this.emptyUtilityName = '- Select Utility -';
+ props.retrofitCats.forEach((retrofitCat) => {
+ this.retrofitCats[retrofitCat[0]] = retrofitCat[1];
+ this.retrofitMeta[retrofitCat[1]] = [];
+ });
+ props.retrofitNames.forEach((retrofitName) => {
+ const retrofitCat = this.retrofitCats[retrofitName[2]];
+ this.retrofitMeta[retrofitCat].push(retrofitName);
+ });
this.state = {
id: props.id,
- retrofit_id: props.retrofitId,
- install_start_date: props.installStartDate,
- install_end_date: props.installEndDate,
- primary_utility: props.primaryUtility,
- second_utility: props.secondUtility,
- notes: props.notes,
- retrofitDropdownOpen: false,
- retrofitDropDownValue: this.getRetrofitName(),
- retrofitMeta: props.retrofitMeta !== undefined ?
- props.retrofitMeta.map((retrofit, id) => {
- return { id, key: retrofit.id, name: retrofit.retrofit_name };
+ utilityNames: props.utilityNames !== undefined ?
+ [...['Select Utility'], ...props.utilityNames].map((utilityName, id) => {
+ return { id, key: id, name: utilityName };
}) : [],
- primaryUtilityDropdownOpen: false,
- secondUtilityDropdownOpen: false,
- utilityNames: props.utilityNames !== undefined ? props.utilityNames.map((utilityName, id) => {
- return { id, key: id, name: utilityName };
- }) : [],
- };
- }
-
- getRetrofitName = () => {
- let retrofitName = null;
- this.props.retrofitMeta.forEach((retrofit) => {
- if (retrofit.id === this.props.retrofitId) {
- retrofitName = retrofit.retrofit_name;
- }
- });
- return retrofitName;
- };
-
- updateRetrofit = () => {
- const retrofit = {
- id: this.props.id,
- retrofit_id: this.state.retrofit_id,
- install_start_date: this.state.install_start_date,
- install_end_date: this.state.install_end_date,
- primary_utility: this.state.primary_utility,
- second_utility: this.state.second_utility,
- notes: this.state.notes,
+ form: {
+ retrofitId: props.retrofitId,
+ primaryUtilities: props.primaryUtility,
+ secondUtilities: props.secondUtility,
+ installStartDate: props.installStartDate,
+ installEndDate: props.installEndDate,
+ notes: props.notes,
+ },
};
- this.props.onChangeEvent(retrofit);
- };
-
- toggleRetrofit() {
- this.setState({
- retrofitDropdownOpen: !this.state.retrofitDropdownOpen,
- });
- }
-
- togglePrimaryUtility() {
- this.setState({
- primaryUtilityDropdownOpen: !this.state.primaryUtilityDropdownOpen,
- });
- }
-
- toggleSecondUtility() {
- this.setState({
- secondUtilityDropdownOpen: !this.state.secondUtilityDropdownOpen,
- });
- }
-
- changeRetrofit(e) {
- this.setState({
- retrofit_id: e.currentTarget.id,
- retrofitDropDownValue: e.currentTarget.textContent,
- });
- }
-
- changePrimaryUtility(e) {
- this.setState({ primary_utility: e.currentTarget.textContent }, () => {
- this.updateRetrofit();
- });
- }
-
- changeSecondUtility(e) {
- this.setState({ second_utility: e.currentTarget.textContent }, () => {
- this.updateRetrofit();
- });
- }
-
- handleOnChange = (event) => {
- this.setState({ [event.target.name]: event.target.value }, () => {
- this.updateRetrofit();
- });
}
handleCreateRetrofit() {
if (this.validateInputs() === true) {
this.props.createRetrofit({
- retrofit_id: this.state.retrofit_id,
- install_start_date: this.state.install_start_date,
- install_end_date: this.state.install_end_date,
- primary_utility: this.state.primary_utility,
- second_utility: this.state.second_utility,
- notes: this.state.notes,
+ retrofit_id: this.state.form.retrofitId,
+ install_start_date: this.state.form.installStartDate,
+ install_end_date: this.state.form.installEndDate,
+ primary_utility: this.state.form.primaryUtilities,
+ second_utility: this.state.form.secondUtilities,
+ notes: this.state.form.notes,
});
}
}
@@ -128,12 +57,12 @@ class RetrofitRow extends Component {
if (this.validateInputs() === true) {
this.props.updateRetrofit({
id: this.props.id,
- retrofit_id: this.state.retrofit_id,
- install_start_date: this.state.install_start_date,
- install_end_date: this.state.install_end_date,
- primary_utility: this.state.primary_utility,
- second_utility: this.state.second_utility,
- notes: this.state.notes,
+ retrofit_id: this.state.form.retrofitId,
+ install_start_date: this.state.form.installStartDate,
+ install_end_date: this.state.form.installEndDate,
+ primary_utility: this.state.form.primaryUtilities,
+ second_utility: this.state.form.secondUtilities,
+ notes: this.state.form.notes,
});
}
}
@@ -144,12 +73,20 @@ class RetrofitRow extends Component {
validateInputs() {
const emptyFields = [];
- if (this.state.install_start_date === null || this.state.install_start_date === '') {
+ if (this.state.form.installStartDate === null || this.state.form.installStartDate === '') {
emptyFields.push('Install start date');
}
- if (this.state.install_end_date === null || this.state.install_end_date === '') {
+ if (this.state.form.installEndDate === null || this.state.form.installEndDate === '') {
emptyFields.push('Install end date');
}
+ if (this.state.form.primaryUtilities === null ||
+ this.state.form.primaryUtilities === this.emptyUtilityName) {
+ emptyFields.push('Primary utility');
+ }
+ if (this.state.form.secondUtilities === null ||
+ this.state.form.secondUtilities === this.emptyUtilityName) {
+ emptyFields.push('Second utility');
+ }
if (emptyFields.length > 0) {
alert(`Please fill in ${emptyFields.join(', ')} field(s)`);
return false;
@@ -157,45 +94,89 @@ class RetrofitRow extends Component {
return true;
}
- render() {
- const style = { textAlign: 'left' };
- const retrofitMeta = this.state.retrofitMeta.map(e => {
- return (
- | |||||||||
|
- |
- |
- |
@@ -312,18 +260,17 @@ class RetrofitRow extends Component {
RetrofitRow.propTypes = {
id: PropTypes.number,
retrofitId: PropTypes.number,
- // retrofitName: PropTypes.string,
installStartDate: PropTypes.string,
installEndDate: PropTypes.string,
primaryUtility: PropTypes.string,
secondUtility: PropTypes.string,
notes: PropTypes.string,
utilityNames: PropTypes.arrayOf,
- retrofitMeta: PropTypes.arrayOf,
createRetrofit: PropTypes.func,
updateRetrofit: PropTypes.func,
deleteRetrofit: PropTypes.func,
- onChangeEvent: PropTypes.func,
+ retrofitCats: PropTypes.arrayOf,
+ retrofitNames: PropTypes.arrayOf,
};
export default RetrofitRow;
diff --git a/src/components/Performance/Retrofits.js b/src/components/Performance/Retrofits.js
index c1a3c05eb41edba0c235ba388ff3f88a66cf5470..84f57715cb7c402cb0c1c9901015a9b8ad5edc9e 100644
--- a/src/components/Performance/Retrofits.js
+++ b/src/components/Performance/Retrofits.js
@@ -61,7 +61,7 @@ class Retrofits extends Component {
const retrofits = this.state.retrofits;
retrofits.push({
id: 0,
- retrofit_id: 1,
+ retrofit_id: 0,
install_start_date: '',
install_end_date: '',
primary_utility: 'Natural Gas',
@@ -157,7 +157,8 @@ class Retrofits extends Component {
key={retrofit.id}
id={retrofit.id}
// retrofitName={this.state.retrofit_name}
- retrofitMeta={this.props.retrofitMeta}
+ retrofitCats={this.props.retrofitCats}
+ retrofitNames={this.props.retrofitNames}
utilityNames={this.props.utilityNames}
retrofitId={retrofit.retrofit_id}
installStartDate={retrofit.install_start_date}
@@ -220,58 +221,61 @@ class Retrofits extends Component {
}
}
+ const tableHeader = {
+ paddingTop: '15px',
+ paddingBottom: '15px',
+ borderTop: '1px solid #CCCCCC',
+ background: '#EEEEEE',
+ };
+ const tableHeaderTitle = {
+ fontWeight: 'bold',
+ paddingTop: '10px',
+ };
+
return (
-
-
-
-
- - My Retrofits --
-
);
}
}
Retrofits.propTypes = {
- blockStyle: PropTypes.shape({
- marginBottom: PropTypes.string,
- }),
- headerStyle: PropTypes.shape({
- textAlign: PropTypes.string,
- marginBottom: PropTypes.string,
- }),
- retrofitMeta: PropTypes.arrayOf,
utilityNames: PropTypes.arrayOf,
retrofits: PropTypes.arrayOf,
retrofitsLog: PropTypes.arrayOf,
@@ -289,6 +293,8 @@ Retrofits.propTypes = {
deleteRetrofit: PropTypes.func,
error: PropTypes.bool,
loading: PropTypes.bool,
+ retrofitCats: PropTypes.arrayOf, // eslint-disable-line
+ retrofitNames: PropTypes.arrayOf, // eslint-disable-line
};
export default Retrofits;
diff --git a/src/components/Performance/ThermalComfort.js b/src/components/Performance/ThermalComfort.js
index 0023ce00c17230d4450a081dda599c3c6257209c..63bac9ce860b2f5731dad7ca37d24632d5df7218 100644
--- a/src/components/Performance/ThermalComfort.js
+++ b/src/components/Performance/ThermalComfort.js
@@ -174,35 +174,19 @@ class ThermalComfort extends Component {
this.state.messageContent = 'Saved!';
}
+ const tableHeader = {
+ paddingTop: '15px',
+ paddingBottom: '15px',
+ borderTop: '1px solid #CCCCCC',
+ background: '#EEEEEE',
+ };
+ const tableHeaderTitle = {
+ fontWeight: 'bold',
+ paddingTop: '10px',
+ };
+
return (
-
-
-
-
- - Thermal Comfort --
-
-
| ||||||