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 ( + + + {payload.utilityType} + + + {payload.name}: {payload.percent} + + + + + + + ); +}; + +class ImpactChart extends Component { + constructor(props) { + super(props); + this.state = { + action: null, + messageContent: null, + messageStyle: 'default', + }; + } + + render() { + const utilityType = this.props.type.charAt(0).toUpperCase() + this.props.type.slice(1); + const percent = `${(this.props.savings / this.props.cost) * 100}%`; + const svgCode = this.props.svgCode; + const data = [ + { name: 'Savings', value: this.props.savings, utilityType, percent, svgCode }, + { name: 'Cost', value: this.props.cost, utilityType, percent, svgCode }, + ]; + 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 +
+
+ {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)} +
+
+
+ ); + } +} + +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, + svgCode: 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 new file mode 100644 index 0000000000000000000000000000000000000000..309acbb46fbc211f6ce0185de1ba851ab14f98db --- /dev/null +++ b/src/components/Performance/Impacts.js @@ -0,0 +1,93 @@ +import React, { Component } from 'react'; +import { Table } from 'reactstrap'; +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', + }; + 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', + }; + 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() { + const tableHeader = { + paddingBottom: '20px', + borderTop: '1px solid #CCCCCC', + background: '#EEEEEE', + fontWeight: 'bold', + paddingTop: '20px', + }; + return ( +
+ + + + +
+ Impacts +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ); + } +} + +export default Impacts; diff --git a/src/components/Performance/Occupants.js b/src/components/Performance/Occupants.js index 4e1f72a8149323e69cc6eb88b98ec18bac5e9327..011fdb4ca04c078528bf3fd06b00de824fd579fd 100644 --- a/src/components/Performance/Occupants.js +++ b/src/components/Performance/Occupants.js @@ -173,35 +173,19 @@ class Occupants 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 (
-
-
-

- Occupants -

-
-
- {' '}{' '} - {' '} - - {' '} -
-
- +
+ + +
+
+
+ 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 ( - - {e.name} - - ); - }); - const primaryUtilityNames = this.state.utilityNames.map(e => { - return ( - - {e.name} - - ); + handleInputChange = (event) => { + const val = event.target.value; + const name = event.target.name; + this.setState({ + form: { + ...this.state.form, + [name]: val, + }, + }, () => { + console.log('changed!'); // eslint-disable-line }); - const secondUtilityNames = this.state.utilityNames.map(e => { - return ( - - {e.name} - + } + + renderRetrofitNames = () => { + const options = []; + let retrofitOptions = []; + Object.entries(this.retrofitMeta).forEach(([retrofitCat, retrofitNames]) => { + retrofitOptions = retrofitNames.map(retrofitName => { + if (retrofitName[0] === this.state.form.retrofitId) { + return ( + + ); + } + return ( + + ); + }); + options.push( + + {retrofitOptions} + ); }); - const dropdownStyle = { - marginLeft: '0px', - }; + return this.renderSelectInput('retrofitId', options); + } + + renderPrimaryUtilities = () => { + 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 = [...[this.emptyUtilityName], ...this.props.utilityNames] + .map((utilityName, i) => { + if (utilityName === this.state.form.secondUtilities) { + return ( + + ); + } + return ( + + ); + }); + return this.renderSelectInput('secondUtilities', options); + } + + renderSelectInput = (propName, options) => ( + this.handleInputChange(e)} + value={this.state.form[propName]} + > + {options} + + ) + render() { + const style = { textAlign: 'left' }; let actionButton = null; if (this.props.id === 0) { @@ -222,73 +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()} @@ -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 -

-
-
- {' '}{' '} - {' '} - - {' '} -
-
- +
+ + +
+
+
+ Thermal Comfort +
+
+ {' '}{' '} + {' '} + +
+
+
Heating Set Point (Pre-retrofit) diff --git a/src/components/Performance/Utilities.js b/src/components/Performance/Utilities.js new file mode 100644 index 0000000000000000000000000000000000000000..457d3797d975118de86ec37169af3c957bc3b0ab --- /dev/null +++ b/src/components/Performance/Utilities.js @@ -0,0 +1,156 @@ +import React, { Component } from 'react'; +import UtilityChart from '../../components/Performance/UtilityChart'; +import './styles.css'; + + +class Utilities extends Component { + constructor(props) { + super(props); + 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.gasData = [ + { 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 }, + { 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 }, + { 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 }, + ]; + } + + render() { + return ( +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ); + } +} + +export default Utilities; diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js new file mode 100644 index 0000000000000000000000000000000000000000..9d0b61f0b02bb73d5f24e3a55c99bb9514a27ff5 --- /dev/null +++ b/src/components/Performance/UtilityChart.js @@ -0,0 +1,122 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + Table, +} from 'reactstrap'; +import { + ResponsiveContainer, + ComposedChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ReferenceArea, +} from 'recharts'; + + +const UtilityChart = (props) => { + let referenceArea = null; + + 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 = ( + + ); + } + const tableHeader = { + paddingBottom: '20px', + borderTop: '1px solid #CCCCCC', + background: '#EEEEEE', + fontWeight: 'bold', + paddingTop: '20px', + }; + + return ( +
+ + + + +
+ {props.type} Consumption of Baseline and Reporting Period +
+ + + + + + + {referenceArea} + + + + + +
+ ); +}; + +UtilityChart.propTypes = { + type: PropTypes.string, + unit: PropTypes.string, + data: PropTypes.arrayOf, + constructionStartDate: PropTypes.string, + constructionEndDate: PropTypes.string, +}; + +export default UtilityChart; diff --git a/src/components/Performance/styles.css b/src/components/Performance/styles.css index 97b24ba89e6cd6e314e27e3acda999bfaa847e83..3aa5cc2ed28d034a7f49f228f6a1fe7526f6e164 100644 --- a/src/components/Performance/styles.css +++ b/src/components/Performance/styles.css @@ -11,3 +11,20 @@ text-align: right; padding-right: 28px !important; } + +.svg-icon { + width: 0.2em; + height: 0.2em; + stroke-width: 13, +} + +.svg-icon path, +.svg-icon polygon, +.svg-icon rect { + fill: #00C49F; +} + +.svg-icon circle { + stroke: #00C49F; + stroke-width: 3; +} diff --git a/src/containers/Performance/index.js b/src/containers/Performance/index.js index 40b4a6ca52ff3dcd30aa2546b8e8775df171d87f..5c1273c7fc736c7a57a8e29a72f7831e60132a6b 100644 --- a/src/containers/Performance/index.js +++ b/src/containers/Performance/index.js @@ -10,18 +10,23 @@ import { loadThermalComfortLog, loadRetrofits, loadRetrofitsLog, - 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'; 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 { @@ -34,31 +39,27 @@ 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); } render() { let mainContent = null; - const blockStyle = { marginBottom: '40px', marginTop: '40px' }; const headerStyle = { textAlign: 'left', marginBottom: '25px', paddingLeft: '10px', }; - - console.log(this.props); // eslint-disable-line - const { user, performance, + eng, } = this.props; const { occupants, @@ -67,18 +68,19 @@ class Performance extends Component { thermalComfortLog, retrofits, retrofitsLog, - retrofitMeta, + // retrofitMeta, } = performance; mainContent = ; - 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]; @@ -107,9 +109,34 @@ 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, + }, + }; + const retrofitCats = eng.retrofitProperties.properties.retrofit_cat; + const retrofitNames = eng.retrofitProperties.properties.retrofit_name; mainContent = (
+
+
+ +
+
+
+
+ +
+
); } @@ -186,7 +222,8 @@ Performance.propTypes = { loadThermalComfortLog: PropTypes.func, loadRetrofits: PropTypes.func, loadRetrofitsLog: PropTypes.func, - loadRetrofitMeta: PropTypes.func, + loadRetrofitProperties: PropTypes.func, + // loadRetrofitMeta: PropTypes.func, updateOccupants: PropTypes.func, updateThermalComfort: PropTypes.func, createMyRetrofit: PropTypes.func, @@ -194,6 +231,7 @@ Performance.propTypes = { deleteMyRetrofit: PropTypes.func, user: PropTypes.objectOf, performance: PropTypes.objectOf, + eng: engPropTypes, }; const mapDispatchToProps = dispatch => ( @@ -202,9 +240,10 @@ const mapDispatchToProps = dispatch => ( loadOccupantsLog, loadThermalComfort, loadThermalComfortLog, + loadRetrofitProperties, loadRetrofits, loadRetrofitsLog, - loadRetrofitMeta, + // loadRetrofitMeta, updateOccupants, updateThermalComfort, createMyRetrofit, @@ -216,6 +255,7 @@ const mapDispatchToProps = dispatch => ( const mapStateToProps = state => ({ performance: state.bloclink, user: state.user, + eng: state.eng, }); export default connect(mapStateToProps, mapDispatchToProps)(Performance);