Stats: improve tooltips positive/negative trends

Automattic · Dec 11, 2024 · 32998e6 · 32998e6
1 parent dd2b152
commit 32998e6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
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;