import React from 'react' ; import WorldMap , { CountryContext } from 'react-svg-worldmap' ; import { populationData } from '../data/CountryData' ; const localizedCountryDictionary = new Map ( [ [ 'br' , 'Brasil' ] , [ 'cn' , 'China' ] , [ 'id' , 'Indonesia' ] , [ 'in' , 'India' ] , [ 'mx' , 'México' ] , [ 'ng' , 'Nigeria' ] , [ 'ru' , 'Rusia' ] , [ 'us' , 'Estados Unidos' ] , ] ) ; const localizedNumber = ( num , digits ) => { const si = [ { value : 1 , symbol : '' } , { value : 1e3 , symbol : ' miles ' } , { value : 1e6 , symbol : ' millónes ' } , { value : 1e9 , symbol : ' mil millónes ' } , ] ; const rx = /\.0+$|(\.[0-9]*[1-9])0+$/ ; for ( let i = si . length - 1 ; i > 0 ; i -- ) { if ( num >= si [ i ] . value ) { return ( ( num / si [ i ] . value ) . toFixed ( digits ) . replace ( rx , '$1' ) + si [ i ] . symbol ) ; } } } ; const getLocalizedText = ( { countryCode , countryValue , prefix , suffix , } ) => { const localizedCountryName = localizedCountryDictionary . has ( countryCode . toLocaleLowerCase ( ) ) ? localizedCountryDictionary . get ( countryCode . toLocaleLowerCase ( ) ) : 'Unknown' ; const spanishTranlation = localizedCountryName + ': ' + ( prefix ? prefix + ' ' : '' ) + localizedNumber ( countryValue , 2 ) + ( suffix ? suffix : '' ) ; return spanishTranlation ; } ; export default function App ( ) { return ( < WorldMap title = "Los diez países principales por población" data = { populationData } valueSuffix = "personas" tooltipTextFunction = { getLocalizedText } / > ) ; }