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}
/>