From 702d11f1ef09fa711868ce975f02b29810996273 Mon Sep 17 00:00:00 2001
From: Dognose <dognose24@gmail.com>
Date: Tue, 14 Jan 2025 10:47:34 +0800
Subject: [PATCH 1/2] Store date range shortcut by site

---
 client/components/stats-date-control/index.tsx | 11 ++++++++++-
 client/my-sites/stats/site.jsx                 |  8 +++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/client/components/stats-date-control/index.tsx b/client/components/stats-date-control/index.tsx
index a478b6b39bf7e..770ba4dc732b4 100644
--- a/client/components/stats-date-control/index.tsx
+++ b/client/components/stats-date-control/index.tsx
@@ -6,6 +6,8 @@ import qs from 'qs';
 import { findShortcutForRange } from 'calypso/components/date-range/use-shortcuts';
 import { useLocalizedMoment } from 'calypso/components/localized-moment';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import { useSelector } from 'calypso/state';
+import getSiteId from 'calypso/state/sites/selectors/get-site-id';
 import DateControl from '../date-control';
 import { DateRangePickerShortcut } from '../date-range/shortcuts';
 
@@ -89,6 +91,7 @@ const StatsDateControl = ( {
 
 	const moment = useLocalizedMoment();
 	const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
+	const siteId = useSelector( ( state ) => getSiteId( state, slug ) );
 
 	/**
 	 * Remove start date from query params if it's out of range.
@@ -156,7 +159,13 @@ const StatsDateControl = ( {
 		} );
 
 		if ( appliedShortcut && appliedShortcut.id ) {
-			localStorage.setItem( 'jetpack_stats_stored_date_range_shortcut_id', appliedShortcut.id );
+			localStorage.setItem(
+				`jetpack_stats_stored_date_range_shortcut_id_${ siteId }`,
+				appliedShortcut.id
+			);
+			// Remove legacy item key.
+			localStorage.removeItem( 'jetpack_stats_stored_date_range_shortcut_id' );
+
 			// Apply the period from the found shortcut.
 			period = appliedShortcut.period;
 		}
diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx
index 4e8b83501be8b..afac7fa5283c1 100644
--- a/client/my-sites/stats/site.jsx
+++ b/client/my-sites/stats/site.jsx
@@ -291,9 +291,11 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
 	const getValidDateOrNullFromInput = ( inputDate, inputKey ) => {
 		// Use the stored chartStart and chartEnd if they are valid when the inputDate is absent.
 		if ( inputDate === undefined ) {
-			const appliedShortcutId = localStorage.getItem(
-				'jetpack_stats_stored_date_range_shortcut_id'
-			);
+			const appliedShortcutId =
+				localStorage.getItem( `jetpack_stats_stored_date_range_shortcut_id_${ siteId }` ) ||
+				// Fallback for the compatibility.
+				localStorage.getItem( 'jetpack_stats_stored_date_range_shortcut_id' );
+
 			const appliedShortcut = supportedShortcutList.find(
 				( shortcut ) => shortcut.id === appliedShortcutId
 			);

From 80232a7f4a88268256a1772025c5023bc376b674 Mon Sep 17 00:00:00 2001
From: Dognose <dognose24@gmail.com>
Date: Tue, 14 Jan 2025 12:13:38 +0800
Subject: [PATCH 2/2] Store chart period by site

---
 client/components/stats-interval-dropdown/index.jsx | 10 ++++++++--
 client/my-sites/stats/site.jsx                      |  4 +++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/components/stats-interval-dropdown/index.jsx b/client/components/stats-interval-dropdown/index.jsx
index 848b460eb564e..35a5d3d88c5e8 100644
--- a/client/components/stats-interval-dropdown/index.jsx
+++ b/client/components/stats-interval-dropdown/index.jsx
@@ -6,8 +6,10 @@ import clsx from 'clsx';
 import { capitalize } from 'lodash';
 import qs from 'qs';
 import { useRef } from 'react';
-import './style.scss';
 import useOutsideClickCallback from 'calypso/lib/use-outside-click-callback';
+import { useSelector } from 'calypso/state';
+import getSiteId from 'calypso/state/sites/selectors/get-site-id';
+import './style.scss';
 
 const StatsIntervalDropdownListing = ( {
 	selected,
@@ -80,6 +82,8 @@ const IntervalDropdown = ( { slug, period, queryParams, intervals, onGatedHandle
 	// New interval listing that preserves date range.
 	// TODO: Figure out how to dismiss on select.
 
+	const siteId = useSelector( ( state ) => getSiteId( state, slug ) );
+
 	function generateNewLink( newPeriod ) {
 		const newRangeQuery = qs.stringify( Object.assign( {}, queryParams, {} ), {
 			addQueryPrefix: true,
@@ -101,7 +105,9 @@ const IntervalDropdown = ( { slug, period, queryParams, intervals, onGatedHandle
 			return;
 		}
 
-		localStorage.setItem( 'jetpack_stats_stored_period', interval );
+		localStorage.setItem( `jetpack_stats_stored_period_${ siteId }`, interval );
+		// Remove legacy item key.
+		localStorage.removeItem( 'jetpack_stats_stored_period' );
 
 		page( generateNewLink( interval ) );
 	}
diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx
index afac7fa5283c1..da0d5ff86cc10 100644
--- a/client/my-sites/stats/site.jsx
+++ b/client/my-sites/stats/site.jsx
@@ -342,7 +342,9 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
 
 	useEffect( () => {
 		// Use the stored period if it's different from the current period.
-		const storedPeriod = localStorage.getItem( 'jetpack_stats_stored_period' );
+		const storedPeriod =
+			localStorage.getItem( `jetpack_stats_stored_period_${ siteId }` ) ||
+			localStorage.getItem( 'jetpack_stats_stored_period' );
 		if (
 			hasSiteLoadedFeatures &&
 			! shouldForceDefaultPeriod &&