Merge pull request woocommerce/woocommerce-admin#393 from woocommerce/fix/rev-report-chart-date-parser

Revenue Report: align date formats for the chart

plugins/woocommerce-admin/client/analytics/report/revenue/index.js

@@ -346,7 +346,8 @@ export class RevenueReport extends Component {
 					allowedIntervals={ allowedIntervals }
 					tooltipFormat={ formats.tooltipFormat }
 					xFormat={ formats.xFormat }
-					dateParser={ '%Y-%m-%d' }
+					x2Format={ formats.x2Format }
+					dateParser={ '%Y-%m-%dT%H:%M:%S' }
 				/>
 			</Card>
 		);

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

@@ -2,13 +2,16 @@
 /**
  * External dependencies
  */
+
+import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
-import { isEqual, partial } from 'lodash';
+import { get, isEqual, partial } from 'lodash';
 import { Component, createRef } from '@wordpress/element';
 import { IconButton, SelectControl } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import { interpolateViridis as d3InterpolateViridis } from 'd3-scale-chromatic';
+import { formatDefaultLocale as d3FormatDefaultLocale } from 'd3-format';
 import Gridicon from 'gridicons';
 
 /**
@@ -21,6 +24,13 @@ import { updateQueryString } from 'lib/nav-utils';
 
 const WIDE_BREAKPOINT = 1100;
 
+d3FormatDefaultLocale( {
+	decimal: '.',
+	thousands: ',',
+	grouping: [ 3 ],
+	currency: [ decodeEntities( get( wcSettings, 'currency.symbol', '' ) ), '' ],
+} );
+
 function getOrderedKeys( props ) {
 	const updatedKeys = [
 		...new Set(

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

@@ -164,14 +164,6 @@
 		padding-top: 10px;
 		stroke-width: 1;
 	}
-	.axis-month {
-		.tick {
-			opacity: 0;
-			&:first-child {
-				opacity: 1;
-			}
-		}
-	}
 	.y-axis {
 		text-anchor: start;
 		&.tick {

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

@@ -4,10 +4,10 @@
  * External dependencies
  */
 
-import { findIndex, get } from 'lodash';
+import { findIndex } from 'lodash';
 import { max as d3Max } from 'd3-array';
 import { axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis';
-import { format as d3Format, formatDefaultLocale as d3FormatDefaultLocale } from 'd3-format';
+import { format as d3Format } from 'd3-format';
 import {
 	scaleBand as d3ScaleBand,
 	scaleLinear as d3ScaleLinear,
@@ -20,16 +20,6 @@ import { line as d3Line } from 'd3-shape';
  */
 import { formatCurrency } from 'lib/currency';
 
-function decodeSymbol( str ) {
-	return str.replace( /&#(\d+);/g, ( match, dec ) => String.fromCharCode( dec ) );
-}
-
-d3FormatDefaultLocale( {
-	decimal: '.',
-	thousands: ',',
-	grouping: [ 3 ],
-	currency: [ decodeSymbol( get( wcSettings, 'currency.symbol', '' ) ), '' ],
-} );
 /**
  * Describes `getUniqueKeys`
  * @param {array} data - The chart component's `data` prop.
@@ -250,7 +240,10 @@ export const drawAxis = ( node, params ) => {
 		.call(
 			d3AxisBottom( xScale )
 				.tickValues( params.uniqueDates.map( d => ( params.type === 'line' ? new Date( d ) : d ) ) )
-				.tickFormat( d => params.x2Format( d instanceof Date ? d : new Date( d ) ) )
+				.tickFormat( ( d, i ) => {
+					const monthDate = d instanceof Date ? d : new Date( d );
+					return monthDate.getDate() === 1 || i === 0 ? params.x2Format( monthDate ) : '';
+				} )
 		)
 		.call( g => g.select( '.domain' ).remove() );
 

plugins/woocommerce-admin/client/lib/date/index.js

@@ -400,6 +400,7 @@ export function getIntervalForQuery( query ) {
 export function getDateFormatsForInterval( interval ) {
 	let tooltipFormat = '%B %d %Y';
 	let xFormat = '%Y-%m-%d';
+	let x2Format = '%b %y';
 	let tableFormat = 'm/d/Y';
 
 	switch ( interval ) {
@@ -408,13 +409,18 @@ export function getDateFormatsForInterval( interval ) {
 			xFormat = '%I %p';
 			tableFormat = 'h A';
 			break;
+		case 'day':
+			xFormat = '%d';
+			break;
 		case 'week':
+			xFormat = '%d';
 			tooltipFormat = __( 'Week of %B %d %Y', 'wc-admin' );
 			break;
 		case 'quarter':
 		case 'month':
 			tooltipFormat = '%B %Y';
 			xFormat = '%b %y';
+			x2Format = '';
 			tableFormat = 'M Y';
 			break;
 		case 'year':
@@ -427,6 +433,7 @@ export function getDateFormatsForInterval( interval ) {
 	return {
 		tooltipFormat,
 		xFormat,
+		x2Format,
 		tableFormat,
 	};
 }

plugins/woocommerce-admin/package-lock.json

@@ -8190,6 +8190,11 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "he": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
+      "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
+    },
     "history": {
       "version": "4.7.2",
       "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",

plugins/woocommerce-admin/package.json

@@ -99,6 +99,7 @@
     "d3-selection": "^1.3.0",
     "d3-shape": "^1.2.0",
     "d3-time-format": "^2.1.1",
+    "he": "^1.1.1",
     "lodash": "^4.17.10",
     "react-dates": "^16.7.0",
     "react-slot-fill": "^2.0.1",