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

166 lines
3.7 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
import {
TabPanel,
Card,
CardHeader,
CardBody,
CardFooter,
__experimentalText as Text,
} from '@wordpress/components';
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
import { get, xor } from 'lodash';
/**
* WooCommerce dependencies
*/
import {
EllipsisMenu,
MenuItem,
MenuTitle,
Link,
} from '@woocommerce/components';
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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 );
} );
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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 ] );
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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
size="large"
className="woocommerce-stats-overview woocommerce-homescreen-card"
>
<CardHeader size="medium">
<Text variant="title.small">
{ __( 'Stats overview', 'woocommerce-admin' ) }
</Text>
<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>
) }
/>
</CardHeader>
<CardBody>
<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>
</CardBody>
<CardFooter>
<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>
</CardFooter>
</Card>
);
};
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
export default StatsOverview;