Email Stats: Add Opens and Clicks tooltips

client/my-sites/stats/stats-email-summary/index.jsx

@@ -1,4 +1,6 @@
+import { Tooltip } from '@automattic/components';
 import { localize } from 'i18n-calypso';
+import { useRef, useState } from 'react';
 import { connect } from 'react-redux';
 import titlecase from 'to-title-case';
 import JetpackColophon from 'calypso/components/jetpack-colophon';
@@ -13,6 +15,30 @@ import '../stats-module/summary-nav.scss';
 
 const StatsStrings = statsStringsFactory();
 
+const TooltipWrapper = ( { value, item, renderContent } ) => {
+	const triggerRef = useRef( null );
+	const [ showTooltip, setShowTooltip ] = useState( false );
+
+	const formattedValue =
+		typeof value === 'number' ? Number( value ).toFixed( 2 ) : value.replace( '%', '' ).trim();
+
+	return (
+		<span className="stats-email__tooltip-wrapper">
+			<span
+				ref={ triggerRef }
+				className="stats-email__tooltip-trigger"
+				onMouseEnter={ () => setShowTooltip( true ) }
+				onMouseLeave={ () => setShowTooltip( false ) }
+			>
+				{ `${ formattedValue }%` }
+			</span>
+			<Tooltip position="top" context={ triggerRef.current } isVisible={ showTooltip }>
+				{ renderContent( item ) }
+			</Tooltip>
+		</span>
+	);
+};
+
 const StatsEmailSummary = ( { translate, period, siteSlug } ) => {
 	// Navigation settings. One of the following, depending on the summary view.
 	// Traffic => /stats/day/
@@ -37,6 +63,44 @@ const StatsEmailSummary = ( { translate, period, siteSlug } ) => {
 	}
 	const navigationItems = [ { label: backLabel, href: backLink }, { label: title } ];
 
+	const renderTooltipContent = ( item ) => {
+		const opensUnique = parseInt( item.opens_unique, 10 );
+		const clicksUnique = parseInt( item.clicks_unique, 10 );
+		const opens = parseInt( item.opens, 10 );
+		const clicks = parseInt( item.clicks, 10 );
+		const opensRate = parseFloat( item.opens_rate );
+		const clicksRate = parseFloat( item.clicks_rate );
+		const totalSends = parseInt( item.total_sends, 10 );
+
+		return (
+			<div className="stats-email__tooltip">
+				<div>
+					{ translate( 'Subscribers reached: %(sends)d', {
+						args: { sends: totalSends },
+					} ) }
+				</div>
+				<div>
+					{ opensUnique
+						? translate( 'Unique opens: %(uniqueOpens)d (%(openRate).2f%%)', {
+								args: { uniqueOpens: opensUnique, openRate: opensRate },
+						  } )
+						: translate( 'Opens: %(opens)d)', {
+								args: { opens },
+						  } ) }
+				</div>
+				<div>
+					{ clicksUnique
+						? translate( 'Unique clicks: %(uniqueClicks)d (%(clickRate).2f%%)', {
+								args: { uniqueClicks: clicksUnique, clickRate: clicksRate },
+						  } )
+						: translate( 'Clicks: %(clicks)d ', {
+								args: { clicks },
+						  } ) }
+				</div>
+			</div>
+		);
+	};
+
 	return (
 		<Main className="has-fixed-nav" wideLayout>
 			<PageViewTracker
@@ -64,9 +128,11 @@ const StatsEmailSummary = ( { translate, period, siteSlug } ) => {
 							</>
 						),
 						body: ( item ) => (
-							<>
-								<span>{ `${ item.opens_rate }%` }</span>
-							</>
+							<TooltipWrapper
+								value={ `${ item.opens_rate }%` }
+								item={ item }
+								renderContent={ renderTooltipContent }
+							/>
 						),
 					} }
 					path="emails"
@@ -78,7 +144,18 @@ const StatsEmailSummary = ( { translate, period, siteSlug } ) => {
 					hideSummaryLink
 					metricLabel={ translate( 'Clicks' ) }
 					valueField="clicks_rate"
-					formatValue={ ( value ) => `${ value }%` }
+					formatValue={ ( value, item ) => {
+						if ( item?.opens !== undefined ) {
+							return (
+								<TooltipWrapper
+									value={ `${ value }%` }
+									item={ item }
+									renderContent={ renderTooltipContent }
+								/>
+							);
+						}
+						return <span>{ `${ value }%` }</span>;
+					} }
 					listItemClassName="stats__summary--narrow-mobile"
 				/>
 				<JetpackColophon />

client/state/stats/lists/utils.js

@@ -974,19 +974,35 @@ export const normalizers = {
 		const emailsData = get( data, [ 'posts' ], [] );
 
 		return emailsData.map(
-			( { id, href, date, title, type, opens, clicks, opens_rate, clicks_rate } ) => {
+			( {
+				id,
+				href,
+				date,
+				title,
+				type,
+				opens,
+				clicks,
+				opens_rate,
+				clicks_rate,
+				opens_unique,
+				clicks_unique,
+				total_sends,
+			} ) => {
 				const detailPage = site ? `/stats/email/opens/day/${ id }/${ site.slug }` : null;
 				return {
 					id,
 					href,
 					date,
 					label: title,
 					type,
-					value: clicks || '0',
+					value: clicks_rate || '0',
 					opens: opens || '0',
 					clicks: clicks || '0',
 					opens_rate: opens_rate || '0',
 					clicks_rate: clicks_rate || '0',
+					opens_unique: opens_unique || '0',
+					clicks_unique: clicks_unique || '0',
+					total_sends: total_sends || '0',
 					page: detailPage,
 					actions: [
 						{

packages/components/src/horizontal-bar-list/horizontal-bar-grid-item.tsx

@@ -109,7 +109,7 @@ const HorizontalBarListItem = ( {
 			return <ShortenedNumber value={ value } />;
 		}
 		if ( formatValue ) {
-			return formatValue( value );
+			return formatValue( value, data );
 		}
 		return usePlainCard ? value : numberFormat( value, 0 );
 	};
@@ -193,6 +193,7 @@ const HorizontalBarListItem = ( {
 									isStatic={ isStatic }
 									usePlainCard={ usePlainCard }
 									isLinkUnderlined={ isLinkUnderlined }
+									formatValue={ formatValue }
 								/>
 							);
 						} ) }

packages/components/src/horizontal-bar-list/types.ts

@@ -32,7 +32,10 @@ export type HorizontalBarListItemProps = {
 	 * @property {boolean} hasNoBackground - don't render the background bar and adjust indentation
 	 */
 	hasNoBackground?: boolean;
-	formatValue?: ( value: number ) => string;
+	/**
+	 * @property {Function} formatValue - function to format the value display. Can optionally receive the full item data.
+	 */
+	formatValue?: ( value: number, item?: StatDataObject ) => React.ReactNode;
 };
 
 type StatDataObject = {