From 717bdb3170bd644e78c3dbbf5abccd068944611d Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 25 Jul 2019 17:00:04 -0400 Subject: [PATCH 1/5] Render charts conditionally --- src/components/Performance/ImpactChart.js | 2 +- src/components/Performance/Impacts.js | 135 +++++++---------- src/components/Performance/Retrofits.js | 37 ++--- src/components/Performance/Utilities.js | 177 ++++------------------ src/containers/Performance/index.js | 144 ++++++++++++++++-- 5 files changed, 231 insertions(+), 264 deletions(-) diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js index aa192c80..cf52fcdc 100644 --- a/src/components/Performance/ImpactChart.js +++ b/src/components/Performance/ImpactChart.js @@ -74,7 +74,7 @@ class ImpactChart extends Component { }; return ( -
+
{ + const tableHeader = { + paddingBottom: '20px', + borderTop: '1px solid #CCCCCC', + background: '#EEEEEE', + fontWeight: 'bold', + paddingTop: '20px', + }; - render() { - const tableHeader = { - paddingBottom: '20px', - borderTop: '1px solid #CCCCCC', - background: '#EEEEEE', - fontWeight: 'bold', - paddingTop: '20px', - }; - return ( -
- - - - -
- Impacts -
-
-
- -
-
- -
-
- -
-
- -
+ console.log(props); // eslint-disable-line + let impacts = 'There is no retrofits for this building'; + if (Object.keys(props.svgCode).length !== 0) { + impacts = Object.keys(props.svgCode).map(utility => { + return ( +
+
-
- ); + ); + }); } -} + + return ( +
+ + + + + + + +
+ Impacts +
+
+ {impacts} +
+
+
+ ); +}; + +Impacts.propTypes = { + svgCode: PropTypes.objectOf, + savings: PropTypes.arrayOf, + cost: PropTypes.objectOf, +}; export default Impacts; diff --git a/src/components/Performance/Retrofits.js b/src/components/Performance/Retrofits.js index 84f57715..c9793bbe 100644 --- a/src/components/Performance/Retrofits.js +++ b/src/components/Performance/Retrofits.js @@ -131,25 +131,28 @@ class Retrofits extends Component { } render() { - const header = [ - 'Retrofit Name', - 'Installation Start Date', - 'Installation End Date', - 'Primary Influenced Utility', - 'Second Influenced Utility', - 'Notes', - ' ', - ].map((title, key) => { - return ( - - {title} - - ); - }); + let header = null; + if (this.state.retrofits.length > 0) { + header = [ + 'Retrofit Name', + 'Installation Start Date', + 'Installation End Date', + 'Primary Influenced Utility', + 'Second Influenced Utility', + 'Notes', + ' ', + ].map((title, key) => { + return ( + + {title} + + ); + }); + } let retrofits = []; let historyButton = null; - this.state.retrofits = this.props.retrofits; + // this.state.retrofits = this.props.retrofits; if (this.state.retrofits !== null && Object.keys(this.state.retrofits).length !== 0) { retrofits = this.state.retrofits.map((retrofit) => { return ( @@ -177,7 +180,7 @@ class Retrofits extends Component { retrofits = ( - Currently no retrofits. + There is no retrofits for this building ); diff --git a/src/components/Performance/Utilities.js b/src/components/Performance/Utilities.js index 457d3797..eec12ee7 100644 --- a/src/components/Performance/Utilities.js +++ b/src/components/Performance/Utilities.js @@ -1,156 +1,39 @@ -import React, { Component } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; 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 }, - ]; +const Utilities = (props) => { + console.log(props); // eslint-disable-line + let utilities = null; + if (Object.keys(props.data).length !== 0) { + utilities = Object.keys(props.data).map(utility => { + return ( +
+ +
+ ); + }); } - render() { - return ( -
-
-
- -
-
- -
-
- -
-
- -
-
+ return ( +
+
+ {utilities}
- ); - } -} +
+ ); +}; + +Utilities.propTypes = { + data: PropTypes.arrayOf, +}; export default Utilities; diff --git a/src/containers/Performance/index.js b/src/containers/Performance/index.js index 5c1273c7..9f01af17 100644 --- a/src/containers/Performance/index.js +++ b/src/containers/Performance/index.js @@ -109,31 +109,143 @@ class Performance extends Component { } const retrofitsData = retrofits.data.retrofits === null ? [] : retrofits.data.retrofits; - const impacts = { - gas: - { - cost: 100, - savings: 200, + let svgCode = {}; + let savings = {}; + let cost = {}; + let utilities = {}; + if (Object.keys(retrofitsData).length !== 0) { + 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', + }; + savings = { + oil: 0.00, + electricity: 1300.00, + gas: 1800.00, + water: 2300.00, + }; + cost = { + oil: 5000.00, + electricity: 5000.00, + gas: 5000.00, + water: 5000.00, + }; + utilities = { + gas: { + unit: 'kcal', + InstallStartDate: '2018/08/01', + InstallEndDate: '2018/09/01', + data: [ + { 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 }, + ], + }, + electricity: { + unit: 'kWh', + InstallStartDate: '2018/08/01', + InstallEndDate: '2018/09/01', + data: [ + { 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 }, + ], }, - electricity: - { - cost: 100, - savings: 200, + water: { + unit: 'gallon', + InstallStartDate: '2018/08/01', + InstallEndDate: '1900/00/00', + data: [ + { 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 }, + ], }, - water: - { - cost: 100, - savings: 200, + oil: { + unit: 'tank', + InstallStartDate: '1900/00/00', + InstallEndDate: '1900/00/00', + data: [ + { 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 }, + ], }, - }; + }; + } const retrofitCats = eng.retrofitProperties.properties.retrofit_cat; const retrofitNames = eng.retrofitProperties.properties.retrofit_name; + mainContent = (
@@ -190,7 +302,7 @@ class Performance extends Component {
-- GitLab From 1c7037530f8deb85fad5ec4a186ff3d68d5a0ae2 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 25 Jul 2019 17:09:10 -0400 Subject: [PATCH 2/5] Uppercase the chart title --- src/components/Performance/UtilityChart.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Performance/UtilityChart.js b/src/components/Performance/UtilityChart.js index 9d0b61f0..a19211be 100644 --- a/src/components/Performance/UtilityChart.js +++ b/src/components/Performance/UtilityChart.js @@ -65,7 +65,8 @@ const UtilityChart = (props) => { - {props.type} Consumption of Baseline and Reporting Period + {props.type.charAt(0).toUpperCase() + props.type.slice(1)} +  Consumption of Baseline and Reporting Period -- GitLab From 3d832221e9e686ee0ddebed657a4639345abeca3 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Fri, 26 Jul 2019 16:31:00 -0400 Subject: [PATCH 3/5] Conditionally rendering impacts and utility charts --- src/components/Performance/Impacts.js | 3 +- src/components/Performance/RetrofitRow.js | 40 ++++++++++++----------- src/components/Performance/Retrofits.js | 23 ++++++++----- src/components/Performance/Utilities.js | 1 - src/containers/Performance/index.js | 2 +- 5 files changed, 37 insertions(+), 32 deletions(-) diff --git a/src/components/Performance/Impacts.js b/src/components/Performance/Impacts.js index fb68e95a..1c1a0738 100644 --- a/src/components/Performance/Impacts.js +++ b/src/components/Performance/Impacts.js @@ -14,8 +14,7 @@ const Impacts = (props) => { paddingTop: '20px', }; - console.log(props); // eslint-disable-line - let impacts = 'There is no retrofits for this building'; + let impacts = 'Please add a retrofit project in order to see impact. Impact data is displayed once a building has completed a retrofit.'; if (Object.keys(props.svgCode).length !== 0) { impacts = Object.keys(props.svgCode).map(utility => { return ( diff --git a/src/components/Performance/RetrofitRow.js b/src/components/Performance/RetrofitRow.js index 677cc9fd..4f4ae403 100644 --- a/src/components/Performance/RetrofitRow.js +++ b/src/components/Performance/RetrofitRow.js @@ -24,15 +24,15 @@ class RetrofitRow extends Component { this.retrofitMeta[retrofitCat].push(retrofitName); }); this.state = { - id: props.id, utilityNames: props.utilityNames !== undefined ? [...['Select Utility'], ...props.utilityNames].map((utilityName, id) => { return { id, key: id, name: utilityName }; }) : [], form: { + id: props.id, retrofitId: props.retrofitId, - primaryUtilities: props.primaryUtility, - secondUtilities: props.secondUtility, + primaryUtility: props.primaryUtility, + secondUtility: props.secondUtility, installStartDate: props.installStartDate, installEndDate: props.installEndDate, notes: props.notes, @@ -46,8 +46,8 @@ class RetrofitRow extends Component { 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, + primary_utility: this.state.form.primaryUtility, + second_utility: this.state.form.secondUtility, notes: this.state.form.notes, }); } @@ -60,8 +60,8 @@ class RetrofitRow extends Component { 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, + primary_utility: this.state.form.primaryUtility, + second_utility: this.state.form.secondUtility, notes: this.state.form.notes, }); } @@ -79,12 +79,12 @@ class RetrofitRow extends Component { 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) { + if (this.state.form.primaryUtility === null || + this.state.form.primaryUtility === this.emptyUtilityName) { emptyFields.push('Primary utility'); } - if (this.state.form.secondUtilities === null || - this.state.form.secondUtilities === this.emptyUtilityName) { + if (this.state.form.secondUtility === null || + this.state.form.secondUtility === this.emptyUtilityName) { emptyFields.push('Second utility'); } if (emptyFields.length > 0) { @@ -103,6 +103,7 @@ class RetrofitRow extends Component { [name]: val, }, }, () => { + this.props.onChangeEvent(this.state.form); console.log('changed!'); // eslint-disable-line }); } @@ -134,10 +135,10 @@ class RetrofitRow extends Component { return this.renderSelectInput('retrofitId', options); } - renderPrimaryUtilities = () => { + renderPrimaryUtility = () => { const options = [...[this.emptyUtilityName], ...this.props.utilityNames] .map((utilityName, i) => { - if (utilityName === this.state.form.primaryUtilities) { + if (utilityName === this.state.form.primaryUtility) { return ( ); @@ -146,13 +147,13 @@ class RetrofitRow extends Component { ); }); - return this.renderSelectInput('primaryUtilities', options); + return this.renderSelectInput('primaryUtility', options); } - renderSecondUtilities = () => { + renderSecondUtility = () => { const options = [...[this.emptyUtilityName], ...this.props.utilityNames] .map((utilityName, i) => { - if (utilityName === this.state.form.secondUtilities) { + if (utilityName === this.state.form.secondUtility) { return ( ); @@ -161,7 +162,7 @@ class RetrofitRow extends Component { ); }); - return this.renderSelectInput('secondUtilities', options); + return this.renderSelectInput('secondUtility', options); } renderSelectInput = (propName, options) => ( @@ -226,10 +227,10 @@ class RetrofitRow extends Component { /> - {this.renderPrimaryUtilities()} + {this.renderPrimaryUtility()} - {this.renderSecondUtilities()} + {this.renderSecondUtility()} { if (retrofit.id === row.id) { const tmp = { id: retrofit.id, building_id: retrofit.building_id }; - tmp.retrofit_id = row.retrofit_id; - tmp.install_start_date = row.install_start_date; - tmp.install_end_date = row.install_end_date; - tmp.primary_utility = row.primary_utility; - tmp.second_utility = row.second_utility; + tmp.retrofit_id = row.retrofitId; + tmp.install_start_date = row.installStartDate; + tmp.install_end_date = row.installEndDate; + tmp.primary_utility = row.primaryUtility; + tmp.second_utility = row.secondUtility; tmp.notes = row.notes; return tmp; } @@ -98,8 +99,13 @@ class Retrofits extends Component { this.props.buildingId, retrofit, ); - console.log('saga done!'); // eslint-disable-line - this.setState({ action: 'created' }); + const len = this.props.retrofits.length; + this.state.retrofits[len - 1].id = this.props.retrofits.slice(-1)[0].id; + this.setState({ + action: 'created', + }, () => { + console.log('saga done!'); // eslint-disable-line + }); } updateRetrofit = (retrofit) => { @@ -152,14 +158,13 @@ class Retrofits extends Component { let retrofits = []; let historyButton = null; - // this.state.retrofits = this.props.retrofits; + this.state.retrofits = this.props.retrofits; if (this.state.retrofits !== null && Object.keys(this.state.retrofits).length !== 0) { retrofits = this.state.retrofits.map((retrofit) => { return ( { - console.log(props); // eslint-disable-line let utilities = null; if (Object.keys(props.data).length !== 0) { utilities = Object.keys(props.data).map(utility => { diff --git a/src/containers/Performance/index.js b/src/containers/Performance/index.js index 9f01af17..053d75b1 100644 --- a/src/containers/Performance/index.js +++ b/src/containers/Performance/index.js @@ -84,7 +84,6 @@ class Performance extends Component { ) { const userId = user.user_id.split('|')[1]; - let occupantsData = {}; if (occupants.data.occupants === null) { occupantsData = { @@ -109,6 +108,7 @@ class Performance extends Component { } const retrofitsData = retrofits.data.retrofits === null ? [] : retrofits.data.retrofits; + console.log(retrofits); // eslint-disable-line let svgCode = {}; let savings = {}; let cost = {}; -- GitLab From d2764fd2e648fb1b8d44f8af16c8ab607ccb8ca9 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 29 Jul 2019 15:28:54 -0400 Subject: [PATCH 4/5] Update impact pie charts order, updatelabel for not affected utility pie chart --- src/components/Performance/ImpactChart.js | 131 +++++++++++----------- src/components/Performance/Impacts.js | 32 ++++-- src/components/Performance/Occupants.js | 1 - src/components/Performance/styles.css | 7 +- src/containers/Performance/index.js | 2 +- 5 files changed, 92 insertions(+), 81 deletions(-) diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js index cf52fcdc..c0de4391 100644 --- a/src/components/Performance/ImpactChart.js +++ b/src/components/Performance/ImpactChart.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { ResponsiveContainer, @@ -26,10 +26,10 @@ const renderActiveShape = (props) => { {payload.utilityType} - - {payload.name}: {payload.percent} + + {payload.context} - + { ); }; -class ImpactChart extends Component { - constructor(props) { - super(props); - this.state = { - action: null, - messageContent: null, - messageStyle: 'default', - }; +const ImpactChart = (props) => { + const utilityType = props.type.charAt(0).toUpperCase() + props.type.slice(1); + const percent = `${(props.savings / props.cost) * 100}%`; + const svgCode = props.svgCode; + let svgClass = 'svg-icon-grey'; + let context = 'Not Affected'; + let contextColor = '#999999'; + if (props.savings !== 0.00) { + svgClass = 'svg-icon'; + context = `Savings: ${percent}`; + contextColor = '#333333'; } + const data = [ + { name: 'Savings', value: props.savings, utilityType, percent, svgCode, svgClass, context, contextColor }, + { name: 'Cost', value: props.cost, utilityType, percent, svgCode, svgClass, context, contextColor }, + ]; + const COLORS = ['#00C49F', '#CCCCCC']; + const titleStyle = { + fontWeight: 'bold', + fontSize: '0.9em', + marginTop: '15px', + }; + const feeStyle = { + fontSize: '1.2em', + }; - 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)} -
+ return ( +
+ + + + { + data.map((entry, index) => ) + } + + + +
+
+ Annual Cost +
+
+ {Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(props.cost)} +
+
+ Annual Savings +
+
+ {Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(props.savings)}
- ); - } -} +
+ ); +}; renderActiveShape.propTypes = { cx: PropTypes.number, diff --git a/src/components/Performance/Impacts.js b/src/components/Performance/Impacts.js index 1c1a0738..94f53919 100644 --- a/src/components/Performance/Impacts.js +++ b/src/components/Performance/Impacts.js @@ -16,18 +16,28 @@ const Impacts = (props) => { let impacts = 'Please add a retrofit project in order to see impact. Impact data is displayed once a building has completed a retrofit.'; if (Object.keys(props.svgCode).length !== 0) { - impacts = Object.keys(props.svgCode).map(utility => { - return ( -
- -
- ); + const utilites = []; + Object.entries(props.savings).forEach(([utility, savings]) => { + if (utilites.length === 0 || savings > props.savings[utilites.slice(-1)[0]]) { + utilites.push(utility); + } else { + utilites.splice(0, 0, utility); + } }); + impacts = utilites + .reverse() + .map(utility => { + return ( +
+ +
+ ); + }); } return ( diff --git a/src/components/Performance/Occupants.js b/src/components/Performance/Occupants.js index 011fdb4c..0ab42111 100644 --- a/src/components/Performance/Occupants.js +++ b/src/components/Performance/Occupants.js @@ -58,7 +58,6 @@ class Occupants extends Component { this.state.currentLogPos + global.expandNum), showLastButton: true, }); - console.log(this.state.currentLogPos); // eslint-disable-line if (this.state.currentLogPos + global.expandNum >= this.props.occupantsLog.length) { this.setState({ showNextButton: false, diff --git a/src/components/Performance/styles.css b/src/components/Performance/styles.css index 3aa5cc2e..7bf1df3d 100644 --- a/src/components/Performance/styles.css +++ b/src/components/Performance/styles.css @@ -12,7 +12,8 @@ padding-right: 28px !important; } -.svg-icon { +.svg-icon, +.svg-icon-grey { width: 0.2em; height: 0.2em; stroke-width: 13, @@ -24,6 +25,10 @@ fill: #00C49F; } +.svg-icon-grey path { + fill: #999999; +} + .svg-icon circle { stroke: #00C49F; stroke-width: 3; diff --git a/src/containers/Performance/index.js b/src/containers/Performance/index.js index 053d75b1..2a480dc6 100644 --- a/src/containers/Performance/index.js +++ b/src/containers/Performance/index.js @@ -108,12 +108,12 @@ class Performance extends Component { } const retrofitsData = retrofits.data.retrofits === null ? [] : retrofits.data.retrofits; - console.log(retrofits); // eslint-disable-line let svgCode = {}; let savings = {}; let cost = {}; let utilities = {}; if (Object.keys(retrofitsData).length !== 0) { + console.log(retrofitsData); // eslint-disable-line 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', -- GitLab From 1ee8d61e51175db322eed8356ceb4eff87e09811 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 29 Jul 2019 16:54:48 -0400 Subject: [PATCH 5/5] Line charts rendering conditionally --- src/components/Performance/ImpactChart.js | 9 ++-- src/components/Performance/Impacts.js | 2 +- src/containers/Performance/index.js | 52 ++++++++++++++++------- 3 files changed, 42 insertions(+), 21 deletions(-) diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js index c0de4391..57a0b34c 100644 --- a/src/components/Performance/ImpactChart.js +++ b/src/components/Performance/ImpactChart.js @@ -47,19 +47,18 @@ const renderActiveShape = (props) => { const ImpactChart = (props) => { const utilityType = props.type.charAt(0).toUpperCase() + props.type.slice(1); - const percent = `${(props.savings / props.cost) * 100}%`; const svgCode = props.svgCode; let svgClass = 'svg-icon-grey'; let context = 'Not Affected'; let contextColor = '#999999'; if (props.savings !== 0.00) { svgClass = 'svg-icon'; - context = `Savings: ${percent}`; + context = `Savings: ${(props.savings / props.cost) * 100}%`; contextColor = '#333333'; } const data = [ - { name: 'Savings', value: props.savings, utilityType, percent, svgCode, svgClass, context, contextColor }, - { name: 'Cost', value: props.cost, utilityType, percent, svgCode, svgClass, context, contextColor }, + { name: 'Savings', value: props.savings, utilityType, svgCode, svgClass, context, contextColor }, + { name: 'Cost', value: props.cost, utilityType, svgCode, svgClass, context, contextColor }, ]; const COLORS = ['#00C49F', '#CCCCCC']; const titleStyle = { @@ -72,7 +71,7 @@ const ImpactChart = (props) => { }; return ( -
+
{ return (
- +
{ + const primaryUtility = retrofit.primary_utility.toLowerCase(); + const secondUtility = retrofit.second_utility.toLowerCase(); + if (primaryUtility === 'natural gas' || secondUtility === 'natural gas') { + availabilities.gas = true; + } + availabilities[primaryUtility] = true; + availabilities[secondUtility] = true; + }); savings = { - oil: 0.00, - electricity: 1300.00, - gas: 1800.00, - water: 2300.00, + oil: availabilities.oil === false ? 0.00 : 1500.00, + electricity: availabilities.electricity === false ? 0.00 : 1300.00, + gas: availabilities.gas === false ? 0.00 : 1800.00, + water: availabilities.water === false ? 0.00 : 2300.00, }; cost = { oil: 5000.00, @@ -132,8 +146,9 @@ class Performance extends Component { gas: 5000.00, water: 5000.00, }; - utilities = { - gas: { + utilities = {}; + if (availabilities.gas === true) { + utilities.gas = { unit: 'kcal', InstallStartDate: '2018/08/01', InstallEndDate: '2018/09/01', @@ -156,8 +171,10 @@ class Performance extends Component { { date: '2018/10/01', BaselineConsumption: 1200, MeteredUsage: 900 }, { date: '2018/11/01', BaselineConsumption: 1520, MeteredUsage: 1100 }, ], - }, - electricity: { + }; + } + if (availabilities.electricity === true) { + utilities.electricity = { unit: 'kWh', InstallStartDate: '2018/08/01', InstallEndDate: '2018/09/01', @@ -189,8 +206,10 @@ class Performance extends Component { { date: '2019/07/01', BaselineConsumption: 1400, MeteredUsage: 680 }, { date: '2019/08/01', BaselineConsumption: 1890, MeteredUsage: 370 }, ], - }, - water: { + }; + } + if (availabilities.water === true) { + utilities.water = { unit: 'gallon', InstallStartDate: '2018/08/01', InstallEndDate: '1900/00/00', @@ -211,8 +230,10 @@ class Performance extends Component { { date: '2018/08/01', MeteredUsage: 755 }, { date: '2018/09/01', BaselineConsumption: 1397, MeteredUsage: 1000 }, ], - }, - oil: { + }; + } + if (availabilities.oil === true) { + utilities.oil = { unit: 'tank', InstallStartDate: '1900/00/00', InstallEndDate: '1900/00/00', @@ -232,9 +253,10 @@ class Performance extends Component { { date: '2018/07/01', MeteredUsage: 1100 }, { date: '2018/08/01', MeteredUsage: 755 }, ], - }, - }; + }; + } } + const retrofitCats = eng.retrofitProperties.properties.retrofit_cat; const retrofitNames = eng.retrofitProperties.properties.retrofit_name; -- GitLab