woocommerce/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js

259 lines
6.4 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import { Fragment, useState } from '@wordpress/element';
import LineGraphIcon from 'gridicons/dist/line-graph';
import StatsAltIcon from 'gridicons/dist/stats-alt';
import PropTypes from 'prop-types';
import { Button, NavigableMenu, SelectControl } from '@wordpress/components';
import {
EllipsisMenu,
MenuItem,
MenuTitle,
SectionHeader,
} from '@woocommerce/components';
import { useUserPreferences } from '@woocommerce/data';
import { getAllowedIntervalsForQuery } from '@woocommerce/date';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import ChartBlock from './block';
import { uniqCharts } from './config';
import './style.scss';
const renderChartToggles = ( { hiddenBlocks, onToggleHiddenBlock } ) => {
return uniqCharts.map( ( chart ) => {
const key = chart.endpoint + '_' + chart.key;
const checked = ! hiddenBlocks.includes( key );
return (
<MenuItem
checked={ checked }
isCheckbox
isClickable
key={ chart.endpoint + '_' + chart.key }
onInvoke={ () => {
onToggleHiddenBlock( key )();
recordEvent( 'dash_charts_chart_toggle', {
status: checked ? 'off' : 'on',
key,
} );
} }
>
{ chart.label }
</MenuItem>
);
} );
};
const renderIntervalSelector = ( {
chartInterval,
setInterval,
query,
defaultDateRange,
} ) => {
const allowedIntervals = getAllowedIntervalsForQuery(
query,
defaultDateRange
);
if ( ! allowedIntervals || allowedIntervals.length < 1 ) {
return null;
}
const intervalLabels = {
hour: __( 'By hour', 'woocommerce' ),
day: __( 'By day', 'woocommerce' ),
week: __( 'By week', 'woocommerce' ),
month: __( 'By month', 'woocommerce' ),
quarter: __( 'By quarter', 'woocommerce' ),
year: __( 'By year', 'woocommerce' ),
};
return (
<SelectControl
className="woocommerce-chart__interval-select"
value={ chartInterval }
options={ allowedIntervals.map( ( allowedInterval ) => ( {
value: allowedInterval,
label: intervalLabels[ allowedInterval ],
} ) ) }
aria-label="Chart period"
onChange={ setInterval }
/>
);
};
const renderChartBlocks = ( { hiddenBlocks, path, query, filters } ) => {
// Reduce the API response to only the necessary stat fields
// by supplying all charts common to each endpoint.
const chartsByEndpoint = uniqCharts.reduce( ( byEndpoint, chart ) => {
if ( typeof byEndpoint[ chart.endpoint ] === 'undefined' ) {
byEndpoint[ chart.endpoint ] = [];
}
byEndpoint[ chart.endpoint ].push( chart );
return byEndpoint;
}, {} );
return (
<div className="woocommerce-dashboard__columns">
{ uniqCharts.map( ( chart ) => {
return hiddenBlocks.includes(
chart.endpoint + '_' + chart.key
) ? null : (
<ChartBlock
charts={ chartsByEndpoint[ chart.endpoint ] }
endpoint={ chart.endpoint }
key={ chart.endpoint + '_' + chart.key }
path={ path }
query={ query }
selectedChart={ chart }
filters={ filters }
/>
);
} ) }
</div>
);
};
const DashboardCharts = ( props ) => {
const {
controls: Controls,
hiddenBlocks,
isFirst,
isLast,
onMove,
onRemove,
onTitleBlur,
onTitleChange,
onToggleHiddenBlock,
path,
title,
titleInput,
filters,
defaultDateRange,
} = props;
const { updateUserPreferences, ...userPrefs } = useUserPreferences();
const [ chartType, setChartType ] = useState(
userPrefs.dashboard_chart_type || 'line'
);
const [ chartInterval, setChartInterval ] = useState(
userPrefs.dashboard_chart_interval || 'day'
);
const query = { ...props.query, chartType, interval: chartInterval };
const handleTypeToggle = ( type ) => {
return () => {
setChartType( type );
const userDataFields = {
dashboard_chart_type: type,
};
updateUserPreferences( userDataFields );
recordEvent( 'dash_charts_type_toggle', { chart_type: type } );
};
};
const renderMenu = () => (
<EllipsisMenu
label={ __( 'Choose which charts to display', 'woocommerce' ) }
renderContent={ ( { onToggle } ) => (
<Fragment>
<MenuTitle>{ __( 'Charts', 'woocommerce' ) }</MenuTitle>
{ renderChartToggles( {
hiddenBlocks,
onToggleHiddenBlock,
} ) }
<Controls
onToggle={ onToggle }
onMove={ onMove }
onRemove={ onRemove }
isFirst={ isFirst }
isLast={ isLast }
onTitleBlur={ onTitleBlur }
onTitleChange={ onTitleChange }
titleInput={ titleInput }
/>
</Fragment>
) }
/>
);
const setInterval = ( interval ) => {
setChartInterval( interval );
const userDataFields = {
dashboard_chart_interval: interval,
};
updateUserPreferences( userDataFields );
recordEvent( 'dash_charts_interval', { interval } );
};
return (
<div className="woocommerce-dashboard__dashboard-charts">
<SectionHeader
title={ title || __( 'Charts', 'woocommerce' ) }
menu={ renderMenu() }
className={ 'has-interval-select' }
>
{ renderIntervalSelector( {
chartInterval,
setInterval,
query,
defaultDateRange,
} ) }
<NavigableMenu
className="woocommerce-chart__types"
orientation="horizontal"
role="menubar"
>
<Button
className={ classNames(
'woocommerce-chart__type-button',
{
'woocommerce-chart__type-button-selected':
! query.chartType ||
query.chartType === 'line',
}
) }
title={ __( 'Line chart', 'woocommerce' ) }
aria-checked={ query.chartType === 'line' }
role="menuitemradio"
tabIndex={ query.chartType === 'line' ? 0 : -1 }
onClick={ handleTypeToggle( 'line' ) }
>
<LineGraphIcon />
</Button>
<Button
className={ classNames(
'woocommerce-chart__type-button',
{
'woocommerce-chart__type-button-selected':
query.chartType === 'bar',
}
) }
title={ __( 'Bar chart', 'woocommerce' ) }
aria-checked={ query.chartType === 'bar' }
role="menuitemradio"
tabIndex={ query.chartType === 'bar' ? 0 : -1 }
onClick={ handleTypeToggle( 'bar' ) }
>
<StatsAltIcon />
</Button>
</NavigableMenu>
</SectionHeader>
{ renderChartBlocks( { hiddenBlocks, path, query, filters } ) }
</div>
);
};
DashboardCharts.propTypes = {
path: PropTypes.string.isRequired,
query: PropTypes.object.isRequired,
defaultDateRange: PropTypes.string.isRequired,
};
export default DashboardCharts;