Stats: Release new date filtering to production (#97060)

* Flip the feature flag for production * Remove 7-day highlights tests on the Traffic page as the section is removed * minor sytling fix for stats cards * hide visitor legend for hourly view * hide visitors in tooltips when null --------- Co-authored-by: Jasper Kang <[email protected]>
Automattic · Dec 8, 2024 · 6cf2241 · 6cf2241
1 parent d8841b5
commit 6cf2241
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 25 deletions.
diff --git a/client/my-sites/stats/modernized-chart-tabs-styles.scss b/client/my-sites/stats/modernized-chart-tabs-styles.scss
@@ -28,6 +28,8 @@ $custom-stats-tab-mobile-break: $break-medium;
 		width: 100%;
 		padding: 24px 0 16px;
 		border: 0;
+		// Use border radius of its parent; otherwise it'd break the parent corner.
+		border-radius: 4px;
 		box-sizing: border-box;
 
 		display: flex;
@@ -108,6 +110,7 @@ $custom-stats-tab-mobile-break: $break-medium;
 					grid-template-columns: 2fr 2fr 3fr;
 					align-items: center;
 					justify-content: space-between;
+					border-radius: 0;
 				}
 
 				&:hover {

diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx
@@ -162,15 +162,18 @@ class StatsSite extends Component {
 		if ( activeTab !== state.activeTab ) {
 			return {
 				activeTab,
-				activeLegend: activeTab.legendOptions || [],
+				// TODO: remove this when we support hourly visitors.
+				activeLegend: props.period !== 'hour' ? activeTab.legendOptions || [] : [],
 			};
 		}
 		return null;
 	}
 
 	getAvailableLegend() {
+		const { period } = this.props.period;
 		const activeTab = getActiveTab( this.props.chartTab );
-		return activeTab.legendOptions || [];
+		// TODO: remove this when we support hourly visitors.
+		return period !== 'hour' ? activeTab.legendOptions || [] : [];
 	}
 
 	navigationFromChartBar = ( periodStartDate, period ) => {
@@ -310,7 +313,7 @@ class StatsSite extends Component {
 			momentSiteZone,
 			wpcomShowUpsell,
 		} = this.props;
-		const isNewDateFilteringEnabled = config.isEnabled( 'stats/new-date-filtering' ) || isInternal;
+		const isNewDateFilteringEnabled = config.isEnabled( 'stats/new-date-filtering' );
 		let defaultPeriod = PAST_SEVEN_DAYS;
 
 		const shouldShowUpsells = isOdysseyStats && ! isAtomic;

diff --git a/client/my-sites/stats/stats-chart-tabs/utility.js b/client/my-sites/stats/stats-chart-tabs/utility.js
@@ -127,18 +127,21 @@ function addTooltipData( chartTab, item, period, customRange = {} ) {
 				className: 'is-views',
 				icon: <Icon className="gridicon" icon={ eye } />,
 			} );
-			tooltipData.push( {
-				label: translate( 'Visitors' ),
-				value: numberFormat( item.data.visitors ),
-				className: 'is-visitors',
-				icon: <Icon className="gridicon" icon={ people } />,
-			} );
-			tooltipData.push( {
-				label: translate( 'Views Per Visitor' ),
-				value: numberFormat( item.data.views / item.data.visitors, { decimals: 2 } ),
-				className: 'is-views-per-visitor',
-				icon: <Icon className="gridicon" icon={ chevronRight } />,
-			} );
+
+			if ( Number.isFinite( item.data.visitors ) ) {
+				tooltipData.push( {
+					label: translate( 'Visitors' ),
+					value: numberFormat( item.data.visitors ),
+					className: 'is-visitors',
+					icon: <Icon className="gridicon" icon={ people } />,
+				} );
+				tooltipData.push( {
+					label: translate( 'Views Per Visitor' ),
+					value: numberFormat( item.data.views / item.data.visitors, { decimals: 2 } ),
+					className: 'is-views-per-visitor',
+					icon: <Icon className="gridicon" icon={ chevronRight } />,
+				} );
+			}
 
 			if ( item.data.post_titles && item.data.post_titles.length ) {
 				// only show two post titles

diff --git a/config/development.json b/config/development.json
@@ -222,7 +222,7 @@
 		"ssr/prefetch-timebox": false,
 		"stats/empty-module-traffic": true,
 		"stats/empty-module-v2": true,
-		"stats/new-date-filtering": false,
+		"stats/new-date-filtering": true,
 		"stats/paid-wpcom-v2": true,
 		"stats/paid-wpcom-v3": true,
 		"stepper-woocommerce-poc": true,

diff --git a/config/horizon.json b/config/horizon.json
@@ -145,7 +145,7 @@
 		"ssr/prefetch-timebox": true,
 		"stats/empty-module-traffic": true,
 		"stats/empty-module-v2": true,
-		"stats/new-date-filtering": false,
+		"stats/new-date-filtering": true,
 		"stats/paid-wpcom-v2": true,
 		"stepper-woocommerce-poc": true,
 		"storage-addon": true,

diff --git a/config/production.json b/config/production.json
@@ -193,7 +193,7 @@
 		"ssr/sample-log-cache-misses": true,
 		"stats/empty-module-traffic": true,
 		"stats/empty-module-v2": true,
-		"stats/new-date-filtering": false,
+		"stats/new-date-filtering": true,
 		"stats/paid-wpcom-v2": true,
 		"stepper-woocommerce-poc": true,
 		"storage-addon": true,

diff --git a/config/stage.json b/config/stage.json
@@ -189,7 +189,7 @@
 		"ssr/prefetch-timebox": true,
 		"stats/empty-module-traffic": true,
 		"stats/empty-module-v2": true,
-		"stats/new-date-filtering": false,
+		"stats/new-date-filtering": true,
 		"stats/paid-wpcom-v2": true,
 		"stats/paid-wpcom-v3": true,
 		"stepper-woocommerce-poc": true,

diff --git a/config/test.json b/config/test.json
@@ -137,7 +137,7 @@
 		"ssr/prefetch-timebox": true,
 		"stats/empty-module-traffic": true,
 		"stats/empty-module-v2": true,
-		"stats/new-date-filtering": false,
+		"stats/new-date-filtering": true,
 		"stepper-woocommerce-poc": true,
 		"storage-addon": true,
 		"themes/premium": true,

diff --git a/config/wpcalypso.json b/config/wpcalypso.json
@@ -185,7 +185,7 @@
 		"ssr/prefetch-timebox": true,
 		"stats/empty-module-traffic": true,
 		"stats/empty-module-v2": true,
-		"stats/new-date-filtering": false,
+		"stats/new-date-filtering": true,
 		"stats/paid-wpcom-v2": true,
 		"stats/paid-wpcom-v3": true,
 		"stepper-woocommerce-poc": true,

diff --git a/test/e2e/specs/stats/stats.ts b/test/e2e/specs/stats/stats.ts
@@ -62,10 +62,6 @@ describe( DataHelper.createSuiteTitle( 'Stats' ), function () {
 			await statsPage.clickTab( 'Traffic' );
 		} );
 
-		it( 'View 30-day highlights', async function () {
-			await statsPage.selectHighlightPeriod( '30-day' );
-		} );
-
 		it( 'Select "Months" stats period', async function () {
 			await statsPage.selectStatsPeriodFromDropdown( 'Months' );
 		} );