woocommerce/plugins/woocommerce-admin/client/analytics/components/report-chart/index.js

130 lines
3.4 KiB
JavaScript

/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { format as formatDate } from '@wordpress/date';
import { withSelect } from '@wordpress/data';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import { Chart, ChartPlaceholder } from '@woocommerce/components';
import {
getAllowedIntervalsForQuery,
getCurrentDates,
getDateFormatsForInterval,
getIntervalForQuery,
getPreviousDate,
} from 'lib/date';
import { getReportChartData } from 'store/reports/utils';
import { MAX_PER_PAGE } from 'store/constants';
class ReportChart extends Component {
render() {
const { primaryData, secondaryData, selectedChart, query } = this.props;
if ( primaryData.isRequesting || secondaryData.isRequesting ) {
return (
<Fragment>
<span className="screen-reader-text">
{ __( 'Your requested data is loading', 'wc-admin' ) }
</span>
<ChartPlaceholder />
</Fragment>
);
}
const currentInterval = getIntervalForQuery( query );
const allowedIntervals = getAllowedIntervalsForQuery( query );
const formats = getDateFormatsForInterval( currentInterval, primaryData.data.intervals.length );
const { primary, secondary } = getCurrentDates( query );
const primaryKey = `${ primary.label } (${ primary.range })`;
const secondaryKey = `${ secondary.label } (${ secondary.range })`;
const chartData = primaryData.data.intervals.map( function( interval, index ) {
const secondaryDate = getPreviousDate(
formatDate( 'Y-m-d', interval.date_start ),
primary.after,
secondary.after,
query.compare,
currentInterval
);
const secondaryInterval = secondaryData.data.intervals[ index ];
return {
date: formatDate( 'Y-m-d\\TH:i:s', interval.date_start ),
[ primaryKey ]: {
labelDate: interval.date_start,
value: interval.subtotals[ selectedChart.key ] || 0,
},
[ secondaryKey ]: {
labelDate: secondaryDate,
value: ( secondaryInterval && secondaryInterval.subtotals[ selectedChart.key ] ) || 0,
},
};
} );
return (
<Chart
data={ chartData }
title={ selectedChart.label }
interval={ currentInterval }
allowedIntervals={ allowedIntervals }
mode="time-comparison"
pointLabelFormat={ formats.pointLabelFormat }
tooltipTitle={ selectedChart.label }
xFormat={ formats.xFormat }
x2Format={ formats.x2Format }
dateParser={ '%Y-%m-%dT%H:%M:%S' }
/>
);
}
}
ReportChart.propTypes = {
primaryData: PropTypes.object.isRequired,
secondaryData: PropTypes.object.isRequired,
selectedChart: PropTypes.object.isRequired,
query: PropTypes.object.isRequired,
};
export default compose(
withSelect( ( select, props ) => {
const { query, endpoint } = props;
const interval = getIntervalForQuery( query );
const datesFromQuery = getCurrentDates( query );
const baseArgs = {
order: 'asc',
interval: interval,
per_page: MAX_PER_PAGE,
};
const primaryData = getReportChartData(
endpoint,
{
...baseArgs,
after: datesFromQuery.primary.after,
before: datesFromQuery.primary.before,
},
select
);
const secondaryData = getReportChartData(
endpoint,
{
...baseArgs,
after: datesFromQuery.secondary.after,
before: datesFromQuery.secondary.before,
},
select
);
return {
primaryData,
secondaryData,
};
} )
)( ReportChart );