From afd669371892c54a5d93c19f457d92523060d738 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Tue, 27 Jul 2021 16:14:54 +0200 Subject: [PATCH] Add `hidden` legendPosition to `Chart`. (https://github.com/woocommerce/woocommerce-admin/pull/7378) * Add `hidden` legendPosition to `Chart`. Sometimes, for example, when there is a single data set, there is no need for rendering the legend. It may even introduce more confusion than value. It seems interactive, but there is nothing you can do with it. Fixes: https://github.com/woocommerce/google-listings-and-ads/issues/618 * Add `@storybook/addon-knobs` to devDependencies. It was used but not explicitely stated. * Add a changelog entry. * Add tests for legendPosition in Chart component Co-authored-by: Lourens Schep --- .../packages/components/CHANGELOG.md | 1 + .../packages/components/package.json | 1 + .../packages/components/src/chart/README.md | 2 +- .../packages/components/src/chart/index.js | 27 +++--- .../{docs/example.js => stories/index.js} | 25 ++++-- .../components/src/chart/test/legend.js | 87 +++++++++++++++++++ 6 files changed, 124 insertions(+), 19 deletions(-) rename plugins/woocommerce-admin/packages/components/src/chart/{docs/example.js => stories/index.js} (69%) create mode 100644 plugins/woocommerce-admin/packages/components/src/chart/test/legend.js diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 8ae9b5d86d9..e84c8ebbfa7 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -1,6 +1,7 @@ # Unreleased - Fix a bug in the deprecated callback handlers of Form component. #7356 +- Add `hidden` legend position to `Chart`. #7378 # 8.0.0 diff --git a/plugins/woocommerce-admin/packages/components/package.json b/plugins/woocommerce-admin/packages/components/package.json index 5552dafe5af..4ec506819d3 100644 --- a/plugins/woocommerce-admin/packages/components/package.json +++ b/plugins/woocommerce-admin/packages/components/package.json @@ -25,6 +25,7 @@ "src/**/*.scss" ], "dependencies": { + "@storybook/addon-knobs": "^6.3.0", "@woocommerce/csv-export": "file:../csv-export", "@woocommerce/currency": "file:../currency", "@woocommerce/data": "file:../data", diff --git a/plugins/woocommerce-admin/packages/components/src/chart/README.md b/plugins/woocommerce-admin/packages/components/src/chart/README.md index ed218039d16..cd19d666fd8 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/README.md +++ b/plugins/woocommerce-admin/packages/components/src/chart/README.md @@ -91,7 +91,7 @@ Name | Type | Default | Description `interval` | One of: 'hour', 'day', 'week', 'month', 'quarter', 'year' | `'day'` | Interval specification (hourly, daily, weekly etc) `intervalData` | Object | `null` | Information about the currently selected interval, and set of allowed intervals for the chart. See `getIntervalsForQuery` `isRequesting` | Boolean | `false` | Render a chart placeholder to signify an in-flight data request -`legendPosition` | One of: 'bottom', 'side', 'top' | `null` | Position the legend must be displayed in. If it's not defined, it's calculated depending on the viewport width and the mode +`legendPosition` | One of: 'bottom', 'side', 'top', 'hidden' | `null` | Position the legend must be displayed in. If it's not defined, it's calculated depending on the viewport width and the mode `legendTotals` | Object | `null` | Values to overwrite the legend totals. If not defined, the sum of all line values will be used `screenReaderFormat` | One of type: string, func | `'%B %-d, %Y'` | A datetime formatting string or overriding function to format the screen reader labels `showHeaderControls` | Boolean | `true` | Wether header UI controls must be displayed diff --git a/plugins/woocommerce-admin/packages/components/src/chart/index.js b/plugins/woocommerce-admin/packages/components/src/chart/index.js index 1e155170d2d..abade56b206 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/index.js +++ b/plugins/woocommerce-admin/packages/components/src/chart/index.js @@ -334,18 +334,19 @@ class Chart extends Component { const chartDirection = legendPosition === 'side' ? 'row' : 'column'; const chartHeight = this.getChartHeight(); - const legend = isRequesting ? null : ( - - ); + const legend = + legendPosition !== 'hidden' && isRequesting ? null : ( + + ); const margin = { bottom: 50, left: 80, @@ -566,7 +567,7 @@ Chart.propTypes = { * Position the legend must be displayed in. If it's not defined, it's calculated * depending on the viewport width and the mode. */ - legendPosition: PropTypes.oneOf( [ 'bottom', 'side', 'top' ] ), + legendPosition: PropTypes.oneOf( [ 'bottom', 'side', 'top', 'hidden' ] ), /** * Values to overwrite the legend totals. If not defined, the sum of all line values will be used. */ diff --git a/plugins/woocommerce-admin/packages/components/src/chart/docs/example.js b/plugins/woocommerce-admin/packages/components/src/chart/stories/index.js similarity index 69% rename from plugins/woocommerce-admin/packages/components/src/chart/docs/example.js rename to plugins/woocommerce-admin/packages/components/src/chart/stories/index.js index 1949c535057..e2f5e1b1fcc 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/docs/example.js +++ b/plugins/woocommerce-admin/packages/components/src/chart/stories/index.js @@ -1,7 +1,12 @@ /** * External dependencies */ -import { Chart } from '@woocommerce/components'; +import { select } from '@storybook/addon-knobs'; + +/** + * Internal dependencies + */ +import Chart from '../'; const data = [ { @@ -66,8 +71,18 @@ const data = [ }, ]; -export default () => ( -
- -
+export default { + title: 'WooCommerce Admin/components/Chart', + component: Chart, +}; + +export const Default = () => ( + ); diff --git a/plugins/woocommerce-admin/packages/components/src/chart/test/legend.js b/plugins/woocommerce-admin/packages/components/src/chart/test/legend.js new file mode 100644 index 00000000000..673c11b9bc5 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/chart/test/legend.js @@ -0,0 +1,87 @@ +/** + * @jest-environment jsdom + */ +/** + * External dependencies + */ +import { render, within } from '@testing-library/react'; +import { createElement } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import Chart from '../'; + +jest.mock( '../d3chart', () => ( { + D3Legend: jest.fn().mockReturnValue( '[D3Legend]' ), +} ) ); + +const data = [ + { + date: '2018-05-30T00:00:00', + Hoodie: { + label: 'Hoodie', + value: 21599, + }, + Sunglasses: { + label: 'Sunglasses', + value: 38537, + }, + Cap: { + label: 'Cap', + value: 106010, + }, + }, + { + date: '2018-05-31T00:00:00', + Hoodie: { + label: 'Hoodie', + value: 14205, + }, + Sunglasses: { + label: 'Sunglasses', + value: 24721, + }, + Cap: { + label: 'Cap', + value: 70131, + }, + }, +]; + +describe( 'Chart', () => { + test( ' should not render any legend', () => { + const { queryByText } = render( + + ); + expect( queryByText( '[D3Legend]' ) ).not.toBeInTheDocument(); + } ); + + test( ' should render the legend at the bottom', () => { + const { container } = render( + + ); + const footer = container.querySelector( '.woocommerce-chart__footer' ); + expect( + within( footer ).queryByText( '[D3Legend]' ) + ).toBeInTheDocument(); + } ); + + test( ' should render the legend at the side', () => { + const { container } = render( + + ); + const body = container.querySelector( '.woocommerce-chart__body' ); + expect( + within( body ).queryByText( '[D3Legend]' ) + ).toBeInTheDocument(); + } ); + + test( ' should render the legend at the top', () => { + const { container } = render( + + ); + const top = container.querySelector( '.woocommerce-chart__header' ); + expect( within( top ).queryByText( '[D3Legend]' ) ).toBeInTheDocument(); + } ); +} );