Skip to content

Commit

Permalink
Stats: Improve shortcuts for date range picker (#98160)
Browse files Browse the repository at this point in the history 
* Alter shortcuts along with event names

* Respect applied shortcut period

* Make shortcut Today navigate to hourly views

* Hide year_to_date temporarily
  • Loading branch information
@dognose24
dognose24 authored Jan 13, 2025
1 parent a6543f1 commit 9eea835
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 38 deletions.
45 changes: 28 additions & 17 deletions client/components/date-range/use-shortcuts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const DATERANGE_PERIOD = {
DAY: 'day',
WEEK: 'week',
MONTH: 'month',
YEAR: 'year',
};

const DATE_FORMAT = 'YYYY-MM-DD';
Expand Down Expand Up @@ -46,23 +47,14 @@ export const getShortcuts = createSelector(
const siteId = getSelectedSiteId( state );
const siteToday = getMomentSiteZone( state, siteId );
const siteTodayStr = siteToday.format( DATE_FORMAT );
const siteYesterday = siteToday.clone().subtract( 1, 'days' );
const yesterdayStr = siteYesterday.format( DATE_FORMAT );

const supportedShortcutList = [
{
id: 'today',
label: translate( 'Today' ),
startDate: siteTodayStr,
endDate: siteTodayStr,
period: DATERANGE_PERIOD.DAY,
},
{
id: 'yesterday',
label: translate( 'Yesterday' ),
startDate: yesterdayStr,
endDate: yesterdayStr,
period: DATERANGE_PERIOD.DAY,
period: DATERANGE_PERIOD.HOUR,
},
{
id: 'last_7_days',
Expand All @@ -79,19 +71,38 @@ export const getShortcuts = createSelector(
period: DATERANGE_PERIOD.DAY,
},
{
id: 'last_3_months',
label: translate( 'Last 90 Days' ),
startDate: siteToday.clone().subtract( 89, 'days' ).format( DATE_FORMAT ),
id: 'month_to_date',
label: translate( 'Month to date' ),
startDate: siteToday.clone().startOf( 'month' ).format( DATE_FORMAT ),
endDate: siteTodayStr,
period: DATERANGE_PERIOD.WEEK,
period: DATERANGE_PERIOD.DAY,
},
{
id: 'last_year',
label: translate( 'Last Year' ),
startDate: siteToday.clone().subtract( 364, 'days' ).format( DATE_FORMAT ),
id: 'last_12_months',
label: translate( 'Last 12 months' ),
startDate: siteToday
.clone()
.startOf( 'month' )
.subtract( 11, 'months' )
.format( DATE_FORMAT ),
endDate: siteTodayStr,
period: DATERANGE_PERIOD.MONTH,
},
// Temporarily hide this shortcut before we resolve the issue of identifying shortcuts.
// {
// id: 'year_to_date',
// label: translate( 'Year to date' ),
// startDate: siteToday.clone().startOf( 'year' ).format( DATE_FORMAT ),
// endDate: siteTodayStr,
// period: DATERANGE_PERIOD.MONTH,
// },
{
id: 'last_3_years',
label: translate( 'Last 3 years' ),
startDate: siteToday.clone().startOf( 'year' ).subtract( 2, 'years' ).format( DATE_FORMAT ),
endDate: siteTodayStr,
period: DATERANGE_PERIOD.YEAR,
},
{
id: 'custom_date_range',
label: translate( 'Custom Range' ),
Expand Down
25 changes: 15 additions & 10 deletions client/components/stats-date-control/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,12 @@ interface StatsDateControlProps {
// Define the event name keys for tracking events
type EventNameKey =
| 'today'
| 'yesterday'
| 'last_7_days'
| 'last_30_days'
| 'last_3_months'
| 'last_year'
| 'month_to_date'
| 'last_12_months'
| 'year_to_date'
| 'last_3_years'
| 'custom_date_range'
| 'apply_button'
| 'trigger_button';
Expand All @@ -50,22 +51,24 @@ interface EventNames {
const eventNames: EventNames = {
jetpack_odyssey: {
today: 'jetpack_odyssey_stats_date_picker_shortcut_today_clicked',
yesterday: 'jetpack_odyssey_stats_date_picker_shortcut_yesterday_clicked',
last_7_days: 'jetpack_odyssey_stats_date_picker_shortcut_last_7_days_clicked',
last_30_days: 'jetpack_odyssey_stats_date_picker_shortcut_last_30_days_clicked',
last_3_months: 'jetpack_odyssey_stats_date_picker_shortcut_last_3_months_clicked',
last_year: 'jetpack_odyssey_stats_date_picker_shortcut_last_year_clicked',
month_to_date: 'jetpack_odyssey_stats_date_picker_shortcut_month_to_date_clicked',
last_12_months: 'jetpack_odyssey_stats_date_picker_shortcut_last_12_months_clicked',
year_to_date: 'jetpack_odyssey_stats_date_picker_shortcut_year_to_date_clicked',
last_3_years: 'jetpack_odyssey_stats_date_picker_shortcut_last_3_years_clicked',
custom_date_range: 'jetpack_odyssey_stats_date_picker_shortcut_custom_date_range_clicked',
apply_button: 'jetpack_odyssey_stats_date_picker_apply_button_clicked',
trigger_button: 'jetpack_odyssey_stats_date_picker_opened',
},
calypso: {
today: 'calypso_stats_date_picker_shortcut_today_clicked',
yesterday: 'calypso_stats_date_picker_shortcut_yesterday_clicked',
last_7_days: 'calypso_stats_date_picker_shortcut_last_7_days_clicked',
last_30_days: 'calypso_stats_date_picker_shortcut_last_30_days_clicked',
last_3_months: 'calypso_stats_date_picker_shortcut_last_3_months_clicked',
last_year: 'calypso_stats_date_picker_shortcut_last_year_clicked',
month_to_date: 'calypso_stats_date_picker_shortcut_month_to_date_clicked',
last_12_months: 'calypso_stats_date_picker_shortcut_last_12_months_clicked',
year_to_date: 'calypso_stats_date_picker_shortcut_year_to_date_clicked',
last_3_years: 'calypso_stats_date_picker_shortcut_last_3_years_clicked',
custom_date_range: 'calypso_stats_date_picker_shortcut_custom_date_range_clicked',
apply_button: 'calypso_stats_date_picker_apply_button_clicked',
trigger_button: 'calypso_stats_date_picker_opened',
Expand Down Expand Up @@ -142,7 +145,7 @@ const StatsDateControl = ( {
const onApplyButtonHandler = ( startDate: string, endDate: string ) => {
// Determine period based on date range.
const rangeInDays = Math.abs( moment( endDate ).diff( moment( startDate ), 'days' ) );
const period = bestPeriodForDays( rangeInDays );
let period = bestPeriodForDays( rangeInDays );

const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
recordTracksEvent( eventNames[ event_from ][ 'apply_button' ] );
Expand All @@ -154,6 +157,8 @@ const StatsDateControl = ( {

if ( appliedShortcut && appliedShortcut.id ) {
localStorage.setItem( 'jetpack_stats_stored_date_range_shortcut_id', appliedShortcut.id );
// Apply the period from the found shortcut.
period = appliedShortcut.period;
}

// Update chart via routing.
Expand Down
7 changes: 4 additions & 3 deletions client/my-sites/stats/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ export const STATS_TYPE_DEVICE_STATS = 'stats_devices_module';
// stats feature are for more granular control, string value is based on component name
export const STATS_FEATURE_DATE_CONTROL = 'StatsDateControl';
export const STATS_FEATURE_DATE_CONTROL_TODAY = 'StatsDateControl/today';
export const STATS_FEATURE_DATE_CONTROL_YESTERDAY = 'StatsDateControl/yesterday';
export const STATS_FEATURE_DATE_CONTROL_LAST_7_DAYS = 'StatsDateControl/last_7_days';
export const STATS_FEATURE_DATE_CONTROL_LAST_30_DAYS = 'StatsDateControl/last_30_days';
export const STATS_FEATURE_DATE_CONTROL_LAST_90_DAYS = 'StatsDateControl/last_3_months';
export const STATS_FEATURE_DATE_CONTROL_LAST_YEAR = 'StatsDateControl/last_year';
export const STATS_FEATURE_DATE_CONTROL_MONTH_TO_DATE = 'StatsDateControl/month_to_date';
export const STATS_FEATURE_DATE_CONTROL_LAST_12_MONTHS = 'StatsDateControl/last_12_months';
export const STATS_FEATURE_DATE_CONTROL_YEAR_TO_DATE = 'StatsDateControl/year_to_date';
export const STATS_FEATURE_DATE_CONTROL_LAST_3_YEARS = 'StatsDateControl/last_3_years';
export const STATS_FEATURE_DATE_CONTROL_CUSTOM_DATE_RANGE = 'StatsDateControl/custom_date_range';
export const STATS_FEATURE_INTERVAL_DROPDOWN = 'StatsIntervalDropdown';
export const STATS_FEATURE_INTERVAL_DROPDOWN_HOUR = `StatsIntervalDropdown/${ STATS_PERIOD.HOUR }`;
Expand Down
19 changes: 11 additions & 8 deletions client/my-sites/stats/hooks/use-should-gate-stats.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,12 @@ import {
STATS_FEATURE_UTM_STATS,
STATS_FEATURE_DATE_CONTROL,
STATS_FEATURE_DATE_CONTROL_TODAY,
STATS_FEATURE_DATE_CONTROL_YESTERDAY,
STATS_FEATURE_DATE_CONTROL_LAST_30_DAYS,
STATS_FEATURE_DATE_CONTROL_LAST_90_DAYS,
STATS_FEATURE_DATE_CONTROL_MONTH_TO_DATE,
STATS_FEATURE_DATE_CONTROL_LAST_12_MONTHS,
STATS_FEATURE_DATE_CONTROL_YEAR_TO_DATE,
STATS_FEATURE_DATE_CONTROL_LAST_3_YEARS,
STATS_FEATURE_DATE_CONTROL_CUSTOM_DATE_RANGE,
STATS_FEATURE_DATE_CONTROL_LAST_YEAR,
STATS_FEATURE_INTERVAL_DROPDOWN_WEEK,
STATS_FEATURE_INTERVAL_DROPDOWN_MONTH,
STATS_FEATURE_INTERVAL_DROPDOWN_YEAR,
Expand All @@ -57,10 +58,11 @@ import {
const defaultDateControlGates = [
STATS_FEATURE_DATE_CONTROL,
STATS_FEATURE_DATE_CONTROL_TODAY,
STATS_FEATURE_DATE_CONTROL_YESTERDAY,
STATS_FEATURE_DATE_CONTROL_LAST_30_DAYS,
STATS_FEATURE_DATE_CONTROL_LAST_90_DAYS,
STATS_FEATURE_DATE_CONTROL_LAST_YEAR,
STATS_FEATURE_DATE_CONTROL_MONTH_TO_DATE,
STATS_FEATURE_DATE_CONTROL_LAST_12_MONTHS,
STATS_FEATURE_DATE_CONTROL_YEAR_TO_DATE,
STATS_FEATURE_DATE_CONTROL_LAST_3_YEARS,
STATS_FEATURE_DATE_CONTROL_CUSTOM_DATE_RANGE,
];

Expand Down Expand Up @@ -147,8 +149,9 @@ const basicStats = [
// Paid stats
STAT_TYPE_REFERRERS,
STAT_TYPE_CLICKS,
STATS_FEATURE_DATE_CONTROL_LAST_90_DAYS,
STATS_FEATURE_DATE_CONTROL_LAST_YEAR,
STATS_FEATURE_DATE_CONTROL_LAST_12_MONTHS,
STATS_FEATURE_DATE_CONTROL_YEAR_TO_DATE,
STATS_FEATURE_DATE_CONTROL_LAST_3_YEARS,
STATS_FEATURE_DATE_CONTROL_CUSTOM_DATE_RANGE,
STATS_FEATURE_DOWNLOAD_CSV,
STATS_FEATURE_INTERVAL_DROPDOWN_WEEK,
Expand Down

0 comments on commit 9eea835

Please sign in to comment.