pipes, months, formatting

plugins/woocommerce-admin/client/components/chart/index.js

@@ -135,7 +135,7 @@ class Chart extends Component {
 		);
 		const margin = {
 			bottom: 50,
-			left: 50,
+			left: 80,
 			right: 10,
 			top: 0,
 		};

plugins/woocommerce-admin/client/components/chart/style.scss

@@ -100,16 +100,32 @@
 		}
 	}
 	.grid {
-		line {
-			stroke: $core-grey-light-200;
-			stroke-width: 1;
-			shape-rendering: crispEdges;
+		.tick {
+			line {
+				stroke: $core-grey-light-200;
+				stroke-width: 1;
+				shape-rendering: crispEdges;
+			}
+
+			&:first-child {
+				line {
+					stroke: $core-grey-dark-500;
+				}
+			}
 		}
 	}
 	.tick {
 		padding-top: 10px;
 		stroke-width: 1;
 	}
+	.axis-month {
+		.tick {
+			display: none;
+			&:first-child {
+				display: inline;
+			}
+		}
+	}
 	.y-axis {
 		&.tick {
 			&text {

plugins/woocommerce-admin/client/components/chart/utils.js

@@ -217,6 +217,28 @@ export const drawAxis = ( node, params ) => {
 				.tickFormat( d => params.xFormat( d instanceof Date ? d : new Date( d ) ) )
 		);
 
+	node
+		.append( 'g' )
+		.attr( 'class', 'axis axis-month' )
+		.attr( 'transform', `translate(15, ${ params.height + 20 })` )
+		.call(
+			d3AxisBottom( xScale )
+				.tickValues( params.uniqueDates.map( d => ( params.type === 'line' ? new Date( d ) : d ) ) )
+				.tickFormat( d => d3TimeFormat( '%b %Y' )( d instanceof Date ? d : new Date( d ) ) )
+		)
+		.call( g => g.select( '.domain' ).remove() );
+
+	node
+		.append( 'g' )
+		.attr( 'class', 'pipes' )
+		.attr( 'transform', `translate(0, ${ params.height })` )
+		.call(
+			d3AxisBottom( xScale )
+				.tickValues( params.uniqueDates.map( d => ( params.type === 'line' ? new Date( d ) : d ) ) )
+				.tickSize( 5 )
+				.tickFormat( '' )
+		);
+
 	node
 		.append( 'g' )
 		.attr( 'class', 'grid' )
@@ -232,6 +254,8 @@ export const drawAxis = ( node, params ) => {
 	node
 		.append( 'g' )
 		.attr( 'class', 'axis y-axis' )
+		.attr( 'transform', 'translate(-20, 0)' )
+		.attr( 'text-anchor', 'left' )
 		.call(
 			d3AxisLeft( params.yTickOffset )
 				.tickValues( yGrids )