x, y and tooltip formatting
This commit is contained in:
Robert Elliott
parent
251d9804ef
commit
964a43b674
|
|
@ -7,7 +7,6 @@ import { isEqual } from 'lodash';
|
|||
import { Component, createRef } from '@wordpress/element';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { format as d3Format } from 'd3-format';
|
||||
import { timeFormat as d3TimeFormat } from 'd3-time-format';
|
||||
import { select as d3Select } from 'd3-selection';
|
||||
|
||||
|
|
@ -89,7 +88,17 @@ class D3Chart extends Component {
|
|||
}
|
||||
|
||||
getParams( node ) {
|
||||
const { colorScheme, data, height, margin, orderedKeys, type, xFormat, yFormat } = this.props;
|
||||
const {
|
||||
colorScheme,
|
||||
data,
|
||||
height,
|
||||
margin,
|
||||
orderedKeys,
|
||||
tooltipFormat,
|
||||
type,
|
||||
xFormat,
|
||||
yFormat,
|
||||
} = this.props;
|
||||
const { width } = this.state;
|
||||
const calculatedWidth = width || node.offsetWidth;
|
||||
const calculatedHeight = height || node.offsetHeight;
|
||||
|
|
@ -113,6 +122,7 @@ class D3Chart extends Component {
|
|||
margin,
|
||||
orderedKeys: newOrderedKeys,
|
||||
scale,
|
||||
tooltipFormat: d3TimeFormat( tooltipFormat ),
|
||||
type,
|
||||
uniqueDates,
|
||||
uniqueKeys,
|
||||
|
|
@ -124,7 +134,7 @@ class D3Chart extends Component {
|
|||
yMax,
|
||||
yScale,
|
||||
yTickOffset: getYTickOffset( adjHeight, scale, yMax ),
|
||||
yFormat: d3Format( yFormat ),
|
||||
yFormat,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -167,6 +177,10 @@ D3Chart.propTypes = {
|
|||
* Relative viewpoirt height of the `svg`.
|
||||
*/
|
||||
height: PropTypes.number,
|
||||
/**
|
||||
* Interval specification (hourly, daily, weekly etc.)
|
||||
*/
|
||||
interval: PropTypes.oneOf( [ 'hourly', 'daily', 'weekly', 'monthly', 'quaterly', 'yearly' ] ),
|
||||
/**
|
||||
* @todo Remove – not used?
|
||||
*/
|
||||
|
|
@ -184,6 +198,10 @@ D3Chart.propTypes = {
|
|||
* The list of labels for this chart.
|
||||
*/
|
||||
orderedKeys: PropTypes.array,
|
||||
/**
|
||||
* A datetime formatting string to format the title of the toolip, passed to d3TimeFormat.
|
||||
*/
|
||||
tooltipFormat: PropTypes.string,
|
||||
/**
|
||||
* Chart type of either `line` or `bar`.
|
||||
*/
|
||||
|
|
@ -211,10 +229,11 @@ D3Chart.defaultProps = {
|
|||
right: 0,
|
||||
top: 20,
|
||||
},
|
||||
tooltipFormat: '%Y-%m-%d',
|
||||
type: 'line',
|
||||
width: 600,
|
||||
xFormat: '%Y-%m-%d',
|
||||
yFormat: ',.0f',
|
||||
yFormat: '.3s',
|
||||
};
|
||||
|
||||
export default D3Chart;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Card from 'components/card';
|
||||
import Chart from './index';
|
||||
import dummyOrders from './test/fixtures/dummy';
|
||||
|
||||
class WidgetCharts extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Card title={ __( 'Test Categories', 'wc-admin' ) }>
|
||||
<Chart
|
||||
data={ dummyOrders }
|
||||
tooltipFormat={ 'Hour of %H' }
|
||||
type={ 'bar' }
|
||||
xFormat={ '%H' }
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default WidgetCharts;
|
||||
|
|
@ -158,8 +158,11 @@ class Chart extends Component {
|
|||
height={ 300 }
|
||||
margin={ margin }
|
||||
orderedKeys={ orderedKeys }
|
||||
type={ 'line' }
|
||||
tooltipFormat={ this.props.tooltipFormat }
|
||||
type={ this.props.type }
|
||||
width={ chartDirection === 'row' ? width - 320 : width }
|
||||
xFormat={ this.props.xFormat }
|
||||
yFormat={ this.props.yFormat }
|
||||
/>
|
||||
</div>
|
||||
{ width < WIDE_BREAKPOINT && <div className="woocommerce-chart__footer">{ legend }</div> }
|
||||
|
|
@ -177,10 +180,29 @@ Chart.propTypes = {
|
|||
* A title describing this chart.
|
||||
*/
|
||||
title: PropTypes.string,
|
||||
/**
|
||||
* A datetime formatting string to format the title of the toolip, passed to d3TimeFormat.
|
||||
*/
|
||||
tooltipFormat: PropTypes.string,
|
||||
/**
|
||||
* Chart type of either `line` or `bar`.
|
||||
*/
|
||||
type: PropTypes.oneOf( [ 'bar', 'line' ] ),
|
||||
/**
|
||||
* A datetime formatting string, passed to d3TimeFormat.
|
||||
*/
|
||||
xFormat: PropTypes.string,
|
||||
/**
|
||||
* A number formatting string, passed to d3Format.
|
||||
*/
|
||||
yFormat: PropTypes.string,
|
||||
};
|
||||
|
||||
Chart.defaultProps = {
|
||||
data: [],
|
||||
tooltipFormat: '%Y-%m-%d',
|
||||
xFormat: '%Y-%m-%d',
|
||||
yFormat: '.3s',
|
||||
};
|
||||
|
||||
export default Chart;
|
||||
|
|
|
|||
|
|
@ -1,56 +1,76 @@
|
|||
/**
|
||||
* /* eslint-disable quote-props
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
/** @format */
|
||||
|
||||
// /**
|
||||
// * /* eslint-disable quote-props
|
||||
// *
|
||||
// * @format
|
||||
// */
|
||||
|
||||
export default [
|
||||
{
|
||||
date: '2018-05-30',
|
||||
Polo: 2704659,
|
||||
'T-Shirt': 4499890,
|
||||
Hoodie: 2159981,
|
||||
Sunglasses: 3853788,
|
||||
Cap: 10604510,
|
||||
date: '2018-08-01T00:00:00',
|
||||
'Custom (Aug 1, 2018)': 58929.99,
|
||||
'Previous Period (Jul 31, 2018)': 160130.74000000002,
|
||||
},
|
||||
{
|
||||
date: '2018-05-31',
|
||||
Polo: 2027307,
|
||||
'T-Shirt': 3277946,
|
||||
Hoodie: 1420518,
|
||||
Sunglasses: 2454721,
|
||||
Cap: 7017731,
|
||||
date: '2018-08-01T01:00:00',
|
||||
'Custom (Aug 1, 2018)': 3805.56,
|
||||
'Previous Period (Jul 31, 2018)': 0,
|
||||
},
|
||||
{
|
||||
date: '2018-06-01',
|
||||
Polo: 1208495,
|
||||
'T-Shirt': 2141490,
|
||||
Hoodie: 1058031,
|
||||
Sunglasses: 1999120,
|
||||
Cap: 5355235,
|
||||
},
|
||||
{
|
||||
date: '2018-06-02',
|
||||
Polo: 1140516,
|
||||
'T-Shirt': 1938695,
|
||||
Hoodie: 925060,
|
||||
Sunglasses: 1607297,
|
||||
Cap: 4782119,
|
||||
},
|
||||
{
|
||||
date: '2018-06-03',
|
||||
Polo: 894368,
|
||||
'T-Shirt': 1558919,
|
||||
Hoodie: 725973,
|
||||
Sunglasses: 1311479,
|
||||
Cap: 3596343,
|
||||
},
|
||||
{
|
||||
date: '2018-06-04',
|
||||
Polo: 737462,
|
||||
'T-Shirt': 1345341,
|
||||
Hoodie: 679201,
|
||||
Sunglasses: 1203944,
|
||||
Cap: 3157759,
|
||||
date: '2018-08-01T02:00:00',
|
||||
'Custom (Aug 1, 2018)': 3805.56,
|
||||
'Previous Period (Jul 31, 2018)': 0,
|
||||
},
|
||||
];
|
||||
|
||||
// export default [
|
||||
// {
|
||||
// date: '2018-05-30',
|
||||
// Polo: 2704659,
|
||||
// 'T-Shirt': 4499890,
|
||||
// Hoodie: 2159981,
|
||||
// Sunglasses: 3853788,
|
||||
// Cap: 10604510,
|
||||
// },
|
||||
// {
|
||||
// date: '2018-05-31',
|
||||
// Polo: 2027307,
|
||||
// 'T-Shirt': 3277946,
|
||||
// Hoodie: 1420518,
|
||||
// Sunglasses: 2454721,
|
||||
// Cap: 7017731,
|
||||
// },
|
||||
// {
|
||||
// date: '2018-06-01',
|
||||
// Polo: 1208495,
|
||||
// 'T-Shirt': 2141490,
|
||||
// Hoodie: 1058031,
|
||||
// Sunglasses: 1999120,
|
||||
// Cap: 5355235,
|
||||
// },
|
||||
// {
|
||||
// date: '2018-06-02',
|
||||
// Polo: 1140516,
|
||||
// 'T-Shirt': 1938695,
|
||||
// Hoodie: 925060,
|
||||
// Sunglasses: 1607297,
|
||||
// Cap: 4782119,
|
||||
// },
|
||||
// {
|
||||
// date: '2018-06-03',
|
||||
// Polo: 894368,
|
||||
// 'T-Shirt': 1558919,
|
||||
// Hoodie: 725973,
|
||||
// Sunglasses: 1311479,
|
||||
// Cap: 3596343,
|
||||
// },
|
||||
// {
|
||||
// date: '2018-06-04',
|
||||
// Polo: 737462,
|
||||
// 'T-Shirt': 1345341,
|
||||
// Hoodie: 679201,
|
||||
// Sunglasses: 1203944,
|
||||
// Cap: 3157759,
|
||||
// },
|
||||
// ];
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ import {
|
|||
} from 'd3-scale';
|
||||
import { mouse as d3Mouse, select as d3Select } from 'd3-selection';
|
||||
import { line as d3Line } from 'd3-shape';
|
||||
import { timeFormat as d3TimeFormat, utcParse as d3UTCParse } from 'd3-time-format';
|
||||
import { utcParse as d3UTCParse } from 'd3-time-format';
|
||||
|
||||
export const parseDate = d3UTCParse( '%Y-%m-%d' );
|
||||
export const parseDate = d3UTCParse( '%Y-%m-%dT%H:%M:%SZ' );
|
||||
|
||||
/**
|
||||
* Describes `getUniqueKeys`
|
||||
|
|
@ -214,7 +214,7 @@ export const drawAxis = ( node, params ) => {
|
|||
.call(
|
||||
d3AxisBottom( xScale )
|
||||
.tickValues( params.uniqueDates.map( d => ( params.type === 'line' ? new Date( d ) : d ) ) )
|
||||
.tickFormat( d => d3TimeFormat( '%d' )( d instanceof Date ? d : new Date( d ) ) )
|
||||
.tickFormat( d => params.xFormat( d instanceof Date ? d : new Date( d ) ) )
|
||||
);
|
||||
|
||||
node
|
||||
|
|
@ -235,7 +235,7 @@ export const drawAxis = ( node, params ) => {
|
|||
.call(
|
||||
d3AxisLeft( params.yTickOffset )
|
||||
.tickValues( yGrids )
|
||||
.tickFormat( d => ( d !== 0 ? d3Format( '.3s' )( d ) : 0 ) )
|
||||
.tickFormat( d => ( d !== 0 ? d3Format( params.yFormat )( d ) : 0 ) )
|
||||
);
|
||||
|
||||
node
|
||||
|
|
@ -270,7 +270,7 @@ const showTooltip = ( node, params, d ) => {
|
|||
.style( 'top', yPosition + 'px' )
|
||||
.style( 'display', 'inline-block' ).html( `
|
||||
<div>
|
||||
<h4>${ d.date }</h4>
|
||||
<h4>${ params.tooltipFormat( d.date instanceof Date ? d.date : new Date( d.date ) ) }</h4>
|
||||
<ul>
|
||||
${ keys.join( '' ) }
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { Component, Fragment } from '@wordpress/element';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import ChartExample from 'components/chart/example-hour';
|
||||
import Header from 'layout/header';
|
||||
import StorePerformance from './store-performance';
|
||||
import TopSellingProducts from './top-selling-products';
|
||||
|
|
@ -19,6 +20,7 @@ export default class Dashboard extends Component {
|
|||
<Fragment>
|
||||
<Header sections={ [ __( 'Dashboard', 'wc-admin' ) ] } />
|
||||
<StorePerformance />
|
||||
<ChartExample />
|
||||
<div className="woocommerce-dashboard__columns">
|
||||
<div>
|
||||
<TopSellingProducts />
|
||||
|
|
|
|||
Loading…
Reference in New Issue