From 6088a70f183ea1adf87a028c4934bd69bc72b9ae Mon Sep 17 00:00:00 2001 From: Tiago Ilieve Date: Tue, 7 Jan 2025 20:52:16 -0300 Subject: [PATCH 1/4] Ensure StatsGeochart uses the data from its props --- .../modules/stats-locations/stats-locations.tsx | 2 +- client/my-sites/stats/geochart/index.jsx | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 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 index c3eb9be227c639..0ebab8bbb6cbaf 100644 --- a/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx +++ b/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx @@ -174,7 +174,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary metricLabel={ translate( 'Visitors' ) } loader={ isRequestingData && } splitHeader - heroElement={ } + heroElement={ } 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 index ce3b06443d8462..5a45c0f32a8b42 100644 --- a/client/my-sites/stats/geochart/index.jsx +++ b/client/my-sites/stats/geochart/index.jsx @@ -196,8 +196,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 +223,7 @@ export default connect( ( state, ownProps ) => { : getSiteStatsNormalizedData( state, siteId, statType, query ); return { - currentUserCountryCode: getCurrentUserCountryCode( state ), + currentUserCountryCode, data, siteId, statType, From f46779f59fa738e166ec15fd14a45a121ecb50df Mon Sep 17 00:00:00 2001 From: Tiago Ilieve Date: Tue, 7 Jan 2025 21:37:13 -0300 Subject: [PATCH 2/4] Rename StatQueryType to GeoMode It will be less confusing when used together with statType and it's also consistent with the useLocationViewsQuery arguments. --- .../features/modules/stats-locations/stats-locations.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 index 0ebab8bbb6cbaf..e73c79624f8af6 100644 --- 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; From f19928a0c4cde1a909a51fba16243c5af6a20c59 Mon Sep 17 00:00:00 2001 From: Tiago Ilieve Date: Tue, 7 Jan 2025 21:50:04 -0300 Subject: [PATCH 3/4] geochart: use geoMode to change map style Regions/cities should be marked as circles, instead of coloring the entire country. --- .../stats-locations/stats-locations.tsx | 2 +- client/my-sites/stats/geochart/index.jsx | 20 ++++++++++++++----- 2 files changed, 16 insertions(+), 6 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 index e73c79624f8af6..df610397ec2bd6 100644 --- a/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx +++ b/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx @@ -174,7 +174,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary metricLabel={ translate( 'Visitors' ) } loader={ isRequestingData && } splitHeader - heroElement={ } + heroElement={ } 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 index 5a45c0f32a8b42..b9295951c07bc9 100644 --- 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, @@ -103,18 +104,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 +147,10 @@ class StatsGeochart extends Component { domain: currentUserCountryCode, }; + if ( geoMode !== 'country' ) { + options.displayMode = 'markers'; + } + const regions = [ ...new Set( map( data, 'region' ) ) ]; if ( 1 === regions.length ) { From a29ae889d484644e276b1fdc406581c5ec66daec Mon Sep 17 00:00:00 2001 From: Tiago Ilieve Date: Tue, 7 Jan 2025 22:10:54 -0300 Subject: [PATCH 4/4] geoMode: defaults to 'country' Preserves the current behavior when not specified. --- client/my-sites/stats/geochart/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/my-sites/stats/geochart/index.jsx b/client/my-sites/stats/geochart/index.jsx index b9295951c07bc9..78bc181957b3c0 100644 --- a/client/my-sites/stats/geochart/index.jsx +++ b/client/my-sites/stats/geochart/index.jsx @@ -34,6 +34,7 @@ class StatsGeochart extends Component { }; static defaultProps = { + geoMode: 'country', kind: 'site', numberLabel: '', };