Stats: Improve shortcuts for date range picker #98160

dognose24 · 2025-01-09T16:06:56Z

Related to https://github.com/Automattic/red-team/issues/281

Proposed Changes

Remove shortcuts Yesterday, Last 90 Days, and Last Year.
Add shortcuts Month to date, Last 12 months, Year to date, and Last 3 years.
Update corresponding event names and feature gates.

Why are these changes being made?

Date range shortcut improvements: p1HpG7-vox-p2.

Testing Instructions

Spin this change up with the Calypso Live branch.
Navigate to Stats > Traffic page.
Ensure the date range picker shortcuts work well.

Ensure the shortcuts are gated correctly if the site has no corresponding purchase.

WPCOM free sites created before 2024-12-12

WPCOM free sites created after 2024-12-12

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-01-09T16:07:09Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129561

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129561&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129561&env=a8c-for-agencies

matticbot · 2025-01-09T16:09:54Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
odyssey-stats

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/stats_update_shortcuts on your sandbox.

matticbot · 2025-01-09T16:11:43Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~149 bytes added 📈 [gzipped])

name                           parsed_size           gzip_size
stats                               +310 B  (+0.0%)      +48 B  (+0.0%)
plugins                             +105 B  (+0.0%)      +42 B  (+0.0%)
media                               +105 B  (+0.0%)      +42 B  (+0.0%)
jetpack-cloud-agency-sites-v2       +105 B  (+0.0%)      +45 B  (+0.0%)
backup                              +105 B  (+0.0%)      +45 B  (+0.0%)
activity                            +105 B  (+0.0%)      +45 B  (+0.0%)
a8c-for-agencies-sites              +105 B  (+0.0%)      +45 B  (+0.0%)
google-my-business                   +61 B  (+0.0%)      +14 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~90 bytes added 📈 [gzipped])

name                                               parsed_size           gzip_size
async-load-store-app-store-stats-listview               +310 B  (+0.3%)      +48 B  (+0.2%)
async-load-store-app-store-stats                        +310 B  (+0.1%)      +48 B  (+0.1%)
async-load-design-playground                            +105 B  (+0.0%)      +42 B  (+0.0%)
async-load-design-blocks                                +105 B  (+0.0%)      +42 B  (+0.0%)
async-load-design                                       +105 B  (+0.0%)      +42 B  (+0.0%)
async-load-calypso-post-editor-media-modal              +105 B  (+0.0%)      +42 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal       +105 B  (+0.0%)      +42 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

dognose24 · 2025-01-09T16:18:30Z

client/components/date-range/use-shortcuts.ts

+			{
+				id: 'year_to_date',
+				label: translate( 'Year to date' ),
+				startDate: siteToday.clone().startOf( 'year' ).format( DATE_FORMAT ),


Year to date would be the same range as Month to date when today is in the year's first month, which is not selectable by the current shortcut-finding mechanism.

Could filter those items whose startDate and endDate are duplicated at the stage? Otherwise it'll look too buggy to ship.

In follow up PRs, we could then probably test the id of the shortcuts before matching the dates.

Maybe initially we could just hide the YTD option? Then we can follow up with any necessary fixes to allow it to be properly selected. As it currently stands, attempting to select it results in the MTD shortcut being highlighted and applied.

I do think it's worth keeping as a visible option when the two periods match though, as we store that as a persistent view state.

Kevin's suggest sound pretty pragmatic 👍

Sounds good to me!

Updated in d61c082.

dognose24 · 2025-01-09T16:22:32Z

client/my-sites/stats/hooks/use-should-gate-stats.ts

@@ -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,


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

kangzj · 2025-01-10T01:20:54Z

client/components/stats-date-control/index.tsx

@@ -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;


kangzj · 2025-01-10T01:21:28Z

client/components/date-range/use-shortcuts.ts

@@ -57,13 +56,6 @@ export const getShortcuts = createSelector(
 				endDate: siteTodayStr,
 				period: DATERANGE_PERIOD.DAY,


Are we able to change the period to hour and drop the force redirection now?

Nice catch! 👍🏼

Updated in 0069379.

We may still need to keep the redirection for choosing a single day on the date range picker.

a8ck3n

This tests well for me excluding the comments on the YTD shortcut. If we're fine hiding the YTD shortcut initially, we could probably ship this and iterate. cc: @kangzj

Nice work, @dognose24!

a8ck3n · 2025-01-10T05:41:38Z

client/components/date-range/use-shortcuts.ts

+			{
+				id: 'year_to_date',
+				label: translate( 'Year to date' ),
+				startDate: siteToday.clone().startOf( 'year' ).format( DATE_FORMAT ),


Maybe initially we could just hide the YTD option? Then we can follow up with any necessary fixes to allow it to be properly selected. As it currently stands, attempting to select it results in the MTD shortcut being highlighted and applied.

I do think it's worth keeping as a visible option when the two periods match though, as we store that as a persistent view state.

kangzj

LGTM! Nice one 👍

a8ci18n · 2025-01-13T09:19:34Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17193169

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @dognose24 for including a screenshot in the description! This is really helpful for our translators.

dognose24 added 2 commits January 9, 2025 23:59

Alter shortcuts along with event names

243532b

Respect applied shortcut period

cf75a8e

dognose24 added the [Feature] Stats Everything related to our analytics product at /stats/ label Jan 9, 2025

dognose24 requested a review from a team January 9, 2025 16:06

dognose24 self-assigned this Jan 9, 2025

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 9, 2025

dognose24 commented Jan 9, 2025

View reviewed changes

dognose24 changed the title ~~Stats: Update shortcuts for date range picker~~ Stats: Improve shortcuts for date range picker Jan 9, 2025

kangzj reviewed Jan 10, 2025

View reviewed changes

a8ck3n reviewed Jan 10, 2025

View reviewed changes

dognose24 added 3 commits January 13, 2025 11:25

Make shortcut Today navigate to hourly views

0069379

Hide year_to_date temporarily

d61c082

Merge branch 'trunk' into update/stats_update_shortcuts

9cf8e85

dognose24 requested review from a8ck3n and kangzj January 13, 2025 03:39

kangzj approved these changes Jan 13, 2025

View reviewed changes

dognose24 merged commit 9eea835 into trunk Jan 13, 2025
13 checks passed

dognose24 deleted the update/stats_update_shortcuts branch January 13, 2025 05:28

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 13, 2025

dognose24 mentioned this pull request Jan 14, 2025

Stats: Resolve date range shortcut conflicts #98353

Open

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stats: Improve shortcuts for date range picker #98160

Stats: Improve shortcuts for date range picker #98160

dognose24 commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited by matticbot

Loading

matticbot commented Jan 9, 2025 •

edited

Loading

matticbot commented Jan 9, 2025 •

edited

Loading

dognose24 Jan 9, 2025 •

edited

Loading

kangzj Jan 10, 2025

kangzj Jan 10, 2025

a8ck3n Jan 10, 2025

kangzj Jan 12, 2025

dognose24 Jan 13, 2025

dognose24 Jan 13, 2025

dognose24 Jan 9, 2025

kangzj Jan 10, 2025

kangzj Jan 10, 2025 •

edited

Loading

dognose24 Jan 13, 2025

dognose24 Jan 13, 2025

dognose24 Jan 13, 2025

a8ck3n left a comment

a8ck3n Jan 10, 2025

kangzj left a comment

a8ci18n commented Jan 13, 2025

		@@ -57,13 +56,6 @@ export const getShortcuts = createSelector(
		endDate: siteTodayStr,
		period: DATERANGE_PERIOD.DAY,

Stats: Improve shortcuts for date range picker #98160

Stats: Improve shortcuts for date range picker #98160

Conversation

dognose24 commented Jan 9, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

WPCOM free sites created before 2024-12-12

WPCOM free sites created after 2024-12-12

Pre-merge Checklist

github-actions bot commented Jan 9, 2025 • edited by matticbot Loading

matticbot commented Jan 9, 2025 • edited Loading

matticbot commented Jan 9, 2025 • edited Loading

dognose24 Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kangzj Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

a8ck3n left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kangzj left a comment

Choose a reason for hiding this comment

a8ci18n commented Jan 13, 2025

dognose24 commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited by matticbot

Loading

matticbot commented Jan 9, 2025 •

edited

Loading

matticbot commented Jan 9, 2025 •

edited

Loading

dognose24 Jan 9, 2025 •

edited

Loading

kangzj Jan 10, 2025 •

edited

Loading