diff --git a/src/components/UtilityLine/UtilityDisaggregation.js b/src/components/UtilityLine/UtilityDisaggregation.js
new file mode 100644
index 0000000000000000000000000000000000000000..a01fe1a5bd194a0659a769ef6e2b0fb9e5647d8b
--- /dev/null
+++ b/src/components/UtilityLine/UtilityDisaggregation.js
@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'react-fa';
+import { generateBillDownload } from './dataInteraction';
+
+
+class UtilityDisaggregation extends Component {
+ state = { }
+
+ renderDownloadBtn = () => {
+ const { disaggregateData } = this.props;
+
+ let disaggregateVisibility = 'hidden';
+ if (disaggregateData.length > 0) {
+ disaggregateVisibility = 'visible';
+ }
+
+ const LOW_RSQUARED = 0.7;
+ const LOWEST_RSQUARED = 0.4;
+ const rSquaredText = `r2 is the disaggregation confidence measure. Below ${LOW_RSQUARED} is questionable. Below ${LOWEST_RSQUARED} is very bad`;
+
+ return (
+
+ { this.props.handleBillGAEvent('Download Disaggregated Bill'); }}
+ >
+
+
+
+ {this.props.rSquared ? this.props.rSquared.toFixed(3).replace(/^0+/, '') : ''}
+
+
+ );
+ }
+
+ render() {
+ if (!this.props.accountCreated) {
+ return
;
+ }
+
+ return (
+
+
+ {this.renderDownloadBtn()}
+
+ {this.props.renderUploadButton('Disaggregated Bill')}
+
+
+ );
+ }
+}
+
+UtilityDisaggregation.propTypes = {
+ street_address: PropTypes.string,
+ disaggregateData: PropTypes.array, // eslint-disable-line
+ form: PropTypes.object, // eslint-disable-line
+ handleBillGAEvent: PropTypes.func,
+ rSquared: PropTypes.number,
+ renderUploadButton: PropTypes.func,
+ accountCreated: PropTypes.bool,
+ disableDisaggregateBtn: PropTypes.func,
+ handleDisaggregateUtilityBill: PropTypes.func,
+ loadingDisaggregate: PropTypes.bool,
+};
+
+export default UtilityDisaggregation;
diff --git a/src/components/UtilityLine/UtilityLine.js b/src/components/UtilityLine/UtilityLine.js
index 3f906cbc1c6a6664755b8a5038a014cd5e7321e4..6336a8cc4d73ac3c2f628455a9ba8d8f6b439899 100644
--- a/src/components/UtilityLine/UtilityLine.js
+++ b/src/components/UtilityLine/UtilityLine.js
@@ -5,11 +5,13 @@ import PropTypes from 'prop-types';
import { LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Line } from 'recharts';
import { Icon } from 'react-fa';
import domtoimage from 'dom-to-image';
+import UtilityDisaggregation from './UtilityDisaggregation';
import { uploadSVG } from '../bpl';
import './styles.css';
import { generateBillDownload, renderBillData, renderDisaggregateData } from './dataInteraction';
import userPropType from '../../containers/User/propTypes';
+
class UtilityLine extends Component {
constructor(props) {
super(props);
@@ -273,6 +275,14 @@ class UtilityLine extends Component {
}
}
+ disableDisaggregateBtn = () => {
+ return this.state.loadingDisaggregate ||
+ this.state.loadingFetch ||
+ this.state.disableButtons ||
+ this.state.billData.length === 0 ||
+ !this.props.user.permissions['create::Disaggregate'];
+ }
+
handleBillGAEvent = (billText) => {
ReactGA.event({ category: 'Utilities', action: `${billText}`, label: `Utility: ${this.state.form.utility}, Account: ${this.state.form.account_number}` });
}
@@ -393,23 +403,7 @@ class UtilityLine extends Component {
);
}
- renderDisaggregateBtn = () => {
- const disabled = !this.props.user.permissions['create::Disaggregate'];
- return (
-
- );
- }
+
renderDeleteAccountBtn = () => {
const disabled = !this.props.user.permissions['delete::Account'];
@@ -446,19 +440,14 @@ class UtilityLine extends Component {
);
}
- renderBillButtons = () => {
- const { billData, disaggregateData } = this.state;
+ renderBillDownloadButton = () => {
+ const { billData } = this.state;
let billVisibility = 'hidden';
if (billData.length > 0) {
billVisibility = 'visible';
}
- let disaggregateVisibility = 'hidden';
- if (disaggregateData.length > 0) {
- disaggregateVisibility = 'visible';
- }
- let billText = 'Download Raw Bill';
- let disaggregateText = 'Download Disaggregated Bill';
+ let billText = '';
if (billVisibility === 'hidden') {
if (this.state.form.utility.startsWith('other')) {
billText = 'No raw bill. Upload a bill';
@@ -466,63 +455,29 @@ class UtilityLine extends Component {
billText = 'No raw bill. Try fetching or uploading';
}
}
- if (disaggregateVisibility === 'hidden') {
- disaggregateText = 'No disaggregated bill.';
- }
- const LOW_RSQUARED = 0.7;
- const LOWEST_RSQUARED = 0.4;
- const rSquaredText = `r2 is the disaggregation confidence measure. Below ${LOW_RSQUARED} is questionable. Below ${LOWEST_RSQUARED} is very bad`;
- const scrapeAddressText = `The address scraped for this account was ${this.state.scrapeAddress}`;
+ const scrapeAddressText = `The address scraped for this account was ${this.state.scrapeAddress}
+ -- ${billText}`;
return (
-
+
+ { this.handleBillGAEvent(billText); }}
+ >
+
+
+
+
+
+
);
}
@@ -655,7 +610,7 @@ class UtilityLine extends Component {
onChange={this.handleInputChange}
disabled={this.state.accountCreated && !this.state.editing}
>
-
+
@@ -838,17 +793,16 @@ class UtilityLine extends Component {
{this.renderLabel()}
{this.state.accountCreated && !this.state.editing && this.renderFetchBtn()}
- {
- this.state.billData.length > 0 &&
- !this.state.editing &&
- this.renderDisaggregateBtn()
- }
{!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')}
{this.showAccountWarning()}
@@ -856,9 +810,20 @@ class UtilityLine extends Component {
-
{this.state.accountCreated ? 'Account Details' : ''}
+
{this.state.accountCreated && 'Disaggregation'}
- {this.state.accountCreated && this.renderBillButtons()}
+
diff --git a/src/components/UtilityLine/styles.css b/src/components/UtilityLine/styles.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..40c1fc1fbfb362ab4d2550d33b8fbb02a0799c64 100644
--- a/src/components/UtilityLine/styles.css
+++ b/src/components/UtilityLine/styles.css
@@ -0,0 +1,3 @@
+.add {
+ margin-bottom: 0 !important;
+}