My Jetpack: Make the Stats section's pieces reusable (#53919)

Author: xavier-lc

projects/packages/my-jetpack/_inc/components/stats-section/cards.jsx

@@ -111,12 +111,14 @@ const getDynamicTitle = metric => {
  * @param {object}   props.counts               - Counts object for the current period.
  * @param {object}   props.previousCounts       - Counts object for the previous period.
  * @param {number}   props.headingLevel         - Heading level between 1 and 6.
- * @param {Array}    props.chartData            - Chart data for the bar chart visualization.
+ * @param {?object}  props.chartData            - Chart data for the bar chart visualization.
  * @param {boolean}  props.isLoading            - Whether the data is loading.
  * @param {string}   props.detailedStatsHref    - Destination of the detailed stats link.
  * @param {Function} props.onDetailedStatsClick - Function to handle detailed stats click.
+ * @param {boolean}  [props.hideTitle]          - Whether to leave out the linked title, when a container already has one.
+ * @param {boolean}  [props.chartBelowCounts]   - Whether to show the chart after the counts instead of before them.
  *
- * @return {object} StatsCards React component.
+ * @return {import('react').JSX.Element} StatsCards React component.
  */
 const StatsCards = ( {
 	counts,
@@ -126,6 +128,8 @@ const StatsCards = ( {
 	isLoading,
 	detailedStatsHref,
 	onDetailedStatsClick,
+	hideTitle = false,
+	chartBelowCounts = false,
 } ) => {
 	const Heading = `h${ headingLevel >= 1 && headingLevel <= 6 ? headingLevel : 3 }`;
 
@@ -169,30 +173,36 @@ const StatsCards = ( {
 		return icons[ metric ] || icons.views;
 	}, [] );
 
+	const chart = (
+		<StatsChart
+			data={ transformedChartData }
+			isLoading={ isLoading }
+			href={ detailedStatsHref }
+			onClick={ onDetailedStatsClick }
+			selectedMetric={ selectedMetric }
+			metricIcon={ getMetricIcon( selectedMetric ) }
+		/>
+	);
+
 	return (
 		<div className={ styles[ 'section-stats-highlights' ] }>
-			<Link
-				tone="neutral"
-				className={ styles[ 'section-title-container' ] }
-				href={ detailedStatsHref }
-				onClick={ detailedStatsHref ? onDetailedStatsClick : undefined }
-			>
-				<Heading className={ styles[ 'section-title' ] }>
-					<span>{ getDynamicTitle( selectedMetric ) }</span>
-				</Heading>
-				<div>
-					<Icon icon={ chevronRight } />
-				</div>
-			</Link>
+			{ ! hideTitle && (
+				<Link
+					tone="neutral"
+					className={ styles[ 'section-title-container' ] }
+					href={ detailedStatsHref }
+					onClick={ detailedStatsHref ? onDetailedStatsClick : undefined }
+				>
+					<Heading className={ styles[ 'section-title' ] }>
+						<span>{ getDynamicTitle( selectedMetric ) }</span>
+					</Heading>
+					<div>
+						<Icon icon={ chevronRight } />
+					</div>
+				</Link>
+			) }
 
-			<StatsChart
-				data={ transformedChartData }
-				isLoading={ isLoading }
-				href={ detailedStatsHref }
-				onClick={ onDetailedStatsClick }
-				selectedMetric={ selectedMetric }
-				metricIcon={ getMetricIcon( selectedMetric ) }
-			/>
+			{ ! chartBelowCounts && chart }
 
 			<ul className={ clsx( styles[ 'cards-list' ], styles[ 'my-jetpack-stats-cards' ] ) }>
 				<CountComparisonCard
@@ -256,6 +266,7 @@ const StatsCards = ( {
 					onClick={ handleCommentsClick }
 				/>
 			</ul>
+			{ chartBelowCounts && chart }
 		</div>
 	);
 };

projects/packages/my-jetpack/_inc/components/stats-section/index.jsx

@@ -11,8 +11,10 @@ import StatsCards from './cards';
 
 /**
  * Options for the stats visits hook
+ *
+ * @type {{ period: 'day', quantity: number, date: Date }}
  */
-const VISITS_OPTIONS = {
+export const VISITS_OPTIONS = {
 	period: 'day',
 	quantity: 14,
 	date: new Date( Date.now() + new Date().getTimezoneOffset() * 60000 ), // now in UTC to match Stats
@@ -22,9 +24,9 @@ const VISITS_OPTIONS = {
  * Process 14-day stats data to extract current and previous 7-day periods
  *
  * @param {object} visitsData - Raw visits data from API with fields and data arrays
- * @return {object} Object containing counts, previousCounts, and chartData for last 7 days
+ * @return {{ counts: object, previousCounts: object, chartData: ?{ fields: string[], data: Array } }} Object containing counts, previousCounts, and chartData for last 7 days
  */
-const processStatsData = visitsData => {
+export const processStatsData = visitsData => {
 	if (
 		! visitsData ||
 		! visitsData.fields ||
@@ -119,6 +121,18 @@ const processStatsData = visitsData => {
 	};
 };
 
+/**
+ * Build the link to the detailed stats page.
+ *
+ * @param {string}  manageUrl               - The Stats product's manage URL.
+ * @param {boolean} premiumAnalyticsEnabled - Whether the URL is the Premium Analytics dashboard.
+ * @return {string|undefined} The link, or undefined without a manage URL.
+ */
+export const getDetailedStatsHref = ( manageUrl, premiumAnalyticsEnabled ) => {
+	const query = premiumAnalyticsEnabled ? '' : '&force_refresh=1';
+	return manageUrl ? `${ manageUrl }${ query }` : undefined;
+};
+
 /**
  * Stats section component for My Jetpack Stats product card with a chart and counts.
  *
@@ -165,8 +179,7 @@ const StatsSection = () => {
 		[ status, manageUrl ]
 	);
 
-	const viewStatsQuery = premiumAnalyticsEnabled ? '' : '&force_refresh=1';
-	const viewStatsHref = manageUrl ? `${ manageUrl }${ viewStatsQuery }` : undefined;
+	const viewStatsHref = getDetailedStatsHref( manageUrl, premiumAnalyticsEnabled );
 
 	const viewStatsButton = {
 		href: viewStatsHref,

projects/packages/my-jetpack/_inc/hooks/use-stats-visits/index.ts

@@ -66,20 +66,24 @@ const useStatsVisits = ( blogID: string, isEnabled: boolean, options: StatsVisit
 		return `${ baseEndpoint }?${ queryParams }`;
 	}, [ blogID, queryParams ] );
 
-	const { data, isLoading, error } = useSimpleQuery< StatsVisitsData >( {
-		name: QUERY_STATS_VISITS_KEY,
-		query: { path: endpoint() },
-		options: {
-			enabled: isEnabled,
-			gcTime: 5000,
-			refetchOnMount: 'always',
-		},
-	} );
+	const { data, isLoading, isFetching, isError, error, refetch } =
+		useSimpleQuery< StatsVisitsData >( {
+			name: QUERY_STATS_VISITS_KEY,
+			query: { path: endpoint() },
+			options: {
+				enabled: isEnabled,
+				gcTime: 5000,
+				refetchOnMount: 'always',
+			},
+		} );
 
 	return {
 		data,
 		isLoading,
+		isFetching,
+		isError,
 		error,
+		refetch,
 	};
 };
 

projects/packages/my-jetpack/changelog/update-my-jetpack-stats-section-reuse

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+Comment: Make the Stats section's data helpers, link and cards reusable; no visible change.
+