Stats: improve tooltips positive/negative trends (#97364)

* Stats: refactor 'getNote()' function Provide the note together with the overview data. This way, it will be available regardless of whether the site has paid subscribers, as they are handled differently. * Stats: improve tooltips positive/negative trends * Compared translated strings between notes/labels
Automattic · Dec 12, 2024 · 550f603 · 550f603
1 parent 4774012
commit 550f603
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 17 deletions.
diff --git a/client/my-sites/stats/hooks/use-subscribers-overview.ts b/client/my-sites/stats/hooks/use-subscribers-overview.ts
@@ -5,10 +5,13 @@ import { useSubscribersQueries } from './use-subscribers-query';
 const DATES_TO_QUERY = [ 0, 30, 60, 90 ];
 const DATES_TO_QUERY_EXCLUDE_TODAY = [ 30, 60, 90 ];
 
+// Used to allow comparisons between translated strings
+const TODAY_LABEL = translate( 'Today' );
+
 function getLabels( dateToQuery: number ) {
 	switch ( dateToQuery ) {
 		case 0:
-			return translate( 'Today' );
+			return TODAY_LABEL;
 		case 30:
 			return translate( '30 days ago' );
 		case 60:
@@ -20,6 +23,15 @@ function getLabels( dateToQuery: number ) {
 	}
 }
 
+function getNote( heading: string ) {
+	let note = translate( 'As of today' );
+	if ( heading !== TODAY_LABEL ) {
+		const prefix = translate( 'Since' );
+		note = `${ prefix } ${ heading }`;
+	}
+	return note;
+}
+
 // calculate the date to query for based on the number of days to subtract
 function calculateQueryDate( daysToSubtract: number ) {
 	const today = new Date();
@@ -43,9 +55,11 @@ export default function useSubscribersOverview( siteId: number | null, isTodayEx
 	const overviewData = subscribersData.map( ( data, index ) => {
 		const count = data?.data?.[ 0 ]?.subscribers || null;
 		const heading = getLabels( datesToQuery[ index ] );
+		const note = getNote( heading );
 		return {
 			count,
 			heading,
+			note,
 		};
 	} );
 

diff --git a/client/my-sites/stats/stats-subscribers-overview/index.tsx b/client/my-sites/stats/stats-subscribers-overview/index.tsx
@@ -14,13 +14,7 @@ const SubscribersOverview: React.FC< SubscribersOverviewProps > = ( { siteId } )
 	return (
 		<div className="subscribers-overview highlight-cards">
 			<div className="highlight-cards-list">
-				{ overviewData.map( ( { count, heading }, index ) => {
-					let note = translate( 'As of today' );
-					if ( heading !== 'Today' ) {
-						const prefix = translate( 'Since' );
-						note = `${ prefix } ${ heading }`;
-					}
-
+				{ overviewData.map( ( { count, heading, note }, index ) => {
 					return (
 						// TODO: Communicate loading vs error state to the user.
 						<CountCard

diff --git a/client/my-sites/stats/stats-tabs/tab.jsx b/client/my-sites/stats/stats-tabs/tab.jsx
@@ -1,7 +1,5 @@
-import {
-	TooltipContent,
-	TrendComparison,
-} from '@automattic/components/src/highlight-cards/count-comparison-card';
+import { TooltipContent } from '@automattic/components/src/highlight-cards/count-card';
+import { TrendComparison } from '@automattic/components/src/highlight-cards/count-comparison-card';
 import formatNumber from '@automattic/components/src/number-formatters/lib/format-number';
 import Popover from '@automattic/components/src/popover';
 import clsx from 'clsx';
@@ -111,7 +109,11 @@ class StatsTabsTab extends Component {
 								position="bottom right"
 								context={ this.tooltipRef.current }
 							>
-								<TooltipContent count={ value } previousCount={ previousValue } />
+								<TooltipContent
+									value={ value }
+									label={ label.toLocaleLowerCase() }
+									previousValue={ previousValue }
+								/>
 							</Popover>
 						</div>
 					) }

diff --git a/packages/components/src/highlight-cards/count-card.tsx b/packages/components/src/highlight-cards/count-card.tsx
@@ -1,25 +1,42 @@
+import { arrowDown, arrowUp, Icon } from '@wordpress/icons';
 import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import { Card } from '../';
 import Popover from '../popover';
-import { formatNumber } from './lib/numbers';
+import { formatNumber, subtract } from './lib/numbers';
 
 interface CountCardProps {
 	heading?: React.ReactNode;
 	icon?: JSX.Element;
 	label?: string;
 	note?: string;
 	showValueTooltip?: boolean;
-	value: number | string | null;
+	value: number | null;
+	previousValue?: number | null;
 }
 
-function TooltipContent( { value, label, note }: CountCardProps ) {
+export function TooltipContent( { value, label, note, previousValue }: CountCardProps ) {
+	const difference = subtract( value, previousValue );
+
+	let trendClass = 'highlight-card-tooltip-count-difference-positive';
+	let trendIcon = arrowUp;
+	if ( difference !== null && difference < 0 ) {
+		trendClass = 'highlight-card-tooltip-count-difference-negative';
+		trendIcon = arrowDown;
+	}
+
 	return (
 		<div className="highlight-card-tooltip-content">
 			<span className="highlight-card-tooltip-counts">
-				{ formatNumber( value as number, false ) }
+				{ formatNumber( value, false ) }
 				{ label && ` ${ label }` }
 			</span>
+			{ difference !== null && difference !== 0 && (
+				<span className={ trendClass }>
+					<Icon size={ 18 } icon={ trendIcon } />
+					{ formatNumber( Math.abs( difference ), false ) }
+				</span>
+			) }
 			{ note && <div className="highlight-card-tooltip-note">{ note }</div> }
 		</div>
 	);

diff --git a/packages/components/src/highlight-cards/style.scss b/packages/components/src/highlight-cards/style.scss
@@ -396,6 +396,21 @@ $highlight-card-tooltip-font: Inter, $sans !default;
 	color: var(--studio-gray-10);
 }
 
+.highlight-card-tooltip-count-difference-positive {
+	color: var(--studio-green-10);
+}
+
+.highlight-card-tooltip-count-difference-negative {
+	color: var(--studio-red-10);
+}
+
+.highlight-card-tooltip-count-difference-positive svg,
+.highlight-card-tooltip-count-difference-negative svg {
+	fill: currentColor;
+	margin-left: 16px;
+	vertical-align: text-bottom;
+}
+
 .highlight-card-tooltip-note {
 	color: var(--studio-gray-30);
 	font-size: $font-body-small;