woocommerce/plugins/woocommerce-admin/client/components/chart/charts.js

170 lines
4.1 KiB
JavaScript
Raw Normal View History

2018-06-15 18:11:25 +00:00
/** @format */
/**
* External dependencies
*/
import React from 'react';
import { Component } from '@wordpress/element';
2018-06-15 18:11:25 +00:00
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { format as d3Format } from 'd3-format';
import { timeFormat as d3TimeFormat } from 'd3-time-format';
2018-07-25 14:58:32 +00:00
import { select as d3Select } from 'd3-selection';
2018-06-15 18:11:25 +00:00
/**
* Internal dependencies
*/
import './style.scss';
import D3Base from './d3-base';
import {
drawAxis,
drawBars,
drawLines,
getColorScale,
getDateSpaces,
getOrderedKeys,
getLine,
getLineData,
getUniqueKeys,
getUniqueDates,
getXScale,
getXGroupScale,
getXLineScale,
getYMax,
getYScale,
getYTickOffset,
} from './utils';
2018-06-15 18:11:25 +00:00
class D3Chart extends Component {
static propTypes = {
className: PropTypes.string,
data: PropTypes.array.isRequired,
height: PropTypes.number,
legend: PropTypes.array,
margin: PropTypes.shape( {
bottom: PropTypes.number,
left: PropTypes.number,
right: PropTypes.number,
top: PropTypes.number,
} ),
orderedKeys: PropTypes.array,
type: PropTypes.oneOf( [ 'bar', 'line' ] ),
width: PropTypes.number,
xFormat: PropTypes.string,
yFormat: PropTypes.string,
};
static defaultProps = {
height: 200,
margin: {
bottom: 30,
left: 40,
right: 0,
top: 20,
},
type: 'line',
width: 600,
xFormat: '%Y-%m-%d',
yFormat: ',.0f',
};
state = {
allData: null,
};
2018-07-25 14:58:32 +00:00
tooltipRef = React.createRef();
static getDerivedStateFromProps( nextProps, prevState ) {
const nextAllData = [ ...nextProps.data, ...nextProps.orderedKeys ];
if ( prevState.allData !== nextAllData ) {
return { allData: nextAllData };
}
return null;
}
drawChart = ( node, params ) => {
const { data, margin, type } = this.props;
const g = node
.attr( 'id', 'chart' )
2018-06-15 18:11:25 +00:00
.append( 'g' )
.attr( 'transform', `translate(${ margin.left },${ margin.top })` );
const adjParams = Object.assign( {}, params, {
height: params.height - margin.top - margin.bottom,
width: params.width - margin.left - margin.right,
2018-07-25 14:58:32 +00:00
tooltip: d3Select( this.tooltipRef.current ),
2018-06-15 18:11:25 +00:00
} );
2018-06-15 18:11:25 +00:00
drawAxis( g, data, adjParams );
type === 'line' && drawLines( g, data, adjParams );
type === 'bar' && drawBars( g, data, adjParams );
return node;
2018-06-15 18:11:25 +00:00
};
getParams = node => {
const { data, height, margin, orderedKeys, type, width, xFormat, yFormat } = this.props;
2018-06-15 18:11:25 +00:00
const calculatedWidth = width || node.offsetWidth;
const calculatedHeight = height || node.offsetHeight;
const scale = width / node.offsetWidth;
const adjHeight = calculatedHeight - margin.top - margin.bottom;
const adjWidth = calculatedWidth - margin.left - margin.right;
const uniqueKeys = getUniqueKeys( data );
const newOrderedKeys = orderedKeys ? orderedKeys : getOrderedKeys( data, uniqueKeys );
const lineData = getLineData( data, orderedKeys );
const yMax = getYMax( lineData );
const yScale = getYScale( adjHeight, yMax );
const uniqueDates = getUniqueDates( lineData );
const xLineScale = getXLineScale( uniqueDates, adjWidth );
const xScale = getXScale( uniqueDates, adjWidth );
2018-06-15 18:11:25 +00:00
return {
colorScale: getColorScale( orderedKeys ),
dateSpaces: getDateSpaces( uniqueDates, adjWidth, xLineScale ),
2018-06-15 18:11:25 +00:00
height: calculatedHeight,
line: getLine( data, xLineScale, yScale ),
lineData,
2018-06-15 18:11:25 +00:00
margin,
orderedKeys: newOrderedKeys,
scale,
type,
uniqueDates,
uniqueKeys,
width: calculatedWidth,
2018-07-10 12:46:57 +00:00
xFormat: d3TimeFormat( xFormat ),
xGroupScale: getXGroupScale( orderedKeys, xScale ),
xLineScale,
xScale,
yMax,
yScale,
yTickOffset: getYTickOffset( adjHeight, scale, yMax ),
2018-06-15 18:11:25 +00:00
yFormat: d3Format( yFormat ),
};
};
render() {
if ( ! this.props.data ) {
return null; // TODO: improve messaging
}
return (
<div
className={ classNames( 'woocommerce-chart__container', this.props.className ) }
style={ { maxHeight: this.props.height } }
>
2018-07-25 14:58:32 +00:00
<D3Base
className={ classNames( this.props.className ) }
data={ this.state.allData }
drawChart={ this.drawChart }
getParams={ this.getParams }
/>
<div className="tooltip" ref={ this.tooltipRef } />
</div>
);
}
}
2018-06-15 18:11:25 +00:00
export default D3Chart;