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); }} - > - {billText} - - - - -
- {this.renderUploadButton('Bill')} -
-
- { this.handleBillGAEvent(disaggregateText); }} - > - {disaggregateText} - - - {this.state.rSquared ? this.state.rSquared.toFixed(3).replace(/^0+/, '') : ''} - -
- {this.renderUploadButton('Disaggregated Bill')} -
-
+ + { 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; +}