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

110 lines
3.2 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 ReportError from 'analytics/components/report-error';
class ReportChart extends Component {
render() {
const { primaryData, secondaryData, selectedChart, query } = this.props;
if ( primaryData.isError || secondaryData.isError ) {
return <ReportError isError />;
}
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' }
valueType={ selectedChart.type }
/>
);
}
}
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 primaryData = getReportChartData( endpoint, 'primary', query, select );
const secondaryData = getReportChartData( endpoint, 'secondary', query, select );
return {
primaryData,
secondaryData,
};
} )
)( ReportChart );