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

View File

@ -150,7 +150,10 @@ class D3Chart extends Component {
}
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
className={ classNames( this.props.className ) }
data={ this.state.allData }

View File

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