From d00c74222411e527d657cca9337d5ab3ec22e726 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 8 Jul 2019 15:34:18 -0400 Subject: [PATCH 01/14] Add Impacts component --- src/containers/Performance/index.js | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/containers/Performance/index.js b/src/containers/Performance/index.js index 40b4a6ca..6018ce02 100644 --- a/src/containers/Performance/index.js +++ b/src/containers/Performance/index.js @@ -19,6 +19,7 @@ import { } from './actions'; import buildingDetailPropTypes from '../../containers/Building/propTypes'; import LinkBarDetail from '../../components/LinkBarDetail'; +import Impacts from '../../components/Performance/Impacts'; import Occupants from '../../components/Performance/Occupants'; import ThermalComfort from '../../components/Performance/ThermalComfort'; import Retrofits from '../../components/Performance/Retrofits'; @@ -107,9 +108,32 @@ class Performance extends Component { } const retrofitsData = retrofits.data.retrofits === null ? [] : retrofits.data.retrofits; - + const impacts = { + gas: + { + cost: 100, + savings: 200, + }, + electricity: + { + cost: 100, + savings: 200, + }, + water: + { + cost: 100, + savings: 200, + }, + }; mainContent = (
+
+
+ +
+
Date: Mon, 8 Jul 2019 15:35:06 -0400 Subject: [PATCH 02/14] Add ImpactChart component --- src/components/Performance/ImpactChart.js | 80 +++++++++++++++++++++++ src/components/Performance/Impacts.js | 44 +++++++++++++ 2 files changed, 124 insertions(+) create mode 100644 src/components/Performance/ImpactChart.js create mode 100644 src/components/Performance/Impacts.js diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js new file mode 100644 index 00000000..d48beecc --- /dev/null +++ b/src/components/Performance/ImpactChart.js @@ -0,0 +1,80 @@ +import React, { Component } from 'react'; +// import PropTypes from 'prop-types'; +import { + // ResponsiveContainer, + PieChart, + Pie, + Cell, +} from 'recharts'; + + +class ImpactChart extends Component { + constructor(props) { + super(props); + this.state = { + action: null, + messageContent: null, + messageStyle: 'default', + }; + } + + render() { + const data = [ + { name: 'Group A', value: 400 }, + { name: 'Group B', value: 300 }, + { name: 'Group C', value: 300 }, + { name: 'Group D', value: 200 }, + ]; + const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; + const cost = 72234.00; + const savings = 2215.00; + // const RADIAN = Math.PI / 180; + + return ( +
+ + + { + data.map((entry, index) => ) + } + + +
+
+
+ Annual Cost ($) +
+ {cost} +
+ Annual Savings ($) +
+ {savings} +
+
+
+ ); + } +} + +// ImpactChart.propTypes = { +// userId: PropTypes.string, +// }; + +export default ImpactChart; diff --git a/src/components/Performance/Impacts.js b/src/components/Performance/Impacts.js new file mode 100644 index 00000000..e9c37be4 --- /dev/null +++ b/src/components/Performance/Impacts.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react'; +import ImpactChart from '../../components/Performance/ImpactChart'; +import './styles.css'; + + +class Impacts extends Component { + constructor(props) { + super(props); + this.state = { + action: null, + messageContent: null, + messageStyle: 'default', + }; + } + + render() { + return ( +
+

+ Impacts +

+
+
+ +
+
+ +
+
+ +
+
+
+ ); + } +} + +export default Impacts; -- GitLab From b4dcf17526f896e3f62736ddeeda0cede332127a Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Fri, 12 Jul 2019 17:17:40 -0400 Subject: [PATCH 03/14] Change dropdown component --- src/components/Performance/RetrofitRow.js | 143 ++++++++++++++-------- 1 file changed, 94 insertions(+), 49 deletions(-) diff --git a/src/components/Performance/RetrofitRow.js b/src/components/Performance/RetrofitRow.js index cc0804b6..7917bc6c 100644 --- a/src/components/Performance/RetrofitRow.js +++ b/src/components/Performance/RetrofitRow.js @@ -3,10 +3,6 @@ import PropTypes from 'prop-types'; import { Input, Button, - Dropdown, - DropdownToggle, - DropdownMenu, - DropdownItem, } from 'reactstrap'; @@ -39,9 +35,10 @@ class RetrofitRow extends Component { }) : [], primaryUtilityDropdownOpen: false, secondUtilityDropdownOpen: false, - utilityNames: props.utilityNames !== undefined ? props.utilityNames.map((utilityName, id) => { - return { id, key: id, name: utilityName }; - }) : [], + utilityNames: props.utilityNames !== undefined ? + [...['Select Utility'], ...props.utilityNames].map((utilityName, id) => { + return { id, key: id, name: utilityName }; + }) : [], }; } @@ -157,44 +154,89 @@ class RetrofitRow extends Component { return true; } + renderRetrofitNames = () => { + const options = this.props.retrofitMeta.map((retrofit, i) => ( + + )); + return this.renderSelectInput('retrofit', options); + } + + renderPrimaryUtilities = () => { + const options = [...['- Select Utility -'], ...this.props.utilityNames].map((utilityName, i) => ( + + )); + return this.renderSelectInput('primary_utilities', options); + } + + renderSecondUtilities = () => { + const options = [...['- Select Utility -'], ...this.props.utilityNames].map((utilityName, i) => ( + + )); + return this.renderSelectInput('second_utilities', options); + } + + renderSelectInput = (propName, options) => ( + this.handleInputChange(e)} + value={propName} + > + {options} + + ) + + handleInputChange = (event) => { + let val = event.target.value; + if (!isNaN(parseInt(val, 10))) { + val = parseInt(val, 10); + } + this.setState({ + form: { + ...this.state.form, + [event.target.name]: val, + }, + }); + } + render() { const style = { textAlign: 'left' }; - const retrofitMeta = this.state.retrofitMeta.map(e => { - return ( - - {e.name} - - ); - }); - const primaryUtilityNames = this.state.utilityNames.map(e => { - return ( - - {e.name} - - ); - }); - const secondUtilityNames = this.state.utilityNames.map(e => { - return ( - - {e.name} - - ); - }); - const dropdownStyle = { - marginLeft: '0px', - }; + // const retrofitMeta = this.state.retrofitMeta.map(e => { + // return ( + // + // {e.name} + // + // ); + // }); + // const primaryUtilityNames = this.state.utilityNames.map(e => { + // return ( + // + // {e.name} + // + // ); + // }); + // const secondUtilityNames = this.state.utilityNames.map(e => { + // return ( + // + // {e.name} + // + // ); + // }); + // const dropdownStyle = { + // marginLeft: '0px', + // }; let actionButton = null; @@ -222,7 +264,7 @@ class RetrofitRow extends Component { return ( - {retrofitMeta} - + */} + {this.renderRetrofitNames()} - {primaryUtilityNames} - + */} + {this.renderPrimaryUtilities()} - {secondUtilityNames} - + */} + {this.renderSecondUtilities()} Date: Mon, 15 Jul 2019 18:12:01 -0400 Subject: [PATCH 04/14] Fix retrofit names dropdpwmn --- src/components/Performance/RetrofitRow.js | 71 ++++++++++++++++------- src/components/Performance/Retrofits.js | 6 +- src/containers/Performance/index.js | 41 +++++++++---- 3 files changed, 82 insertions(+), 36 deletions(-) diff --git a/src/components/Performance/RetrofitRow.js b/src/components/Performance/RetrofitRow.js index 7917bc6c..76925852 100644 --- a/src/components/Performance/RetrofitRow.js +++ b/src/components/Performance/RetrofitRow.js @@ -19,6 +19,16 @@ class RetrofitRow extends Component { this.handleCreateRetrofit = this.handleCreateRetrofit.bind(this); this.handleUpdateRetrofit = this.handleUpdateRetrofit.bind(this); this.handleDeleteRetrofit = this.handleDeleteRetrofit.bind(this); + this.retrofitCats = {}; + this.retrofitMeta = {}; + 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, @@ -29,10 +39,7 @@ class RetrofitRow extends Component { 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 }; - }) : [], + retrofitMeta: this.retrofitMeta, primaryUtilityDropdownOpen: false, secondUtilityDropdownOpen: false, utilityNames: props.utilityNames !== undefined ? @@ -44,7 +51,11 @@ class RetrofitRow extends Component { getRetrofitName = () => { let retrofitName = null; - this.props.retrofitMeta.forEach((retrofit) => { + console.log(this.retrofitMeta); // eslint-disable-line + // console.log(this.state.retrofitMeta); // eslint-disable-line + // console.log(this.state.retrofitMeta); // eslint-disable-line + Object.entries(this.retrofitMeta).forEach((retrofit) => { + console.log(retrofit); // eslint-disable-line if (retrofit.id === this.props.retrofitId) { retrofitName = retrofit.retrofit_name; } @@ -154,10 +165,38 @@ class RetrofitRow extends Component { return true; } + handleInputChange = (event) => { + let val = event.target.value; + console.log(event.target.id); // eslint-disable-line + console.log(val); // eslint-disable-line + if (!isNaN(parseInt(val, 10))) { + val = parseInt(val, 10); + } + this.setState({ + form: { + ...this.state.form, + [event.target.name]: val, + }, + }); + } + renderRetrofitNames = () => { - const options = this.props.retrofitMeta.map((retrofit, i) => ( - - )); + const options = []; + let retrofitOptions = []; + Object.entries(this.retrofitMeta).forEach(([retrofitCat, retrofitNames]) => { + retrofitOptions = retrofitNames.map(retrofitName => { + return ( + + ); + }); + options.push( + + {retrofitOptions} + + ); + }); return this.renderSelectInput('retrofit', options); } @@ -186,19 +225,6 @@ class RetrofitRow extends Component { ) - handleInputChange = (event) => { - let val = event.target.value; - if (!isNaN(parseInt(val, 10))) { - val = parseInt(val, 10); - } - this.setState({ - form: { - ...this.state.form, - [event.target.name]: val, - }, - }); - } - render() { const style = { textAlign: 'left' }; // const retrofitMeta = this.state.retrofitMeta.map(e => { @@ -364,11 +390,12 @@ RetrofitRow.propTypes = { 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 c1a3c05e..045d7780 100644 --- a/src/components/Performance/Retrofits.js +++ b/src/components/Performance/Retrofits.js @@ -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} @@ -271,7 +272,6 @@ Retrofits.propTypes = { textAlign: PropTypes.string, marginBottom: PropTypes.string, }), - retrofitMeta: PropTypes.arrayOf, utilityNames: PropTypes.arrayOf, retrofits: PropTypes.arrayOf, retrofitsLog: PropTypes.arrayOf, @@ -289,6 +289,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/containers/Performance/index.js b/src/containers/Performance/index.js index 6018ce02..4da3de89 100644 --- a/src/containers/Performance/index.js +++ b/src/containers/Performance/index.js @@ -10,13 +10,17 @@ import { loadThermalComfortLog, loadRetrofits, loadRetrofitsLog, - loadRetrofitMeta, + // loadRetrofitMeta, updateOccupants, updateThermalComfort, createMyRetrofit, updateMyRetrofit, deleteMyRetrofit, } from './actions'; +import { + loadRetrofitProperties, +} from '../Eng/actions'; +import engPropTypes from '../Eng/propTypes'; import buildingDetailPropTypes from '../../containers/Building/propTypes'; import LinkBarDetail from '../../components/LinkBarDetail'; import Impacts from '../../components/Performance/Impacts'; @@ -35,14 +39,14 @@ class Performance extends Component { componentDidMount() { const buildingId = this.props.building.building_id; - console.log(buildingId); // eslint-disable-line this.props.loadOccupants(buildingId); this.props.loadOccupantsLog(buildingId); this.props.loadThermalComfort(buildingId); this.props.loadThermalComfortLog(buildingId); this.props.loadRetrofits(buildingId); this.props.loadRetrofitsLog(buildingId); - this.props.loadRetrofitMeta(buildingId); + this.props.loadRetrofitProperties(buildingId); + // this.props.loadRetrofitMeta(buildingId); } render() { @@ -54,12 +58,10 @@ class Performance extends Component { marginBottom: '25px', paddingLeft: '10px', }; - - console.log(this.props); // eslint-disable-line - const { user, performance, + eng, } = this.props; const { occupants, @@ -68,18 +70,20 @@ class Performance extends Component { thermalComfortLog, retrofits, retrofitsLog, - retrofitMeta, + // retrofitMeta, } = performance; mainContent = ; - + console.log(this.props); // eslint-disable-line if (user !== undefined && user.user_id !== undefined && + eng !== undefined && eng.retrofitProperties !== undefined && + eng.retrofitProperties.properties !== {} && occupants.data !== undefined && thermalComfort.data !== undefined && occupants.data !== null && thermalComfort.data !== null && occupants.data.occupants !== undefined && thermalComfort.data.thermalComfort !== undefined && occupantsLog.data !== null && thermalComfortLog.data !== null && occupantsLog.data.data !== undefined && thermalComfortLog.data.data !== undefined && - retrofits.data !== null && retrofitsLog.data !== null && retrofitMeta.data !== null + retrofits.data !== null && retrofitsLog.data !== null ) { const userId = user.user_id.split('|')[1]; @@ -125,6 +129,13 @@ class Performance extends Component { savings: 200, }, }; + // const retrofitCats = eng.retrofitProperties.properties.retrofit_cat.map(retrofitCat => { + // return retrofitCat[1]; + // }); + const retrofitCats = eng.retrofitProperties.properties.retrofit_cat; + const retrofitNames = eng.retrofitProperties.properties.retrofit_name; + console.log(retrofitCats); // eslint-disable-line + console.log(retrofitNames); // eslint-disable-line mainContent = (
@@ -167,10 +178,12 @@ class Performance extends Component {
( @@ -226,9 +241,10 @@ const mapDispatchToProps = dispatch => ( loadOccupantsLog, loadThermalComfort, loadThermalComfortLog, + loadRetrofitProperties, loadRetrofits, loadRetrofitsLog, - loadRetrofitMeta, + // loadRetrofitMeta, updateOccupants, updateThermalComfort, createMyRetrofit, @@ -240,6 +256,7 @@ const mapDispatchToProps = dispatch => ( const mapStateToProps = state => ({ performance: state.bloclink, user: state.user, + eng: state.eng, }); export default connect(mapStateToProps, mapDispatchToProps)(Performance); -- GitLab From 8cb694ab2c6f10128abd6cb439f308459b5bb607 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Tue, 16 Jul 2019 13:06:06 -0400 Subject: [PATCH 05/14] Apply new dropdown for retrofit names, and tested --- src/components/Performance/RetrofitRow.js | 281 ++++++---------------- src/components/Performance/Retrofits.js | 2 +- 2 files changed, 79 insertions(+), 204 deletions(-) diff --git a/src/components/Performance/RetrofitRow.js b/src/components/Performance/RetrofitRow.js index 76925852..677cc9fd 100644 --- a/src/components/Performance/RetrofitRow.js +++ b/src/components/Performance/RetrofitRow.js @@ -9,18 +9,12 @@ import { 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]] = []; @@ -31,103 +25,30 @@ class RetrofitRow extends Component { }); 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: this.retrofitMeta, - primaryUtilityDropdownOpen: false, - secondUtilityDropdownOpen: false, utilityNames: props.utilityNames !== undefined ? [...['Select Utility'], ...props.utilityNames].map((utilityName, id) => { return { id, key: id, name: utilityName }; }) : [], + form: { + retrofitId: props.retrofitId, + primaryUtilities: props.primaryUtility, + secondUtilities: props.secondUtility, + installStartDate: props.installStartDate, + installEndDate: props.installEndDate, + notes: props.notes, + }, }; } - getRetrofitName = () => { - let retrofitName = null; - console.log(this.retrofitMeta); // eslint-disable-line - // console.log(this.state.retrofitMeta); // eslint-disable-line - // console.log(this.state.retrofitMeta); // eslint-disable-line - Object.entries(this.retrofitMeta).forEach((retrofit) => { - console.log(retrofit); // eslint-disable-line - 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, - }; - 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, }); } } @@ -136,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, }); } } @@ -152,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; @@ -166,17 +95,15 @@ class RetrofitRow extends Component { } handleInputChange = (event) => { - let val = event.target.value; - console.log(event.target.id); // eslint-disable-line - console.log(val); // eslint-disable-line - if (!isNaN(parseInt(val, 10))) { - val = parseInt(val, 10); - } + const val = event.target.value; + const name = event.target.name; this.setState({ form: { ...this.state.form, - [event.target.name]: val, + [name]: val, }, + }, () => { + console.log('changed!'); // eslint-disable-line }); } @@ -185,8 +112,15 @@ class RetrofitRow extends Component { let retrofitOptions = []; Object.entries(this.retrofitMeta).forEach(([retrofitCat, retrofitNames]) => { retrofitOptions = retrofitNames.map(retrofitName => { + if (retrofitName[0] === this.state.form.retrofitId) { + return ( + + ); + } return ( - ); @@ -197,21 +131,37 @@ class RetrofitRow extends Component { ); }); - return this.renderSelectInput('retrofit', options); + return this.renderSelectInput('retrofitId', options); } renderPrimaryUtilities = () => { - const options = [...['- Select Utility -'], ...this.props.utilityNames].map((utilityName, i) => ( - - )); - return this.renderSelectInput('primary_utilities', options); + const options = [...[this.emptyUtilityName], ...this.props.utilityNames] + .map((utilityName, i) => { + if (utilityName === this.state.form.primaryUtilities) { + return ( + + ); + } + return ( + + ); + }); + return this.renderSelectInput('primaryUtilities', options); } renderSecondUtilities = () => { - const options = [...['- Select Utility -'], ...this.props.utilityNames].map((utilityName, i) => ( - - )); - return this.renderSelectInput('second_utilities', options); + const options = [...[this.emptyUtilityName], ...this.props.utilityNames] + .map((utilityName, i) => { + if (utilityName === this.state.form.secondUtilities) { + return ( + + ); + } + return ( + + ); + }); + return this.renderSelectInput('secondUtilities', options); } renderSelectInput = (propName, options) => ( @@ -219,7 +169,7 @@ class RetrofitRow extends Component { type="select" name={propName} onChange={e => this.handleInputChange(e)} - value={propName} + value={this.state.form[propName]} > {options} @@ -227,43 +177,6 @@ class RetrofitRow extends Component { render() { const style = { textAlign: 'left' }; - // const retrofitMeta = this.state.retrofitMeta.map(e => { - // return ( - // - // {e.name} - // - // ); - // }); - // const primaryUtilityNames = this.state.utilityNames.map(e => { - // return ( - // - // {e.name} - // - // ); - // }); - // const secondUtilityNames = this.state.utilityNames.map(e => { - // return ( - // - // {e.name} - // - // ); - // }); - // const dropdownStyle = { - // marginLeft: '0px', - // }; - let actionButton = null; if (this.props.id === 0) { @@ -290,76 +203,40 @@ class RetrofitRow extends Component { return ( - {/* - - {this.state.retrofitDropDownValue} - - - {retrofitMeta} - - */} {this.renderRetrofitNames()} - {/* - - {this.state.primary_utility} - - - {primaryUtilityNames} - - */} {this.renderPrimaryUtilities()} - {/* - - {this.state.second_utility} - - - {secondUtilityNames} - - */} {this.renderSecondUtilities()} @@ -383,7 +260,6 @@ class RetrofitRow extends Component { RetrofitRow.propTypes = { id: PropTypes.number, retrofitId: PropTypes.number, - // retrofitName: PropTypes.string, installStartDate: PropTypes.string, installEndDate: PropTypes.string, primaryUtility: PropTypes.string, @@ -393,7 +269,6 @@ RetrofitRow.propTypes = { createRetrofit: PropTypes.func, updateRetrofit: PropTypes.func, deleteRetrofit: PropTypes.func, - onChangeEvent: PropTypes.func, retrofitCats: PropTypes.arrayOf, retrofitNames: PropTypes.arrayOf, }; diff --git a/src/components/Performance/Retrofits.js b/src/components/Performance/Retrofits.js index 045d7780..1e895c0b 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', -- GitLab From 6b6150cc544c64e0d50560a86a3c02cc5a201894 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Tue, 16 Jul 2019 17:31:44 -0400 Subject: [PATCH 06/14] Add impacts pie charts --- src/components/Performance/ImpactChart.js | 125 +++++++++++++++------- src/components/Performance/Impacts.js | 19 +++- 2 files changed, 103 insertions(+), 41 deletions(-) diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js index d48beecc..a8a5db4c 100644 --- a/src/components/Performance/ImpactChart.js +++ b/src/components/Performance/ImpactChart.js @@ -1,12 +1,48 @@ import React, { Component } from 'react'; -// import PropTypes from 'prop-types'; +import PropTypes from 'prop-types'; import { // ResponsiveContainer, PieChart, Pie, Cell, + Sector, } from 'recharts'; +const renderActiveShape = (props) => { + const { + cx, + cy, + innerRadius, + outerRadius, + startAngle, + endAngle, + fill, + payload, + } = props; + + return ( + + + {payload.utilityType} + + + {payload.name}: {payload.percent} + + + ☀ + + + + ); +}; class ImpactChart extends Component { constructor(props) { @@ -19,53 +55,53 @@ class ImpactChart extends Component { } render() { + const utilityType = this.props.type.charAt(0).toUpperCase() + this.props.type.slice(1); + const percent = `${(this.props.savings / this.props.cost) * 100}%`; const data = [ - { name: 'Group A', value: 400 }, - { name: 'Group B', value: 300 }, - { name: 'Group C', value: 300 }, - { name: 'Group D', value: 200 }, + { name: 'Savings', value: this.props.savings, utilityType, percent }, + { name: 'Cost', value: this.props.cost, utilityType, percent }, ]; - const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; - const cost = 72234.00; - const savings = 2215.00; - // const RADIAN = Math.PI / 180; + const COLORS = ['#00C49F', '#CCCCCC']; + const titleStyle = { + fontWeight: 'bold', + fontSize: '0.9em', + marginTop: '15px', + }; + const feeStyle = { + fontSize: '1.2em', + }; return ( -
- +
+ { data.map((entry, index) => ) } -
-
-
- Annual Cost ($) -
- {cost} -
- Annual Savings ($) -
- {savings} +
+
+ Annual Cost +
+
+ {Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(this.props.cost)} +
+
+ Annual Savings +
+
+ {Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(this.props.savings)}
@@ -73,8 +109,21 @@ class ImpactChart extends Component { } } -// ImpactChart.propTypes = { -// userId: PropTypes.string, -// }; +renderActiveShape.propTypes = { + cx: PropTypes.number, + cy: PropTypes.number, + innerRadius: PropTypes.number, + outerRadius: PropTypes.number, + startAngle: PropTypes.number, + endAngle: PropTypes.number, + fill: PropTypes.string, + payload: PropTypes.string, +}; + +ImpactChart.propTypes = { + type: PropTypes.string, + savings: PropTypes.number, + cost: PropTypes.number, +}; export default ImpactChart; diff --git a/src/components/Performance/Impacts.js b/src/components/Performance/Impacts.js index e9c37be4..f72d8e88 100644 --- a/src/components/Performance/Impacts.js +++ b/src/components/Performance/Impacts.js @@ -20,19 +20,32 @@ class Impacts extends Component { Impacts
-
+
-
+
-
+
+
+
+
-- GitLab From b8ec9b9bdbaf4c91fe62d628bb8083d0fcd04fcb Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Wed, 17 Jul 2019 13:29:13 -0400 Subject: [PATCH 07/14] Add utility chart to M&V --- src/components/Performance/ImpactChart.js | 38 ++++---- src/components/Performance/Utilities.js | 54 +++++++++++ src/components/Performance/UtilityChart.js | 101 +++++++++++++++++++++ src/containers/Performance/index.js | 8 ++ 4 files changed, 183 insertions(+), 18 deletions(-) create mode 100644 src/components/Performance/Utilities.js create mode 100644 src/components/Performance/UtilityChart.js diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js index a8a5db4c..d895a726 100644 --- a/src/components/Performance/ImpactChart.js +++ b/src/components/Performance/ImpactChart.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { - // ResponsiveContainer, + ResponsiveContainer, PieChart, Pie, Cell, @@ -73,23 +73,25 @@ class ImpactChart extends Component { return (
- - - { - data.map((entry, index) => ) - } - - + + + + { + data.map((entry, index) => ) + } + + +
Annual Cost diff --git a/src/components/Performance/Utilities.js b/src/components/Performance/Utilities.js new file mode 100644 index 00000000..45544c1c --- /dev/null +++ b/src/components/Performance/Utilities.js @@ -0,0 +1,54 @@ +import React, { Component } from 'react'; +import UtilityChart from '../../components/Performance/UtilityChart'; +import './styles.css'; + + +class Utilities extends Component { + constructor(props) { + super(props); + this.state = { + action: null, + messageContent: null, + messageStyle: 'default', + }; + } + + render() { + return ( +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ); + } +} + +export default Utilities; diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js new file mode 100644 index 00000000..7b0d8f36 --- /dev/null +++ b/src/components/Performance/UtilityChart.js @@ -0,0 +1,101 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + ResponsiveContainer, + ComposedChart, + Line, + // Area, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, +} from 'recharts'; + +class UtilityChart extends Component { + constructor(props) { + super(props); + this.state = { + action: null, + messageContent: null, + messageStyle: 'default', + }; + } + + render() { + const data = [ + { date: '2018/02/01', BaselineConsumption: 1200, MeteredUsage: 1200, amt: 1400 }, + { date: '2018/03/01', BaselineConsumption: 1400, MeteredUsage: 1400, amt: 1506 }, + { date: '2018/04/01', BaselineConsumption: 1098, MeteredUsage: 1098, amt: 989 }, + { date: '2018/05/01', BaselineConsumption: 1480, MeteredUsage: 1480, amt: 1228 }, + { date: '2018/06/01', BaselineConsumption: 1520, MeteredUsage: 1520, amt: 1100 }, + { date: '2018/07/01', BaselineConsumption: 1100, MeteredUsage: 1100, amt: 1700 }, + { date: '2018/08/01', BaselineConsumption: 868, MeteredUsage: 868, amt: 1506 }, + { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1098, amt: 989 }, + { date: '2018/10/01', BaselineConsumption: 1480, MeteredUsage: 1200, amt: 1228 }, + { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1108, amt: 1100 }, + { date: '2018/12/01', BaselineConsumption: 1400, MeteredUsage: 680, amt: 1700 }, + { date: '2019/01/01', BaselineConsumption: 1200, MeteredUsage: 800, amt: 1400 }, + { date: '2019/02/01', BaselineConsumption: 1090, MeteredUsage: 800, amt: 1400 }, + { date: '2019/03/01', BaselineConsumption: 1190, MeteredUsage: 967, amt: 1506 }, + { date: '2019/04/01', BaselineConsumption: 1397, MeteredUsage: 1098, amt: 989 }, + { date: '2019/05/01', BaselineConsumption: 1480, MeteredUsage: 1200, amt: 1228 }, + { date: '2019/06/01', BaselineConsumption: 1520, MeteredUsage: 1108, amt: 1100 }, + { date: '2019/07/01', BaselineConsumption: 1400, MeteredUsage: 680, amt: 1700 }, + ]; + + return ( +
+

+ {this.props.type} +

+ + + + + + + + {/* */} + + + + + +
+ ); + } +} + +UtilityChart.propTypes = { + type: PropTypes.string, +}; + +export default UtilityChart; diff --git a/src/containers/Performance/index.js b/src/containers/Performance/index.js index 4da3de89..81491b9e 100644 --- a/src/containers/Performance/index.js +++ b/src/containers/Performance/index.js @@ -27,6 +27,7 @@ import Impacts from '../../components/Performance/Impacts'; import Occupants from '../../components/Performance/Occupants'; import ThermalComfort from '../../components/Performance/ThermalComfort'; import Retrofits from '../../components/Performance/Retrofits'; +import Utilities from '../../components/Performance/Utilities'; class Performance extends Component { @@ -195,6 +196,13 @@ class Performance extends Component { />
+
+
+ +
+
); } -- GitLab From 258c67220d0cede40562623192d2f9236e9eebd3 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Wed, 17 Jul 2019 17:51:07 -0400 Subject: [PATCH 08/14] Add ECM construction line to chart --- src/components/Performance/UtilityChart.js | 31 +++++++++++++++++----- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js index 7b0d8f36..8d08c854 100644 --- a/src/components/Performance/UtilityChart.js +++ b/src/components/Performance/UtilityChart.js @@ -11,6 +11,7 @@ import { CartesianGrid, Tooltip, Legend, + ReferenceLine, } from 'recharts'; class UtilityChart extends Component { @@ -50,14 +51,14 @@ class UtilityChart extends Component {

{this.props.type}

- + - + + {/* */} - - - + + +
-- GitLab From 4cf1f370cd8f84bcb6675202168477f572b3d671 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 18 Jul 2019 11:25:56 -0400 Subject: [PATCH 09/14] Remove bar chart from composed utility chart, make charts responsive --- src/components/Performance/ImpactChart.js | 12 ++++---- src/components/Performance/Utilities.js | 4 +++ src/components/Performance/UtilityChart.js | 32 ++++++++++++---------- 3 files changed, 28 insertions(+), 20 deletions(-) diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js index d895a726..4fa73189 100644 --- a/src/components/Performance/ImpactChart.js +++ b/src/components/Performance/ImpactChart.js @@ -22,13 +22,13 @@ const renderActiveShape = (props) => { return ( - + {payload.utilityType} - + {payload.name}: {payload.percent} - + - + diff --git a/src/components/Performance/Utilities.js b/src/components/Performance/Utilities.js index 45544c1c..87718b35 100644 --- a/src/components/Performance/Utilities.js +++ b/src/components/Performance/Utilities.js @@ -20,6 +20,7 @@ class Utilities extends Component {
@@ -27,6 +28,7 @@ class Utilities extends Component {
@@ -34,6 +36,7 @@ class Utilities extends Component {
@@ -41,6 +44,7 @@ class Utilities extends Component {
diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js index 8d08c854..5f7455ee 100644 --- a/src/components/Performance/UtilityChart.js +++ b/src/components/Performance/UtilityChart.js @@ -4,8 +4,6 @@ import { ResponsiveContainer, ComposedChart, Line, - // Area, - Bar, XAxis, YAxis, CartesianGrid, @@ -26,6 +24,13 @@ class UtilityChart extends Component { render() { const data = [ + { date: '2017/07/01', BaselineConsumption: 1400, MeteredUsage: 1400, amt: 1506 }, + { date: '2017/08/01', BaselineConsumption: 1098, MeteredUsage: 1098, amt: 989 }, + { date: '2017/09/01', BaselineConsumption: 1480, MeteredUsage: 1480, amt: 1228 }, + { date: '2017/10/01', BaselineConsumption: 1520, MeteredUsage: 1520, amt: 1100 }, + { date: '2017/11/01', BaselineConsumption: 1100, MeteredUsage: 1100, amt: 1700 }, + { date: '2017/12/01', BaselineConsumption: 868, MeteredUsage: 868, amt: 1506 }, + { date: '2018/01/01', BaselineConsumption: 1098, MeteredUsage: 1098, amt: 989 }, { date: '2018/02/01', BaselineConsumption: 1200, MeteredUsage: 1200, amt: 1400 }, { date: '2018/03/01', BaselineConsumption: 1400, MeteredUsage: 1400, amt: 1506 }, { date: '2018/04/01', BaselineConsumption: 1098, MeteredUsage: 1098, amt: 989 }, @@ -33,9 +38,9 @@ class UtilityChart extends Component { { date: '2018/06/01', BaselineConsumption: 1520, MeteredUsage: 1520, amt: 1100 }, { date: '2018/07/01', BaselineConsumption: 1100, MeteredUsage: 1100, amt: 1700 }, { date: '2018/08/01', BaselineConsumption: 868, MeteredUsage: 868, amt: 1506 }, - { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1098, amt: 989 }, - { date: '2018/10/01', BaselineConsumption: 1480, MeteredUsage: 1200, amt: 1228 }, - { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1108, amt: 1100 }, + { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000, amt: 989 }, + { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900, amt: 1228 }, + { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100, amt: 1100 }, { date: '2018/12/01', BaselineConsumption: 1400, MeteredUsage: 680, amt: 1700 }, { date: '2019/01/01', BaselineConsumption: 1200, MeteredUsage: 800, amt: 1400 }, { date: '2019/02/01', BaselineConsumption: 1090, MeteredUsage: 800, amt: 1400 }, @@ -48,10 +53,10 @@ class UtilityChart extends Component { return (
-

- {this.props.type} +

+ {this.props.type} Consumption of Baseline and Reporting Period

- + - {/* */} - - - + +
@@ -115,6 +118,7 @@ class UtilityChart extends Component { UtilityChart.propTypes = { type: PropTypes.string, + unit: PropTypes.string, }; export default UtilityChart; -- GitLab From 0a87fb98c24d10785702bf760d1fac4efef40b60 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 18 Jul 2019 12:49:49 -0400 Subject: [PATCH 10/14] Add Reference area to the chart --- src/components/Performance/UtilityChart.js | 88 +++++++++++++++------- 1 file changed, 59 insertions(+), 29 deletions(-) diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js index 5f7455ee..de4dfa39 100644 --- a/src/components/Performance/UtilityChart.js +++ b/src/components/Performance/UtilityChart.js @@ -9,7 +9,8 @@ import { CartesianGrid, Tooltip, Legend, - ReferenceLine, + // ReferenceLine, + ReferenceArea, } from 'recharts'; class UtilityChart extends Component { @@ -24,20 +25,20 @@ class UtilityChart extends Component { render() { const data = [ - { date: '2017/07/01', BaselineConsumption: 1400, MeteredUsage: 1400, amt: 1506 }, - { date: '2017/08/01', BaselineConsumption: 1098, MeteredUsage: 1098, amt: 989 }, - { date: '2017/09/01', BaselineConsumption: 1480, MeteredUsage: 1480, amt: 1228 }, - { date: '2017/10/01', BaselineConsumption: 1520, MeteredUsage: 1520, amt: 1100 }, - { date: '2017/11/01', BaselineConsumption: 1100, MeteredUsage: 1100, amt: 1700 }, - { date: '2017/12/01', BaselineConsumption: 868, MeteredUsage: 868, amt: 1506 }, - { date: '2018/01/01', BaselineConsumption: 1098, MeteredUsage: 1098, amt: 989 }, - { date: '2018/02/01', BaselineConsumption: 1200, MeteredUsage: 1200, amt: 1400 }, - { date: '2018/03/01', BaselineConsumption: 1400, MeteredUsage: 1400, amt: 1506 }, - { date: '2018/04/01', BaselineConsumption: 1098, MeteredUsage: 1098, amt: 989 }, - { date: '2018/05/01', BaselineConsumption: 1480, MeteredUsage: 1480, amt: 1228 }, - { date: '2018/06/01', BaselineConsumption: 1520, MeteredUsage: 1520, amt: 1100 }, - { date: '2018/07/01', BaselineConsumption: 1100, MeteredUsage: 1100, amt: 1700 }, - { date: '2018/08/01', BaselineConsumption: 868, MeteredUsage: 868, amt: 1506 }, + { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, + { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, + { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, + { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000, amt: 989 }, { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900, amt: 1228 }, { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100, amt: 1100 }, @@ -69,37 +70,66 @@ class UtilityChart extends Component { label={{ value: `Consumptions (${this.props.unit})`, angle: -90, - dx: -30, + dx: -40, dy: -90, textAnchor: 'end', position: 'left', style: { fontWeight: 'bold', - fontSize: '1.2em', + fontSize: '1.0em', }, margin: { - right: 30, + right: 20, bottom: 30, }, }} /> - + */} + - - + +
-- GitLab From af7bf8beaef24e4d5dc8fa6e489b66540dcae4b7 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 18 Jul 2019 13:53:09 -0400 Subject: [PATCH 11/14] Add SVG icons --- src/components/Performance/ImpactChart.js | 21 +++++++------ src/components/Performance/Impacts.js | 10 +++++++ src/components/Performance/UtilityChart.js | 35 ++-------------------- src/components/Performance/styles.css | 17 +++++++++++ src/containers/Performance/index.js | 9 ------ 5 files changed, 41 insertions(+), 51 deletions(-) diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js index 4fa73189..aa192c80 100644 --- a/src/components/Performance/ImpactChart.js +++ b/src/components/Performance/ImpactChart.js @@ -7,6 +7,7 @@ import { Cell, Sector, } from 'recharts'; +import './styles.css'; const renderActiveShape = (props) => { const { @@ -22,15 +23,15 @@ const renderActiveShape = (props) => { return ( - + {payload.utilityType} - + {payload.name}: {payload.percent} - - ☀ - + + + @@ -124,6 +126,7 @@ renderActiveShape.propTypes = { ImpactChart.propTypes = { type: PropTypes.string, + svgCode: PropTypes.string, savings: PropTypes.number, cost: PropTypes.number, }; diff --git a/src/components/Performance/Impacts.js b/src/components/Performance/Impacts.js index f72d8e88..dd530fe9 100644 --- a/src/components/Performance/Impacts.js +++ b/src/components/Performance/Impacts.js @@ -11,6 +11,12 @@ class Impacts extends Component { messageContent: null, messageStyle: 'default', }; + this.svgCode = { + oil: 'M10.862,6.47H3.968v6.032h6.894V6.47z M10,11.641H4.83V7.332H10V11.641z M12.585,11.641h-0.861v0.861h0.861V11.641z M7.415,14.226h0.862v-0.862H7.415V14.226z M8.707,17.673h2.586c0.237,0,0.431-0.193,0.431-0.432c0-0.237-0.193-0.431-0.431-0.431H8.707c-0.237,0-0.431,0.193-0.431,0.431C8.276,17.479,8.47,17.673,8.707,17.673 M5.691,14.226h0.861v-0.862H5.691V14.226z M4.83,13.363H3.968v0.862H4.83V13.363z M16.895,4.746h-3.017V3.023h1.292c0.476,0,0.862-0.386,0.862-0.862V1.299c0-0.476-0.387-0.862-0.862-0.862H10c-0.476,0-0.862,0.386-0.862,0.862v0.862c0,0.476,0.386,0.862,0.862,0.862h1.293v1.723H3.106c-0.476,0-0.862,0.386-0.862,0.862v12.926c0,0.476,0.386,0.862,0.862,0.862h13.789c0.475,0,0.861-0.387,0.861-0.862V5.608C17.756,5.132,17.369,4.746,16.895,4.746 M10.862,2.161H10V1.299h0.862V2.161zM11.724,1.299h3.446v0.862h-3.446V1.299z M13.016,4.746h-0.861V3.023h0.861V4.746z M16.895,18.534H3.106v-2.585h13.789V18.534zM16.895,15.088H3.106v-9.48h13.789V15.088z M15.17,12.502h0.862v-0.861H15.17V12.502z M13.447,12.502h0.861v-0.861h-0.861V12.502zM15.17,10.778h0.862V9.917H15.17V10.778z M15.17,9.055h0.862V8.193H15.17V9.055z M16.032,6.47h-4.309v0.862h4.309V6.47zM14.309,8.193h-0.861v0.862h0.861V8.193z M12.585,8.193h-0.861v0.862h0.861V8.193z M13.447,14.226h2.585v-0.862h-2.585V14.226zM13.447,10.778h0.861V9.917h-0.861V10.778z M12.585,9.917h-0.861v0.861h0.861V9.917z', + electricity: 'M12.173,16.086c0.72,0,1.304-0.584,1.304-1.305V6.089c0-0.72-0.584-1.304-1.304-1.304c-0.721,0-1.305,0.584-1.305,1.304v8.692C10.868,15.502,11.452,16.086,12.173,16.086z M11.738,6.089c0-0.24,0.194-0.435,0.435-0.435s0.435,0.194,0.435,0.435v8.692c0,0.24-0.194,0.436-0.435,0.436s-0.435-0.195-0.435-0.436V6.089zM16.52,16.086c0.72,0,1.304-0.584,1.304-1.305v-11.3c0-0.72-0.584-1.304-1.304-1.304c-0.721,0-1.305,0.584-1.305,1.304v11.3C15.215,15.502,15.799,16.086,16.52,16.086z M16.085,3.481c0-0.24,0.194-0.435,0.435-0.435s0.435,0.195,0.435,0.435v11.3c0,0.24-0.194,0.436-0.435,0.436s-0.435-0.195-0.435-0.436V3.481z M3.48,16.086c0.72,0,1.304-0.584,1.304-1.305v-3.477c0-0.72-0.584-1.304-1.304-1.304c-0.72,0-1.304,0.584-1.304,1.304v3.477C2.176,15.502,2.76,16.086,3.48,16.086z M3.045,11.305c0-0.24,0.194-0.435,0.435-0.435c0.24,0,0.435,0.194,0.435,0.435v3.477c0,0.24-0.195,0.436-0.435,0.436c-0.24,0-0.435-0.195-0.435-0.436V11.305z M18.258,16.955H1.741c-0.24,0-0.435,0.194-0.435,0.435s0.194,0.435,0.435,0.435h16.517c0.24,0,0.435-0.194,0.435-0.435S18.498,16.955,18.258,16.955z M7.826,16.086c0.72,0,1.304-0.584,1.304-1.305V8.696c0-0.72-0.584-1.304-1.304-1.304S6.522,7.977,6.522,8.696v6.085C6.522,15.502,7.106,16.086,7.826,16.086z M7.392,8.696c0-0.239,0.194-0.435,0.435-0.435s0.435,0.195,0.435,0.435v6.085c0,0.24-0.194,0.436-0.435,0.436s-0.435-0.195-0.435-0.436V8.696z', + gas: 'M4.68,13.716v-0.169H4.554C4.592,13.605,4.639,13.658,4.68,13.716z M11.931,6.465 c-0.307-0.087-0.623,0.106-0.706,0.432l-1.389,5.484c-0.901,0.084-1.609,0.833-1.609,1.757c0,0.979,0.793,1.773,1.773,1.773 c0.979,0,1.773-0.794,1.773-1.773c0-0.624-0.324-1.171-0.812-1.486l1.377-5.439C12.422,6.887,12.239,6.552,11.931,6.465z M10.591,14.729H9.408v-1.182h1.183V14.729z M15.32,13.716c0.04-0.058,0.087-0.11,0.126-0.169H15.32V13.716z M10,3.497 c-3.592,0-6.503,2.911-6.503,6.503H4.68c0-2.938,2.382-5.32,5.32-5.32s5.32,2.382,5.32,5.32h1.182 C16.502,6.408,13.591,3.497,10,3.497z M10,0.542c-5.224,0-9.458,4.234-9.458,9.458c0,5.224,4.234,9.458,9.458,9.458 c5.224,0,9.458-4.234,9.458-9.458C19.458,4.776,15.224,0.542,10,0.542z M15.32,16.335v0.167h-0.212 c-1.407,1.107-3.179,1.773-5.108,1.773c-1.93,0-3.701-0.666-5.108-1.773H4.68v-0.167C2.874,14.816,1.724,12.543,1.724,10 c0-4.571,3.706-8.276,8.276-8.276c4.57,0,8.275,3.706,8.275,8.276C18.275,12.543,17.126,14.816,15.32,16.335z', + water: 'M10,16.513c-2.249,0-4.071-1.822-4.071-4.07c0-0.226-0.182-0.407-0.407-0.407c-0.225,0-0.407,0.182-0.407,0.407c0,2.697,2.187,4.885,4.885,4.885c0.225,0,0.407-0.183,0.407-0.407S10.225,16.513,10,16.513M10,1.044c-0.814,0-6.513,6.92-6.513,11.398c0,3.597,2.916,6.513,6.513,6.513c3.597,0,6.513-2.916,6.513-6.513C16.513,7.964,10.813,1.044,10,1.044 M10,18.141c-3.148,0-5.699-2.65-5.699-5.92C4.301,8.372,9.593,2.011,10,2.011c0.407,0,5.698,6.36,5.698,10.209C15.698,15.49,13.147,18.141,10,18.141', + }; } render() { @@ -23,6 +29,7 @@ class Impacts extends Component {
@@ -30,6 +37,7 @@ class Impacts extends Component {
@@ -37,6 +45,7 @@ class Impacts extends Component {
@@ -44,6 +53,7 @@ class Impacts extends Component {
diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js index de4dfa39..f20704ef 100644 --- a/src/components/Performance/UtilityChart.js +++ b/src/components/Performance/UtilityChart.js @@ -9,7 +9,6 @@ import { CartesianGrid, Tooltip, Legend, - // ReferenceLine, ReferenceArea, } from 'recharts'; @@ -85,43 +84,13 @@ class UtilityChart extends Component { }} /> - {/* - */} ; - console.log(this.props); // eslint-disable-line if (user !== undefined && user.user_id !== undefined && eng !== undefined && eng.retrofitProperties !== undefined && eng.retrofitProperties.properties !== {} && @@ -130,13 +126,8 @@ class Performance extends Component { savings: 200, }, }; - // const retrofitCats = eng.retrofitProperties.properties.retrofit_cat.map(retrofitCat => { - // return retrofitCat[1]; - // }); const retrofitCats = eng.retrofitProperties.properties.retrofit_cat; const retrofitNames = eng.retrofitProperties.properties.retrofit_name; - console.log(retrofitCats); // eslint-disable-line - console.log(retrofitNames); // eslint-disable-line mainContent = (
-- GitLab From 1b773b2596e2aa37d13cb6d87089748a38eda87e Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 18 Jul 2019 14:58:11 -0400 Subject: [PATCH 12/14] move data to separate variables --- src/components/Performance/Impacts.js | 28 +++-- src/components/Performance/Utilities.js | 120 +++++++++++++++++++-- src/components/Performance/UtilityChart.js | 72 +++++-------- 3 files changed, 159 insertions(+), 61 deletions(-) diff --git a/src/components/Performance/Impacts.js b/src/components/Performance/Impacts.js index dd530fe9..549d68b9 100644 --- a/src/components/Performance/Impacts.js +++ b/src/components/Performance/Impacts.js @@ -17,6 +17,18 @@ class Impacts extends Component { gas: 'M4.68,13.716v-0.169H4.554C4.592,13.605,4.639,13.658,4.68,13.716z M11.931,6.465 c-0.307-0.087-0.623,0.106-0.706,0.432l-1.389,5.484c-0.901,0.084-1.609,0.833-1.609,1.757c0,0.979,0.793,1.773,1.773,1.773 c0.979,0,1.773-0.794,1.773-1.773c0-0.624-0.324-1.171-0.812-1.486l1.377-5.439C12.422,6.887,12.239,6.552,11.931,6.465z M10.591,14.729H9.408v-1.182h1.183V14.729z M15.32,13.716c0.04-0.058,0.087-0.11,0.126-0.169H15.32V13.716z M10,3.497 c-3.592,0-6.503,2.911-6.503,6.503H4.68c0-2.938,2.382-5.32,5.32-5.32s5.32,2.382,5.32,5.32h1.182 C16.502,6.408,13.591,3.497,10,3.497z M10,0.542c-5.224,0-9.458,4.234-9.458,9.458c0,5.224,4.234,9.458,9.458,9.458 c5.224,0,9.458-4.234,9.458-9.458C19.458,4.776,15.224,0.542,10,0.542z M15.32,16.335v0.167h-0.212 c-1.407,1.107-3.179,1.773-5.108,1.773c-1.93,0-3.701-0.666-5.108-1.773H4.68v-0.167C2.874,14.816,1.724,12.543,1.724,10 c0-4.571,3.706-8.276,8.276-8.276c4.57,0,8.275,3.706,8.275,8.276C18.275,12.543,17.126,14.816,15.32,16.335z', water: 'M10,16.513c-2.249,0-4.071-1.822-4.071-4.07c0-0.226-0.182-0.407-0.407-0.407c-0.225,0-0.407,0.182-0.407,0.407c0,2.697,2.187,4.885,4.885,4.885c0.225,0,0.407-0.183,0.407-0.407S10.225,16.513,10,16.513M10,1.044c-0.814,0-6.513,6.92-6.513,11.398c0,3.597,2.916,6.513,6.513,6.513c3.597,0,6.513-2.916,6.513-6.513C16.513,7.964,10.813,1.044,10,1.044 M10,18.141c-3.148,0-5.699-2.65-5.699-5.92C4.301,8.372,9.593,2.011,10,2.011c0.407,0,5.698,6.36,5.698,10.209C15.698,15.49,13.147,18.141,10,18.141', }; + this.savings = { + oil: 0.00, + electricity: 1300.00, + gas: 1800.00, + water: 2300.00, + }; + this.cost = { + oil: 5000.00, + electricity: 5000.00, + gas: 5000.00, + water: 5000.00, + }; } render() { @@ -30,32 +42,32 @@ class Impacts extends Component {
diff --git a/src/components/Performance/Utilities.js b/src/components/Performance/Utilities.js index 87718b35..cedadbf0 100644 --- a/src/components/Performance/Utilities.js +++ b/src/components/Performance/Utilities.js @@ -11,6 +11,106 @@ class Utilities extends Component { messageContent: null, messageStyle: 'default', }; + + this.constructionDates = { + gas: { + start: '2018/08/01', + end: '2018/09/01', + }, + electricity: { + start: '2018/08/01', + end: '2018/09/01', + }, + water: { + start: '2018/08/01', + end: '1900/00/00', + }, + oil: { + start: '1900/00/00', + end: '1900/00/00', + }, + }; + + this.electricityData = [ + { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, + { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, + { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, + { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, + { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000, amt: 989 }, + { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900, amt: 1228 }, + { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100, amt: 1100 }, + { date: '2018/12/01', BaselineConsumption: 1400, MeteredUsage: 680, amt: 1700 }, + { date: '2019/01/01', BaselineConsumption: 1200, MeteredUsage: 800, amt: 1400 }, + { date: '2019/02/01', BaselineConsumption: 1090, MeteredUsage: 800, amt: 1400 }, + { date: '2019/03/01', BaselineConsumption: 1190, MeteredUsage: 967, amt: 1506 }, + { date: '2019/04/01', BaselineConsumption: 1397, MeteredUsage: 1098, amt: 989 }, + { date: '2019/05/01', BaselineConsumption: 1480, MeteredUsage: 1200, amt: 1228 }, + { date: '2019/06/01', BaselineConsumption: 1520, MeteredUsage: 1108, amt: 1100 }, + { date: '2019/07/01', BaselineConsumption: 1400, MeteredUsage: 680, amt: 1700 }, + { date: '2019/08/01', BaselineConsumption: 1890, MeteredUsage: 370, amt: 1700 }, + ]; + this.gasData = [ + { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, + { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, + { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, + { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, + { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000, amt: 989 }, + { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900, amt: 1228 }, + { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100, amt: 1100 }, + ]; + this.waterData = [ + { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, + { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, + { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, + { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, + { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000, amt: 989 }, + ]; + this.oilData = [ + { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, + { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, + { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, + { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, + { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, + { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, + { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, + { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, + { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, + ]; } render() { @@ -21,32 +121,36 @@ class Utilities extends Component {
diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js index f20704ef..59773ca8 100644 --- a/src/components/Performance/UtilityChart.js +++ b/src/components/Performance/UtilityChart.js @@ -23,33 +23,28 @@ class UtilityChart extends Component { } render() { - const data = [ - { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, - { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, - { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, - { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, - { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000, amt: 989 }, - { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900, amt: 1228 }, - { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100, amt: 1100 }, - { date: '2018/12/01', BaselineConsumption: 1400, MeteredUsage: 680, amt: 1700 }, - { date: '2019/01/01', BaselineConsumption: 1200, MeteredUsage: 800, amt: 1400 }, - { date: '2019/02/01', BaselineConsumption: 1090, MeteredUsage: 800, amt: 1400 }, - { date: '2019/03/01', BaselineConsumption: 1190, MeteredUsage: 967, amt: 1506 }, - { date: '2019/04/01', BaselineConsumption: 1397, MeteredUsage: 1098, amt: 989 }, - { date: '2019/05/01', BaselineConsumption: 1480, MeteredUsage: 1200, amt: 1228 }, - { date: '2019/06/01', BaselineConsumption: 1520, MeteredUsage: 1108, amt: 1100 }, - { date: '2019/07/01', BaselineConsumption: 1400, MeteredUsage: 680, amt: 1700 }, - ]; + let referenceArea = null; + if (this.props.constructionStartDate !== '1900/00/00' && this.props.constructionEndDate !== '1900/00/00') { + referenceArea = ( + + ); + } return (
@@ -60,7 +55,7 @@ class UtilityChart extends Component { @@ -84,23 +79,7 @@ class UtilityChart extends Component { }} /> - + {referenceArea} Date: Thu, 18 Jul 2019 16:34:30 -0400 Subject: [PATCH 13/14] Fix Reference Area height issue, remove table borders --- src/components/Performance/Occupants.js | 2 +- src/components/Performance/ThermalComfort.js | 2 +- src/components/Performance/Utilities.js | 154 +++++++++--------- src/components/Performance/UtilityChart.js | 157 ++++++++++--------- 4 files changed, 155 insertions(+), 160 deletions(-) diff --git a/src/components/Performance/Occupants.js b/src/components/Performance/Occupants.js index 4e1f72a8..d657763f 100644 --- a/src/components/Performance/Occupants.js +++ b/src/components/Performance/Occupants.js @@ -243,7 +243,7 @@ class Occupants extends Component {
- +
Number of Units diff --git a/src/components/Performance/ThermalComfort.js b/src/components/Performance/ThermalComfort.js index 0023ce00..f7c7a6d5 100644 --- a/src/components/Performance/ThermalComfort.js +++ b/src/components/Performance/ThermalComfort.js @@ -244,7 +244,7 @@ class ThermalComfort extends Component { - +
Heating Set Point (Pre-retrofit) diff --git a/src/components/Performance/Utilities.js b/src/components/Performance/Utilities.js index cedadbf0..457d3797 100644 --- a/src/components/Performance/Utilities.js +++ b/src/components/Performance/Utilities.js @@ -6,12 +6,6 @@ import './styles.css'; class Utilities extends Component { constructor(props) { super(props); - this.state = { - action: null, - messageContent: null, - messageStyle: 'default', - }; - this.constructionDates = { gas: { start: '2018/08/01', @@ -31,85 +25,85 @@ class Utilities extends Component { }, }; - this.electricityData = [ - { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, - { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, - { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, - { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, - { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000, amt: 989 }, - { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900, amt: 1228 }, - { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100, amt: 1100 }, - { date: '2018/12/01', BaselineConsumption: 1400, MeteredUsage: 680, amt: 1700 }, - { date: '2019/01/01', BaselineConsumption: 1200, MeteredUsage: 800, amt: 1400 }, - { date: '2019/02/01', BaselineConsumption: 1090, MeteredUsage: 800, amt: 1400 }, - { date: '2019/03/01', BaselineConsumption: 1190, MeteredUsage: 967, amt: 1506 }, - { date: '2019/04/01', BaselineConsumption: 1397, MeteredUsage: 1098, amt: 989 }, - { date: '2019/05/01', BaselineConsumption: 1480, MeteredUsage: 1200, amt: 1228 }, - { date: '2019/06/01', BaselineConsumption: 1520, MeteredUsage: 1108, amt: 1100 }, - { date: '2019/07/01', BaselineConsumption: 1400, MeteredUsage: 680, amt: 1700 }, - { date: '2019/08/01', BaselineConsumption: 1890, MeteredUsage: 370, amt: 1700 }, - ]; this.gasData = [ - { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, - { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, - { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, - { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, - { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000, amt: 989 }, - { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900, amt: 1228 }, - { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100, amt: 1100 }, + { date: '2017/07/01', MeteredUsage: 1400 }, + { date: '2017/08/01', MeteredUsage: 1098 }, + { date: '2017/09/01', MeteredUsage: 1480 }, + { date: '2017/10/01', MeteredUsage: 1520 }, + { date: '2017/11/01', MeteredUsage: 1100 }, + { date: '2017/12/01', MeteredUsage: 868 }, + { date: '2018/01/01', MeteredUsage: 1098 }, + { date: '2018/02/01', MeteredUsage: 1200 }, + { date: '2018/03/01', MeteredUsage: 1400 }, + { date: '2018/04/01', MeteredUsage: 1098 }, + { date: '2018/05/01', MeteredUsage: 1480 }, + { date: '2018/06/01', MeteredUsage: 1520 }, + { date: '2018/07/01', MeteredUsage: 1100 }, + { date: '2018/08/01', MeteredUsage: 755 }, + { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000 }, + { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900 }, + { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100 }, + ]; + this.electricityData = [ + { date: '2017/07/01', MeteredUsage: 1400 }, + { date: '2017/08/01', MeteredUsage: 1098 }, + { date: '2017/09/01', MeteredUsage: 1480 }, + { date: '2017/10/01', MeteredUsage: 1520 }, + { date: '2017/11/01', MeteredUsage: 1100 }, + { date: '2017/12/01', MeteredUsage: 868 }, + { date: '2018/01/01', MeteredUsage: 1098 }, + { date: '2018/02/01', MeteredUsage: 1200 }, + { date: '2018/03/01', MeteredUsage: 1400 }, + { date: '2018/04/01', MeteredUsage: 1098 }, + { date: '2018/05/01', MeteredUsage: 1480 }, + { date: '2018/06/01', MeteredUsage: 1520 }, + { date: '2018/07/01', MeteredUsage: 1100 }, + { date: '2018/08/01', MeteredUsage: 755 }, + { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000 }, + { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900 }, + { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100 }, + { date: '2018/12/01', BaselineConsumption: 1400, MeteredUsage: 680 }, + { date: '2019/01/01', BaselineConsumption: 1200, MeteredUsage: 800 }, + { date: '2019/02/01', BaselineConsumption: 1090, MeteredUsage: 800 }, + { date: '2019/03/01', BaselineConsumption: 1190, MeteredUsage: 967 }, + { date: '2019/04/01', BaselineConsumption: 1397, MeteredUsage: 1098 }, + { date: '2019/05/01', BaselineConsumption: 1480, MeteredUsage: 1200 }, + { date: '2019/06/01', BaselineConsumption: 1520, MeteredUsage: 1108 }, + { date: '2019/07/01', BaselineConsumption: 1400, MeteredUsage: 680 }, + { date: '2019/08/01', BaselineConsumption: 1890, MeteredUsage: 370 }, ]; this.waterData = [ - { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, - { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, - { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, - { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, - { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000, amt: 989 }, + { date: '2017/07/01', MeteredUsage: 1400 }, + { date: '2017/08/01', MeteredUsage: 1098 }, + { date: '2017/09/01', MeteredUsage: 1480 }, + { date: '2017/10/01', MeteredUsage: 1520 }, + { date: '2017/11/01', MeteredUsage: 1100 }, + { date: '2017/12/01', MeteredUsage: 868 }, + { date: '2018/01/01', MeteredUsage: 1098 }, + { date: '2018/02/01', MeteredUsage: 1200 }, + { date: '2018/03/01', MeteredUsage: 1400 }, + { date: '2018/04/01', MeteredUsage: 1098 }, + { date: '2018/05/01', MeteredUsage: 1480 }, + { date: '2018/06/01', MeteredUsage: 1520 }, + { date: '2018/07/01', MeteredUsage: 1100 }, + { date: '2018/08/01', MeteredUsage: 755 }, + { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000 }, ]; this.oilData = [ - { date: '2017/07/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2017/08/01', MeteredUsage: 1098, amt: 989 }, - { date: '2017/09/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2017/10/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2017/11/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2017/12/01', MeteredUsage: 868, amt: 1506 }, - { date: '2018/01/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/02/01', MeteredUsage: 1200, amt: 1400 }, - { date: '2018/03/01', MeteredUsage: 1400, amt: 1506 }, - { date: '2018/04/01', MeteredUsage: 1098, amt: 989 }, - { date: '2018/05/01', MeteredUsage: 1480, amt: 1228 }, - { date: '2018/06/01', MeteredUsage: 1520, amt: 1100 }, - { date: '2018/07/01', MeteredUsage: 1100, amt: 1700 }, - { date: '2018/08/01', MeteredUsage: 755, amt: 1506 }, + { date: '2017/07/01', MeteredUsage: 1400 }, + { date: '2017/08/01', MeteredUsage: 1098 }, + { date: '2017/09/01', MeteredUsage: 1480 }, + { date: '2017/10/01', MeteredUsage: 1520 }, + { date: '2017/11/01', MeteredUsage: 1100 }, + { date: '2017/12/01', MeteredUsage: 868 }, + { date: '2018/01/01', MeteredUsage: 1098 }, + { date: '2018/02/01', MeteredUsage: 1200 }, + { date: '2018/03/01', MeteredUsage: 1400 }, + { date: '2018/04/01', MeteredUsage: 1098 }, + { date: '2018/05/01', MeteredUsage: 1480 }, + { date: '2018/06/01', MeteredUsage: 1520 }, + { date: '2018/07/01', MeteredUsage: 1100 }, + { date: '2018/08/01', MeteredUsage: 755 }, ]; } diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js index 59773ca8..e81ebd44 100644 --- a/src/components/Performance/UtilityChart.js +++ b/src/components/Performance/UtilityChart.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { ResponsiveContainer, @@ -12,87 +12,88 @@ import { ReferenceArea, } from 'recharts'; -class UtilityChart extends Component { - constructor(props) { - super(props); - this.state = { - action: null, - messageContent: null, - messageStyle: 'default', - }; - } - render() { - let referenceArea = null; - if (this.props.constructionStartDate !== '1900/00/00' && this.props.constructionEndDate !== '1900/00/00') { - referenceArea = ( - - ); - } +const UtilityChart = (props) => { + let referenceArea = null; - return ( -
-

- {this.props.type} Consumption of Baseline and Reporting Period -

- - - - - - - {referenceArea} - - - - - -
+ if (props.constructionStartDate !== '1900/00/00' && props.constructionEndDate !== '1900/00/00') { + // console.log(props.type); // eslint-disable-line + const height = props.data.reduce((max, row) => { + if (row.BaselineConsumption !== undefined) { + if (row.MeteredUsage > row.BaselineConsumption) { + return Math.max(max, row.MeteredUsage); + } + return Math.max(max, row.BaselineConsumption); + } + return Math.max(max, row.MeteredUsage); + }); + referenceArea = ( + ); } -} + + return ( +
+

+ {props.type} Consumption of Baseline and Reporting Period +

+ + + + + + + {referenceArea} + + + + + +
+ ); +}; UtilityChart.propTypes = { type: PropTypes.string, -- GitLab From 44b87d50bcc026933aa603a0227ea60e5ad9de1c Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Fri, 19 Jul 2019 17:08:32 -0400 Subject: [PATCH 14/14] Add separation format to each components --- src/components/Performance/Impacts.js | 20 ++++- src/components/Performance/Occupants.js | 75 ++++++++++------- src/components/Performance/Retrofits.js | 88 ++++++++++---------- src/components/Performance/ThermalComfort.js | 72 ++++++++++------ src/components/Performance/UtilityChart.js | 24 +++++- 5 files changed, 175 insertions(+), 104 deletions(-) diff --git a/src/components/Performance/Impacts.js b/src/components/Performance/Impacts.js index 549d68b9..309acbb4 100644 --- a/src/components/Performance/Impacts.js +++ b/src/components/Performance/Impacts.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import { Table } from 'reactstrap'; import ImpactChart from '../../components/Performance/ImpactChart'; import './styles.css'; @@ -32,11 +33,24 @@ class Impacts extends Component { } render() { + const tableHeader = { + paddingBottom: '20px', + borderTop: '1px solid #CCCCCC', + background: '#EEEEEE', + fontWeight: 'bold', + paddingTop: '20px', + }; return (
-

- Impacts -

+ + + + +
+ Impacts +
-
-
-

- Occupants -

-
-
- {' '}{' '} - {' '} - - {' '} -
-
- +
+ + +
+
+
+ Occupants +
+
+ {' '}{' '} + {' '} + + {' '} +
+
+
Number of Units diff --git a/src/components/Performance/Retrofits.js b/src/components/Performance/Retrofits.js index 1e895c0b..84f57715 100644 --- a/src/components/Performance/Retrofits.js +++ b/src/components/Performance/Retrofits.js @@ -221,57 +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, - }), utilityNames: PropTypes.arrayOf, retrofits: PropTypes.arrayOf, retrofitsLog: PropTypes.arrayOf, diff --git a/src/components/Performance/ThermalComfort.js b/src/components/Performance/ThermalComfort.js index f7c7a6d5..63bac9ce 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 -

-
-
- {' '}{' '} - {' '} - - {' '} -
-
+ + +
+
+
+ Thermal Comfort +
+
+ {' '}{' '} + {' '} + +
+
+
Heating Set Point (Pre-retrofit) diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js index e81ebd44..9d0b61f0 100644 --- a/src/components/Performance/UtilityChart.js +++ b/src/components/Performance/UtilityChart.js @@ -1,5 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; import { ResponsiveContainer, ComposedChart, @@ -47,12 +50,25 @@ const UtilityChart = (props) => { /> ); } + const tableHeader = { + paddingBottom: '20px', + borderTop: '1px solid #CCCCCC', + background: '#EEEEEE', + fontWeight: 'bold', + paddingTop: '20px', + }; return ( -
-

- {props.type} Consumption of Baseline and Reporting Period -

+
+ + + + +
+ {props.type} Consumption of Baseline and Reporting Period +