From d8841b5c4c1e47a4b31ba718bcede0fec7e3d44d Mon Sep 17 00:00:00 2001
From: Dognose <dognose24@users.noreply.github.com>
Date: Mon, 9 Dec 2024 05:17:38 +0800
Subject: [PATCH] Stats: Enable tab switching for unsupported fields of hourly
 views (#97163)

* Utilize NULL for unsupported stats fields to enable tab-switching

* Use the hour period dedicated empty state texts
---
 client/my-sites/stats/stats-chart-tabs/index.jsx    | 13 +++++++++++--
 client/my-sites/stats/stats-tabs/index.jsx          |  6 +++---
 .../data-layer/wpcom/sites/stats/visits/index.js    |  2 +-
 .../data-layer/wpcom/sites/stats/visits/schema.js   |  3 ++-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/client/my-sites/stats/stats-chart-tabs/index.jsx b/client/my-sites/stats/stats-chart-tabs/index.jsx
index 2fc5ab1f9a471..b87bdb00972b2 100644
--- a/client/my-sites/stats/stats-chart-tabs/index.jsx
+++ b/client/my-sites/stats/stats-chart-tabs/index.jsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { localize } from 'i18n-calypso';
+import { localize, translate } from 'i18n-calypso';
 import { flowRight } from 'lodash';
 import moment from 'moment';
 import PropTypes from 'prop-types';
@@ -151,7 +151,16 @@ class StatModuleChartTabs extends Component {
 
 				<StatsModulePlaceholder className="is-chart" isLoading={ isActiveTabLoading } />
 				<Chart barClick={ this.props.barClick } data={ chartData } minBarWidth={ 35 }>
-					<StatsEmptyState />
+					<StatsEmptyState
+						headingText={
+							selectedPeriod === 'hour' ? translate( 'No hourly data available' ) : null
+						}
+						infoText={
+							selectedPeriod === 'hour'
+								? translate( 'Try selecting a different time frame.' )
+								: null
+						}
+					/>
 				</Chart>
 				<StatTabs
 					data={ this.props.counts }
diff --git a/client/my-sites/stats/stats-tabs/index.jsx b/client/my-sites/stats/stats-tabs/index.jsx
index 8e2ad415eb214..65c6a1f4dfa86 100644
--- a/client/my-sites/stats/stats-tabs/index.jsx
+++ b/client/my-sites/stats/stats-tabs/index.jsx
@@ -31,7 +31,8 @@ class StatsTabs extends Component {
 		} else {
 			data?.map( ( day ) =>
 				tabs.map( ( tab ) => {
-					if ( isFinite( day[ tab.attr ] ) ) {
+					// Exclude non-numeric values, e.g., NULL from unsupported stats fields.
+					if ( Number.isFinite( day[ tab.attr ] ) ) {
 						if ( ! ( tab.attr in activeData ) ) {
 							activeData[ tab.attr ] = 0;
 						}
@@ -68,7 +69,6 @@ class StatsTabs extends Component {
 			};
 
 			statsTabs = tabs.map( ( tab ) => {
-				const hasTrend = trendData?.[ tab.attr ] >= 0 && trendData[ tab.attr ] !== null;
 				const hasData = activeData?.[ tab.attr ] >= 0 && activeData[ tab.attr ] !== null;
 				const value = hasData ? activeData[ tab.attr ] : null;
 				const previousValue =
@@ -81,7 +81,7 @@ class StatsTabs extends Component {
 					label: tab.label,
 					loading: ! hasData,
 					selected: selectedTab === tab.attr,
-					tabClick: hasTrend ? switchTab : undefined,
+					tabClick: switchTab,
 					value,
 					previousValue,
 					format: tab.format,
diff --git a/client/state/data-layer/wpcom/sites/stats/visits/index.js b/client/state/data-layer/wpcom/sites/stats/visits/index.js
index f22b149e50dbd..8b0d6bf30f0d7 100644
--- a/client/state/data-layer/wpcom/sites/stats/visits/index.js
+++ b/client/state/data-layer/wpcom/sites/stats/visits/index.js
@@ -21,7 +21,7 @@ export const fetch = ( action ) => {
 					unit: period,
 					date: adjustedDate,
 					quantity,
-					stat_fields: 'views',
+					stat_fields: statFields,
 				},
 			},
 			action
diff --git a/client/state/data-layer/wpcom/sites/stats/visits/schema.js b/client/state/data-layer/wpcom/sites/stats/visits/schema.js
index 5c3f146c762b5..b0b4be7db8f9d 100644
--- a/client/state/data-layer/wpcom/sites/stats/visits/schema.js
+++ b/client/state/data-layer/wpcom/sites/stats/visits/schema.js
@@ -9,7 +9,8 @@ export default {
 			items: {
 				type: 'array',
 				items: {
-					type: [ 'integer', 'string', 'array' ],
+					// Valid for NULL from unsupported stats fields in hourly data
+					type: [ 'integer', 'string', 'array', null ],
 				},
 			},
 		},