Increase chart selection to 10 and allow color overriding (https://github.com/woocommerce/woocommerce-admin/pull/8258)

* Increase selection limit to 10

* Add filter for overriding chart colors

* Add filter documentation

* Update chart story

* Add testing instructions

* Changelogs

* Remove broken changelog entires

* Update changelogs

* Fix changelogs

* Add filter example

* Improve filter example

plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md

@@ -78,6 +78,16 @@
 9. Go to **Marketing > Overview**
 10. See MailPoet links to Docs, Support, and Settings
 
+**Analytics**
+
+### Add chart color filter
+
+1. Add the following JS to your admin head. You can use a plugin like "Add Admin Javascript" to do this:
+```
+ addFilter( 'woocommerce_admin_chart_item_color', 'example', ( index, key, orderedKeys ) => '#7f54b3' );
+```
+2. Navigate to the profile wizard. `wp-admin/admin.php?page=wc-admin&path=%2Fanalytics%2Fproducts`.
+3. Make sure the chart line colors are purple.
 ### Add additional store profiler track for the business details tab. #8265
 
 1. Open your console and make sure you have tracks outputted ( `localStorage.setItem( 'debug', 'wc-admin:*' );` )

plugins/woocommerce-admin/changelogs/add-chart-color-filter

@@ -0,0 +1,4 @@
+Significance: minor
+Type: Enhancement
+
+Add chart color filter for overriding default chart colors. #8258

plugins/woocommerce-admin/changelogs/update-increase-chart-selection-to-10

@@ -0,0 +1,4 @@
+Significance: minor
+Type: Enhancement
+
+Increase color selection limit to ten and add additional colors. #8258

plugins/woocommerce-admin/packages/components/src/chart/README.md

@@ -105,3 +105,17 @@ Name | Type | Default | Description
 `yBelow1Format` | String | `null` | A number formatting string, passed to d3Format
 `yFormat` | String | `null` | A number formatting string, passed to d3Format
 `currency` | Object | `{}` | An object with currency properties for usage in the chart. The following properties are expected: `decimal`, `symbol`, `symbolPosition`, `thousands`. This is passed to d3Format.
+
+## Overriding chart colors
+
+Char colors can be overridden by hooking into the filter `woocommerce_admin_chart_item_color`. For example:
+
+```js
+const colorScales = [
+  "#0A2F51",
+  "#0E4D64",
+  "#137177",
+  "#188977",
+];
+addFilter( 'woocommerce_admin_chart_item_color', 'example', ( index, key, orderedKeys ) => colorScales[index] );
+```

plugins/woocommerce-admin/packages/components/src/chart/constants.js

@@ -1,6 +1,6 @@
 // This is the max number of items that can be selected/shown on a chart at one time.
 // If this number changes, the color scale also needs to be adjusted.
-export const selectionLimit = 5;
+export const selectionLimit = 10;
 export const colorScales = [
 	[],
 	[ 0.5 ],
@@ -8,4 +8,9 @@ export const colorScales = [
 	[ 0.2, 0.5, 0.8 ],
 	[ 0.12, 0.375, 0.625, 0.88 ],
 	[ 0, 0.25, 0.5, 0.75, 1 ],
+	[ 0, 0.2, 0.4, 0.6, 0.8, 1 ],
+	[ 0, 0.16, 0.32, 0.48, 0.64, 0.8, 1 ],
+	[ 0, 0.14, 0.28, 0.42, 0.56, 0.7, 0.84, 1 ],
+	[ 0, 0.12, 0.24, 0.36, 0.48, 0.6, 0.72, 0.84, 1 ],
+	[ 0, 0.11, 0.22, 0.33, 0.44, 0.55, 0.66, 0.77, 0.88, 1 ],
 ];

plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss

@@ -19,6 +19,7 @@
 	display: flex;
 	height: 100%;
 	margin: 0;
+	flex-flow: row wrap;
 
 	.woocommerce-legend__direction-column & {
 		flex-direction: column;
@@ -165,6 +166,7 @@
 	.woocommerce-legend__direction-row & {
 		padding: 0;
 		margin: 0;
+		flex-basis: 20%;
 
 		& > button {
 			padding: 0 17px;

plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/color.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { findIndex } from 'lodash';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -14,6 +15,37 @@ export const getColor = ( orderedKeys, colorScheme ) => ( key ) => {
 			? selectionLimit
 			: orderedKeys.length;
 	const idx = findIndex( orderedKeys, ( d ) => d.key === key );
+
+	/**
+	 * Color to be used for a chart item.
+	 *
+	 * @filter woocommerce_admin_chart_item_color
+	 * @example
+	 * addFilter(
+	 * 	'woocommerce_admin_chart_item_color',
+	 * 	'example',
+	 * ( idx ) => {
+	 * 	const colorScales = [
+	 *	  "#0A2F51",
+	 *	  "#0E4D64",
+	 *	  "#137177",
+	 *	  "#188977",
+	 *	];
+	 * 	return colorScales[ idx ] || false;
+	 * });
+	 *
+	 */
+	const color = applyFilters(
+		'woocommerce_admin_chart_item_color',
+		idx,
+		key,
+		orderedKeys
+	);
+
+	if ( color && color.toString().startsWith( '#' ) ) {
+		return color;
+	}
+
 	const keyValue = idx <= selectionLimit - 1 ? colorScales[ len ][ idx ] : 0;
 	return colorScheme( keyValue );
 };

plugins/woocommerce-admin/packages/components/src/chart/stories/index.js

@@ -23,6 +23,34 @@ const data = [
 			label: 'Cap',
 			value: 106010,
 		},
+		Tshirt: {
+			label: 'Tshirt',
+			value: 26784,
+		},
+		Jeans: {
+			label: 'Jeans',
+			value: 35645,
+		},
+		Headphones: {
+			label: 'Headphones',
+			value: 19500,
+		},
+		Lamp: {
+			label: 'Lamp',
+			value: 21599,
+		},
+		Socks: {
+			label: 'Socks',
+			value: 32572,
+		},
+		Mug: {
+			label: 'Mug',
+			value: 10991,
+		},
+		Case: {
+			label: 'Case',
+			value: 35537,
+		},
 	},
 	{
 		date: '2018-05-31T00:00:00',
@@ -38,6 +66,34 @@ const data = [
 			label: 'Cap',
 			value: 70131,
 		},
+		Tshirt: {
+			label: 'Tshirt',
+			value: 16784,
+		},
+		Jeans: {
+			label: 'Jeans',
+			value: 25645,
+		},
+		Headphones: {
+			label: 'Headphones',
+			value: 39500,
+		},
+		Lamp: {
+			label: 'Lamp',
+			value: 15599,
+		},
+		Socks: {
+			label: 'Socks',
+			value: 27572,
+		},
+		Mug: {
+			label: 'Mug',
+			value: 110991,
+		},
+		Case: {
+			label: 'Case',
+			value: 21537,
+		},
 	},
 	{
 		date: '2018-06-01T00:00:00',
@@ -53,6 +109,34 @@ const data = [
 			label: 'Cap',
 			value: 53552,
 		},
+		Tshirt: {
+			label: 'Tshirt',
+			value: 41784,
+		},
+		Jeans: {
+			label: 'Jeans',
+			value: 17645,
+		},
+		Headphones: {
+			label: 'Headphones',
+			value: 22500,
+		},
+		Lamp: {
+			label: 'Lamp',
+			value: 25599,
+		},
+		Socks: {
+			label: 'Socks',
+			value: 14572,
+		},
+		Mug: {
+			label: 'Mug',
+			value: 20991,
+		},
+		Case: {
+			label: 'Case',
+			value: 11537,
+		},
 	},
 	{
 		date: '2018-06-02T00:00:00',
@@ -68,6 +152,34 @@ const data = [
 			label: 'Cap',
 			value: 47821,
 		},
+		Tshirt: {
+			label: 'Tshirt',
+			value: 18784,
+		},
+		Jeans: {
+			label: 'Jeans',
+			value: 29645,
+		},
+		Headphones: {
+			label: 'Headphones',
+			value: 24500,
+		},
+		Lamp: {
+			label: 'Lamp',
+			value: 18599,
+		},
+		Socks: {
+			label: 'Socks',
+			value: 23572,
+		},
+		Mug: {
+			label: 'Mug',
+			value: 20991,
+		},
+		Case: {
+			label: 'Case',
+			value: 16537,
+		},
 	},
 ];