From d59594c4f60789c13c84c0f016f965ab294442e2 Mon Sep 17 00:00:00 2001
From: Robert Elliott <robert.elliott@automattic.com>
Date: Tue, 6 Nov 2018 16:02:16 +0200
Subject: [PATCH] at more than 9 weeks of ticks change xFormat to months and
 x2Format to years

---
 .../client/components/chart/utils.js          | 21 +++++++++----------
 .../packages/date/src/index.js                | 11 +++++++---
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/plugins/woocommerce-admin/client/components/chart/utils.js b/plugins/woocommerce-admin/client/components/chart/utils.js
index 9caba477ea3..3978ee3ba4e 100644
--- a/plugins/woocommerce-admin/client/components/chart/utils.js
+++ b/plugins/woocommerce-admin/client/components/chart/utils.js
@@ -374,6 +374,14 @@ export const compareStrings = ( s1, s2, splitChar = ' ' ) => {
 
 export const drawAxis = ( node, params ) => {
 	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 = [];
 	for ( let i = 0; i < 4; i++ ) {
@@ -390,7 +398,7 @@ export const drawAxis = ( node, params ) => {
 		.call(
 			d3AxisBottom( xScale )
 				.tickValues( ticks )
-				.tickFormat( d => params.xFormat( d instanceof Date ? d : new Date( d ) ) )
+				.tickFormat( ( d, i ) => removeDuplicateDates( d, i, ticks, params.xFormat ) )
 		);
 
 	node
@@ -401,16 +409,7 @@ export const drawAxis = ( node, params ) => {
 		.call(
 			d3AxisBottom( xScale )
 				.tickValues( ticks )
-				.tickFormat( ( d, i ) => {
-					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(
-								' '
-							);
-				} )
+				.tickFormat( ( d, i ) => removeDuplicateDates( d, i, ticks, params.x2Format ) )
 		)
 		.call( g => g.select( '.domain' ).remove() );
 
diff --git a/plugins/woocommerce-admin/packages/date/src/index.js b/plugins/woocommerce-admin/packages/date/src/index.js
index 27674c81c4e..63f3b6cb03a 100644
--- a/plugins/woocommerce-admin/packages/date/src/index.js
+++ b/plugins/woocommerce-admin/packages/date/src/index.js
@@ -412,7 +412,7 @@ export function getIntervalForQuery( query ) {
 }
 
 export const dayTicksThreshold = 63;
-export const weekTicksThreshold = 7;
+export const weekTicksThreshold = 9;
 
 /**
  * Returns date formats for the current interval.
@@ -445,8 +445,13 @@ export function getDateFormatsForInterval( interval, ticks = 0 ) {
 			}
 			break;
 		case 'week':
-			xFormat = '%d';
-			x2Format = '%b %Y';
+			if ( ticks < weekTicksThreshold ) {
+				xFormat = '%d';
+				x2Format = '%b %Y';
+			} else {
+				xFormat = '%b';
+				x2Format = '%Y';
+			}
 			tooltipFormat = __( 'Week of %B %d %Y', 'wc-admin' );
 			break;
 		case 'quarter':