Don't allow unselecting all items in chart legends (https://github.com/woocommerce/woocommerce-admin/pull/427)

* Don't allow unselecting all items in chart legends

* Add correct color to chart legend labels

* Add tests for chart legend enable/disable items logic

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

@@ -29,6 +29,8 @@ class Legend extends Component {
 			orderedKeys: data,
 			colorScheme,
 		};
+		const numberOfRowsVisible = data.filter( row => row.visible ).length;
+
 		return (
 			<ul
 				className={ classNames(
@@ -49,7 +51,11 @@ class Legend extends Component {
 						onBlur={ handleLegendHover }
 						onFocus={ handleLegendHover }
 					>
-						<button onClick={ handleLegendToggle } id={ row.key }>
+						<button
+							onClick={ handleLegendToggle }
+							id={ row.key }
+							disabled={ row.visible && numberOfRowsVisible <= 1 }
+						>
 							<div className="woocommerce-legend__item-container" id={ row.key }>
 								<span
 									className={ classNames( 'woocommerce-legend__item-checkmark', {

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

@@ -276,6 +276,7 @@
 
 		button {
 			background-color: $white;
+			color: $core-grey-dark-500;
 			display: inline-flex;
 			flex-direction: row;
 			flex-wrap: nowrap;

plugins/woocommerce-admin/client/components/chart/test/legend.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ *
+ * @format
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import Legend from '../legend';
+
+const colorScheme = jest.fn();
+const data = [
+	{
+		key: 'lorem',
+		visible: true,
+		total: 100,
+	},
+	{
+		key: 'ipsum',
+		visible: true,
+		total: 100,
+	},
+];
+
+describe( 'Legend', () => {
+	test( 'should not disable any button if more than one is active', () => {
+		const topSellingProducts = shallow( <Legend colorScheme={ colorScheme } data={ data } /> );
+
+		expect( topSellingProducts.find( 'button' ).get( 0 ).props.disabled ).toBeFalsy();
+		expect( topSellingProducts.find( 'button' ).get( 1 ).props.disabled ).toBeFalsy();
+	} );
+
+	test( 'should disable the last active button', () => {
+		data[ 1 ].visible = false;
+
+		const topSellingProducts = shallow( <Legend colorScheme={ colorScheme } data={ data } /> );
+
+		expect( topSellingProducts.find( 'button' ).get( 0 ).props.disabled ).toBeTruthy();
+		expect( topSellingProducts.find( 'button' ).get( 1 ).props.disabled ).toBeFalsy();
+	} );
+} );