diff --git a/src/components/Performance/ImpactChart.js b/src/components/Performance/ImpactChart.js index 57a0b34c382c5a49104b362f8097a4a78d99f0f5..6dd2a0b2458099c3cd8e15f11c2dcab12b46014a 100644 --- a/src/components/Performance/ImpactChart.js +++ b/src/components/Performance/ImpactChart.js @@ -46,30 +46,56 @@ const renderActiveShape = (props) => { }; const ImpactChart = (props) => { + const COLORS = ['#00C49F', '#CCCCCC']; + const titleStyle = { + fontWeight: 'bold', + fontSize: '0.9em', + marginTop: '15px', + }; + const costStyle = { + fontSize: '1.2em', + }; + let savingsStyle = { + fontSize: '1.2em', + }; const utilityType = props.type.charAt(0).toUpperCase() + props.type.slice(1); const svgCode = props.svgCode; - let svgClass = 'svg-icon-grey'; - let context = 'Not Affected'; + let svgClass = null; + let context = null; let contextColor = '#999999'; - if (props.savings !== 0.00) { + let annualCost = '$0.00'; + let annualSavings = '$0.00'; + if (props.effect === false) { + svgClass = 'svg-icon-grey'; + context = 'Not Affected'; + contextColor = '#999999'; + } else if (props.availability === false) { + svgClass = 'svg-icon-grey'; + context = 'Not Available'; + contextColor = '#999999'; + savingsStyle = { + fontSize: '0.9em', + color: 'red', + fontWeight: 'bold', + }; + annualCost = 'Not Available'; + const monthsLeft = Math.floor((365 - props.daysAfterRetrofit) / 30); + if (monthsLeft === 0) { + annualSavings = 'Please check back in one month'; + } else { + annualSavings = `Please check back in ${monthsLeft} months`; + } + } else { svgClass = 'svg-icon'; context = `Savings: ${(props.savings / props.cost) * 100}%`; contextColor = '#333333'; + annualCost = Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(props.cost); + annualSavings = Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(props.savings); } const data = [ { 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 = { - fontWeight: 'bold', - fontSize: '0.9em', - marginTop: '15px', - }; - const feeStyle = { - fontSize: '1.2em', - }; - return (
@@ -95,14 +121,14 @@ const ImpactChart = (props) => {
Annual Cost
-
- {Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(props.cost)} +
+ {annualCost}
Annual Savings
-
- {Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(props.savings)} +
+ {annualSavings}
@@ -125,6 +151,9 @@ ImpactChart.propTypes = { svgCode: PropTypes.string, savings: PropTypes.number, cost: PropTypes.number, + effect: PropTypes.bool, + availability: PropTypes.bool, + daysAfterRetrofit: PropTypes.number, }; export default ImpactChart; diff --git a/src/components/Performance/Impacts.js b/src/components/Performance/Impacts.js index a153833fa8d83eb80f74466dd82f7f75b641be14..9d38d1b39ba20c346393ce2cad4480dc5f80e631 100644 --- a/src/components/Performance/Impacts.js +++ b/src/components/Performance/Impacts.js @@ -18,7 +18,10 @@ const Impacts = (props) => { if (Object.keys(props.svgCode).length !== 0) { const utilites = []; Object.entries(props.savings).forEach(([utility, savings]) => { - if (utilites.length === 0 || savings > props.savings[utilites.slice(-1)[0]]) { + if (utilites.length === 0 + || props.effects[utility] === false + || props.availabilities[utility] === false + || savings > props.savings[utilites.slice(-1)[0]]) { utilites.push(utility); } else { utilites.splice(0, 0, utility); @@ -34,6 +37,9 @@ const Impacts = (props) => { svgCode={props.svgCode[utility]} savings={props.savings[utility]} cost={props.cost[utility]} + effect={props.effects[utility]} + availability={props.availabilities[utility]} + daysAfterRetrofit={props.daysAfterRetrofit[utility]} />
); @@ -66,6 +72,9 @@ Impacts.propTypes = { svgCode: PropTypes.objectOf, savings: PropTypes.arrayOf, cost: PropTypes.objectOf, + effects: PropTypes.objectOf, + availabilities: PropTypes.objectOf, + daysAfterRetrofit: PropTypes.objectOf, }; export default Impacts; diff --git a/src/components/Performance/Retrofits.js b/src/components/Performance/Retrofits.js index f7fc3e8e97c5efcaf8152de34888debc3641c179..4f73466622cd7c9cc8ae7b27a3db0fe4cb153bb8 100644 --- a/src/components/Performance/Retrofits.js +++ b/src/components/Performance/Retrofits.js @@ -149,7 +149,7 @@ class Retrofits extends Component { ' ', ].map((title, key) => { return ( - + {title} ); diff --git a/src/containers/Performance/index.js b/src/containers/Performance/index.js index 9c67642fa85c912c0d9eb36a365aea803d157ff6..8858649e949fa2a89891a58e6fed60e73a59c064 100644 --- a/src/containers/Performance/index.js +++ b/src/containers/Performance/index.js @@ -112,6 +112,24 @@ class Performance extends Component { let savings = {}; let cost = {}; let utilities = {}; + const effects = { + oil: false, + electricity: false, + gas: false, + water: false, + }; + const availabilities = { + oil: false, + electricity: false, + gas: false, + water: false, + }; + const daysAfterRetrofit = { + oil: 0, + electricity: 0, + gas: 0, + water: 0, + }; 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', @@ -119,26 +137,34 @@ class Performance 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', }; - const availabilities = { - oil: false, - electricity: false, - gas: false, - water: false, - }; + const curDate = new Date(); retrofitsData.forEach(retrofit => { + const installEndDate = new Date(retrofit.install_end_date); + const dayDifference = Math.floor((curDate - installEndDate) / (1000 * 60 * 60 * 24)); const primaryUtility = retrofit.primary_utility.toLowerCase(); const secondUtility = retrofit.second_utility.toLowerCase(); if (primaryUtility === 'natural gas' || secondUtility === 'natural gas') { - availabilities.gas = true; + effects.gas = true; + daysAfterRetrofit.gas = dayDifference; + if (dayDifference > 365) { + availabilities.gas = true; + } + } + effects[primaryUtility] = true; + effects[secondUtility] = true; + daysAfterRetrofit[primaryUtility] = dayDifference; + daysAfterRetrofit[secondUtility] = dayDifference; + if (dayDifference > 365) { + availabilities[primaryUtility] = true; + availabilities[secondUtility] = true; } - availabilities[primaryUtility] = true; - availabilities[secondUtility] = true; }); savings = { - 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, + oil: (effects.oil === false || availabilities.oil === false) ? 0.00 : 1500.00, + electricity: (effects.electricity === false || availabilities.electricity === false) ? + 0.00 : 1300.00, + gas: (effects.gas === false || availabilities.gas === false) ? 0.00 : 1800.00, + water: (effects.water === false || availabilities.water === false) ? 0.00 : 2300.00, }; cost = { oil: 5000.00, @@ -147,7 +173,7 @@ class Performance extends Component { water: 5000.00, }; utilities = {}; - if (availabilities.gas === true) { + if (effects.gas === true) { utilities.gas = { unit: 'kcal', InstallStartDate: '2018/08/01', @@ -173,7 +199,7 @@ class Performance extends Component { ], }; } - if (availabilities.electricity === true) { + if (effects.electricity === true) { utilities.electricity = { unit: 'kWh', InstallStartDate: '2018/08/01', @@ -208,7 +234,7 @@ class Performance extends Component { ], }; } - if (availabilities.water === true) { + if (effects.water === true) { utilities.water = { unit: 'gallon', InstallStartDate: '2018/08/01', @@ -232,7 +258,7 @@ class Performance extends Component { ], }; } - if (availabilities.oil === true) { + if (effects.oil === true) { utilities.oil = { unit: 'tank', InstallStartDate: '1900/00/00', @@ -268,6 +294,9 @@ class Performance extends Component { svgCode={svgCode} savings={savings} cost={cost} + effects={effects} + availabilities={availabilities} + daysAfterRetrofit={daysAfterRetrofit} />