split out example.js and index for component
This commit is contained in:
Robert Elliott
parent
0c7d016629
commit
bbc7e13e3e
|
|
@ -0,0 +1,103 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Card from 'components/card';
|
||||
import Chart from 'components/chart';
|
||||
import dummyOrders from './test/fixtures/dummy';
|
||||
|
||||
class WidgetCharts extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.handleChange = this.handleChange.bind( this );
|
||||
this.getSomeOrders = this.getSomeOrders.bind( this );
|
||||
const products = [
|
||||
{
|
||||
key: 'date',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'Cap',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'T-Shirt',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'Sunglasses',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'Polo',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'Hoodie',
|
||||
selected: true,
|
||||
},
|
||||
];
|
||||
const someOrders = this.getSomeOrders( products );
|
||||
this.state = {
|
||||
products,
|
||||
someOrders,
|
||||
};
|
||||
}
|
||||
|
||||
getSomeOrders( products ) {
|
||||
return dummyOrders.map( d => {
|
||||
return Object.keys( d )
|
||||
.filter( key =>
|
||||
products
|
||||
.filter( k => k.selected )
|
||||
.map( k => k.key )
|
||||
.includes( key )
|
||||
)
|
||||
.reduce( ( accum, current ) => ( { ...accum, [ current ]: d[ current ] } ), {} );
|
||||
} );
|
||||
}
|
||||
|
||||
handleChange( event ) {
|
||||
const products = this.state.products.map( d => ( {
|
||||
...d,
|
||||
selected: d.key === event.target.id ? ! d.selected : d.selected,
|
||||
} ) );
|
||||
const someOrders = this.getSomeOrders( products );
|
||||
this.setState( { products, someOrders } );
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<Card title={ __( 'Test Categories', 'wc-admin' ) }>
|
||||
<ul>
|
||||
{ this.state.products.map( d => (
|
||||
<li key={ d.key } style={ { display: 'inline', marginRight: '12px' } }>
|
||||
<label htmlFor={ d.key }>
|
||||
<input
|
||||
id={ d.key }
|
||||
type="checkbox"
|
||||
onChange={ this.handleChange }
|
||||
checked={ d.selected }
|
||||
/>{' '}
|
||||
{ d.key }
|
||||
</label>
|
||||
</li>
|
||||
) ) }
|
||||
</ul>
|
||||
</Card>
|
||||
<Card title={ __( 'Store Charts', 'wc-admin' ) }>
|
||||
<Chart data={ this.state.someOrders } title="Example Chart" />
|
||||
</Card>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default WidgetCharts;
|
||||
|
|
@ -2,78 +2,45 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import classNames from 'classnames';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
import { Component } from '@wordpress/element';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Card from 'components/card';
|
||||
import D3Chart from './charts';
|
||||
import dummyOrders from './test/fixtures/dummy';
|
||||
import Legend from './legend';
|
||||
|
||||
const WIDE_BREAKPOINT = 1130;
|
||||
|
||||
class WidgetCharts extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
class Chart extends Component {
|
||||
constructor( props ) {
|
||||
super( props );
|
||||
this.getOrderedKeys = this.getOrderedKeys.bind( this );
|
||||
this.handleLegendHover = this.handleLegendHover.bind( this );
|
||||
this.handleLegendToggle = this.handleLegendToggle.bind( this );
|
||||
this.updateDimensions = this.updateDimensions.bind( this );
|
||||
this.handleChange = this.handleChange.bind( this );
|
||||
this.getSomeOrders = this.getSomeOrders.bind( this );
|
||||
const products = [
|
||||
{
|
||||
key: 'date',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'Cap',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'T-Shirt',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'Sunglasses',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'Polo',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
key: 'Hoodie',
|
||||
selected: true,
|
||||
},
|
||||
];
|
||||
const someOrders = this.getSomeOrders( products );
|
||||
this.state = {
|
||||
products,
|
||||
orderedKeys: this.getOrderedKeys( someOrders ).map( d => ( {
|
||||
data: props.data,
|
||||
orderedKeys: this.getOrderedKeys( props.data ).map( d => ( {
|
||||
...d,
|
||||
visible: true,
|
||||
focus: true,
|
||||
} ) ),
|
||||
someOrders,
|
||||
bodyWidth: document.getElementById( 'wpbody' ).getBoundingClientRect().width,
|
||||
};
|
||||
this.handleLegendToggle = this.handleLegendToggle.bind( this );
|
||||
this.handleLegendHover = this.handleLegendHover.bind( this );
|
||||
this.updateDimensions = this.updateDimensions.bind( this );
|
||||
}
|
||||
|
||||
getSomeOrders( products ) {
|
||||
return dummyOrders.map( d => {
|
||||
return Object.keys( d )
|
||||
.filter( key =>
|
||||
products
|
||||
.filter( k => k.selected )
|
||||
.map( k => k.key )
|
||||
.includes( key )
|
||||
)
|
||||
.reduce( ( accum, current ) => ( { ...accum, [ current ]: d[ current ] } ), {} );
|
||||
// @TODO change this to `getDerivedStateFromProps` in React 16.4
|
||||
UNSAFE_componentWillReceiveProps( nextProps ) {
|
||||
this.setState( {
|
||||
data: nextProps.data,
|
||||
orderedKeys: this.getOrderedKeys( nextProps.data ).map( d => ( {
|
||||
...d,
|
||||
visible: true,
|
||||
focus: true,
|
||||
} ) ),
|
||||
} );
|
||||
}
|
||||
|
||||
|
|
@ -101,20 +68,6 @@ class WidgetCharts extends Component {
|
|||
.sort( ( a, b ) => b.total - a.total );
|
||||
}
|
||||
|
||||
handleChange( event ) {
|
||||
const products = this.state.products.map( d => ( {
|
||||
...d,
|
||||
selected: d.key === event.target.id ? ! d.selected : d.selected,
|
||||
} ) );
|
||||
const someOrders = this.getSomeOrders( products );
|
||||
const orderedKeys = this.getOrderedKeys( someOrders ).map( d => ( {
|
||||
...d,
|
||||
visible: true,
|
||||
focus: true,
|
||||
} ) );
|
||||
this.setState( { products, orderedKeys, someOrders } );
|
||||
}
|
||||
|
||||
handleLegendToggle( event ) {
|
||||
this.setState( {
|
||||
orderedKeys: this.state.orderedKeys.map( d => ( {
|
||||
|
|
@ -143,18 +96,14 @@ class WidgetCharts extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { bodyWidth, data, orderedKeys } = this.state;
|
||||
const legendDirection =
|
||||
this.state.orderedKeys.length <= 2 && this.state.bodyWidth > WIDE_BREAKPOINT
|
||||
? 'row'
|
||||
: 'column';
|
||||
const chartDirection =
|
||||
this.state.orderedKeys.length > 2 && this.state.bodyWidth > WIDE_BREAKPOINT
|
||||
? 'row'
|
||||
: 'column';
|
||||
orderedKeys.length <= 2 && bodyWidth > WIDE_BREAKPOINT ? 'row' : 'column';
|
||||
const chartDirection = orderedKeys.length > 2 && bodyWidth > WIDE_BREAKPOINT ? 'row' : 'column';
|
||||
const legend = (
|
||||
<Legend
|
||||
className={ 'woocommerce_dashboard__widget-legend' }
|
||||
data={ this.state.orderedKeys }
|
||||
data={ orderedKeys }
|
||||
handleLegendHover={ this.handleLegendHover }
|
||||
handleLegendToggle={ this.handleLegendToggle }
|
||||
legendDirection={ legendDirection }
|
||||
|
|
@ -167,53 +116,37 @@ class WidgetCharts extends Component {
|
|||
top: 0,
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<Card title={ __( 'Test Categories', 'wc-admin' ) }>
|
||||
<ul>
|
||||
{ this.state.products.map( d => (
|
||||
<li key={ d.key } style={ { display: 'inline', marginRight: '12px' } }>
|
||||
<label htmlFor={ d.key }>
|
||||
<input
|
||||
id={ d.key }
|
||||
type="checkbox"
|
||||
onChange={ this.handleChange }
|
||||
checked={ d.selected }
|
||||
/>{' '}
|
||||
{ d.key }
|
||||
</label>
|
||||
</li>
|
||||
) ) }
|
||||
</ul>
|
||||
</Card>
|
||||
<Card title={ __( 'Store Charts', 'wc-admin' ) }>
|
||||
<div className="woocommerce-dashboard__widget woocommerce-dashboard__widget-chart">
|
||||
<div className="woocommerce-dashboard__widget-chart-header">
|
||||
{ this.state.bodyWidth > WIDE_BREAKPOINT && legendDirection === 'row' && legend }
|
||||
</div>
|
||||
<div
|
||||
className={ classNames(
|
||||
'woocommerce-dashboard__widget-chart-body',
|
||||
`woocommerce-dashboard__widget-chart-body-${ chartDirection }`
|
||||
) }
|
||||
>
|
||||
{ this.state.bodyWidth > WIDE_BREAKPOINT && legendDirection === 'column' && legend }
|
||||
<D3Chart
|
||||
data={ this.state.someOrders }
|
||||
height={ 300 }
|
||||
margin={ margin }
|
||||
orderedKeys={ this.state.orderedKeys }
|
||||
type={ 'bar' }
|
||||
width={ chartDirection === 'row' ? 762 : 1082 }
|
||||
/>
|
||||
</div>
|
||||
{ this.state.bodyWidth < WIDE_BREAKPOINT && (
|
||||
<div className="woocommerce-dashboard__widget-chart-footer">{ legend }</div>
|
||||
) }
|
||||
</div>
|
||||
</Card>
|
||||
</Fragment>
|
||||
<div className="woocommerce-dashboard__widget woocommerce-dashboard__widget-chart">
|
||||
<div className="woocommerce-dashboard__widget-chart-header">
|
||||
{ bodyWidth > WIDE_BREAKPOINT && legendDirection === 'row' && legend }
|
||||
</div>
|
||||
<div
|
||||
className={ classNames(
|
||||
'woocommerce-dashboard__widget-chart-body',
|
||||
`woocommerce-dashboard__widget-chart-body-${ chartDirection }`
|
||||
) }
|
||||
>
|
||||
{ bodyWidth > WIDE_BREAKPOINT && legendDirection === 'column' && legend }
|
||||
<D3Chart
|
||||
data={ data }
|
||||
height={ 300 }
|
||||
margin={ margin }
|
||||
orderedKeys={ orderedKeys }
|
||||
type={ 'bar' }
|
||||
width={ chartDirection === 'row' ? 762 : 1082 }
|
||||
/>
|
||||
</div>
|
||||
{ bodyWidth < WIDE_BREAKPOINT && (
|
||||
<div className="woocommerce-dashboard__widget-chart-footer">{ legend }</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default WidgetCharts;
|
||||
Chart.propTypes = {
|
||||
data: PropTypes.array.isRequired,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Chart;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import './style.scss';
|
|||
import Header from 'layout/header';
|
||||
import StorePerformance from './store-performance';
|
||||
import TopSellingProducts from './top-selling-products';
|
||||
import Chart from 'components/chart';
|
||||
import Chart from 'components/chart/example';
|
||||
import Card from 'components/card';
|
||||
|
||||
export default class Dashboard extends Component {
|
||||
|
|
|
|||
Loading…
Reference in New Issue