- Code refactoring and performance improvements

Automattic · Dec 6, 2024 · f035dfb · f035dfb
1 parent 3691552
commit f035dfb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/client/my-sites/promote-post-i2/components/campaign-item-details/style.scss b/client/my-sites/promote-post-i2/components/campaign-item-details/style.scss
@@ -1300,8 +1300,8 @@ $break-huge-collapsed-menu: $break-huge - 222px;
 	&__chart-tooltip {
 		position: absolute;
 		pointer-events: none;
-		background: var( --color-black );
-		color: var( --color-text-white );
+		background: var( --studio-black );
+		color: var( --studio-white );
 		padding: 8px 10px;
 		border-radius: 4px;
 		display: none;

diff --git a/...mote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx b/...mote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx
@@ -1,6 +1,6 @@
 import { useLocale } from '@automattic/i18n-utils';
 import { hexToRgb } from '@automattic/onboarding';
-import _ from 'lodash';
+import _, { debounce } from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
@@ -42,16 +42,18 @@ const CampaignStatsLineChart = ( { data, source, resolution }: GraphProps ) => {
 		}
 	};
 
+	const debouncedUpdateWidth = debounce( updateWidth, 200 );
+
 	useEffect( () => {
 		// Set initial width
 		updateWidth();
-		window.addEventListener( 'resize', updateWidth );
+		window.addEventListener( 'resize', debouncedUpdateWidth );
 
 		return () => {
 			// Remove on unmount
-			window.removeEventListener( 'resize', updateWidth );
+			window.removeEventListener( 'resize', debouncedUpdateWidth );
 		};
-	}, [] );
+	}, [ debouncedUpdateWidth ] );
 
 	// Convert ISO date string to Unix timestamp
 	const labels = data.map( ( entry ) => new Date( entry.date_utc ).getTime() / 1000 );

diff --git a/client/my-sites/promote-post-i2/components/campaign-stats-line-chart/index.tsx/tooltip.tsx b/client/my-sites/promote-post-i2/components/campaign-stats-line-chart/index.tsx/tooltip.tsx
@@ -1,3 +1,4 @@
+import { debounce } from 'lodash';
 import React from 'react';
 import uPlot from 'uplot';
 
@@ -16,7 +17,8 @@ export function tooltip(
 					u.over.parentNode?.appendChild( tooltipRef.current );
 				}
 
-				u.over.addEventListener( 'mousemove', ( e ) => {
+				// Debounce the mouse move, to reduce the number of updates
+				const handleMouseMove = debounce( ( e ) => {
 					if ( ! tooltipRef?.current ) {
 						return;
 					}
@@ -25,15 +27,19 @@ export function tooltip(
 					const mouseLeft = e.clientX - left;
 					const activePoint = u.posToIdx( mouseLeft );
 
-					if ( activePoint && tooltipRef.current ) {
+					if ( activePoint >= 0 && tooltipRef.current ) {
 						window.requestAnimationFrame( () => {
 							if ( ! tooltipRef.current ) {
 								return;
 							}
 
 							// Get the highlighted point
-							const xPoint = u.data[ 0 ][ activePoint ] ?? 0;
-							const yPoint = u.data[ 1 ][ activePoint ] ?? 0;
+							const xPoint = u.data[ 0 ][ activePoint ];
+							const yPoint = u.data[ 1 ][ activePoint ];
+							if ( xPoint == null || yPoint == null ) {
+								tooltipRef.current.style.display = 'none';
+								return;
+							}
 
 							// Find where that is on the page
 							const xPos = Math.round( u.valToPos( xPoint, 'x', true ) );
@@ -45,11 +51,13 @@ export function tooltip(
 
 							// If we have a value, put the tooltip just above it.
 							if ( value != null ) {
-								tooltipRef.current.style.display = 'block';
-								tooltipRef.current.style.left = `${ xPos - tooltipRef.current.offsetWidth / 2 }px`;
-								tooltipRef.current.style.top = `${ yPos - 16 - tooltipRef.current.offsetHeight }px`;
+								const tooltip = tooltipRef.current;
+								tooltip.style.display = 'block';
+								tooltip.style.left = `${ xPos - tooltip.offsetWidth / 2 }px`;
+								tooltip.style.top = `${ yPos - 16 - tooltip.offsetHeight }px`;
 
-								tooltipRef.current.innerHTML = `
+								// Only update the content if it has changed to avoid unnecessary reflows
+								const newTooltipContent = `
 									<div class="campaign-item-details__chart-tooltip-date">
 										<strong>${ formatDate( new Date( date * 1000 ), hourly ) }</strong>
 									</div>
@@ -58,8 +66,21 @@ export function tooltip(
 										${ formatValue( value ) }
 									</div>
 								`;
+
+								if ( tooltip.innerHTML !== newTooltipContent ) {
+									tooltip.innerHTML = newTooltipContent;
+								}
 							}
 						} );
+					} else if ( tooltipRef.current ) {
+						tooltipRef.current.style.display = 'none';
+					}
+				}, 8 ); // 120mhz (1000/120 = 8.333ms)
+
+				u.over.addEventListener( 'mousemove', handleMouseMove );
+				u.over.addEventListener( 'mouseleave', () => {
+					if ( tooltipRef.current ) {
+						tooltipRef.current.style.display = 'none';
 					}
 				} );
 			},