Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stats: Improve shortcuts for date range picker #98160

Merged
merged 5 commits into from
Jan 13, 2025
+58 −38
Merged

Stats: Improve shortcuts for date range picker #98160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
243532b
Alter shortcuts along with event names
dognose24 Jan 9, 2025
cf75a8e
Respect applied shortcut period
dognose24 Jan 9, 2025
0069379
Make shortcut Today navigate to hourly views
dognose24 Jan 13, 2025
d61c082
Hide year_to_date temporarily
dognose24 Jan 13, 2025
9cf8e85
Merge branch 'trunk' into update/stats_update_shortcuts
dognose24 Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 28 additions & 17 deletions client/components/date-range/use-shortcuts.ts
View file
Open in desktop
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
Open in desktop
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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love this!

}

// Update chart via routing.
Expand Down
7 changes: 4 additions & 3 deletions client/my-sites/stats/constants.ts
View file
Open in desktop
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
Open in desktop
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,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we also need to gate Month to date for legacy sites?

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
Loading