Update tooltip title and labels in standard graphs (https://github.com/woocommerce/woocommerce-admin/pull/458)

* Allow adding a label for each specific point in a chart

* Update test fixtures

* Update README with new data format

* Simplify getPreviousDate function code

* Update tooltip dates format

* Add new prop to charts 'tooltipTitle' to override the date tooltip title

* Fix totals not being calculated in charts legend

* Fix JS error when hiding lines in chart

* Fix a couple of issues with chart README

* Add quotes around prop names

* Remove unused variable

* Remove colon after tooltip label

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

@@ -315,9 +315,14 @@ export class RevenueReport extends Component {
 						} );
 			return {
 				date: formatDate( 'Y-m-d\\TH:i:s', interval.date_start ),
-				[ primaryKey ]: interval.subtotals[ selectedChart.key ] || 0,
-				[ secondaryKey ]:
-					( secondaryInterval && secondaryInterval.subtotals[ selectedChart.key ] ) || 0,
+				[ primaryKey ]: {
+					label: formatDate( 'd F, Y', secondaryDate ),
+					value: interval.subtotals[ selectedChart.key ] || 0,
+				},
+				[ secondaryKey ]: {
+					label: formatDate( 'd F, Y', interval.date_start ),
+					value: ( secondaryInterval && secondaryInterval.subtotals[ selectedChart.key ] ) || 0,
+				},
 			};
 		} );
 
@@ -327,7 +332,7 @@ export class RevenueReport extends Component {
 				title={ selectedChart.label }
 				interval={ currentInterval }
 				allowedIntervals={ allowedIntervals }
-				tooltipFormat={ formats.tooltipFormat }
+				tooltipTitle={ selectedChart.label }
 				xFormat={ formats.xFormat }
 				x2Format={ formats.x2Format }
 				dateParser={ '%Y-%m-%dT%H:%M:%S' }

plugins/woocommerce-admin/client/components/chart/README.md

@@ -22,8 +22,8 @@ This component accepts timeseries `data` prop in the following format (with date
 [
 	{
 		date: '%Y-%m-%d', // string in `dateParser` format (see below)
-		category1: value, // number
-		category2: value, // number
+		category1: { label: 'label', value: value }, // string (optional), number
+		category2: { label: 'label', value: value }, // string (optional), number
 		...
 	},
 	...
@@ -34,8 +34,8 @@ For example:
 [
 	{
 		date: '2018-06-25',
-		category1: 1234.56,
-		category2: 9876,
+		category1: { label: 'Tooltip label', value: 1234.56 },
+		category2: { value: 9876 },
 		...
 	},
 	...
@@ -47,10 +47,11 @@ Required props are marked with `*`.
 
 Name | Type | Default | Description
 --- | --- | --- | ---
-`data`* | `array` | none | An array of data as specified above(below)
+`data`* | `array` | none | An array of data as specified above
 `dateParser` | `string` | `%Y-%m-%dT%H:%M:%S` | Format to parse datetimes in the data
 `type`* | `string` | `line` | Chart type of either `line` or `bar`
 `title` | `string` | none | Chart title
-`tooltipFormat` | `string` | `%B %d, %Y` | Title and format of the tooltip title
+`tooltipFormat` | `string` | `%B %d, %Y` | Title and format of the tooltip title date if `tooltipTitle` is missing
+`tooltipTitle` | `string` | `` | Title and format of the tooltip title
 `xFormat` | `string` | `%Y-%m-%d` | d3TimeFormat of the x-axis values
 `yFormat` | `string` | `.3s` | d3Format of the y-axis values

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

@@ -102,6 +102,7 @@ class D3Chart extends Component {
 			margin,
 			orderedKeys,
 			tooltipFormat,
+			tooltipTitle,
 			type,
 			xFormat,
 			x2Format,
@@ -134,6 +135,7 @@ class D3Chart extends Component {
 			parseDate,
 			scale,
 			tooltipFormat: d3TimeFormat( tooltipFormat ),
+			tooltipTitle,
 			type,
 			uniqueDates,
 			uniqueKeys,
@@ -218,9 +220,14 @@ D3Chart.propTypes = {
 	 */
 	orderedKeys: PropTypes.array,
 	/**
-	 * A datetime formatting string to format the title of the toolip, passed to d3TimeFormat.
+	 * A datetime formatting string to format the date displayed as the title of the toolip
+	 * if `tooltipTitle` is missing, passed to d3TimeFormat.
 	 */
 	tooltipFormat: PropTypes.string,
+	/**
+	 * A string to use as a title for the tooltip. Takes preference over `tooltipFormat`.
+	 */
+	tooltipTitle: PropTypes.string,
 	/**
 	 * Chart type of either `line` or `bar`.
 	 */

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

@@ -41,7 +41,7 @@ function getOrderedKeys( props ) {
 		),
 	].map( key => ( {
 		key,
-		total: props.data.reduce( ( a, c ) => a + c[ key ], 0 ),
+		total: props.data.reduce( ( a, c ) => a + c[ key ].value, 0 ),
 		visible: true,
 		focus: true,
 	} ) );
@@ -190,6 +190,7 @@ class Chart extends Component {
 			layout,
 			title,
 			tooltipFormat,
+			tooltipTitle,
 			xFormat,
 			x2Format,
 			yFormat,
@@ -263,6 +264,7 @@ class Chart extends Component {
 						margin={ margin }
 						orderedKeys={ orderedKeys }
 						tooltipFormat={ tooltipFormat }
+						tooltipTitle={ tooltipTitle }
 						type={ type }
 						interval={ interval }
 						width={ chartDirection === 'row' ? width - 320 : width }
@@ -287,9 +289,14 @@ Chart.propTypes = {
 	 */
 	dateParser: PropTypes.string.isRequired,
 	/**
-	 * A datetime formatting string to format the title of the toolip, passed to d3TimeFormat.
+	 * A datetime formatting string to format the date displayed as the title of the toolip
+	 * if `tooltipTitle` is missing, passed to d3TimeFormat.
 	 */
 	tooltipFormat: PropTypes.string,
+	/**
+	 * A string to use as a title for the tooltip. Takes preference over `tooltipFormat`.
+	 */
+	tooltipTitle: PropTypes.string,
 	/**
 	 * A datetime formatting string, passed to d3TimeFormat.
 	 */

plugins/woocommerce-admin/client/components/chart/test/fixtures/dummy-hour.js

@@ -9,17 +9,17 @@
 export default [
 	{
 		date: '2018-08-01T00:00:00',
-		'Custom (Aug 1, 2018)': 58929.99,
-		'Previous Period (Jul 31, 2018)': 160130.74000000002,
+		'Custom (Aug 1, 2018)': { label: '2018-08-01 00:00', value: 58929.99 },
+		'Previous Period (Jul 31, 2018)': { label: '2018-07-31 00:00', value: 160130.74000000002 },
 	},
 	{
 		date: '2018-08-01T01:00:00',
-		'Custom (Aug 1, 2018)': 3805.56,
-		'Previous Period (Jul 31, 2018)': 0,
+		'Custom (Aug 1, 2018)': { label: '2018-08-01 01:00', value: 3805.56 },
+		'Previous Period (Jul 31, 2018)': { label: '2018-07-31 01:00', value: 0 },
 	},
 	{
 		date: '2018-08-01T02:00:00',
-		'Custom (Aug 1, 2018)': 3805.56,
-		'Previous Period (Jul 31, 2018)': 0,
+		'Custom (Aug 1, 2018)': { label: '2018-08-01 02:00', value: 3805.56 },
+		'Previous Period (Jul 31, 2018)': { label: '2018-07-31 02:00', value: 0 },
 	},
 ];

plugins/woocommerce-admin/client/components/chart/test/fixtures/dummy.js

@@ -9,50 +9,50 @@
 export default [
 	{
 		date: '2018-05-30T00:00:00',
-		Polo: 2704659,
-		'T-Shirt': 4499890,
-		Hoodie: 2159981,
-		Sunglasses: 3853788,
-		Cap: 10604510,
+		Polo: { value: 2704659 },
+		'T-Shirt': { value: 4499890 },
+		Hoodie: { value: 2159981 },
+		Sunglasses: { value: 3853788 },
+		Cap: { value: 10604510 },
 	},
 	{
 		date: '2018-05-31T00:00:00',
-		Polo: 2027307,
-		'T-Shirt': 3277946,
-		Hoodie: 1420518,
-		Sunglasses: 2454721,
-		Cap: 7017731,
+		Polo: { value: 2027307 },
+		'T-Shirt': { value: 3277946 },
+		Hoodie: { value: 1420518 },
+		Sunglasses: { value: 2454721 },
+		Cap: { value: 7017731 },
 	},
 	{
 		date: '2018-06-01T00:00:00',
-		Polo: 1208495,
-		'T-Shirt': 2141490,
-		Hoodie: 1058031,
-		Sunglasses: 1999120,
-		Cap: 5355235,
+		Polo: { value: 1208495 },
+		'T-Shirt': { value: 2141490 },
+		Hoodie: { value: 1058031 },
+		Sunglasses: { value: 1999120 },
+		Cap: { value: 5355235 },
 	},
 	{
 		date: '2018-06-02T00:00:00',
-		Polo: 1140516,
-		'T-Shirt': 1938695,
-		Hoodie: 925060,
-		Sunglasses: 1607297,
-		Cap: 4782119,
+		Polo: { value: 1140516 },
+		'T-Shirt': { value: 1938695 },
+		Hoodie: { value: 925060 },
+		Sunglasses: { value: 1607297 },
+		Cap: { value: 4782119 },
 	},
 	{
 		date: '2018-06-03T00:00:00',
-		Polo: 894368,
-		'T-Shirt': 1558919,
-		Hoodie: 725973,
-		Sunglasses: 1311479,
-		Cap: 3596343,
+		Polo: { value: 894368 },
+		'T-Shirt': { value: 1558919 },
+		Hoodie: { value: 725973 },
+		Sunglasses: { value: 1311479 },
+		Cap: { value: 3596343 },
 	},
 	{
 		date: '2018-06-04T00:00:00',
-		Polo: 737462,
-		'T-Shirt': 1345341,
-		Hoodie: 679201,
-		Sunglasses: 1203944,
-		Cap: 3157759,
+		Polo: { value: 737462 },
+		'T-Shirt': { value: 1345341 },
+		Hoodie: { value: 679201 },
+		Sunglasses: { value: 1203944 },
+		Cap: { value: 3157759 },
 	},
 ];

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

@@ -4,7 +4,7 @@
  * External dependencies
  */
 
-import { findIndex } from 'lodash';
+import { findIndex, get } from 'lodash';
 import { max as d3Max } from 'd3-array';
 import { axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis';
 import { format as d3Format } from 'd3-format';
@@ -64,7 +64,7 @@ export const getOrderedKeys = ( data, uniqueKeys ) =>
 		.map( key => ( {
 			key,
 			focus: true,
-			total: data.reduce( ( a, c ) => a + c[ key ], 0 ),
+			total: data.reduce( ( a, c ) => a + c[ key ].value, 0 ),
 			visible: true,
 		} ) )
 		.sort( ( a, b ) => b.total - a.total );
@@ -83,7 +83,7 @@ export const getLineData = ( data, orderedKeys ) =>
 		values: data.map( d => ( {
 			date: d.date,
 			focus: row.focus,
-			value: d[ row.key ],
+			value: get( d, [ row.key, 'value' ], 0 ),
 			visible: row.visible,
 		} ) ),
 	} ) );
@@ -400,19 +400,23 @@ const showTooltip = ( node, params, d, position ) => {
 				<li class="key-row">
 					<div class="key-container">
 						<span class="key-color" style="background-color:${ getColor( row.key, params ) }"></span>
-						<span class="key-key">${ row.key }:</span>
+						<span class="key-key">${ d[ row.key ].label ? d[ row.key ].label : row.key }</span>
 					</div>
-					<span class="key-value">${ formatCurrency( d[ row.key ] ) }</span>
+					<span class="key-value">${ formatCurrency( d[ row.key ].value ) }</span>
 				</li>
 			`
 	);
 
+	const tooltipTitle = params.tooltipTitle
+		? params.tooltipTitle
+		: params.tooltipFormat( d.date instanceof Date ? d.date : new Date( d.date ) );
+
 	params.tooltip
 		.style( 'left', xPosition + 'px' )
 		.style( 'top', yPosition + 'px' )
 		.style( 'display', 'flex' ).html( `
 			<div>
-				<h4>${ params.tooltipFormat( d.date instanceof Date ? d.date : new Date( d.date ) ) }</h4>
+				<h4>${ tooltipTitle }</h4>
 				<ul>
 				${ keys.join( '' ) }
 				</ul>
@@ -561,7 +565,7 @@ export const drawBars = ( node, data, params ) => {
 			params.orderedKeys.filter( row => row.visible ).map( row => ( {
 				key: row.key,
 				focus: row.focus,
-				value: d[ row.key ],
+				value: d[ row.key ].value,
 				visible: row.visible,
 			} ) )
 		)

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

@@ -308,13 +308,16 @@ export const getDateDifferenceInDays = ( date, date2 ) => {
  */
 export const getPreviousDate = ( date, date1, date2, compare, interval ) => {
 	const dateMoment = toMoment( isoDateFormat, formatDate( 'Y-m-d', date ) );
+
+	if ( 'previous_year' === compare ) {
+		return dateMoment.clone().subtract( 1, 'years' );
+	}
+
 	const _date1 = toMoment( isoDateFormat, formatDate( 'Y-m-d', date1 ) );
 	const _date2 = toMoment( isoDateFormat, formatDate( 'Y-m-d', date2 ) );
-	if ( 'previous_period' === compare ) {
-		const difference = _date1.diff( _date2, interval );
-		return dateMoment.clone().subtract( difference, interval );
-	}
-	return dateMoment.clone().subtract( 1, 'years' );
+	const difference = _date1.diff( _date2, interval );
+
+	return dateMoment.clone().subtract( difference, interval );
 };
 
 /**