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 * WooCommerce dependencies
*/ */
import { getIntervalForQuery, getDateFormatsForInterval } from '@woocommerce/date';
import { Link } from '@woocommerce/components'; import { Link } from '@woocommerce/components';
import { defaultTableDateFormat } from '@woocommerce/date';
import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency'; import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
/** /**
@ -67,10 +67,6 @@ export default class CouponsReportTable extends Component {
} }
getRowsContent( coupons ) { getRowsContent( coupons ) {
const { query } = this.props;
const currentInterval = getIntervalForQuery( query );
const { tableFormat } = getDateFormatsForInterval( currentInterval );
return map( coupons, coupon => { return map( coupons, coupon => {
const { amount, coupon_id, extended_info, orders_count } = coupon; const { amount, coupon_id, extended_info, orders_count } = coupon;
const { code, date_created, date_expires, discount_type } = extended_info; const { code, date_created, date_expires, discount_type } = extended_info;
@ -105,11 +101,13 @@ export default class CouponsReportTable extends Component {
value: getCurrencyFormatDecimal( amount ), value: getCurrencyFormatDecimal( amount ),
}, },
{ {
display: formatDate( tableFormat, date_created ), display: formatDate( defaultTableDateFormat, date_created ),
value: 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, value: date_expires,
}, },
{ {

View File

@ -9,7 +9,7 @@ import { format as formatDate } from '@wordpress/date';
/** /**
* WooCommerce dependencies * WooCommerce dependencies
*/ */
import { getDateFormatsForInterval, getIntervalForQuery } from '@woocommerce/date'; import { defaultTableDateFormat } from '@woocommerce/date';
import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency'; import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
import { Link } from '@woocommerce/components'; import { Link } from '@woocommerce/components';
@ -92,10 +92,6 @@ export default class CustomersReportTable extends Component {
} }
getRowsContent( customers ) { getRowsContent( customers ) {
const { query } = this.props;
const currentInterval = getIntervalForQuery( query );
const formats = getDateFormatsForInterval( currentInterval );
return customers.map( customer => { return customers.map( customer => {
const { const {
avg_order_value, avg_order_value,
@ -129,7 +125,7 @@ export default class CustomersReportTable extends Component {
value: username, value: username,
}, },
{ {
display: formatDate( formats.tableFormat, date_sign_up ), display: formatDate( defaultTableDateFormat, date_sign_up ),
value: date_sign_up, value: date_sign_up,
}, },
{ {
@ -149,7 +145,7 @@ export default class CustomersReportTable extends Component {
value: getCurrencyFormatDecimal( avg_order_value ), value: getCurrencyFormatDecimal( avg_order_value ),
}, },
{ {
display: formatDate( formats.tableFormat, date_last_active ), display: formatDate( defaultTableDateFormat, date_last_active ),
value: date_last_active, value: date_last_active,
}, },
{ {

View File

@ -11,7 +11,7 @@ import moment from 'moment';
/** /**
* WooCommerce dependencies * WooCommerce dependencies
*/ */
import { getIntervalForQuery, getCurrentDates, getDateFormatsForInterval } from '@woocommerce/date'; import { defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
import { Link } from '@woocommerce/components'; import { Link } from '@woocommerce/components';
import { getNewPath, getPersistedQuery } from '@woocommerce/navigation'; import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
@ -67,8 +67,6 @@ export default class CouponsReportTable extends Component {
getRowsContent( downloads ) { getRowsContent( downloads ) {
const { query } = this.props; const { query } = this.props;
const currentInterval = getIntervalForQuery( query );
const { tableFormat } = getDateFormatsForInterval( currentInterval );
const persistedQuery = getPersistedQuery( query ); const persistedQuery = getPersistedQuery( query );
return map( downloads, download => { return map( downloads, download => {
@ -83,7 +81,7 @@ export default class CouponsReportTable extends Component {
return [ return [
{ {
display: formatDate( tableFormat, date ), display: formatDate( defaultTableDateFormat, date ),
value: date, value: date,
}, },
{ {

View File

@ -11,12 +11,7 @@ import { map } from 'lodash';
/** /**
* WooCommerce dependencies * WooCommerce dependencies
*/ */
import { import { appendTimestamp, defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
appendTimestamp,
getCurrentDates,
getIntervalForQuery,
getDateFormatsForInterval,
} from '@woocommerce/date';
import { Link, OrderStatus, ViewMoreList } from '@woocommerce/components'; import { Link, OrderStatus, ViewMoreList } from '@woocommerce/components';
import { formatCurrency } from '@woocommerce/currency'; import { formatCurrency } from '@woocommerce/currency';
@ -102,9 +97,6 @@ class OrdersReportTable extends Component {
} }
getRowsContent( tableData ) { getRowsContent( tableData ) {
const { query } = this.props;
const currentInterval = getIntervalForQuery( query );
const { tableFormat } = getDateFormatsForInterval( currentInterval );
return map( tableData, row => { return map( tableData, row => {
const { const {
date, date,
@ -134,7 +126,7 @@ class OrdersReportTable extends Component {
return [ return [
{ {
display: formatDate( tableFormat, date ), display: formatDate( defaultTableDateFormat, date ),
value: date, value: date,
}, },
{ {

View File

@ -11,12 +11,7 @@ import { get } from 'lodash';
/** /**
* WooCommerce dependencies * WooCommerce dependencies
*/ */
import { import { appendTimestamp, defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
appendTimestamp,
getCurrentDates,
getDateFormatsForInterval,
getIntervalForQuery,
} from '@woocommerce/date';
import { Link } from '@woocommerce/components'; import { Link } from '@woocommerce/components';
import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency'; import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
@ -100,10 +95,6 @@ class RevenueReportTable extends Component {
} }
getRowsContent( data = [] ) { getRowsContent( data = [] ) {
const { query } = this.props;
const currentInterval = getIntervalForQuery( query );
const formats = getDateFormatsForInterval( currentInterval );
return data.map( row => { return data.map( row => {
const { const {
coupons, coupons,
@ -127,7 +118,7 @@ class RevenueReportTable extends Component {
); );
return [ return [
{ {
display: formatDate( formats.tableFormat, row.date_start ), display: formatDate( defaultTableDateFormat, row.date_start ),
value: row.date_start, value: row.date_start,
}, },
{ {

View File

@ -376,7 +376,7 @@ export function getAllowedIntervalsForQuery( query ) {
switch ( query.period ) { switch ( query.period ) {
case 'today': case 'today':
case 'yesterday': case 'yesterday':
allowed = [ 'hour' ]; allowed = [ 'hour', 'day' ];
break; break;
case 'week': case 'week':
case 'last_week': case 'last_week':
@ -395,7 +395,7 @@ export function getAllowedIntervalsForQuery( query ) {
allowed = [ 'day', 'week', 'month', 'quarter' ]; allowed = [ 'day', 'week', 'month', 'quarter' ];
break; break;
default: default:
allowed = [ 'day' ]; allowed = [ 'hour', 'day' ];
break; break;
} }
} }
@ -434,6 +434,7 @@ export function getChartTypeForQuery( { type } ) {
export const dayTicksThreshold = 63; export const dayTicksThreshold = 63;
export const weekTicksThreshold = 9; export const weekTicksThreshold = 9;
export const defaultTableDateFormat = 'm/d/Y';
/** /**
* Returns date formats for the current interval. * Returns date formats for the current interval.
@ -447,7 +448,7 @@ export function getDateFormatsForInterval( interval, ticks = 0 ) {
let tooltipLabelFormat = '%B %d, %Y'; let tooltipLabelFormat = '%B %d, %Y';
let xFormat = '%Y-%m-%d'; let xFormat = '%Y-%m-%d';
let x2Format = '%b %Y'; let x2Format = '%b %Y';
let tableFormat = 'm/d/Y'; let tableFormat = defaultTableDateFormat;
switch ( interval ) { switch ( interval ) {
case 'hour': case 'hour':