WIP: Stats: Newsletters: Show open and click rates

client/my-sites/stats/features/modules/stats-emails/stats-emails.tsx

@@ -74,14 +74,16 @@ const StatsEmails: React.FC< StatsDefaultModuleProps > = ( {
 					}
 					additionalColumns={ {
 						header: <span>{ translate( 'Opens' ) }</span>,
-						body: ( item: { opens: number } ) => <span>{ item.opens }</span>,
+						body: ( item: { opens_rate: number } ) => <span>{ `${ item.opens_rate }%` }</span>,
 					} }
 					moduleStrings={ moduleStrings }
 					period={ period }
 					query={ query }
 					statType={ statType }
 					mainItemLabel={ translate( 'Latest Emails' ) }
 					metricLabel={ translate( 'Clicks' ) }
+					valueField="clicks_rate"
+					formatValue={ ( value: number ) => `${ value }%` }
 					showSummaryLink
 					className={ className }
 					hasNoBackground

client/my-sites/stats/stats-list/stats-list-card.jsx

@@ -40,6 +40,7 @@ const StatsListCard = ( {
 	listItemClassName,
 	overlay, // an overlay used to hide the module behind a blur overlay
 	hasNoBackground,
+	formatValue,
 } ) => {
 	const moduleNameTitle = titlecase( moduleType );
 	const debug = debugFactory( `calypso:stats:list:${ moduleType }` );
@@ -176,6 +177,7 @@ const StatsListCard = ( {
 								isLinkUnderlined={ isLinkUnderlined }
 								leftGroupToggle={ item?.children && moduleType === 'tags-categories' } // tags and categories show toggle on the oposite side
 								hasNoBackground={ hasNoBackground }
+								formatValue={ formatValue }
 							/>
 						);
 					} ) }

client/my-sites/stats/stats-module/index.jsx

@@ -46,11 +46,14 @@ class StatsModule extends Component {
 		gateDownloads: PropTypes.bool,
 		hasNoBackground: PropTypes.bool,
 		skipQuery: PropTypes.bool,
+		valueField: PropTypes.string,
+		formatValue: PropTypes.func,
 	};
 
 	static defaultProps = {
 		showSummaryLink: false,
 		query: {},
+		valueField: 'value',
 	};
 
 	state = {
@@ -123,7 +126,6 @@ class StatsModule extends Component {
 			summary,
 			siteId,
 			path,
-			data,
 			moduleStrings,
 			statType,
 			query,
@@ -139,8 +141,20 @@ class StatsModule extends Component {
 			hasNoBackground,
 			skipQuery,
 			titleNodes,
+			valueField,
+			formatValue,
 		} = this.props;
 
+		let data = this.props.data;
+
+		// If valueField is specified and data exists, remap data to use that field as the value
+		if ( valueField && data ) {
+			data = data.map( ( item ) => ( {
+				...item,
+				value: item[ valueField ],
+			} ) );
+		}
+
 		// Only show loading indicators when nothing is in state tree, and request in-flight
 		const isLoading = ! this.state.loaded && ! ( data && data.length );
 
@@ -204,6 +218,7 @@ class StatsModule extends Component {
 							/>
 						)
 					}
+					formatValue={ formatValue }
 				/>
 				{ isAllTime && (
 					<div className={ footerClass }>

client/state/stats/lists/utils.js

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

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

@@ -28,6 +28,7 @@ const HorizontalBarListItem = ( {
 	usePlainCard,
 	isLinkUnderlined,
 	hasNoBackground,
+	formatValue,
 }: HorizontalBarListItemProps ) => {
 	const { label, value, shortLabel, children: itemChildren } = data;
 	const fillPercentage = maxValue > 0 ? ( value / maxValue ) * 100 : 0;
@@ -103,6 +104,16 @@ const HorizontalBarListItem = ( {
 		</span>
 	);
 
+	const renderValue = () => {
+		if ( useShortNumber ) {
+			return <ShortenedNumber value={ value } />;
+		}
+		if ( formatValue ) {
+			return formatValue( value );
+		}
+		return usePlainCard ? value : numberFormat( value, 0 );
+	};
+
 	return (
 		<>
 			<li
@@ -157,11 +168,7 @@ const HorizontalBarListItem = ( {
 						<div className={ `${ BASE_CLASS_NAME }-item--additional` }>{ additionalColumns }</div>
 					) }
 				</div>
-				<div className="value">
-					{ usePlainCard ? value : null }
-					{ ! usePlainCard &&
-						( ! useShortNumber ? numberFormat( value, 0 ) : <ShortenedNumber value={ value } /> ) }
-				</div>
+				<div className="value">{ renderValue() }</div>
 			</li>
 			{ itemChildren && open && (
 				<li>

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

@@ -32,6 +32,7 @@ export type HorizontalBarListItemProps = {
 	 * @property {boolean} hasNoBackground - don't render the background bar and adjust indentation
 	 */
 	hasNoBackground?: boolean;
+	formatValue?: ( value: number ) => string;
 };
 
 type StatDataObject = {