diff --git a/client/my-sites/stats/features/modules/stats-locations/sample-locations.js b/client/my-sites/stats/features/modules/stats-locations/sample-locations.js new file mode 100644 index 0000000000000..801f9e0b49451 --- /dev/null +++ b/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; 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 1fd76de188959..e2be717b2c872 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 @@ -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 ); - 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 = ( <> diff --git a/client/my-sites/stats/geochart/index.jsx b/client/my-sites/stats/geochart/index.jsx index bbb9a868d302c..52b44edf5ec70 100644 --- a/client/my-sites/stats/geochart/index.jsx +++ b/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 diff --git a/client/state/stats/lists/utils.js b/client/state/stats/lists/utils.js index 07b93ae191a85..89f68a4b05ced 100644 --- a/client/state/stats/lists/utils.js +++ b/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 } ), }; } ); },