From e2dfe225b87b6f398788d799ac889d4b7d91586c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?berislav=20grgi=C4=8Dak?= Date: Tue, 22 Feb 2022 14:01:14 +0100 Subject: [PATCH] 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 --- .../woocommerce-admin/TESTING-INSTRUCTIONS.md | 10 ++ .../changelogs/add-chart-color-filter | 4 + .../update-increase-chart-selection-to-10 | 4 + .../packages/components/src/chart/README.md | 14 +++ .../components/src/chart/constants.js | 7 +- .../components/src/chart/d3chart/legend.scss | 2 + .../src/chart/d3chart/utils/color.js | 32 +++++ .../components/src/chart/stories/index.js | 112 ++++++++++++++++++ 8 files changed, 184 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce-admin/changelogs/add-chart-color-filter create mode 100644 plugins/woocommerce-admin/changelogs/update-increase-chart-selection-to-10 diff --git a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md index e68e5c9a48a..9de889ccad3 100644 --- a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md +++ b/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:*' );` ) diff --git a/plugins/woocommerce-admin/changelogs/add-chart-color-filter b/plugins/woocommerce-admin/changelogs/add-chart-color-filter new file mode 100644 index 00000000000..c6ed0350da3 --- /dev/null +++ b/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 diff --git a/plugins/woocommerce-admin/changelogs/update-increase-chart-selection-to-10 b/plugins/woocommerce-admin/changelogs/update-increase-chart-selection-to-10 new file mode 100644 index 00000000000..980d3b754a1 --- /dev/null +++ b/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 diff --git a/plugins/woocommerce-admin/packages/components/src/chart/README.md b/plugins/woocommerce-admin/packages/components/src/chart/README.md index cd19d666fd8..28082ca574a 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/README.md +++ b/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] ); +``` diff --git a/plugins/woocommerce-admin/packages/components/src/chart/constants.js b/plugins/woocommerce-admin/packages/components/src/chart/constants.js index 405c45fd36b..d7daea2a880 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/constants.js +++ b/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 ], ]; diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss index d76dcef27e2..4e354c7f74e 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss +++ b/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; diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/color.js b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/color.js index 7ea21e12f7c..8820d25526a 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/color.js +++ b/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 ); }; diff --git a/plugins/woocommerce-admin/packages/components/src/chart/stories/index.js b/plugins/woocommerce-admin/packages/components/src/chart/stories/index.js index e2f5e1b1fcc..4ff9136ff78 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/stories/index.js +++ b/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, + }, }, ];