Stats: add Geochart regions/cities (#98055)

* Ensure StatsGeochart uses the data from its props * Rename StatQueryType to GeoMode It will be less confusing when used together with statType and it's also consistent with the useLocationViewsQuery arguments. * geochart: use geoMode to change map style Regions/cities should be marked as circles, instead of coloring the entire country. * geoMode: defaults to 'country' Preserves the current behavior when not specified.
Automattic · Jan 8, 2025 · 9a45c25 · 9a45c25
1 parent 4b74f25
commit 9a45c25
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx b/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx
@@ -30,9 +30,9 @@ const OPTION_KEYS = {
 	CITIES: 'cities',
 };
 
-type StatQueryType = 'country' | 'region' | 'city';
+type GeoMode = 'country' | 'region' | 'city';
 
-const STAT_QUERY_TYPES: Record< string, StatQueryType > = {
+const GEO_MODES: Record< string, GeoMode > = {
 	[ OPTION_KEYS.COUNTRIES ]: 'country',
 	[ OPTION_KEYS.REGIONS ]: 'region',
 	[ OPTION_KEYS.CITIES ]: 'city',
@@ -78,13 +78,13 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary
 		},
 	};
 
-	const statQueryType = STAT_QUERY_TYPES[ selectedOption ];
+	const geoMode = GEO_MODES[ selectedOption ];
 
 	const {
 		data = [],
 		isLoading: isRequestingData,
 		isError,
-	} = useLocationViewsQuery< StatsLocationViewsData >( siteId, statQueryType, query );
+	} = useLocationViewsQuery< StatsLocationViewsData >( siteId, geoMode, query );
 
 	const changeViewButton = ( selection: SelectOptionType ) => {
 		const filter = selection.value;
@@ -174,7 +174,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary
 						metricLabel={ translate( 'Visitors' ) }
 						loader={ isRequestingData && <StatsModulePlaceholder isLoading={ isRequestingData } /> }
 						splitHeader
-						heroElement={ <Geochart query={ query } skipQuery /> }
+						heroElement={ <Geochart data={ data } geoMode={ geoMode } skipQuery /> }
 						mainItemLabel={ optionLabels[ selectedOption ]?.headerLabel }
 						toggleControl={ toggleControlComponent }
 						showMore={

diff --git a/client/my-sites/stats/geochart/index.jsx b/client/my-sites/stats/geochart/index.jsx
@@ -25,6 +25,7 @@ class StatsGeochart extends Component {
 		statType: PropTypes.string,
 		query: PropTypes.object,
 		data: PropTypes.array,
+		geoMode: PropTypes.string,
 		kind: PropTypes.string,
 		postId: PropTypes.number,
 		skipQuery: PropTypes.bool,
@@ -33,6 +34,7 @@ class StatsGeochart extends Component {
 	};
 
 	static defaultProps = {
+		geoMode: 'country',
 		kind: 'site',
 		numberLabel: '',
 	};
@@ -103,18 +105,23 @@ class StatsGeochart extends Component {
 	};
 
 	drawData = () => {
-		const { currentUserCountryCode, data, translate, numberLabel } = this.props;
+		const { currentUserCountryCode, data, geoMode, translate, numberLabel } = this.props;
 		if ( ! data || ! data.length ) {
 			return;
 		}
 
-		const mapData = map( data, ( country ) => {
+		const mapData = map( data, ( location ) => {
+			let code = location.countryCode;
+			if ( geoMode !== 'country' ) {
+				code = `${ location.countryCode } ${ location.label }`;
+			}
+
 			return [
 				{
-					v: country.countryCode,
-					f: country.label,
+					v: code,
+					f: location.label,
 				},
-				country.value,
+				location.value,
 			];
 		} );
 
@@ -141,6 +148,10 @@ class StatsGeochart extends Component {
 			domain: currentUserCountryCode,
 		};
 
+		if ( geoMode !== 'country' ) {
+			options.displayMode = 'markers';
+		}
+
 		const regions = [ ...new Set( map( data, 'region' ) ) ];
 
 		if ( 1 === regions.length ) {
@@ -196,8 +207,19 @@ class StatsGeochart extends Component {
 export default connect( ( state, ownProps ) => {
 	const siteId = getSelectedSiteId( state );
 	const statType = ownProps.statType ?? 'statsCountryViews';
+	const currentUserCountryCode = getCurrentUserCountryCode( state );
 	const { postId, query, kind } = ownProps;
 
+	// Skip data fetching if it was explicitly passed as a prop
+	if ( ownProps.data ) {
+		return {
+			currentUserCountryCode,
+			data: ownProps.data,
+			siteId,
+			statType,
+		};
+	}
+
 	const data =
 		kind === 'email'
 			? getEmailStatsNormalizedData(
@@ -212,7 +234,7 @@ export default connect( ( state, ownProps ) => {
 			: getSiteStatsNormalizedData( state, siteId, statType, query );
 
 	return {
-		currentUserCountryCode: getCurrentUserCountryCode( state ),
+		currentUserCountryCode,
 		data,
 		siteId,
 		statType,