Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

D3 Chart Component: split out example + index and handle full-width

This commit is contained in:
Robert Elliott 2018-07-31 10:34:02 +02:00
parent 5f85e75b97
commit 0c7d016629
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/woocommerce-admin/client/components/chart/charts.js
View File

@ -150,7 +150,10 @@ class D3Chart extends Component {
} }
return ( return (
<div className={ classNames( 'woocommerce-chart__container', this.props.className ) }> <div
className={ classNames( 'woocommerce-chart__container', this.props.className ) }
style={ { maxHeight: this.props.height } }
>
<D3Base <D3Base
className={ classNames( this.props.className ) } className={ classNames( this.props.className ) }
data={ this.state.allData } data={ this.state.allData }

6
plugins/woocommerce-admin/client/components/chart/index.js
View File

@ -163,7 +163,7 @@ class WidgetCharts extends Component {
const margin = { const margin = {
bottom: 50, bottom: 50,
left: 50, left: 50,
right: 20, right: 0,
top: 0, top: 0,
}; };
return ( return (
@ -202,8 +202,8 @@ class WidgetCharts extends Component {
height={ 300 } height={ 300 }
margin={ margin } margin={ margin }
orderedKeys={ this.state.orderedKeys } orderedKeys={ this.state.orderedKeys }
type={ 'line' } type={ 'bar' }
width={ chartDirection === 'row' ? 722 : 1042 } width={ chartDirection === 'row' ? 762 : 1082 }
/> />
</div> </div>
{ this.state.bodyWidth < WIDE_BREAKPOINT && ( { this.state.bodyWidth < WIDE_BREAKPOINT && (