From 3fdd9164c8be52ceb28dd35ae718f5873ba4da3c Mon Sep 17 00:00:00 2001 From: Robert Elliott Date: Mon, 10 Sep 2018 14:57:36 +0200 Subject: [PATCH] only sort on totals for layout=comparison & add dateParser prop for date formatting --- .../client/analytics/report/revenue/index.js | 2 +- .../client/components/chart/README.md | 6 +- .../client/components/chart/charts.js | 12 +++- .../client/components/chart/index.js | 62 ++++++++++++------- .../client/components/chart/test/utils.js | 5 +- .../client/components/chart/utils.js | 6 +- 6 files changed, 59 insertions(+), 34 deletions(-) diff --git a/plugins/woocommerce-admin/client/analytics/report/revenue/index.js b/plugins/woocommerce-admin/client/analytics/report/revenue/index.js index 44455cff1e3..83a79d9a4c7 100644 --- a/plugins/woocommerce-admin/client/analytics/report/revenue/index.js +++ b/plugins/woocommerce-admin/client/analytics/report/revenue/index.js @@ -305,7 +305,7 @@ export class RevenueReport extends Component { return ( - + ); } diff --git a/plugins/woocommerce-admin/client/components/chart/README.md b/plugins/woocommerce-admin/client/components/chart/README.md index 8619228e2e2..220f6948648 100644 --- a/plugins/woocommerce-admin/client/components/chart/README.md +++ b/plugins/woocommerce-admin/client/components/chart/README.md @@ -8,6 +8,7 @@ A simple D3 line and bar chart component for timeseries data in React. ```jsx { + props.data.reduce( ( accum, curr ) => { Object.keys( curr ).forEach( key => key !== 'date' && accum.push( key ) ); return accum; }, [] ) ), - ] - .map( key => ( { - key, - total: data.reduce( ( a, c ) => a + c[ key ], 0 ), - visible: true, - focus: true, - } ) ) - .sort( ( a, b ) => b.total - a.total ); + ].map( key => ( { + key, + total: props.data.reduce( ( a, c ) => a + c[ key ], 0 ), + visible: true, + focus: true, + } ) ); + if ( props.layout === 'comparison' ) { + updatedKeys.sort( ( a, b ) => b.total - a.total ); + } + return updatedKeys; } /** @@ -47,7 +49,7 @@ class Chart extends Component { const calcGap = wpWrap > 782 ? gaplarge.match( /\d+/ )[ 0 ] : gap.match( /\d+/ )[ 0 ]; this.state = { data: props.data, - orderedKeys: getOrderedKeys( props.data ), + orderedKeys: getOrderedKeys( props ), visibleData: [ ...props.data ], width: wpBody - 2 * calcGap, }; @@ -59,7 +61,7 @@ class Chart extends Component { componentDidUpdate( prevProps ) { const { data } = this.props; - const orderedKeys = getOrderedKeys( data ); + const orderedKeys = getOrderedKeys( this.props ); if ( ! isEqual( [ ...data ].sort(), [ ...prevProps.data ].sort() ) ) { /* eslint-disable react/no-did-update-set-state */ this.setState( { @@ -129,10 +131,18 @@ class Chart extends Component { render() { const { orderedKeys, visibleData, width } = this.state; - const legendDirection = - this.props.layout === 'standard' && width > WIDE_BREAKPOINT ? 'row' : 'column'; - const chartDirection = - this.props.layout === 'comparison' && width > WIDE_BREAKPOINT ? 'row' : 'column'; + const { + dateParser, + layout, + title, + tooltipFormat, + type, + xFormat, + x2Format, + yFormat, + } = this.props; + const legendDirection = layout === 'standard' && width > WIDE_BREAKPOINT ? 'row' : 'column'; + const chartDirection = layout === 'comparison' && width > WIDE_BREAKPOINT ? 'row' : 'column'; const legend = (
- { this.props.title } + { title } { width > WIDE_BREAKPOINT && legendDirection === 'row' && legend }
{ width < WIDE_BREAKPOINT &&
{ legend }
} @@ -187,6 +198,10 @@ Chart.propTypes = { * An array of data. */ data: PropTypes.array.isRequired, + /** + * Format to parse dates into d3 time format + */ + dateParser: PropTypes.string.isRequired, /** * A datetime formatting string to format the title of the toolip, passed to d3TimeFormat. */ @@ -219,6 +234,7 @@ Chart.propTypes = { Chart.defaultProps = { data: [], + dateParser: '%Y-%m-%dT%H:%M:%S', tooltipFormat: '%Y-%m-%d', xFormat: '%d', x2Format: '%b %Y', diff --git a/plugins/woocommerce-admin/client/components/chart/test/utils.js b/plugins/woocommerce-admin/client/components/chart/test/utils.js index 32c45915eee..94f27f75893 100644 --- a/plugins/woocommerce-admin/client/components/chart/test/utils.js +++ b/plugins/woocommerce-admin/client/components/chart/test/utils.js @@ -4,6 +4,7 @@ * @format */ // import { noop } from 'lodash'; +import { utcParse as d3UTCParse } from 'd3-time-format'; /** * Internal dependencies @@ -21,7 +22,6 @@ import { getYMax, getYScale, getYTickOffset, - parseDate, } from '../utils'; const orderedKeys = [ @@ -64,10 +64,11 @@ const orderedDates = [ '2018-06-03T00:00:00', '2018-06-04T00:00:00', ]; +const parseDate = d3UTCParse( '%Y-%m-%dT%H:%M:%S' ); const testUniqueKeys = getUniqueKeys( dummyOrders ); const testOrderedKeys = getOrderedKeys( dummyOrders, testUniqueKeys ); const testLineData = getLineData( dummyOrders, testOrderedKeys ); -const testUniqueDates = getUniqueDates( testLineData ); +const testUniqueDates = getUniqueDates( testLineData, parseDate ); const testXScale = getXScale( testUniqueDates, 100 ); const testXLineScale = getXLineScale( testUniqueDates, 100 ); const testYMax = getYMax( testLineData ); diff --git a/plugins/woocommerce-admin/client/components/chart/utils.js b/plugins/woocommerce-admin/client/components/chart/utils.js index a521e56e6ec..123315a219b 100644 --- a/plugins/woocommerce-admin/client/components/chart/utils.js +++ b/plugins/woocommerce-admin/client/components/chart/utils.js @@ -15,14 +15,11 @@ import { } from 'd3-scale'; import { mouse as d3Mouse, select as d3Select } from 'd3-selection'; import { line as d3Line } from 'd3-shape'; -import { utcParse as d3UTCParse } from 'd3-time-format'; /** * Internal dependencies */ import { formatCurrency } from 'lib/currency'; -export const parseDate = d3UTCParse( '%Y-%m-%dT%H:%M:%S' ); - function decodeSymbol( str ) { return str.replace( /&#(\d+);/g, ( match, dec ) => String.fromCharCode( dec ) ); } @@ -87,9 +84,10 @@ export const getLineData = ( data, orderedKeys ) => /** * Describes `getUniqueDates` * @param {array} lineData - from `GetLineData` + * @param {function} parseDate - D3 time format parser * @returns {array} an array of unique date values sorted from earliest to latest */ -export const getUniqueDates = lineData => { +export const getUniqueDates = ( lineData, parseDate ) => { return [ ...new Set( lineData.reduce( ( accum, { values } ) => {