2018-06-14 20:15:11 +00:00
|
|
|
/** @format */
|
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { Component, Fragment } from '@wordpress/element';
|
2018-09-03 15:25:38 +00:00
|
|
|
import { compose } from '@wordpress/compose';
|
2018-06-14 20:15:11 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2018-09-03 15:25:38 +00:00
|
|
|
import { withSelect } from '@wordpress/data';
|
2018-10-23 08:07:23 +00:00
|
|
|
import { get } from 'lodash';
|
2018-06-14 20:15:11 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
2018-10-23 08:07:23 +00:00
|
|
|
import { ReportFilters } from '@woocommerce/components';
|
|
|
|
import { appendTimestamp, getCurrentDates } from 'lib/date';
|
|
|
|
import RevenueReportChart from './chart';
|
|
|
|
import RevenueReportTable from './table';
|
2018-06-20 15:09:37 +00:00
|
|
|
|
2018-09-03 15:25:38 +00:00
|
|
|
export class RevenueReport extends Component {
|
2018-06-26 14:59:35 +00:00
|
|
|
constructor() {
|
|
|
|
super();
|
2018-09-03 15:25:38 +00:00
|
|
|
}
|
|
|
|
|
Add loading indicators, error state, and EmptyContent to the revenue report. (#347, woocommerce/woocommerce-admin#348)
* Add loading indiciators for the revenue report.
* Improve accessibility, and fix up some documentation comments.
* Fix top border on mobile
* Add EmptyContent Component and revenue error/empty states. (https://github.com/woocommerce/woocommerce-admin/pull/348)
* Add EmptyContent Component and revenue error/empty states.
* Move relative image handling to ImageAsset, combine secondary and primary action rendering, add some missing isRequired proptypes, add empty error handling.
* Handle PR Feedback: Clean up button css, set a default for illustration, fix deprecation typo, some code cleanup.
2018-09-05 16:45:49 +00:00
|
|
|
render() {
|
2018-10-23 08:07:23 +00:00
|
|
|
const { isTableDataError, isTableDataRequesting, path, query, tableData } = this.props;
|
2018-06-20 15:09:37 +00:00
|
|
|
|
2018-06-14 20:15:11 +00:00
|
|
|
return (
|
|
|
|
<Fragment>
|
2018-08-08 21:24:48 +00:00
|
|
|
<ReportFilters query={ query } path={ path } />
|
2018-10-23 08:07:23 +00:00
|
|
|
<RevenueReportChart query={ query } />
|
|
|
|
<RevenueReportTable
|
|
|
|
isError={ isTableDataError }
|
|
|
|
isRequesting={ isTableDataRequesting }
|
|
|
|
tableData={ tableData }
|
|
|
|
query={ query }
|
|
|
|
totalRows={ get( tableData, [ 'totalResults' ], 0 ) }
|
|
|
|
/>
|
2018-06-14 20:15:11 +00:00
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
RevenueReport.propTypes = {
|
|
|
|
params: PropTypes.object.isRequired,
|
|
|
|
path: PropTypes.string.isRequired,
|
|
|
|
query: PropTypes.object.isRequired,
|
|
|
|
};
|
|
|
|
|
2018-09-03 15:25:38 +00:00
|
|
|
export default compose(
|
|
|
|
withSelect( ( select, props ) => {
|
|
|
|
const { query } = props;
|
2018-10-10 13:57:16 +00:00
|
|
|
const { getReportStats, isReportStatsRequesting, isReportStatsError } = select( 'wc-admin' );
|
2018-09-03 15:25:38 +00:00
|
|
|
const datesFromQuery = getCurrentDates( query );
|
|
|
|
|
2018-10-10 13:57:16 +00:00
|
|
|
// TODO Support hour here when viewing a single day
|
|
|
|
const tableQuery = {
|
|
|
|
interval: 'day',
|
|
|
|
orderby: query.orderby || 'date',
|
|
|
|
order: query.order || 'asc',
|
|
|
|
page: query.page || 1,
|
|
|
|
per_page: query.per_page || 25,
|
2018-10-17 16:01:58 +00:00
|
|
|
after: appendTimestamp( datesFromQuery.primary.after, 'start' ),
|
|
|
|
before: appendTimestamp( datesFromQuery.primary.before, 'end' ),
|
2018-10-10 13:57:16 +00:00
|
|
|
};
|
|
|
|
const tableData = getReportStats( 'revenue', tableQuery );
|
|
|
|
const isTableDataError = isReportStatsError( 'revenue', tableQuery );
|
|
|
|
const isTableDataRequesting = isReportStatsRequesting( 'revenue', tableQuery );
|
|
|
|
|
2018-09-03 15:25:38 +00:00
|
|
|
return {
|
2018-10-10 13:57:16 +00:00
|
|
|
tableQuery,
|
|
|
|
tableData,
|
|
|
|
isTableDataError,
|
|
|
|
isTableDataRequesting,
|
2018-09-03 15:25:38 +00:00
|
|
|
};
|
|
|
|
} )
|
|
|
|
)( RevenueReport );
|