Stats: Add/day data for hourly view tabs (#96656)

* use highlight cards for chart tabs * limit scope * fix typo * Apply previousData to StatsTabs for trend highlights * flex wrap * remove unecessary changes * add previous data support * flex base 250px * previous data should always get aggregated * previous data should always get aggregated * mobile alignment for stats tabs * alignments * use highlight styling on aggregate * more adjustments to sizes so that it could fit in the width easier * Adjust Flexbox items layout * use daysInRange for range calculation * use daysInRange for range calculation * use day data for tabs in hourly views * values are now showing * almost there * unify styling for clickable / non-clicable tabs * prevent indefinite loop * remove a accidental white space --------- Co-authored-by: Dognose <[email protected]>
Automattic · Nov 25, 2024 · e0500c0 · e0500c0
1 parent 872fb2c
commit e0500c0
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 29 deletions.
diff --git a/client/my-sites/stats/modernized-chart-tabs-styles.scss b/client/my-sites/stats/modernized-chart-tabs-styles.scss
@@ -150,6 +150,11 @@ $custom-stats-tab-mobile-break: $break-medium;
 				}
 			}
 
+			&.tab-disabled a {
+				pointer-events: none;
+				cursor: default;
+			}
+
 			&.is-low {
 				a {
 					.value {
@@ -215,6 +220,9 @@ $custom-stats-tab-mobile-break: $break-medium;
 					letter-spacing: -0.24px;
 					margin-left: 8px;
 				}
+				.stats-tabs__value.value {
+					display: none;
+				}
 				@media (min-width: $custom-stats-tab-mobile-break) {
 					& > a {
 						padding: 8px 16px;

diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx
@@ -352,15 +352,15 @@ class StatsSite extends Component {
 				.format( 'YYYY-MM-DD' );
 		}
 
+		customChartRange.daysInRange = daysInRange;
+
 		// TODO: all the date logic should be done in controllers, otherwise it affects the performance.
 		// If it's single day period, redirect to hourly stats.
 		if ( period === 'day' && daysInRange === 1 ) {
-			page( '/stats/hour/' + slug + window.location.search );
+			page.redirect( `/stats/hour/${ slug }${ window.location.search }` );
 			return;
 		}
 
-		customChartRange.daysInRange = daysInRange;
-
 		// Calculate diff between requested start and end in `priod` units.
 		// Move end point (most recent) to the end of period to account for partial periods
 		// (e.g. requesting period between June 2020 and Feb 2021 would require 2 `yearly` units but would return 1 unit without the shift to the end of period)

diff --git a/client/my-sites/stats/stats-chart-tabs/index.jsx b/client/my-sites/stats/stats-chart-tabs/index.jsx
@@ -100,6 +100,8 @@ class StatModuleChartTabs extends Component {
 	makeQuery = () => {
 		this.props.requestChartCounts( this.props.query );
 		this.props.queryComp && this.props.requestChartCounts( this.props.queryComp );
+		this.props.queryDay && this.props.requestChartCounts( this.props.queryDay );
+		this.props.queryDayComp && this.props.requestChartCounts( this.props.queryDayComp );
 	};
 
 	render() {
@@ -145,6 +147,8 @@ class StatModuleChartTabs extends Component {
 				<StatTabs
 					data={ this.props.counts }
 					previousData={ isNewDateFilteringEnabled ? countsComp : null }
+					tabCountsAlt={ this.props.tabCountsAlt }
+					tabCountsAltComp={ this.props.tabCountsAltComp }
 					tabs={ this.props.charts }
 					switchTab={ this.props.switchTab }
 					selectedTab={ this.props.chartTab }
@@ -218,6 +222,46 @@ const connectComponent = connect(
 			);
 		}
 
+		// Query single day stats for the display of visitors, likes, and comments, as we don't have hourly data for them at the moment.
+		let queryDay = null;
+		let tabCountsAlt = null;
+		if ( period === 'hour' && date === chartStart ) {
+			queryDay = {
+				...query,
+				period: 'day',
+				quantity: 1,
+				statFields: [ 'visitors', 'likes', 'comments' ],
+			};
+			tabCountsAlt = getCountRecords(
+				state,
+				siteId,
+				queryDay.date,
+				queryDay.period,
+				queryDay.quantity
+			);
+		}
+
+		// Query single day stats for the display of visitors, likes, and comments, as we don't have hourly data for them at the moment.
+		let queryDayComp = null;
+		let tabCountsAltComp = null;
+		if ( period === 'hour' && date === chartStart ) {
+			const previousDate = moment( date ).subtract( 1, 'day' ).format( 'YYYY-MM-DD' );
+			queryDayComp = {
+				...query,
+				date: previousDate,
+				period: 'day',
+				quantity: 1,
+				statFields: [ 'visitors', 'likes', 'comments' ],
+			};
+			tabCountsAltComp = getCountRecords(
+				state,
+				siteId,
+				queryDayComp.date,
+				queryDayComp.period,
+				queryDayComp.quantity
+			);
+		}
+
 		const counts = getCountRecords( state, siteId, query.date, query.period, query.quantity );
 		const chartData = buildChartData( activeLegend, chartTab, counts, period, queryDate );
 		const loadingTabs = getLoadingTabs( state, siteId, query.date, query.period, query.quantity );
@@ -233,6 +277,10 @@ const connectComponent = connect(
 			queryKey,
 			siteId,
 			selectedPeriod: period,
+			queryDay,
+			tabCountsAlt: tabCountsAlt?.[ 0 ],
+			queryDayComp,
+			tabCountsAltComp: tabCountsAltComp?.[ 0 ],
 		};
 	},
 	{ recordGoogleEvent, requestChartCounts }

diff --git a/client/my-sites/stats/stats-tabs/index.jsx b/client/my-sites/stats/stats-tabs/index.jsx
@@ -46,30 +46,41 @@ class StatsTabs extends Component {
 	};
 
 	render() {
-		const { children, data, previousData, tabs, switchTab, selectedTab, borderless, aggregate } =
-			this.props;
+		const {
+			children,
+			data,
+			previousData,
+			tabs,
+			switchTab,
+			selectedTab,
+			borderless,
+			aggregate,
+			tabCountsAlt,
+			tabCountsAltComp,
+		} = this.props;
 
 		let statsTabs;
 
 		if ( data && ! children ) {
-			const activeData = this.formatData( data, aggregate );
-			const activePreviousData = this.formatData( previousData );
+			const trendData = this.formatData( data, aggregate );
+			const activeData = { ...tabCountsAlt, ...trendData };
+			const activePreviousData = { ...tabCountsAltComp, ...this.formatData( previousData ) };
 
 			statsTabs = tabs.map( ( tab ) => {
-				const hasData =
-					activeData && activeData[ tab.attr ] >= 0 && activeData[ tab.attr ] !== null;
-
+				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 = activePreviousData && activePreviousData[ tab.attr ];
+				const previousValue =
+					activePreviousData?.[ tab.attr ] !== null ? activePreviousData[ tab.attr ] : null;
 
 				const tabOptions = {
 					attr: tab.attr,
 					icon: tab.icon,
-					className: clsx( tab.className, { 'is-highlighted': aggregate } ),
+					className: clsx( tab.className, { 'is-highlighted': previousData } ),
 					label: tab.label,
 					loading: ! hasData,
 					selected: selectedTab === tab.attr,
-					tabClick: switchTab,
+					tabClick: hasTrend ? switchTab : undefined,
 					value,
 					format: tab.format,
 				};

diff --git a/client/my-sites/stats/stats-tabs/tab.jsx b/client/my-sites/stats/stats-tabs/tab.jsx
@@ -55,22 +55,16 @@ class StatsTabsTab extends Component {
 
 		return (
 			// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-			<li className={ tabClass } onClick={ this.clickHandler }>
-				{ hasClickAction ? (
-					<a href={ href }>
-						{ tabIcon }
-						{ tabLabel }
-						{ tabValue }
-						{ children }
-					</a>
-				) : (
-					<span className="stats-tabs__span no-link">
-						{ tabIcon }
-						{ tabLabel }
-						{ tabValue }
-						{ children }
-					</span>
-				) }
+			<li
+				className={ clsx( tabClass, { 'tab-disabled': ! hasClickAction } ) }
+				onClick={ this.clickHandler }
+			>
+				<a href={ href }>
+					{ tabIcon }
+					{ tabLabel }
+					{ tabValue }
+					{ children }
+				</a>
 			</li>
 		);
 	}