woocommerce/plugins/woocommerce-admin/client/homepage/stats-overview/index.js

151 lines
3.5 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
import { TabPanel } from '@wordpress/components';
import { get, xor } from 'lodash';
/**
* WooCommerce dependencies
*/
import {
Card,
EllipsisMenu,
MenuItem,
MenuTitle,
Link,
} from '@woocommerce/components';
import { useUserPreferences } from '@woocommerce/data';
import { getSetting } from '@woocommerce/wc-admin-settings';
import { getNewPath } from '@woocommerce/navigation';
/**
* Internal dependencies
*/
import './style.scss';
import { DEFAULT_STATS, DEFAULT_HIDDEN_STATS } from './defaults';
import StatsList from './stats-list';
import { recordEvent } from 'lib/tracks';
import InstallJetpackCta from './install-jetpack-cta';
const { performanceIndicators } = getSetting( 'dataEndpoints', {
performanceIndicators: [],
} );
const stats = performanceIndicators.filter( ( indicator ) => {
return DEFAULT_STATS.includes( indicator.stat );
} );
export const StatsOverview = () => {
const { updateUserPreferences, ...userPrefs } = useUserPreferences();
const hiddenStats = get( userPrefs, [ 'homepage_stats', 'hiddenStats' ], DEFAULT_HIDDEN_STATS );
const toggleStat = ( stat ) => {
const nextHiddenStats = xor( hiddenStats, [ stat ] );
updateUserPreferences( {
homepage_stats: { hiddenStats: nextHiddenStats },
} );
recordEvent( 'statsoverview_indicators_toggle', {
indicator_name: stat,
status: nextHiddenStats.includes( stat ) ? 'off' : 'on',
} );
};
const activeStats = stats.filter(
( item ) => ! hiddenStats.includes( item.stat )
);
return (
<Card
className="woocommerce-analytics__card woocommerce-stats-overview"
title={ __( 'Stats overview', 'woocommerce-admin' ) }
menu={
<EllipsisMenu
label={ __(
'Choose which values to display',
'woocommerce-admin'
) }
renderContent={ () => (
<Fragment>
<MenuTitle>
{ __( 'Display stats:', 'woocommerce-admin' ) }
</MenuTitle>
{ stats.map( ( item ) => {
const checked = ! hiddenStats.includes(
item.stat
);
return (
<MenuItem
checked={ checked }
isCheckbox
isClickable
key={ item.stat }
onInvoke={ () =>
toggleStat( item.stat )
}
>
{ item.label }
</MenuItem>
);
} ) }
</Fragment>
) }
/>
}
>
<TabPanel
className="woocommerce-stats-overview__tabs"
onSelect={ ( period ) => {
recordEvent( 'statsoverview_date_picker_update', {
period,
} );
} }
tabs={ [
{
title: __( 'Today', 'woocommerce-admin' ),
name: 'today',
},
{
title: __( 'Week to date', 'woocommerce-admin' ),
name: 'week',
},
{
title: __( 'Month to date', 'woocommerce-admin' ),
name: 'month',
},
] }
>
{ ( tab ) => (
<Fragment>
<InstallJetpackCta />
<StatsList
query={ {
period: tab.name,
compare: 'previous_period',
} }
stats={ activeStats }
/>
</Fragment>
) }
</TabPanel>
<div className="woocommerce-stats-overview__footer">
<Link
className="woocommerce-stats-overview__more-btn"
href={ getNewPath( {}, '/analytics/overview' ) }
type="wc-admin"
onClick={ () => {
recordEvent( 'statsoverview_indicators_click', {
key: 'view_detailed_stats',
} );
} }
>
{ __( 'View detailed stats' ) }
</Link>
</div>
</Card>
);
};
export default StatsOverview;