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:
Joshua T Flowers 2019-01-09 08:24:49 +08:00 committed by GitHub
parent bdb9525afe
commit 80fe765657
6 changed files with 18 additions and 42 deletions

View File

@ -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,
},
{

View File

@ -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,
},
{

View File

@ -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,
},
{

View File

@ -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,
},
{

View File

@ -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,
},
{

View File

@ -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':