86 lines
1.9 KiB
JavaScript
86 lines
1.9 KiB
JavaScript
|
/** @format */
|
||
|
|
|
||
|
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import { format as d3Format } from 'd3-format';
|
||
|
|
import { timeFormat as d3TimeFormat } from 'd3-time-format';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import './style.scss';
|
||
|
|
import D3Base from '../base';
|
||
|
|
import { drawAxis, drawBars } from './utils';
|
||
|
|
|
||
|
|
const D3Chart = ( { className, data, height, margin, timeseries, xFormat, yFormat, width } ) => {
|
||
|
|
const drawChart = ( svg, params ) => {
|
||
|
|
const g = svg
|
||
|
|
.attr( 'id', 'barchart' )
|
||
|
|
.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,
|
||
|
|
} );
|
||
|
|
drawAxis( g, data, adjParams );
|
||
|
|
drawBars( g, data, adjParams );
|
||
|
|
return svg;
|
||
|
|
};
|
||
|
|
|
||
|
|
const getParams = node => {
|
||
|
|
const calculatedWidth = width || node.offsetWidth;
|
||
|
|
const calculatedHeight = height || node.offsetHeight;
|
||
|
|
return {
|
||
|
|
base: 0,
|
||
|
|
height: calculatedHeight,
|
||
|
|
margin,
|
||
|
|
width: calculatedWidth,
|
||
|
|
scale: width / node.offsetWidth,
|
||
|
|
xFormat: timeseries ? d3TimeFormat( xFormat ) : d3Format( xFormat ),
|
||
|
|
yFormat: d3Format( yFormat ),
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<D3Base className={ classNames( className ) } drawChart={ drawChart } getParams={ getParams } />
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
D3Chart.propTypes = {
|
||
|
|
className: PropTypes.string,
|
||
|
|
data: PropTypes.array,
|
||
|
|
height: PropTypes.number,
|
||
|
|
margin: PropTypes.shape( {
|
||
|
|
bottom: PropTypes.number,
|
||
|
|
left: PropTypes.number,
|
||
|
|
right: PropTypes.number,
|
||
|
|
top: PropTypes.number,
|
||
|
|
} ),
|
||
|
|
timeseries: PropTypes.bool,
|
||
|
|
width: PropTypes.number,
|
||
|
|
xFormat: PropTypes.string,
|
||
|
|
yFormat: PropTypes.string,
|
||
|
|
};
|
||
|
|
|
||
|
|
D3Chart.defaultProps = {
|
||
|
|
height: 200,
|
||
|
|
margin: {
|
||
|
|
bottom: 30,
|
||
|
|
left: 40,
|
||
|
|
right: 0,
|
||
|
|
top: 20,
|
||
|
|
},
|
||
|
|
timeseries: true,
|
||
|
|
width: 600,
|
||
|
|
xFormat: '%Y-%m-%d',
|
||
|
|
yFormat: ',.0f',
|
||
|
|
};
|
||
|
|
|
||
|
|
export default D3Chart;
|