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
|
* 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,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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':
|
||||||
|
|
Loading…
Reference in New Issue