From 9444ae3079ba2e06c913af3a52bb9d9c8b66121a Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Mon, 29 Jan 2018 13:11:30 -0500 Subject: [PATCH 1/4] Create UtilityDisaggregation component --- .../UtilityLine/UtilityDisaggregation.js | 70 +++++++++++++++++++ src/components/UtilityLine/UtilityLine.js | 58 +++++---------- 2 files changed, 86 insertions(+), 42 deletions(-) create mode 100644 src/components/UtilityLine/UtilityDisaggregation.js diff --git a/src/components/UtilityLine/UtilityDisaggregation.js b/src/components/UtilityLine/UtilityDisaggregation.js new file mode 100644 index 00000000..7ea7fd30 --- /dev/null +++ b/src/components/UtilityLine/UtilityDisaggregation.js @@ -0,0 +1,70 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Icon } from 'react-fa'; +import { generateBillDownload } from './dataInteraction'; + + +class UtilityDisaggregation extends Component { + state = { } + + renderBillButtons = () => { + 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+/, '') : ''} + +
+ {this.props.renderUploadButton('Disaggregated Bill')} +
+
+ ); + } + + render() { + return ( +
+ {this.renderBillButtons()} +
+ ); + } +} + +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, +}; + +export default UtilityDisaggregation; diff --git a/src/components/UtilityLine/UtilityLine.js b/src/components/UtilityLine/UtilityLine.js index 3f906cbc..514cd122 100644 --- a/src/components/UtilityLine/UtilityLine.js +++ b/src/components/UtilityLine/UtilityLine.js @@ -5,6 +5,7 @@ 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'; @@ -447,18 +448,13 @@ class UtilityLine extends Component { } renderBillButtons = () => { - const { billData, disaggregateData } = this.state; + 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'; if (billVisibility === 'hidden') { if (this.state.form.utility.startsWith('other')) { billText = 'No raw bill. Upload a bill'; @@ -466,12 +462,6 @@ 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}`; return ( @@ -498,30 +488,6 @@ class UtilityLine extends Component {
{this.renderUploadButton('Bill')} -
- { this.handleBillGAEvent(disaggregateText); }} - > - {disaggregateText} - - - {this.state.rSquared ? this.state.rSquared.toFixed(3).replace(/^0+/, '') : ''} - -
- {this.renderUploadButton('Disaggregated Bill')} -
); } @@ -838,11 +804,6 @@ 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 && @@ -856,8 +817,21 @@ class UtilityLine extends Component {
-
{this.state.accountCreated ? 'Account Details' : ''}
+
{this.state.accountCreated && 'Disaggregation'}
+ + { + this.state.billData.length > 0 && + !this.state.editing && + this.renderDisaggregateBtn() + } {this.state.accountCreated && this.renderBillButtons()}
-- GitLab From a78f91dcec6db15e2283e7c4c7a2b7e791074e96 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Mon, 29 Jan 2018 13:34:14 -0500 Subject: [PATCH 2/4] Move download and upload button --- .../UtilityLine/UtilityDisaggregation.js | 50 ++++++++-------- src/components/UtilityLine/UtilityLine.js | 57 ++++++++++--------- src/components/UtilityLine/styles.css | 4 ++ 3 files changed, 58 insertions(+), 53 deletions(-) diff --git a/src/components/UtilityLine/UtilityDisaggregation.js b/src/components/UtilityLine/UtilityDisaggregation.js index 7ea7fd30..e41484a0 100644 --- a/src/components/UtilityLine/UtilityDisaggregation.js +++ b/src/components/UtilityLine/UtilityDisaggregation.js @@ -21,30 +21,26 @@ class UtilityDisaggregation extends Component { return (
-
- { this.props.handleBillGAEvent('Download Disaggregated Bill'); }} - > - - - - {this.props.rSquared ? this.props.rSquared.toFixed(3).replace(/^0+/, '') : ''} - -
- {this.props.renderUploadButton('Disaggregated Bill')} -
+ { this.props.handleBillGAEvent('Download Disaggregated Bill'); }} + > + + + + {this.props.rSquared ? this.props.rSquared.toFixed(3).replace(/^0+/, '') : ''} +
); } @@ -52,7 +48,10 @@ class UtilityDisaggregation extends Component { render() { return (
- {this.renderBillButtons()} + {this.props.accountCreated && this.renderBillButtons()} +
+ {this.props.accountCreated && this.props.renderUploadButton('Disaggregated Bill')} +
); } @@ -65,6 +64,7 @@ UtilityDisaggregation.propTypes = { handleBillGAEvent: PropTypes.func, rSquared: PropTypes.number, renderUploadButton: PropTypes.func, + accountCreated: PropTypes.bool, }; export default UtilityDisaggregation; diff --git a/src/components/UtilityLine/UtilityLine.js b/src/components/UtilityLine/UtilityLine.js index 514cd122..150d6b07 100644 --- a/src/components/UtilityLine/UtilityLine.js +++ b/src/components/UtilityLine/UtilityLine.js @@ -11,6 +11,7 @@ import './styles.css'; import { generateBillDownload, renderBillData, renderDisaggregateData } from './dataInteraction'; import userPropType from '../../containers/User/propTypes'; + class UtilityLine extends Component { constructor(props) { super(props); @@ -447,14 +448,14 @@ class UtilityLine extends Component { ); } - renderBillButtons = () => { + renderBillDownloadButton = () => { const { billData } = this.state; let billVisibility = 'hidden'; if (billData.length > 0) { billVisibility = 'visible'; } - let billText = 'Download Raw Bill'; + let billText = ''; if (billVisibility === 'hidden') { if (this.state.form.utility.startsWith('other')) { billText = 'No raw bill. Upload a bill'; @@ -462,33 +463,29 @@ class UtilityLine extends Component { billText = 'No raw bill. Try fetching or uploading'; } } - 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); }} - > - {billText} - - - - -
- {this.renderUploadButton('Bill')} -
-
+ + { this.handleBillGAEvent(billText); }} + > + + + + + + ); } @@ -810,6 +807,10 @@ class UtilityLine extends Component { this.renderSaveEditBtn()} {this.state.editing && this.renderCancelEditBtn()} + {this.state.accountCreated && this.renderBillDownloadButton()} + +
+ {this.state.accountCreated && this.renderUploadButton('Bill')}
{this.showAccountWarning()} @@ -826,13 +827,13 @@ class UtilityLine extends Component { rSquared={this.state.rSquared} renderUploadButton={this.renderUploadButton} street_address={this.props.street_address} + accountCreated={this.props.accountCreated} /> { this.state.billData.length > 0 && !this.state.editing && this.renderDisaggregateBtn() } - {this.state.accountCreated && this.renderBillButtons()}
diff --git a/src/components/UtilityLine/styles.css b/src/components/UtilityLine/styles.css index e69de29b..3aa17535 100644 --- a/src/components/UtilityLine/styles.css +++ b/src/components/UtilityLine/styles.css @@ -0,0 +1,4 @@ +.add { + /* padding: 5px !important; */ + margin-bottom: 0 !important; +} -- GitLab From 04775907f6ae2f751df6b2fc1d1fccfd5fdecb31 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Mon, 29 Jan 2018 14:13:15 -0500 Subject: [PATCH 3/4] Move Disaggregate button to UtilityDisaggregate --- .../UtilityLine/UtilityDisaggregation.js | 25 ++++++++++---- src/components/UtilityLine/UtilityLine.js | 34 +++++++------------ 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/src/components/UtilityLine/UtilityDisaggregation.js b/src/components/UtilityLine/UtilityDisaggregation.js index e41484a0..a01fe1a5 100644 --- a/src/components/UtilityLine/UtilityDisaggregation.js +++ b/src/components/UtilityLine/UtilityDisaggregation.js @@ -7,7 +7,7 @@ import { generateBillDownload } from './dataInteraction'; class UtilityDisaggregation extends Component { state = { } - renderBillButtons = () => { + renderDownloadBtn = () => { const { disaggregateData } = this.props; let disaggregateVisibility = 'hidden'; @@ -20,7 +20,7 @@ class UtilityDisaggregation extends Component { const rSquaredText = `r2 is the disaggregation confidence measure. Below ${LOW_RSQUARED} is questionable. Below ${LOWEST_RSQUARED} is very bad`; return ( -
+ {this.props.rSquared ? this.props.rSquared.toFixed(3).replace(/^0+/, '') : ''} -
+ ); } render() { + if (!this.props.accountCreated) { + return
; + } + return (
- {this.props.accountCreated && this.renderBillButtons()} + + {this.renderDownloadBtn()}
- {this.props.accountCreated && this.props.renderUploadButton('Disaggregated Bill')} + {this.props.renderUploadButton('Disaggregated Bill')}
); @@ -65,6 +75,9 @@ UtilityDisaggregation.propTypes = { 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 150d6b07..bc84e6a8 100644 --- a/src/components/UtilityLine/UtilityLine.js +++ b/src/components/UtilityLine/UtilityLine.js @@ -275,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}` }); } @@ -395,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']; @@ -828,12 +820,10 @@ class UtilityLine extends Component { renderUploadButton={this.renderUploadButton} street_address={this.props.street_address} accountCreated={this.props.accountCreated} + disableDisaggregateBtn={this.disableDisaggregateBtn} + handleDisaggregateUtilityBill={this.handleDisaggregateUtilityBill} + loadingDisaggregate={this.state.loadingDisaggregate} /> - { - this.state.billData.length > 0 && - !this.state.editing && - this.renderDisaggregateBtn() - }
-- GitLab From a53d73c28b41a3be2414248a433d8cf8ba76bc22 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Mon, 29 Jan 2018 14:23:28 -0500 Subject: [PATCH 4/4] Rename usage type to weather related usage --- src/components/UtilityLine/UtilityLine.js | 2 +- src/components/UtilityLine/styles.css | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/UtilityLine/UtilityLine.js b/src/components/UtilityLine/UtilityLine.js index bc84e6a8..6336a8cc 100644 --- a/src/components/UtilityLine/UtilityLine.js +++ b/src/components/UtilityLine/UtilityLine.js @@ -610,7 +610,7 @@ class UtilityLine extends Component { onChange={this.handleInputChange} disabled={this.state.accountCreated && !this.state.editing} > - + diff --git a/src/components/UtilityLine/styles.css b/src/components/UtilityLine/styles.css index 3aa17535..40c1fc1f 100644 --- a/src/components/UtilityLine/styles.css +++ b/src/components/UtilityLine/styles.css @@ -1,4 +1,3 @@ .add { - /* padding: 5px !important; */ margin-bottom: 0 !important; } -- GitLab