diff --git a/src/components/UtilityAccountSummary.js b/src/components/UtilityAccountSummary.js
new file mode 100644
index 0000000000000000000000000000000000000000..35345068a7df92a78f0a6970a809364b3d098c8a
--- /dev/null
+++ b/src/components/UtilityAccountSummary.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class UtilityAccountSummary extends Component {
+ state = { }
+
+ render() {
+ return (
+
Coming Soon
+ );
+ }
+}
+
+export default UtilityAccountSummary;
diff --git a/src/components/UtilityLine/UtilityDisaggregation.js b/src/components/UtilityLine/UtilityDisaggregation.js
index ce59f31cc95209190d772815f5b5b5339fc1adc0..3b324fbcd54ca99a96d0be78e6f0886694aa0077 100644
--- a/src/components/UtilityLine/UtilityDisaggregation.js
+++ b/src/components/UtilityLine/UtilityDisaggregation.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'react-fa';
import { Table } from 'reactstrap';
+import ReactTooltip from 'react-tooltip';
import DisaggregationForm from './DisaggregationForm';
import Fade from '../Fade';
import request from '../../utils/request';
@@ -297,7 +298,7 @@ class UtilityDisaggregation extends Component {
return (
+
Disaggregate
+
+ {/* eslint-disable no-use-before-define */}
+ {this.props.disaggregateData.length > 0 &&
+
+
+
+
+ }
+ {/* eslint-enable */}
+
{this.renderDownloadBtn()}
{this.props.renderUploadButton('Disaggregated Bill')}
@@ -434,10 +456,16 @@ const styles = {
alignRight: {
textAlign: 'right',
},
+ faIconSelected: {
+ color: 'blue',
+ cursor: 'pointer',
+ },
};
UtilityDisaggregation.propTypes = {
- street_address: PropTypes.string,
+ accountCreated: PropTypes.bool,
+ accountId: PropTypes.number,
+ disableDisaggregateBtn: PropTypes.func,
disaggregateData: PropTypes.arrayOf(
PropTypes.shape({
bill_from_date: PropTypes.string,
@@ -447,15 +475,17 @@ UtilityDisaggregation.propTypes = {
other: PropTypes.number,
})
),
- utility_type: PropTypes.string,
+ displayDisaggregateChart: PropTypes.bool,
+ displayDisaggregateData: PropTypes.bool,
handleBillGAEvent: PropTypes.func,
- rSquared: PropTypes.number,
- renderUploadButton: PropTypes.func,
- accountCreated: PropTypes.bool,
- disableDisaggregateBtn: PropTypes.func,
handleDisaggregateUtilityBill: PropTypes.func,
loadingDisaggregate: PropTypes.bool,
- accountId: PropTypes.number,
+ renderUploadButton: PropTypes.func,
+ rSquared: PropTypes.number,
+ street_address: PropTypes.string,
+ toggleDisaggregateChartDisplay: PropTypes.func,
+ toggleDisaggregateDataDisplay: PropTypes.func,
+ utility_type: PropTypes.string,
};
export default UtilityDisaggregation;
diff --git a/src/components/UtilityLine/UtilityLine.js b/src/components/UtilityLine/UtilityLine.js
index 01b3fa9b610debe069d0f5c82d680decc0c93b30..d7d794485b2af7d0382d5e8014da70dcdc43c8ed 100644
--- a/src/components/UtilityLine/UtilityLine.js
+++ b/src/components/UtilityLine/UtilityLine.js
@@ -10,6 +10,7 @@ import { uploadSVG } from '../bpl';
import './styles.css';
import { generateBillDownload, renderBillData, renderDisaggregateData } from './dataInteraction';
import userPropType from '../../containers/User/propTypes';
+import UtilityAccountSummary from '../UtilityAccountSummary';
class UtilityLine extends Component {
@@ -495,57 +496,6 @@ class UtilityLine extends Component {
return chartDownload;
}
- renderBillViewButtons = () => {
- let billDataToggle = ();
- if (this.state.billData.length > 0) {
- billDataToggle = (
-
- );
- }
- let disaggregateDataToggle = ();
- let chartToggle = ();
- if (this.state.disaggregateData.length > 0) {
- disaggregateDataToggle = (
-
- );
- chartToggle = (
-
- );
- }
-
- return (
-
-
- {billDataToggle}
-
-
-
- {disaggregateDataToggle}
-
-
-
- {chartToggle}
-
-
- );
- }
-
-
renderDisaggregateChart = () => {
let unit = 'kWh';
if (this.state.form.utility.endsWith('gas')) {
@@ -789,16 +739,28 @@ class UtilityLine extends Component {
{this.renderNatGrid()}
{this.renderDisaggregateDropdown()}
{this.renderLabel()}
+
{this.state.accountCreated && !this.state.editing && this.renderFetchBtn()}
- {!this.state.accountCreated ?
- this.renderAddAccountBtn() : null}
- {this.state.editing &&
- this.renderSaveEditBtn()}
- {this.state.editing &&
- this.renderCancelEditBtn()}
+
+ {/* eslint-disable no-use-before-define */}
+ {this.state.billData.length > 0 &&
+ }
+ {/* eslint-enable */}
+
+ {!this.state.accountCreated ? this.renderAddAccountBtn() : null}
+
+ {this.state.editing && this.renderSaveEditBtn()}
+ {this.state.editing && this.renderCancelEditBtn()}
+
{this.state.accountCreated && this.renderBillDownloadButton()}
+
{this.state.accountCreated && this.renderUploadButton('Bill')}
@@ -810,53 +772,68 @@ class UtilityLine extends Component {
{this.state.accountCreated && 'Disaggregation'}
-
{this.state.accountCreated ? 'View Data' : ''}
-
- {this.state.accountCreated && this.renderBillViewButtons()}
-
+
{this.state.accountCreated && 'Account Summary'}
+
+
{renderBillData(
this.state.billData,
this.state.displayBillData,
this.state.form.utility,
this.state.account_id
)}
+
{renderDisaggregateData(
this.state.disaggregateData,
this.state.displayDisaggregateData,
this.state.account_id
)}
+
-
{this.state.displayDisaggregateChart ? 'Disaggregation Chart' : ''}
+
{this.state.displayDisaggregateChart && 'Disaggregation Chart'}
+
{this.renderChartDownloadButton()}
{this.renderDisaggregateChart()}
+
+
);
}
}
+const styles = {
+ faIconSelected: {
+ color: 'blue',
+ cursor: 'pointer',
+ },
+};
+
UtilityLine.propTypes = {
form: PropTypes.shape({
utility: PropTypes.string,