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
Automattic · Dec 8, 2024 · d8841b5 · d8841b5
1 parent 814570e
commit d8841b5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 ],
 				},
 			},
 		},