Add stats trends

Automattic · Aug 15, 2024 · a14ff6d · a14ff6d
1 parent ce20e19
commit a14ff6d
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 9 deletions.
diff --git a/...ects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss b/...ects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss
@@ -20,13 +20,19 @@ p.description {
 
 .videopress-card__value-section {
     display: flex;
+    gap: 0.75rem;
+    justify-content: space-between;
 
     &__container {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
+    }
 
-        width: 50%;
+    &__value-container {
+        display: flex;
+        align-items: flex-end;
+        flex-wrap: wrap;
     }
 
     &__value {
@@ -35,9 +41,32 @@ p.description {
         line-height: 1.125;       
     }
 
+    &__previous-value {
+        display: flex;
+        align-items: center;
+
+        font-size: var( --font-body-extra-small );
+        font-weight: 600;
+    }
+
+    &__previous-value.increase {
+        * {
+            color: var( --jp-green-50 );
+            fill: var( --jp-green-50 );
+        }
+    }
+
+    &__previous-value.decrease {
+        * {
+            color: var( --jp-red-50 );
+            fill: var( --jp-red-50 );
+        }
+    }
+
     &__heading {
         display: flex;
         align-items: center;
+        text-wrap: nowrap;
     }
 }
 

diff --git a/...ages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts b/...ages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts
@@ -66,11 +66,10 @@ const useTooltipCopy = () => {
 		),
 	};
 
-	// todo: Add "comparing it with the performance of the previous 30 days." once we have the comparison in place.
 	const watchTime = {
 		title: __( '30-Day viewing time', 'jetpack-my-jetpack' ),
 		text: __(
-			'This metric shows total video viewing time for the last 30 days.',
+			'This metric shows total video viewing time for the last 30 days, comparing it with the performance of the previous 30 days.',
 			'jetpack-my-jetpack'
 		),
 	};

diff --git a/...etpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx b/...etpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx
@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { arrowUp, arrowDown, Icon } from '@wordpress/icons';
 import clsx from 'clsx';
 import { PRODUCT_SLUGS } from '../../../data/constants';
 import useProduct from '../../../data/products/use-product';
@@ -16,6 +17,39 @@ interface VideoPressValueSectionProps {
 	data: Window[ 'myJetpackInitialState' ][ 'videopress' ];
 }
 
+interface ValueSectionProps {
+	value: number;
+	previousValue: number;
+	formattedValue: string;
+	formattedDifference: string;
+}
+
+const ValueSection: FC< ValueSectionProps > = ( {
+	value,
+	previousValue,
+	formattedValue,
+	formattedDifference,
+} ) => {
+	const hasValueIncreased = value > previousValue;
+	return (
+		<div className="videopress-card__value-section__value-container">
+			<span className="videopress-card__value-section__value">{ formattedValue }</span>
+
+			{ value !== previousValue && (
+				<div
+					className={ clsx(
+						'videopress-card__value-section__previous-value',
+						hasValueIncreased ? 'increase' : 'decrease'
+					) }
+				>
+					<Icon size={ 18 } icon={ hasValueIncreased ? arrowUp : arrowDown } />
+					<span>{ formattedDifference }</span>
+				</div>
+			) }
+		</div>
+	);
+};
+
 const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginActive, data } ) => {
 	const { detail } = useProduct( PRODUCT_SLUGS.VIDEOPRESS );
 	const { status, hasPaidPlanForProduct } = detail || {};
@@ -64,6 +98,11 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc
 
 	const currentViews = featuredStats?.data?.views?.current;
 	const currentWatchTime = featuredStats?.data?.watch_time?.current;
+	const previousViews = featuredStats?.data?.views?.previous;
+	const previousWatchTime = featuredStats?.data?.watch_time?.previous;
+
+	const viewsDifference = Math.abs( currentViews - previousViews );
+	const watchTimeDifference = Math.abs( currentWatchTime - previousWatchTime );
 
 	if ( currentViews === undefined || currentWatchTime === undefined ) {
 		return null;
@@ -85,6 +124,7 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc
 						tracksEventProps={ {
 							location: 'views',
 							current_views: currentViews,
+							previous_views: previousViews,
 							...tracksProps,
 						} }
 					>
@@ -102,9 +142,12 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc
 					</InfoTooltip>
 				</span>
 
-				<span className="videopress-card__value-section__value">
-					{ formatNumber( currentViews, shortenedNumberConfig ) }
-				</span>
+				<ValueSection
+					value={ currentViews }
+					previousValue={ previousViews }
+					formattedValue={ formatNumber( currentViews, shortenedNumberConfig ) }
+					formattedDifference={ formatNumber( viewsDifference, shortenedNumberConfig ) }
+				/>
 			</div>
 
 			<div className="videopress-card__value-section__container">
@@ -121,6 +164,7 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc
 						tracksEventProps={ {
 							location: 'watch_time',
 							current_watch_time: currentWatchTime,
+							previous_watch_time: previousWatchTime,
 							...tracksProps,
 						} }
 					>
@@ -130,9 +174,12 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc
 					</InfoTooltip>
 				</span>
 
-				<span className="videopress-card__value-section__value">
-					{ formatTime( currentWatchTime ) }
-				</span>
+				<ValueSection
+					value={ currentWatchTime }
+					previousValue={ previousWatchTime }
+					formattedValue={ formatTime( currentWatchTime ) }
+					formattedDifference={ formatTime( watchTimeDifference ) }
+				/>
 			</div>
 		</div>
 	);