Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request woocommerce/woocommerce-admin#785 from woocommerce/add/chart-63day-x1month-x2year 

Component - chart: more than 9 weeks of ticks change xFormat to months & x2Format to yrs
This commit is contained in:
Robert Elliott 2018-11-13 10:16:01 +02:00 committed by GitHub
parent 59a3db306e 703c1ca33a
commit bd1997b725
2 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
plugins/woocommerce-admin/client/components/chart/utils.js
View File

@ -19,7 +19,7 @@ import { format as formatDate } from '@wordpress/date';
/** /**
* WooCommerce dependencies * WooCommerce dependencies
*/ */
import { dayTicksThreshold } from '@woocommerce/date'; import { dayTicksThreshold, weekTicksThreshold } from '@woocommerce/date';
import { formatCurrency } from '@woocommerce/currency'; import { formatCurrency } from '@woocommerce/currency';
/** /**
@ -303,7 +303,10 @@ const calculateXTicksIncrementFactor = ( uniqueDates, maxTicks ) => {
export const getXTicks = ( uniqueDates, width, layout, interval ) => { export const getXTicks = ( uniqueDates, width, layout, interval ) => {
const maxTicks = calculateMaxXTicks( width, layout ); const maxTicks = calculateMaxXTicks( width, layout );
if ( uniqueDates.length >= dayTicksThreshold && interval === 'day' ) { if (
( uniqueDates.length >= dayTicksThreshold && interval === 'day' ) ||
( uniqueDates.length >= weekTicksThreshold && interval === 'week' )
) {
uniqueDates = getFirstDatePerMonth( uniqueDates ); uniqueDates = getFirstDatePerMonth( uniqueDates );
} }
if ( uniqueDates.length <= maxTicks ) { if ( uniqueDates.length <= maxTicks ) {
@ -374,6 +377,14 @@ export const compareStrings = ( s1, s2, splitChar = ' ' ) => {
export const drawAxis = ( node, params ) => { export const drawAxis = ( node, params ) => {
const xScale = params.type === 'line' ? params.xLineScale : params.xScale; const xScale = params.type === 'line' ? params.xLineScale : params.xScale;
const removeDuplicateDates = ( d, i, ticks, formatter ) => {
const monthDate = d instanceof Date ? d : new Date( d );
let prevMonth = i !== 0 ? ticks[ i - 1 ] : ticks[ i ];
prevMonth = prevMonth instanceof Date ? prevMonth : new Date( prevMonth );
return i === 0
? formatter( monthDate )
: compareStrings( formatter( prevMonth ), formatter( monthDate ) ).join( ' ' );
};
const yGrids = []; const yGrids = [];
for ( let i = 0; i < 4; i++ ) { for ( let i = 0; i < 4; i++ ) {
@ -390,7 +401,7 @@ export const drawAxis = ( node, params ) => {
.call( .call(
d3AxisBottom( xScale ) d3AxisBottom( xScale )
.tickValues( ticks ) .tickValues( ticks )
.tickFormat( d => params.xFormat( d instanceof Date ? d : new Date( d ) ) ) .tickFormat( ( d, i ) => removeDuplicateDates( d, i, ticks, params.xFormat ) )
); );
node node
@ -401,16 +412,7 @@ export const drawAxis = ( node, params ) => {
.call( .call(
d3AxisBottom( xScale ) d3AxisBottom( xScale )
.tickValues( ticks ) .tickValues( ticks )
.tickFormat( ( d, i ) => { .tickFormat( ( d, i ) => removeDuplicateDates( d, i, ticks, params.x2Format ) )
const monthDate = d instanceof Date ? d : new Date( d );
let prevMonth = i !== 0 ? ticks[ i - 1 ] : ticks[ i ];
prevMonth = prevMonth instanceof Date ? prevMonth : new Date( prevMonth );
return i === 0
? params.x2Format( monthDate )
: compareStrings( params.x2Format( prevMonth ), params.x2Format( monthDate ) ).join(
' '
);
} )
) )
.call( g => g.select( '.domain' ).remove() ); .call( g => g.select( '.domain' ).remove() );

11
plugins/woocommerce-admin/packages/date/src/index.js
View File

@ -412,7 +412,7 @@ export function getIntervalForQuery( query ) {
} }
export const dayTicksThreshold = 63; export const dayTicksThreshold = 63;
export const weekTicksThreshold = 7; export const weekTicksThreshold = 9;
/** /**
* Returns date formats for the current interval. * Returns date formats for the current interval.
@ -445,8 +445,13 @@ export function getDateFormatsForInterval( interval, ticks = 0 ) {
} }
break; break;
case 'week': case 'week':
xFormat = '%d'; if ( ticks < weekTicksThreshold ) {
x2Format = '%b %Y'; xFormat = '%d';
x2Format = '%b %Y';
} else {
xFormat = '%b';
x2Format = '%Y';
}
tooltipFormat = __( 'Week of %B %d %Y', 'wc-admin' ); tooltipFormat = __( 'Week of %B %d %Y', 'wc-admin' );
break; break;
case 'quarter': case 'quarter':