allow aggregate data (#96129)

client/my-sites/stats/stats-chart-tabs/index.jsx

@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import clsx from 'clsx';
 import { localize } from 'i18n-calypso';
 import { flowRight } from 'lodash';
@@ -22,6 +23,8 @@ import { buildChartData, getQueryDate } from './utility';
 
 import './style.scss';
 
+const isNewDateFilteringEnabled = config.isEnabled( 'stats/new-date-filtering' );
+
 const ChartTabShape = PropTypes.shape( {
 	attr: PropTypes.string,
 	gridicon: PropTypes.string,
@@ -129,6 +132,7 @@ class StatModuleChartTabs extends Component {
 					selectedTab={ this.props.chartTab }
 					activeIndex={ this.props.queryDate }
 					activeKey="period"
+					aggregate={ isNewDateFilteringEnabled }
 				/>
 			</div>
 		);

client/my-sites/stats/stats-tabs/index.jsx

@@ -17,15 +17,37 @@ class StatsTabs extends Component {
 		switchTab: PropTypes.func,
 		tabs: PropTypes.array,
 		borderless: PropTypes.bool,
+		aggregate: PropTypes.bool,
 	};
 
 	render() {
-		const { children, data, activeIndex, activeKey, tabs, switchTab, selectedTab, borderless } =
-			this.props;
+		const {
+			children,
+			data,
+			activeIndex,
+			activeKey,
+			tabs,
+			switchTab,
+			selectedTab,
+			borderless,
+			aggregate,
+		} = this.props;
+
 		let statsTabs;
 
 		if ( data && ! children ) {
-			const activeData = find( data, { [ activeKey ]: activeIndex } );
+			let activeData = {};
+			if ( ! aggregate ) {
+				activeData = find( data, { [ activeKey ]: activeIndex } );
+			} else {
+				// TODO: not major but we might want to cache the data.
+				data.map( ( day ) =>
+					tabs.map( ( tab ) => {
+						activeData[ tab.attr ] = ( activeData?.[ tab.attr ] ?? 0 ) + ( day[ tab.attr ] ?? 0 );
+					} )
+				);
+			}
+
 			statsTabs = tabs.map( ( tab ) => {
 				const hasData =
 					activeData && activeData[ tab.attr ] >= 0 && activeData[ tab.attr ] !== null;