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 index b22517b1a17596..51ccf789245b0f 100644 --- 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 @@ -1306,6 +1306,7 @@ $break-huge-collapsed-menu: $break-huge - 222px; border-radius: 4px; display: none; text-align: center; + min-width: 60px; } &__chart-tooltip-date { diff --git a/client/my-sites/promote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx b/client/my-sites/promote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx index ead3236f4153b6..ae6a156cdc268e 100644 --- a/client/my-sites/promote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx +++ b/client/my-sites/promote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx @@ -100,7 +100,7 @@ const CampaignStatsLineChart = ( { data, source, resolution }: GraphProps ) => { ticks: { show: false, }, - gap: 12, + gap: 16, values: ( u: uPlot, splits: number[] ) => { // Filter the splits to show only non-overlapping labels return splits.map( ( s, i ) => @@ -117,7 +117,7 @@ const CampaignStatsLineChart = ( { data, source, resolution }: GraphProps ) => { ticks: { show: false, }, - gap: 12, + gap: 16, }, ], cursor: { 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 index 0b50d97ee6607d..52664d2efc549a 100644 --- 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,4 +1,3 @@ -import { debounce } from 'lodash'; import React from 'react'; import uPlot from 'uplot'; @@ -15,11 +14,12 @@ export function tooltip( if ( ! tooltipRef.current ) { tooltipRef.current = document.createElement( 'div' ); tooltipRef.current.className = 'campaign-item-details__chart-tooltip'; + tooltipRef.current.style.display = 'none'; u.over.parentNode?.appendChild( tooltipRef.current ); } // Wrap mouse move in a Debounce to reduce the number of updates - const handleMouseMove = debounce( ( e ) => { + const handleMouseMove = ( e: MouseEvent ) => { if ( ! tooltipRef?.current ) { return; } @@ -78,7 +78,7 @@ export function tooltip( } else if ( tooltipRef.current ) { tooltipRef.current.style.display = 'none'; } - }, 8 ); // 120mhz (1000/120 = 8.333ms) + }; u.over.addEventListener( 'mousemove', handleMouseMove ); u.over.addEventListener( 'mouseleave', () => {