From 1894918cdae3700940cb32ad162740d6e9870a67 Mon Sep 17 00:00:00 2001 From: Conrad S Date: Tue, 7 Mar 2017 17:21:12 -0500 Subject: [PATCH 01/11] Initial support for changes to utilityservice --- package.json | 1 + src/components/Utilities/index.js | 43 ++++++++--- src/components/UtilityAccount/index.js | 103 ++++++++++++++++++++++--- 3 files changed, 123 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index f0a5c583..3cf42108 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "react-redux": "^4.4.5", "react-router": "^3.0.0", "react-router-redux": "^4.0.7", + "recharts": "^0.21.2", "redux": "^3.6.0", "redux-saga": "^0.14.2", "whatwg-fetch": "^1.0.0" diff --git a/src/components/Utilities/index.js b/src/components/Utilities/index.js index dbd1397c..1a764535 100644 --- a/src/components/Utilities/index.js +++ b/src/components/Utilities/index.js @@ -37,14 +37,18 @@ class Utilities extends Component { && (!billsRes.err)) { const boxBuildingList = billsRes.box_building_list; const allAccounts = accountRes.utilities.map((account) => { - const urlDownload = boxBuildingList.reduce((url, boxFile) => { - if (!url) { - if (boxFile.tags === account.account_number) { - return boxFile.url_download; - } + const urlDownloads = boxBuildingList.reduce((urls, boxFile) => { + const fileName = `${account.type}--${account.account_number}.csv`; + // Get the file if it's the scraped file + if (boxFile.name === `scraped--${fileName}`) { + return { ...urls, scrape: boxFile.url_download }; } - return url; - }, ''); + // Get the file if it's the disaggregated file + if (boxFile.name === `disaggregated--${fileName}`) { + return { ...urls, disaggregate: boxFile.url_download }; + } + return urls; + }, {}); return this.createUtilityComponent({ building_address: address, @@ -54,7 +58,7 @@ class Utilities extends Component { password: account.pass, access_code: account.access_code, }, - urlDownload, + urlDownloads, ); }); const blankAccount = this.createUtilityComponent(); @@ -71,7 +75,7 @@ class Utilities extends Component { }); } - updateUtilityBill = (form, updateLoadingState, setDownloadURL) => { + updateUtilityBill = (form, updateLoadingState, setDownloadURLs, setDisaggregateData) => { request(billsURL, { method: 'POST', headers: getHeaders(), @@ -84,7 +88,21 @@ class Utilities extends Component { if (res.err) { this.setState({ error: `Failed to retrieve utility bill. | ${res.err.message}` }); } else { - setDownloadURL(res.download_url); + setDownloadURLs({ + scrape: res.scrape_download_url, + disaggregate: res.disaggregate_download_url, + }); + /* eslint-disable dot-notation */ + const disaggregateData = res.disaggregate_csv_output.map(val => ({ + billFromDate: val['Bill From Date'], + billToDate: val['Bill To Date'], + daysInBill: val['Days In Bill'], + usage: val['Usage'], + heating: val['Heating Usage'], + cooling: val['Heating Usage'], + })); + setDisaggregateData(disaggregateData); + this.resetErrorMessage(); } updateLoadingState(false); @@ -139,14 +157,15 @@ class Utilities extends Component { }); } - createUtilityComponent = (incForm, downloadURL = '') => { + createUtilityComponent = (incForm, downloadURLs = {}, disaggregateData = []) => { let accountProps = {}; const { accountsCounter } = this.state; if (incForm !== undefined) { accountProps = { form: incForm, - downloadURL, + downloadURLs, + disaggregateData, disabled: true, }; } diff --git a/src/components/UtilityAccount/index.js b/src/components/UtilityAccount/index.js index 9d052709..61db1749 100644 --- a/src/components/UtilityAccount/index.js +++ b/src/components/UtilityAccount/index.js @@ -1,4 +1,5 @@ import React, { Component, PropTypes } from 'react'; +import { BarChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Bar } from 'recharts'; import './styles.css'; class UtilityAccount extends Component { @@ -13,13 +14,23 @@ class UtilityAccount extends Component { password: this.props.form.password, access_code: this.props.form.access_code, }, - downloadURL: this.props.downloadURL, + downloadURLs: { + scrape: this.props.downloadURLs.scrape, + disaggregate: this.props.downloadURLs.disaggregate, + }, + disaggregateData: this.props.disaggregateData, disabled: this.props.disabled, + displayChart: false, loading: false, }; } - setDownloadURL = url => ( - this.setState({ downloadURL: url }) + + setDownloadURLs = urls => ( + this.setState({ downloadURLs: urls }) + ) + + setDisaggregateData = data => ( + this.setState({ disaggregateData: data }) ) updateLoadingState = isLoading => ( @@ -38,7 +49,8 @@ class UtilityAccount extends Component { handleUpdatingUtilityBill = (event) => { event.preventDefault(); this.updateLoadingState(true); - this.props.updateUtilityBill(this.state.form, this.updateLoadingState, this.setDownloadURL); + this.props.updateUtilityBill(this.state.form, this.updateLoadingState, + this.setDownloadURLs, this.setDisaggregateData); } handleCreateAccount = (event) => { @@ -52,6 +64,11 @@ class UtilityAccount extends Component { this.props.deleteAccount(this); } + toggleChartDisplay = (event) => { + event.preventDefault(); + this.setState({ displayChart: !this.state.displayChart }); + } + isAccountNumberLong = () => this.state.form.account_number.length > 15; showAccountWarning = () => (this.isAccountNumberLong() ? @@ -76,21 +93,44 @@ class UtilityAccount extends Component { } renderFetchAndDownloadBtn = () => { - const { downloadURL } = this.state; - let visibility = 'hidden'; - if (downloadURL !== undefined && downloadURL !== '') { - visibility = 'visible'; + const { scrape, disaggregate } = this.state.downloadURLs; + let scrapeVisibility = 'hidden'; + if (scrape !== undefined && scrape !== '') { + scrapeVisibility = 'visible'; + } + let disaggregateVisibility = 'hidden'; + if (disaggregate !== undefined && disaggregate !== '') { + disaggregateVisibility = 'visible'; + } + let disaggregateChart = (); + if (this.state.disaggregateData.length > 0) { + disaggregateChart = ( + + ); } return (
+ Scraped Bill + + - Download + Disaggregated Bill + {disaggregateChart} ); + if (this.state.displayChart) { + chartDownload = ( + + ); + } } return ( @@ -130,7 +162,8 @@ class UtilityAccount extends Component { > Disaggregated Bill - {disaggregateChart} + {chartToggle} + {chartDownload}