Use a date instead of hour for single dates in report tables (https://github.com/woocommerce/woocommerce-admin/pull/1208)
* Use a date instead of hour for single dates in report tables * Add hour to allowed list when day difference is less than 1 * Prioritize hour format over day and set day as default for tables * Add default intervals for report tables * Use explicit date format in report tables * Add constant for default table format * Restore allowed intervals for >1 && <7 days
This commit is contained in:
parent
bdb9525afe
commit
80fe765657
|
@ -10,8 +10,8 @@ import { map } from 'lodash';
|
|||
/**
|
||||
* WooCommerce dependencies
|
||||
*/
|
||||
import { getIntervalForQuery, getDateFormatsForInterval } from '@woocommerce/date';
|
||||
import { Link } from '@woocommerce/components';
|
||||
import { defaultTableDateFormat } from '@woocommerce/date';
|
||||
import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
|
||||
|
||||
/**
|
||||
|
@ -67,10 +67,6 @@ export default class CouponsReportTable extends Component {
|
|||
}
|
||||
|
||||
getRowsContent( coupons ) {
|
||||
const { query } = this.props;
|
||||
const currentInterval = getIntervalForQuery( query );
|
||||
const { tableFormat } = getDateFormatsForInterval( currentInterval );
|
||||
|
||||
return map( coupons, coupon => {
|
||||
const { amount, coupon_id, extended_info, orders_count } = coupon;
|
||||
const { code, date_created, date_expires, discount_type } = extended_info;
|
||||
|
@ -105,11 +101,13 @@ export default class CouponsReportTable extends Component {
|
|||
value: getCurrencyFormatDecimal( amount ),
|
||||
},
|
||||
{
|
||||
display: formatDate( tableFormat, date_created ),
|
||||
display: formatDate( defaultTableDateFormat, date_created ),
|
||||
value: date_created,
|
||||
},
|
||||
{
|
||||
display: date_expires ? formatDate( tableFormat, date_expires ) : __( 'N/A', 'wc-admin' ),
|
||||
display: date_expires
|
||||
? formatDate( defaultTableDateFormat, date_expires )
|
||||
: __( 'N/A', 'wc-admin' ),
|
||||
value: date_expires,
|
||||
},
|
||||
{
|
||||
|
|
|
@ -9,7 +9,7 @@ import { format as formatDate } from '@wordpress/date';
|
|||
/**
|
||||
* WooCommerce dependencies
|
||||
*/
|
||||
import { getDateFormatsForInterval, getIntervalForQuery } from '@woocommerce/date';
|
||||
import { defaultTableDateFormat } from '@woocommerce/date';
|
||||
import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
|
||||
import { Link } from '@woocommerce/components';
|
||||
|
||||
|
@ -92,10 +92,6 @@ export default class CustomersReportTable extends Component {
|
|||
}
|
||||
|
||||
getRowsContent( customers ) {
|
||||
const { query } = this.props;
|
||||
const currentInterval = getIntervalForQuery( query );
|
||||
const formats = getDateFormatsForInterval( currentInterval );
|
||||
|
||||
return customers.map( customer => {
|
||||
const {
|
||||
avg_order_value,
|
||||
|
@ -129,7 +125,7 @@ export default class CustomersReportTable extends Component {
|
|||
value: username,
|
||||
},
|
||||
{
|
||||
display: formatDate( formats.tableFormat, date_sign_up ),
|
||||
display: formatDate( defaultTableDateFormat, date_sign_up ),
|
||||
value: date_sign_up,
|
||||
},
|
||||
{
|
||||
|
@ -149,7 +145,7 @@ export default class CustomersReportTable extends Component {
|
|||
value: getCurrencyFormatDecimal( avg_order_value ),
|
||||
},
|
||||
{
|
||||
display: formatDate( formats.tableFormat, date_last_active ),
|
||||
display: formatDate( defaultTableDateFormat, date_last_active ),
|
||||
value: date_last_active,
|
||||
},
|
||||
{
|
||||
|
|
|
@ -11,7 +11,7 @@ import moment from 'moment';
|
|||
/**
|
||||
* WooCommerce dependencies
|
||||
*/
|
||||
import { getIntervalForQuery, getCurrentDates, getDateFormatsForInterval } from '@woocommerce/date';
|
||||
import { defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
|
||||
import { Link } from '@woocommerce/components';
|
||||
import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
|
||||
|
||||
|
@ -67,8 +67,6 @@ export default class CouponsReportTable extends Component {
|
|||
|
||||
getRowsContent( downloads ) {
|
||||
const { query } = this.props;
|
||||
const currentInterval = getIntervalForQuery( query );
|
||||
const { tableFormat } = getDateFormatsForInterval( currentInterval );
|
||||
const persistedQuery = getPersistedQuery( query );
|
||||
|
||||
return map( downloads, download => {
|
||||
|
@ -83,7 +81,7 @@ export default class CouponsReportTable extends Component {
|
|||
|
||||
return [
|
||||
{
|
||||
display: formatDate( tableFormat, date ),
|
||||
display: formatDate( defaultTableDateFormat, date ),
|
||||
value: date,
|
||||
},
|
||||
{
|
||||
|
|
|
@ -11,12 +11,7 @@ import { map } from 'lodash';
|
|||
/**
|
||||
* WooCommerce dependencies
|
||||
*/
|
||||
import {
|
||||
appendTimestamp,
|
||||
getCurrentDates,
|
||||
getIntervalForQuery,
|
||||
getDateFormatsForInterval,
|
||||
} from '@woocommerce/date';
|
||||
import { appendTimestamp, defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
|
||||
import { Link, OrderStatus, ViewMoreList } from '@woocommerce/components';
|
||||
import { formatCurrency } from '@woocommerce/currency';
|
||||
|
||||
|
@ -102,9 +97,6 @@ class OrdersReportTable extends Component {
|
|||
}
|
||||
|
||||
getRowsContent( tableData ) {
|
||||
const { query } = this.props;
|
||||
const currentInterval = getIntervalForQuery( query );
|
||||
const { tableFormat } = getDateFormatsForInterval( currentInterval );
|
||||
return map( tableData, row => {
|
||||
const {
|
||||
date,
|
||||
|
@ -134,7 +126,7 @@ class OrdersReportTable extends Component {
|
|||
|
||||
return [
|
||||
{
|
||||
display: formatDate( tableFormat, date ),
|
||||
display: formatDate( defaultTableDateFormat, date ),
|
||||
value: date,
|
||||
},
|
||||
{
|
||||
|
|
|
@ -11,12 +11,7 @@ import { get } from 'lodash';
|
|||
/**
|
||||
* WooCommerce dependencies
|
||||
*/
|
||||
import {
|
||||
appendTimestamp,
|
||||
getCurrentDates,
|
||||
getDateFormatsForInterval,
|
||||
getIntervalForQuery,
|
||||
} from '@woocommerce/date';
|
||||
import { appendTimestamp, defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
|
||||
import { Link } from '@woocommerce/components';
|
||||
import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
|
||||
|
||||
|
@ -100,10 +95,6 @@ class RevenueReportTable extends Component {
|
|||
}
|
||||
|
||||
getRowsContent( data = [] ) {
|
||||
const { query } = this.props;
|
||||
const currentInterval = getIntervalForQuery( query );
|
||||
const formats = getDateFormatsForInterval( currentInterval );
|
||||
|
||||
return data.map( row => {
|
||||
const {
|
||||
coupons,
|
||||
|
@ -127,7 +118,7 @@ class RevenueReportTable extends Component {
|
|||
);
|
||||
return [
|
||||
{
|
||||
display: formatDate( formats.tableFormat, row.date_start ),
|
||||
display: formatDate( defaultTableDateFormat, row.date_start ),
|
||||
value: row.date_start,
|
||||
},
|
||||
{
|
||||
|
|
|
@ -376,7 +376,7 @@ export function getAllowedIntervalsForQuery( query ) {
|
|||
switch ( query.period ) {
|
||||
case 'today':
|
||||
case 'yesterday':
|
||||
allowed = [ 'hour' ];
|
||||
allowed = [ 'hour', 'day' ];
|
||||
break;
|
||||
case 'week':
|
||||
case 'last_week':
|
||||
|
@ -395,7 +395,7 @@ export function getAllowedIntervalsForQuery( query ) {
|
|||
allowed = [ 'day', 'week', 'month', 'quarter' ];
|
||||
break;
|
||||
default:
|
||||
allowed = [ 'day' ];
|
||||
allowed = [ 'hour', 'day' ];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
@ -434,6 +434,7 @@ export function getChartTypeForQuery( { type } ) {
|
|||
|
||||
export const dayTicksThreshold = 63;
|
||||
export const weekTicksThreshold = 9;
|
||||
export const defaultTableDateFormat = 'm/d/Y';
|
||||
|
||||
/**
|
||||
* Returns date formats for the current interval.
|
||||
|
@ -447,7 +448,7 @@ export function getDateFormatsForInterval( interval, ticks = 0 ) {
|
|||
let tooltipLabelFormat = '%B %d, %Y';
|
||||
let xFormat = '%Y-%m-%d';
|
||||
let x2Format = '%b %Y';
|
||||
let tableFormat = 'm/d/Y';
|
||||
let tableFormat = defaultTableDateFormat;
|
||||
|
||||
switch ( interval ) {
|
||||
case 'hour':
|
||||
|
|
Loading…
Reference in New Issue