Stats Location: update geochart to use coordinates for Regions and Cities (#99142)

* Stats: add subdivisions tooltip

* Update geochart to accept coordinates for Cities view

* Omit coordinates property when no data exists

* Handle region and city mode as markers

* Filter locations with coordinates

* Remove prop that is not needed for now

* Refactor sample locations using coordinates

* Simplify conditions

* Remove unused attribute to sample locations

---------

Co-authored-by: Tiago Ilieve <[email protected]>

Author: Initsogar

client/my-sites/stats/features/modules/stats-locations/sample-locations.js

@@ -0,0 +1,64 @@
+const sampleLocations = [
+	{
+		label: 'California',
+		countryCode: 'US',
+		value: 2000,
+		coordinates: { latitude: '36.7783', longitude: '-119.4179' },
+	},
+	{
+		label: 'Uttar Pradesh',
+		countryCode: 'IN',
+		value: 1500,
+		coordinates: { latitude: '27.1303', longitude: '80.8590' },
+	},
+	{
+		label: 'England',
+		countryCode: 'GB',
+		value: 1200,
+		coordinates: { latitude: '52.3555', longitude: '-1.1743' },
+	},
+	{
+		label: 'Ontario',
+		countryCode: 'CA',
+		value: 1000,
+		coordinates: { latitude: '51.2538', longitude: '-85.3232' },
+	},
+	{
+		label: 'North Rhine-Westphalia',
+		countryCode: 'DE',
+		value: 900,
+		coordinates: { latitude: '51.4332', longitude: '7.6616' },
+	},
+	{
+		label: 'West Java',
+		countryCode: 'ID',
+		value: 800,
+		coordinates: { latitude: '-6.8897', longitude: '107.6405' },
+	},
+	{
+		label: 'Tokyo',
+		countryCode: 'JP',
+		value: 700,
+		coordinates: { latitude: '35.6895', longitude: '139.6917' },
+	},
+	{
+		label: 'São Paulo',
+		countryCode: 'BR',
+		value: 600,
+		coordinates: { latitude: '-23.5505', longitude: '-46.6333' },
+	},
+	{
+		label: 'North Holland',
+		countryCode: 'NL',
+		value: 500,
+		coordinates: { latitude: '52.5200', longitude: '4.6707' },
+	},
+	{
+		label: 'Andalusia',
+		countryCode: 'ES',
+		value: 400,
+		coordinates: { latitude: '37.5443', longitude: '-4.7278' },
+	},
+];
+
+export default sampleLocations;

client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx

@@ -28,6 +28,7 @@ import Geochart from '../../../geochart';
 import StatsCardSkeleton from '../shared/stats-card-skeleton';
 import StatsInfoArea from '../shared/stats-info-area';
 import CountryFilter from './country-filter';
+import sampleLocations from './sample-locations';
 
 import './style.scss';
 
@@ -209,22 +210,9 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary
 		</StatsInfoArea>
 	);
 
-	const fakeData = [
-		{ label: 'United States', countryCode: 'US', value: 2000, region: '021' },
-		{ label: 'India', countryCode: 'IN', value: 1500, region: '034' },
-		{ label: 'United Kingdom', countryCode: 'GB', value: 1200, region: '154' },
-		{ label: 'Canada', countryCode: 'CA', value: 1000, region: '021' },
-		{ label: 'Germany', countryCode: 'DE', value: 900, region: '155' },
-		{ label: 'Indonesia', countryCode: 'ID', value: 800, region: '035' },
-		{ label: 'Japan', countryCode: 'JP', value: 700, region: '030' },
-		{ label: 'France', countryCode: 'FR', value: 600, region: '155' },
-		{ label: 'Netherlands', countryCode: 'NL', value: 500, region: '155' },
-		{ label: 'Spain', countryCode: 'ES', value: 400, region: '039' },
-	];
-
 	const hasLocationData = Array.isArray( data ) && data.length > 0;
 
-	const locationData = shouldGate ? fakeData : data;
+	const locationData = shouldGate ? sampleLocations : data;
 
 	const heroElement = (
 		<>

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

@@ -105,33 +105,64 @@ class StatsGeochart extends Component {
 		}
 	};
 
-	drawData = () => {
-		const { currentUserCountryCode, data, geoMode, translate, numberLabel, customHeight } =
-			this.props;
-		if ( ! data || ! data.length ) {
-			return;
-		}
+	/**
+	 * Prepare data for Google GeoChart.
+	 * @param {Array} data - The data to prepare.
+	 * @returns {Object} chartData - The prepared data.
+	 */
+	prepareChartData = ( data ) => {
+		const { geoMode, numberLabel, translate } = this.props;
+		const chartData = new window.google.visualization.DataTable();
 
-		const mapData = map( data, ( location ) => {
-			let code = location.countryCode;
-			if ( geoMode !== 'country' ) {
-				code = `${ location.countryCode } ${ location.label }`;
-			}
-
-			return [
-				{
-					v: code,
-					f: location.label,
-				},
-				location.value,
-			];
-		} );
+		if ( geoMode !== 'country' ) {
+			chartData.addColumn( 'number', 'Latitude' );
+			chartData.addColumn( 'number', 'Longitude' );
+			chartData.addColumn( 'string', 'Location' );
+			chartData.addColumn( 'number', numberLabel || translate( 'Views' ).toString() );
+
+			chartData.addRows(
+				data.reduce( ( filteredLocations, location ) => {
+					if ( location.coordinates ) {
+						filteredLocations.push( [
+							Number( location.coordinates.latitude ),
+							Number( location.coordinates.longitude ),
+							location.label,
+							location.value,
+						] );
+					}
+
+					return filteredLocations;
+				}, [] )
+			);
 
-		const chartData = new window.google.visualization.DataTable();
+			return chartData;
+		}
+
+		// Default to country
 		chartData.addColumn( 'string', translate( 'Country' ).toString() );
 		chartData.addColumn( 'number', numberLabel || translate( 'Views' ).toString() );
-		chartData.addRows( mapData );
+		chartData.addRows(
+			map( data, ( location ) => {
+				return [
+					{
+						v: location.countryCode,
+						f: location.label,
+					},
+					location.value,
+				];
+			} )
+		);
+
+		return chartData;
+	};
+
+	drawData = () => {
+		const { currentUserCountryCode, data, geoMode, customHeight } = this.props;
+		if ( ! data || ! data.length ) {
+			return;
+		}
 
+		const chartData = this.prepareChartData( data );
 		// Note that using raw hex values here is an exception due to
 		// IE11 and other older browser not supporting CSS custom props.
 		// We have to set values to Google GeoChart via JS. We don't

client/state/stats/lists/utils.js

@@ -441,6 +441,7 @@ export const normalizers = {
 				countryCode: viewData.country_code,
 				value: viewData.views,
 				region: country.map_region,
+				...( viewData.coordinates && { coordinates: viewData.coordinates } ),
 			};
 		} );
 	},