From de4309d61e4e1db859f2e11ad49b4b8d771bdc4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <aljullu@gmail.com>
Date: Tue, 15 Jan 2019 19:40:02 +0100
Subject: [PATCH] Remove `barfocus` elements from charts
 (https://github.com/woocommerce/woocommerce-admin/pull/1311)

* Remove barfocus elements from charts

* Render background color behind bars

* Rename barmouse to barfocus
---
 .../src/chart/d3chart/utils/bar-chart.js      | 30 +++++++------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/bar-chart.js b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/bar-chart.js
index 3757fe51208..de5ecc727b0 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/bar-chart.js
+++ b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/bar-chart.js
@@ -46,7 +46,16 @@ export const drawBars = ( node, data, params ) => {
 		.attr( 'y', 0 )
 		.attr( 'width', params.xGroupScale.range()[ 1 ] )
 		.attr( 'height', params.height )
-		.attr( 'opacity', '0' );
+		.attr( 'opacity', '0' )
+		.on( 'mouseover', ( d, i, nodes ) => {
+			const position = calculateTooltipPosition(
+				d3Event.target,
+				node.node(),
+				params.tooltipPosition
+			);
+			handleMouseOverBarChart( d.date, nodes[ i ].parentNode, node, data, params, position );
+		} )
+		.on( 'mouseout', ( d, i, nodes ) => hideTooltip( nodes[ i ].parentNode, params.tooltip ) );
 
 	barGroup
 		.selectAll( '.bar' )
@@ -68,6 +77,7 @@ export const drawBars = ( node, data, params ) => {
 		.attr( 'width', params.xGroupScale.bandwidth() )
 		.attr( 'height', d => params.height - params.yScale( d.value ) )
 		.attr( 'fill', d => getColor( d.key, params.orderedKeys, params.colorScheme ) )
+		.attr( 'pointer-events', 'none' )
 		.attr( 'tabindex', '0' )
 		.attr( 'aria-label', d => {
 			const label = params.mode === 'time-comparison' && d.label ? d.label : d.key;
@@ -83,22 +93,4 @@ export const drawBars = ( node, data, params ) => {
 			handleMouseOverBarChart( d.date, nodes[ i ].parentNode, node, data, params, position );
 		} )
 		.on( 'blur', ( d, i, nodes ) => hideTooltip( nodes[ i ].parentNode, params.tooltip ) );
-
-	barGroup
-		.append( 'rect' )
-		.attr( 'class', 'barmouse' )
-		.attr( 'x', 0 )
-		.attr( 'y', 0 )
-		.attr( 'width', params.xGroupScale.range()[ 1 ] )
-		.attr( 'height', params.height )
-		.attr( 'opacity', '0' )
-		.on( 'mouseover', ( d, i, nodes ) => {
-			const position = calculateTooltipPosition(
-				d3Event.target,
-				node.node(),
-				params.tooltipPosition
-			);
-			handleMouseOverBarChart( d.date, nodes[ i ].parentNode, node, data, params, position );
-		} )
-		.on( 'mouseout', ( d, i, nodes ) => hideTooltip( nodes[ i ].parentNode, params.tooltip ) );
 };