DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Vector Map - Tooltips: HTML Markup Support

To set the tooltip's content, specify the contentTemplate. Inside the template, you can identify the map area or marker for which the tooltip is displayed and thus display information related to that map element.

In this demo, the contentTemplate property is used to display the PieChart component in the tooltip.

www.wikipedia.org
Backend API
import React from 'react'; import VectorMap, { Export, Label, Layer, Legend, Source, Subtitle, Title, Tooltip, Size, ILayerProps, ILegendProps, } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { countriesGDP } from './data.ts'; import TooltipTemplate from './TooltipTemplate.tsx'; const colorGroups = [0, 10000, 50000, 100000, 500000, 1000000, 10000000, 50000000]; const mapBounds = [-180, 85, 180, -60]; const { format } = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, }); const customizeLayer: ILayerProps['customize'] = (elements) => { elements.forEach((element) => { const countryGDPData = countriesGDP[element.attribute('name')]; element.attribute('total', (countryGDPData && countryGDPData.total) || 0); }); }; const customizeLegendText: ILegendProps['customizeText'] = ({ start, end }) => `${format(start)} to ${format(end)}`; const App = () => ( <VectorMap id="vector-map" bounds={mapBounds}> <Size height={700} /> <Layer name="areas" dataSource={mapsData.world} colorGroups={colorGroups} colorGroupingField="total" customize={customizeLayer} palette="Violet" > <Label dataField="name" enabled={true} /> </Layer> <Legend customizeText={customizeLegendText}> <Source layer="areas" grouping="color" /> </Legend> <Title text="Nominal GDP"> <Subtitle text="(in millions of US dollars)" /> </Title> <Tooltip enabled={true} contentRender={TooltipTemplate} /> <Export enabled={true} /> </VectorMap> ); export default App;
import React from 'react'; import VectorMap, { Export, Label, Layer, Legend, Source, Subtitle, Title, Tooltip, Size, } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { countriesGDP } from './data.js'; import TooltipTemplate from './TooltipTemplate.js'; const colorGroups = [0, 10000, 50000, 100000, 500000, 1000000, 10000000, 50000000]; const mapBounds = [-180, 85, 180, -60]; const { format } = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, }); const customizeLayer = (elements) => { elements.forEach((element) => { const countryGDPData = countriesGDP[element.attribute('name')]; element.attribute('total', (countryGDPData && countryGDPData.total) || 0); }); }; const customizeLegendText = ({ start, end }) => `${format(start)} to ${format(end)}`; const App = () => ( <VectorMap id="vector-map" bounds={mapBounds} > <Size height={700} /> <Layer name="areas" dataSource={mapsData.world} colorGroups={colorGroups} colorGroupingField="total" customize={customizeLayer} palette="Violet" > <Label dataField="name" enabled={true} /> </Layer> <Legend customizeText={customizeLegendText}> <Source layer="areas" grouping="color" /> </Legend> <Title text="Nominal GDP"> <Subtitle text="(in millions of US dollars)" /> </Title> <Tooltip enabled={true} contentRender={TooltipTemplate} /> <Export enabled={true} /> </VectorMap> ); export default App;
import React from 'react'; import PieChart, { Series, Label, Legend, Connector, } from 'devextreme-react/pie-chart'; function PieChartComponent(props) { return ( <PieChart id="gdp-sectors" dataSource={props.data} animation={false} > <Series argumentField="name" valueField="value"> <Label visible={true} customizeText={customizeText} > <Connector visible={true} width={1} ></Connector> </Label> </Series> <Legend visible={false}></Legend> </PieChart> ); } function customizeText(pointInfo: { argument: string | any[]; value: any; }) { return `${pointInfo.argument[0].toUpperCase()}${ pointInfo.argument.slice(1) }: $${pointInfo.value}M`; } export default PieChartComponent;
import React from 'react'; import { countriesGDP } from './data.ts'; import PieChart from './PieChartComponent.tsx'; const { format } = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, }); function getPieData(name: string | number) { return countriesGDP[name] ? [ { name: 'industry', value: countriesGDP[name].industry }, { name: 'services', value: countriesGDP[name].services }, { name: 'agriculture', value: countriesGDP[name].agriculture }, ] : null; } export default function TooltipTemplate(info) { const name = info.attribute('name'); const countryGDPData = countriesGDP[name]; const total = countryGDPData && countryGDPData.total; const pieData = getPieData(name); const gdpInfo = total ? <div id="nominal"> {`Nominal GDP: $${format(total)}M`} </div> : null; const graphic = pieData ? <PieChart data={pieData}></PieChart> : <div>No economic development data</div>; return ( <div> <h4>{info.attribute('name')}</h4> {gdpInfo} {graphic} </div> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export const countriesGDP = { Afghanistan: { agriculture: 34.9, industry: 25, services: 40, total: 20312, }, Albania: { agriculture: 20.7, industry: 19.7, services: 59.6, total: 13262, }, Algeria: { agriculture: 12, industry: 56.5, services: 31.5, total: 214080, }, Angola: { agriculture: 9.6, industry: 65.8, services: 24.6, total: 128564, }, Anguilla: { agriculture: 2.2, industry: 28.5, services: 69.3, }, 'Antigua and Barbuda': { agriculture: 3.8, industry: 32.9, services: 63.4, total: 1242, }, Argentina: { agriculture: 10, industry: 30.7, services: 59.2, total: 540164, }, Armenia: { agriculture: 19.1, industry: 40.5, services: 40.3, total: 10279, }, Aruba: { agriculture: 0.4, industry: 33.3, services: 66.3, }, Australia: { agriculture: 4, industry: 24.6, services: 71.4, total: 1444189, }, Austria: { agriculture: 1.5, industry: 29.4, services: 69.1, total: 437123, }, Azerbaijan: { agriculture: 5.5, industry: 62.1, services: 32.4, total: 74145, }, 'Bahamas, The': { agriculture: 2.2, industry: 6.5, services: 91.3, total: 8657, }, Bahrain: { agriculture: 0.4, industry: 63.6, services: 36, total: 33862, }, Bangladesh: { agriculture: 18.4, industry: 28.6, services: 53, total: 185415, }, Barbados: { agriculture: 3.2, industry: 13.9, services: 82.9, total: 4348, }, Belarus: { agriculture: 9.4, industry: 45.9, services: 44.7, total: 76139, }, Belgium: { agriculture: 0.7, industry: 21.7, services: 77.6, total: 534672, }, Belize: { agriculture: 9.7, industry: 19.8, services: 70.5, total: 1693, }, Benin: { agriculture: 36, industry: 6.4, services: 57.6, total: 8701, }, Bermuda: { agriculture: 0.7, industry: 7, services: 92.2, }, Bhutan: { agriculture: 16.7, industry: 45.4, services: 37.9, total: 2092, }, Bolivia: { agriculture: 10, industry: 40, services: 50, total: 34425, }, 'Bosnia and Herz.': { agriculture: 8.3, industry: 26.3, services: 65.4, total: 17977, }, Botswana: { agriculture: 2.1, industry: 45, services: 52.9, total: 15789, }, Brazil: { agriculture: 5.5, industry: 27.5, services: 67, total: 2353025, }, 'British Virgin Islands': { agriculture: 1, industry: 11.9, services: 87.2, }, Brunei: { agriculture: 0.8, industry: 66.7, services: 32.5, total: 15102, }, Bulgaria: { agriculture: 5.2, industry: 30.6, services: 64.2, total: 55837, }, 'Burkina Faso': { agriculture: 34.7, industry: 23.3, services: 42, total: 12503, }, Burundi: { agriculture: 31, industry: 21.4, services: 47.7, total: 3094, }, Cambodia: { agriculture: 30, industry: 30, services: 40, total: 16551, }, Cameroon: { agriculture: 19.5, industry: 31, services: 49.5, total: 31669, }, Canada: { agriculture: 1.9, industry: 27.1, services: 71, total: 1788717, }, 'Cape Verde': { agriculture: 8.4, industry: 15.7, services: 75.9, total: 1899, }, 'Cayman Islands': { agriculture: 0.5, industry: 50.4, services: 49.1, }, 'Central African Rep.': { agriculture: 53.1, industry: 14.5, services: 32.4, total: 1786, }, Chad: { agriculture: 52.7, industry: 6.7, services: 40.6, total: 13947, }, Chile: { agriculture: 5.1, industry: 41.8, services: 53.1, total: 257968, }, China: { agriculture: 10.1, industry: 46.8, services: 43.1, total: 10380380, }, Colombia: { agriculture: 7, industry: 37.6, services: 55.5, total: 384901, }, Comoros: { agriculture: 51.6, industry: 13.6, services: 47, total: 717, }, 'Dem. Rep. Congo': { agriculture: 37.5, industry: 27.6, services: 35, total: 34677, }, Congo: { agriculture: 4.2, industry: 70.7, services: 25.1, total: 13502, }, 'Cook Islands': { agriculture: 11.7, industry: 9.9, services: 78.5, }, 'Costa Rica': { agriculture: 6.3, industry: 21.7, services: 72, total: 48144, }, 'Ivory Coast': { agriculture: 30, industry: 21, services: 49, total: 32000, }, Croatia: { agriculture: 5.4, industry: 25.5, services: 69.1, total: 57159, }, Cuba: { agriculture: 4, industry: 20.8, services: 75.2, }, Curacao: { agriculture: 0.7, industry: 15.5, services: 83.8, }, Cyprus: { agriculture: 2.4, industry: 16.5, services: 81.1, total: 23269, }, 'Czech Rep.': { agriculture: 1.6, industry: 38.1, services: 60.3, total: 205658, }, Denmark: { agriculture: 4.5, industry: 19.1, services: 76.4, total: 340806, }, Djibouti: { agriculture: 3, industry: 17, services: 79.9, total: 1589, }, Dominica: { agriculture: 21.4, industry: 22.4, services: 56.3, total: 526, }, 'Dominican Rep.': { agriculture: 6.7, industry: 26.1, services: 67.2, total: 64077, }, Ecuador: { agriculture: 6.5, industry: 34.6, services: 58.9, total: 100755, }, Egypt: { agriculture: 14.5, industry: 37.6, services: 47.6, total: 286435, }, 'El Salvador': { agriculture: 10.6, industry: 30, services: 59.3, total: 25329, }, 'Equatorial Guinea': { agriculture: 3.6, industry: 89.7, services: 4.3, total: 14308, }, Eritrea: { agriculture: 11, industry: 34, services: 55, total: 3858, }, Estonia: { agriculture: 3.5, industry: 28.5, services: 61, total: 25953, }, Ethiopia: { agriculture: 41, industry: 13, services: 46, total: 52335, }, 'European Union': { agriculture: 1.8, industry: 24.9, services: 73.2, }, 'Falkland Islands': { agriculture: 95, industry: 0, services: 0, }, 'Faroe Islands': { agriculture: 16, industry: 29, services: 55, }, Fiji: { agriculture: 12, industry: 20.2, services: 67.7, total: 4212, }, Finland: { agriculture: 3, industry: 29.2, services: 67.8, total: 271165, }, France: { agriculture: 1.8, industry: 18.8, services: 79.4, total: 2846889, }, 'French Polynesia': { agriculture: 3.5, industry: 20.4, services: 76.1, }, Gabon: { agriculture: 5.2, industry: 54.4, services: 40.4, total: 17182, }, 'Gambia, The': { agriculture: 26.7, industry: 17.4, services: 55.9, total: 825, }, Georgia: { agriculture: 8.8, industry: 22.7, services: 68.5, total: 16535, }, Germany: { agriculture: 0.8, industry: 28.6, services: 70.6, total: 3859547, }, Ghana: { agriculture: 28.3, industry: 21, services: 50.7, total: 38648, }, Gibraltar: { agriculture: 0, industry: 0, services: 100, }, Greece: { agriculture: 3.3, industry: 17.9, services: 78.9, total: 238023, }, Greenland: { agriculture: 4, industry: 29, services: 67, total: 2160, }, Grenada: { agriculture: 5.3, industry: 14.2, services: 80.5, total: 862, }, Guatemala: { agriculture: 13.3, industry: 24, services: 62.7, total: 60422, }, Guernsey: { agriculture: 3, industry: 10, services: 87, }, Guinea: { agriculture: 16.9, industry: 53.6, services: 29.5, total: 6529, }, 'Guinea-Bissau': { agriculture: 55.8, industry: 13, services: 31.2, total: 1024, }, Guyana: { agriculture: 18.5, industry: 30.6, services: 50.9, total: 2997, }, Haiti: { agriculture: 25, industry: 16, services: 59, total: 8711, }, Honduras: { agriculture: 12.6, industry: 26.3, services: 61.1, total: 19511, }, 'Hong Kong': { agriculture: 0.1, industry: 6.8, services: 93.2, total: 289628, }, Hungary: { agriculture: 3.7, industry: 31.3, services: 65, total: 137104, }, Iceland: { agriculture: 5.4, industry: 24.7, services: 69.9, total: 16693, }, India: { agriculture: 17.2, industry: 26.4, services: 56.4, total: 2049501, }, Indonesia: { agriculture: 14.7, industry: 47.2, services: 38.1, total: 888648, }, Iran: { agriculture: 10.4, industry: 37.7, services: 51.8, total: 404132, }, Iraq: { agriculture: 9.7, industry: 60.5, services: 29.8, total: 221130, }, Ireland: { agriculture: 2, industry: 29, services: 69, total: 246438, }, 'Isle of Man': { agriculture: 1, industry: 11, services: 88, }, Israel: { agriculture: 2.5, industry: 31.1, services: 64.9, total: 303771, }, Italy: { agriculture: 2, industry: 24.7, services: 73.4, total: 2147952, }, Jamaica: { agriculture: 5.8, industry: 29.5, services: 64.7, total: 13787, }, Japan: { agriculture: 1.2, industry: 27.3, services: 71.6, total: 4616335, }, Jersey: { agriculture: 1, industry: 2, services: 97, }, Jordan: { agriculture: 4.5, industry: 30.8, services: 64.7, total: 35765, }, Kazakhstan: { agriculture: 5.2, industry: 37.9, services: 56.9, total: 212260, }, Kenya: { agriculture: 19, industry: 16.4, services: 64.6, total: 60770, }, Kiribati: { agriculture: 8.9, industry: 24.2, services: 66.8, total: 181, }, 'Dem. Rep. Korea': { agriculture: 23, industry: 43.4, services: 33.6, total: 28000, }, Korea: { agriculture: 2.6, industry: 39.2, services: 58.2, total: 1416949, }, Kosovo: { agriculture: 12.9, industry: 22.6, services: 64.5, total: 7318, }, Kuwait: { agriculture: 0.3, industry: 47.4, services: 52.3, total: 172350, }, Kyrgyzstan: { agriculture: 20.1, industry: 28.8, services: 51.1, total: 7402, }, 'Lao PDR': { agriculture: 27.8, industry: 34.8, services: 37.4, total: 11676, }, Latvia: { agriculture: 4, industry: 21.7, services: 74.3, total: 31970, }, Lebanon: { agriculture: 4.6, industry: 19.7, services: 75.7, total: 49919, }, Lesotho: { agriculture: 7.5, industry: 33.1, services: 59.4, total: 2159, }, Liberia: { agriculture: 76.9, industry: 5.4, services: 17.7, total: 2028, }, Libya: { agriculture: 3.2, industry: 49.5, services: 47.3, total: 41148, }, Liechtenstein: { agriculture: 8, industry: 37, services: 55, }, Lithuania: { agriculture: 3.3, industry: 28.2, services: 68.6, total: 48232, }, Luxembourg: { agriculture: 0.4, industry: 13.6, services: 86, total: 62395, }, Macau: { agriculture: 0.1, industry: 9.4, services: 90.6, }, Macedonia: { agriculture: 9.5, industry: 27.1, services: 63.4, total: 11342, }, Madagascar: { agriculture: 28.3, industry: 16.4, services: 55.2, total: 10595, }, Malawi: { agriculture: 30.3, industry: 16.7, services: 53, total: 4263, }, Malaysia: { agriculture: 12, industry: 40, services: 48, total: 326933, }, Maldives: { agriculture: 5.6, industry: 16.9, services: 77.5, total: 2854, }, Mali: { agriculture: 38.8, industry: 21.9, services: 39.3, total: 11915, }, Malta: { agriculture: 1.9, industry: 17.2, services: 80.9, total: 10582, }, 'Marshall Islands': { agriculture: 31.7, industry: 14.9, services: 53.4, total: 193, }, Mauritania: { agriculture: 17.8, industry: 37.6, services: 44.7, total: 5079, }, Mauritius: { agriculture: 4.5, industry: 24, services: 71.4, total: 13240, }, Mexico: { agriculture: 3.8, industry: 34.2, services: 62, total: 1282725, }, 'Micronesia, Federated States of': { agriculture: 28.9, industry: 15.2, services: 55.9, }, Moldova: { agriculture: 16.2, industry: 20.3, services: 63.5, total: 7944, }, Monaco: { agriculture: 0, industry: 4.9, services: 95.1, }, Mongolia: { agriculture: 15.8, industry: 32.6, services: 51.6, total: 11981, }, Montenegro: { agriculture: 0.8, industry: 11.3, services: 87.9, total: 4462, }, Montserrat: { agriculture: 1.6, industry: 23, services: 75.3, }, Morocco: { agriculture: 16.6, industry: 32.2, services: 51.2, total: 109201, }, Mozambique: { agriculture: 31.5, industry: 23.8, services: 44.7, total: 16684, }, Myanmar: { agriculture: 38.2, industry: 18.2, services: 43.6, total: 62802, }, Namibia: { agriculture: 7.2, industry: 33.3, services: 59.5, total: 13353, }, Nepal: { agriculture: 34.9, industry: 15, services: 50.1, total: 19637, }, Netherlands: { agriculture: 2.7, industry: 24.2, services: 73.1, total: 866354, }, 'New Caledonia': { agriculture: 2, industry: 27.1, services: 70.9, }, 'New Zealand': { agriculture: 4.8, industry: 24.5, services: 70.7, total: 198118, }, Nicaragua: { agriculture: 17.4, industry: 25.7, services: 56.8, total: 11707, }, Niger: { agriculture: 39, industry: 16, services: 45, total: 8025, }, Nigeria: { agriculture: 35.4, industry: 33.6, services: 31, total: 573652, }, Niue: { agriculture: 23.5, industry: 26.9, services: 49.5, }, Norway: { agriculture: 2.6, industry: 39.7, services: 57.7, total: 500244, }, Oman: { agriculture: 1.5, industry: 49.5, services: 48.9, total: 77755, }, Pakistan: { agriculture: 20.9, industry: 25.8, services: 53.3, total: 250136, }, Palau: { agriculture: 6.2, industry: 12, services: 81.8, total: 269, }, Panama: { agriculture: 4.1, industry: 16.7, services: 79.2, total: 43784, }, 'Papua New Guinea': { agriculture: 29.9, industry: 37.6, services: 32.4, total: 16060, }, Paraguay: { agriculture: 23.1, industry: 18.6, services: 58.3, total: 29704, }, Peru: { agriculture: 8, industry: 38, services: 54, total: 202948, }, Philippines: { agriculture: 12.8, industry: 31.5, services: 55.7, total: 284927, }, Poland: { agriculture: 3.4, industry: 33.6, services: 63, total: 546644, }, Portugal: { agriculture: 2.5, industry: 22.8, services: 74.7, total: 230012, }, 'Puerto Rico': { agriculture: 1, industry: 45, services: 54, total: 103500, }, Qatar: { agriculture: 0.1, industry: 73, services: 26.9, total: 210002, }, Romania: { agriculture: 7.9, industry: 32.9, services: 59.2, total: 199950, }, Russia: { agriculture: 4.5, industry: 36.9, services: 58.6, total: 1857461, }, Rwanda: { agriculture: 33, industry: 13.9, services: 53.1, total: 8012, }, 'Saint Kitts and Nevis': { agriculture: 2.4, industry: 22.8, services: 74.7, total: 841, }, 'Saint Lucia': { agriculture: 4.1, industry: 18.4, services: 77.5, total: 1356, }, 'Saint Martin': { agriculture: 1, industry: 15, services: 84, }, 'Saint Vincent and the Grenadines': { agriculture: 7.8, industry: 25.9, services: 66.3, total: 736, }, Samoa: { agriculture: 9.9, industry: 28.8, services: 61.4, total: 826, }, 'San Marino': { agriculture: 0.1, industry: 39.2, services: 60.7, total: 1786, }, 'Sao Tome and Principe': { agriculture: 15, industry: 24.4, services: 60.6, }, 'Saudi Arabia': { agriculture: 2, industry: 69.1, services: 28.9, total: 752459, }, Senegal: { agriculture: 15, industry: 22.8, services: 62.2, total: 15584, }, Serbia: { agriculture: 11.2, industry: 18.7, services: 70, total: 43866, }, Seychelles: { agriculture: 2, industry: 18.5, services: 79.5, total: 1420, }, 'Sierra Leone': { agriculture: 51.5, industry: 22, services: 26.5, total: 5033, }, Singapore: { agriculture: 0, industry: 26.6, services: 73.4, total: 308051, }, 'Sint Maarten': { agriculture: 0.4, industry: 18.3, services: 81.3, }, Slovakia: { agriculture: 3.8, industry: 35.5, services: 60.7, total: 99971, }, Slovenia: { agriculture: 2.5, industry: 6.9, services: 90.5, total: 49506, }, 'Solomon Islands': { agriculture: 37.7, industry: 6.4, services: 55.9, total: 1155, }, Somalia: { agriculture: 60.2, industry: 7.4, services: 32.5, total: 1071, }, 'South Africa': { agriculture: 2.5, industry: 31.6, services: 65.9, total: 350082, }, Spain: { agriculture: 3.2, industry: 25.8, services: 71, total: 1406855, }, 'Sri Lanka': { agriculture: 13, industry: 29.6, services: 57.4, total: 74588, }, Sudan: { agriculture: 25, industry: 29.3, services: 45.7, total: 73816, }, 'S. Sudan': { total: 12833, }, Suriname: { agriculture: 10.8, industry: 24.4, services: 64.8, total: 5297, }, Swaziland: { agriculture: 8.2, industry: 46.9, services: 44.9, total: 3676, }, Sweden: { agriculture: 1.8, industry: 27.3, services: 70.9, total: 570137, }, Switzerland: { agriculture: 1.3, industry: 27.5, services: 71.3, total: 712050, }, Syria: { agriculture: 16.9, industry: 27.4, services: 55.7, total: 71998, }, Taiwan: { agriculture: 1.3, industry: 32, services: 66.9, total: 529550, }, Tajikistan: { agriculture: 21.4, industry: 21.7, services: 56.8, total: 9242, }, Tanzania: { agriculture: 27.8, industry: 24.2, services: 48, total: 47932, }, Thailand: { agriculture: 13.3, industry: 34, services: 52.7, total: 373804, }, 'Timor-Leste': { agriculture: 26.5, industry: 17.8, services: 55.6, total: 4478, }, Togo: { agriculture: 46, industry: 23, services: 31, total: 4604, }, Tonga: { agriculture: 20.8, industry: 18.1, services: 61.1, total: 454, }, 'Trinidad and Tobago': { agriculture: 0.3, industry: 58.4, services: 41.3, total: 28788, }, Tunisia: { agriculture: 10.6, industry: 34.6, services: 54.8, total: 48553, }, Turkey: { agriculture: 9.3, industry: 28.1, services: 62.6, total: 806108, }, Turkmenistan: { agriculture: 7.9, industry: 24.5, services: 67.6, total: 47932, }, 'Turks and Caicos Islands': { agriculture: 1, industry: 24.2, services: 74.8, }, Tuvalu: { agriculture: 16.6, industry: 27.2, services: 56.2, total: 38, }, Uganda: { agriculture: 22, industry: 25.4, services: 52.6, total: 27616, }, Ukraine: { agriculture: 9.4, industry: 34.4, services: 56.2, total: 130660, }, 'United Arab Emirates': { agriculture: 0.8, industry: 53.9, services: 45.3, total: 401647, }, 'United Kingdom': { agriculture: 0.7, industry: 21.4, services: 77.8, total: 2945146, }, 'United States': { agriculture: 1.2, industry: 19.2, services: 79.6, total: 17418925, }, Uruguay: { agriculture: 9.4, industry: 21.7, services: 68.9, total: 55143, }, Uzbekistan: { agriculture: 21.9, industry: 37.7, services: 40.3, total: 62619, }, Vanuatu: { agriculture: 21.2, industry: 10.4, services: 68.4, total: 812, }, Venezuela: { agriculture: 3.8, industry: 35.8, services: 60.4, total: 205787, }, Vietnam: { agriculture: 22, industry: 40.3, services: 37.7, total: 186049, }, 'U.S. Virgin Islands': { agriculture: 1, industry: 19, services: 80, }, 'West Bank and Gaza': { agriculture: 3.7, industry: 13.6, services: 82.7, }, 'Western Sahara': { agriculture: 0, industry: 0, services: 40, }, Yemen: { agriculture: 7.9, industry: 42.2, services: 49.9, total: 43229, }, Zambia: { agriculture: 21.4, industry: 35.1, services: 43.5, total: 26758, }, Zimbabwe: { agriculture: 20.4, industry: 24.6, services: 54.9, total: 13672, }, };
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, 'devextreme-dist/js/vectormap-data/*': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'devextreme-dist/js/vectormap-data': 'npm:devextreme-dist@24.1.6/js/vectormap-data', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import PieChart, { Series, Label, Legend, Connector, } from 'devextreme-react/pie-chart'; function PieChartComponent(props) { return ( <PieChart id="gdp-sectors" dataSource={props.data} animation={false} > <Series argumentField="name" valueField="value" > <Label visible={true} customizeText={customizeText} > <Connector visible={true} width={1} ></Connector> </Label> </Series> <Legend visible={false}></Legend> </PieChart> ); } function customizeText(pointInfo) { return `${pointInfo.argument[0].toUpperCase()}${pointInfo.argument.slice(1)}: $${ pointInfo.value }M`; } export default PieChartComponent;
import React from 'react'; import { countriesGDP } from './data.js'; import PieChart from './PieChartComponent.js'; const { format } = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, }); function getPieData(name) { return countriesGDP[name] ? [ { name: 'industry', value: countriesGDP[name].industry }, { name: 'services', value: countriesGDP[name].services }, { name: 'agriculture', value: countriesGDP[name].agriculture }, ] : null; } export default function TooltipTemplate(info) { const name = info.attribute('name'); const countryGDPData = countriesGDP[name]; const total = countryGDPData && countryGDPData.total; const pieData = getPieData(name); const gdpInfo = total ? <div id="nominal">{`Nominal GDP: $${format(total)}M`}</div> : null; const graphic = pieData ? ( <PieChart data={pieData}></PieChart> ) : ( <div>No economic development data</div> ); return ( <div> <h4>{info.attribute('name')}</h4> {gdpInfo} {graphic} </div> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export const countriesGDP = { Afghanistan: { agriculture: 34.9, industry: 25, services: 40, total: 20312, }, Albania: { agriculture: 20.7, industry: 19.7, services: 59.6, total: 13262, }, Algeria: { agriculture: 12, industry: 56.5, services: 31.5, total: 214080, }, Angola: { agriculture: 9.6, industry: 65.8, services: 24.6, total: 128564, }, Anguilla: { agriculture: 2.2, industry: 28.5, services: 69.3, }, 'Antigua and Barbuda': { agriculture: 3.8, industry: 32.9, services: 63.4, total: 1242, }, Argentina: { agriculture: 10, industry: 30.7, services: 59.2, total: 540164, }, Armenia: { agriculture: 19.1, industry: 40.5, services: 40.3, total: 10279, }, Aruba: { agriculture: 0.4, industry: 33.3, services: 66.3, }, Australia: { agriculture: 4, industry: 24.6, services: 71.4, total: 1444189, }, Austria: { agriculture: 1.5, industry: 29.4, services: 69.1, total: 437123, }, Azerbaijan: { agriculture: 5.5, industry: 62.1, services: 32.4, total: 74145, }, 'Bahamas, The': { agriculture: 2.2, industry: 6.5, services: 91.3, total: 8657, }, Bahrain: { agriculture: 0.4, industry: 63.6, services: 36, total: 33862, }, Bangladesh: { agriculture: 18.4, industry: 28.6, services: 53, total: 185415, }, Barbados: { agriculture: 3.2, industry: 13.9, services: 82.9, total: 4348, }, Belarus: { agriculture: 9.4, industry: 45.9, services: 44.7, total: 76139, }, Belgium: { agriculture: 0.7, industry: 21.7, services: 77.6, total: 534672, }, Belize: { agriculture: 9.7, industry: 19.8, services: 70.5, total: 1693, }, Benin: { agriculture: 36, industry: 6.4, services: 57.6, total: 8701, }, Bermuda: { agriculture: 0.7, industry: 7, services: 92.2, }, Bhutan: { agriculture: 16.7, industry: 45.4, services: 37.9, total: 2092, }, Bolivia: { agriculture: 10, industry: 40, services: 50, total: 34425, }, 'Bosnia and Herz.': { agriculture: 8.3, industry: 26.3, services: 65.4, total: 17977, }, Botswana: { agriculture: 2.1, industry: 45, services: 52.9, total: 15789, }, Brazil: { agriculture: 5.5, industry: 27.5, services: 67, total: 2353025, }, 'British Virgin Islands': { agriculture: 1, industry: 11.9, services: 87.2, }, Brunei: { agriculture: 0.8, industry: 66.7, services: 32.5, total: 15102, }, Bulgaria: { agriculture: 5.2, industry: 30.6, services: 64.2, total: 55837, }, 'Burkina Faso': { agriculture: 34.7, industry: 23.3, services: 42, total: 12503, }, Burundi: { agriculture: 31, industry: 21.4, services: 47.7, total: 3094, }, Cambodia: { agriculture: 30, industry: 30, services: 40, total: 16551, }, Cameroon: { agriculture: 19.5, industry: 31, services: 49.5, total: 31669, }, Canada: { agriculture: 1.9, industry: 27.1, services: 71, total: 1788717, }, 'Cape Verde': { agriculture: 8.4, industry: 15.7, services: 75.9, total: 1899, }, 'Cayman Islands': { agriculture: 0.5, industry: 50.4, services: 49.1, }, 'Central African Rep.': { agriculture: 53.1, industry: 14.5, services: 32.4, total: 1786, }, Chad: { agriculture: 52.7, industry: 6.7, services: 40.6, total: 13947, }, Chile: { agriculture: 5.1, industry: 41.8, services: 53.1, total: 257968, }, China: { agriculture: 10.1, industry: 46.8, services: 43.1, total: 10380380, }, Colombia: { agriculture: 7, industry: 37.6, services: 55.5, total: 384901, }, Comoros: { agriculture: 51.6, industry: 13.6, services: 47, total: 717, }, 'Dem. Rep. Congo': { agriculture: 37.5, industry: 27.6, services: 35, total: 34677, }, Congo: { agriculture: 4.2, industry: 70.7, services: 25.1, total: 13502, }, 'Cook Islands': { agriculture: 11.7, industry: 9.9, services: 78.5, }, 'Costa Rica': { agriculture: 6.3, industry: 21.7, services: 72, total: 48144, }, 'Ivory Coast': { agriculture: 30, industry: 21, services: 49, total: 32000, }, Croatia: { agriculture: 5.4, industry: 25.5, services: 69.1, total: 57159, }, Cuba: { agriculture: 4, industry: 20.8, services: 75.2, }, Curacao: { agriculture: 0.7, industry: 15.5, services: 83.8, }, Cyprus: { agriculture: 2.4, industry: 16.5, services: 81.1, total: 23269, }, 'Czech Rep.': { agriculture: 1.6, industry: 38.1, services: 60.3, total: 205658, }, Denmark: { agriculture: 4.5, industry: 19.1, services: 76.4, total: 340806, }, Djibouti: { agriculture: 3, industry: 17, services: 79.9, total: 1589, }, Dominica: { agriculture: 21.4, industry: 22.4, services: 56.3, total: 526, }, 'Dominican Rep.': { agriculture: 6.7, industry: 26.1, services: 67.2, total: 64077, }, Ecuador: { agriculture: 6.5, industry: 34.6, services: 58.9, total: 100755, }, Egypt: { agriculture: 14.5, industry: 37.6, services: 47.6, total: 286435, }, 'El Salvador': { agriculture: 10.6, industry: 30, services: 59.3, total: 25329, }, 'Equatorial Guinea': { agriculture: 3.6, industry: 89.7, services: 4.3, total: 14308, }, Eritrea: { agriculture: 11, industry: 34, services: 55, total: 3858, }, Estonia: { agriculture: 3.5, industry: 28.5, services: 61, total: 25953, }, Ethiopia: { agriculture: 41, industry: 13, services: 46, total: 52335, }, 'European Union': { agriculture: 1.8, industry: 24.9, services: 73.2, }, 'Falkland Islands': { agriculture: 95, industry: 0, services: 0, }, 'Faroe Islands': { agriculture: 16, industry: 29, services: 55, }, Fiji: { agriculture: 12, industry: 20.2, services: 67.7, total: 4212, }, Finland: { agriculture: 3, industry: 29.2, services: 67.8, total: 271165, }, France: { agriculture: 1.8, industry: 18.8, services: 79.4, total: 2846889, }, 'French Polynesia': { agriculture: 3.5, industry: 20.4, services: 76.1, }, Gabon: { agriculture: 5.2, industry: 54.4, services: 40.4, total: 17182, }, 'Gambia, The': { agriculture: 26.7, industry: 17.4, services: 55.9, total: 825, }, Georgia: { agriculture: 8.8, industry: 22.7, services: 68.5, total: 16535, }, Germany: { agriculture: 0.8, industry: 28.6, services: 70.6, total: 3859547, }, Ghana: { agriculture: 28.3, industry: 21, services: 50.7, total: 38648, }, Gibraltar: { agriculture: 0, industry: 0, services: 100, }, Greece: { agriculture: 3.3, industry: 17.9, services: 78.9, total: 238023, }, Greenland: { agriculture: 4, industry: 29, services: 67, total: 2160, }, Grenada: { agriculture: 5.3, industry: 14.2, services: 80.5, total: 862, }, Guatemala: { agriculture: 13.3, industry: 24, services: 62.7, total: 60422, }, Guernsey: { agriculture: 3, industry: 10, services: 87, }, Guinea: { agriculture: 16.9, industry: 53.6, services: 29.5, total: 6529, }, 'Guinea-Bissau': { agriculture: 55.8, industry: 13, services: 31.2, total: 1024, }, Guyana: { agriculture: 18.5, industry: 30.6, services: 50.9, total: 2997, }, Haiti: { agriculture: 25, industry: 16, services: 59, total: 8711, }, Honduras: { agriculture: 12.6, industry: 26.3, services: 61.1, total: 19511, }, 'Hong Kong': { agriculture: 0.1, industry: 6.8, services: 93.2, total: 289628, }, Hungary: { agriculture: 3.7, industry: 31.3, services: 65, total: 137104, }, Iceland: { agriculture: 5.4, industry: 24.7, services: 69.9, total: 16693, }, India: { agriculture: 17.2, industry: 26.4, services: 56.4, total: 2049501, }, Indonesia: { agriculture: 14.7, industry: 47.2, services: 38.1, total: 888648, }, Iran: { agriculture: 10.4, industry: 37.7, services: 51.8, total: 404132, }, Iraq: { agriculture: 9.7, industry: 60.5, services: 29.8, total: 221130, }, Ireland: { agriculture: 2, industry: 29, services: 69, total: 246438, }, 'Isle of Man': { agriculture: 1, industry: 11, services: 88, }, Israel: { agriculture: 2.5, industry: 31.1, services: 64.9, total: 303771, }, Italy: { agriculture: 2, industry: 24.7, services: 73.4, total: 2147952, }, Jamaica: { agriculture: 5.8, industry: 29.5, services: 64.7, total: 13787, }, Japan: { agriculture: 1.2, industry: 27.3, services: 71.6, total: 4616335, }, Jersey: { agriculture: 1, industry: 2, services: 97, }, Jordan: { agriculture: 4.5, industry: 30.8, services: 64.7, total: 35765, }, Kazakhstan: { agriculture: 5.2, industry: 37.9, services: 56.9, total: 212260, }, Kenya: { agriculture: 19, industry: 16.4, services: 64.6, total: 60770, }, Kiribati: { agriculture: 8.9, industry: 24.2, services: 66.8, total: 181, }, 'Dem. Rep. Korea': { agriculture: 23, industry: 43.4, services: 33.6, total: 28000, }, Korea: { agriculture: 2.6, industry: 39.2, services: 58.2, total: 1416949, }, Kosovo: { agriculture: 12.9, industry: 22.6, services: 64.5, total: 7318, }, Kuwait: { agriculture: 0.3, industry: 47.4, services: 52.3, total: 172350, }, Kyrgyzstan: { agriculture: 20.1, industry: 28.8, services: 51.1, total: 7402, }, 'Lao PDR': { agriculture: 27.8, industry: 34.8, services: 37.4, total: 11676, }, Latvia: { agriculture: 4, industry: 21.7, services: 74.3, total: 31970, }, Lebanon: { agriculture: 4.6, industry: 19.7, services: 75.7, total: 49919, }, Lesotho: { agriculture: 7.5, industry: 33.1, services: 59.4, total: 2159, }, Liberia: { agriculture: 76.9, industry: 5.4, services: 17.7, total: 2028, }, Libya: { agriculture: 3.2, industry: 49.5, services: 47.3, total: 41148, }, Liechtenstein: { agriculture: 8, industry: 37, services: 55, }, Lithuania: { agriculture: 3.3, industry: 28.2, services: 68.6, total: 48232, }, Luxembourg: { agriculture: 0.4, industry: 13.6, services: 86, total: 62395, }, Macau: { agriculture: 0.1, industry: 9.4, services: 90.6, }, Macedonia: { agriculture: 9.5, industry: 27.1, services: 63.4, total: 11342, }, Madagascar: { agriculture: 28.3, industry: 16.4, services: 55.2, total: 10595, }, Malawi: { agriculture: 30.3, industry: 16.7, services: 53, total: 4263, }, Malaysia: { agriculture: 12, industry: 40, services: 48, total: 326933, }, Maldives: { agriculture: 5.6, industry: 16.9, services: 77.5, total: 2854, }, Mali: { agriculture: 38.8, industry: 21.9, services: 39.3, total: 11915, }, Malta: { agriculture: 1.9, industry: 17.2, services: 80.9, total: 10582, }, 'Marshall Islands': { agriculture: 31.7, industry: 14.9, services: 53.4, total: 193, }, Mauritania: { agriculture: 17.8, industry: 37.6, services: 44.7, total: 5079, }, Mauritius: { agriculture: 4.5, industry: 24, services: 71.4, total: 13240, }, Mexico: { agriculture: 3.8, industry: 34.2, services: 62, total: 1282725, }, 'Micronesia, Federated States of': { agriculture: 28.9, industry: 15.2, services: 55.9, }, Moldova: { agriculture: 16.2, industry: 20.3, services: 63.5, total: 7944, }, Monaco: { agriculture: 0, industry: 4.9, services: 95.1, }, Mongolia: { agriculture: 15.8, industry: 32.6, services: 51.6, total: 11981, }, Montenegro: { agriculture: 0.8, industry: 11.3, services: 87.9, total: 4462, }, Montserrat: { agriculture: 1.6, industry: 23, services: 75.3, }, Morocco: { agriculture: 16.6, industry: 32.2, services: 51.2, total: 109201, }, Mozambique: { agriculture: 31.5, industry: 23.8, services: 44.7, total: 16684, }, Myanmar: { agriculture: 38.2, industry: 18.2, services: 43.6, total: 62802, }, Namibia: { agriculture: 7.2, industry: 33.3, services: 59.5, total: 13353, }, Nepal: { agriculture: 34.9, industry: 15, services: 50.1, total: 19637, }, Netherlands: { agriculture: 2.7, industry: 24.2, services: 73.1, total: 866354, }, 'New Caledonia': { agriculture: 2, industry: 27.1, services: 70.9, }, 'New Zealand': { agriculture: 4.8, industry: 24.5, services: 70.7, total: 198118, }, Nicaragua: { agriculture: 17.4, industry: 25.7, services: 56.8, total: 11707, }, Niger: { agriculture: 39, industry: 16, services: 45, total: 8025, }, Nigeria: { agriculture: 35.4, industry: 33.6, services: 31, total: 573652, }, Niue: { agriculture: 23.5, industry: 26.9, services: 49.5, }, Norway: { agriculture: 2.6, industry: 39.7, services: 57.7, total: 500244, }, Oman: { agriculture: 1.5, industry: 49.5, services: 48.9, total: 77755, }, Pakistan: { agriculture: 20.9, industry: 25.8, services: 53.3, total: 250136, }, Palau: { agriculture: 6.2, industry: 12, services: 81.8, total: 269, }, Panama: { agriculture: 4.1, industry: 16.7, services: 79.2, total: 43784, }, 'Papua New Guinea': { agriculture: 29.9, industry: 37.6, services: 32.4, total: 16060, }, Paraguay: { agriculture: 23.1, industry: 18.6, services: 58.3, total: 29704, }, Peru: { agriculture: 8, industry: 38, services: 54, total: 202948, }, Philippines: { agriculture: 12.8, industry: 31.5, services: 55.7, total: 284927, }, Poland: { agriculture: 3.4, industry: 33.6, services: 63, total: 546644, }, Portugal: { agriculture: 2.5, industry: 22.8, services: 74.7, total: 230012, }, 'Puerto Rico': { agriculture: 1, industry: 45, services: 54, total: 103500, }, Qatar: { agriculture: 0.1, industry: 73, services: 26.9, total: 210002, }, Romania: { agriculture: 7.9, industry: 32.9, services: 59.2, total: 199950, }, Russia: { agriculture: 4.5, industry: 36.9, services: 58.6, total: 1857461, }, Rwanda: { agriculture: 33, industry: 13.9, services: 53.1, total: 8012, }, 'Saint Kitts and Nevis': { agriculture: 2.4, industry: 22.8, services: 74.7, total: 841, }, 'Saint Lucia': { agriculture: 4.1, industry: 18.4, services: 77.5, total: 1356, }, 'Saint Martin': { agriculture: 1, industry: 15, services: 84, }, 'Saint Vincent and the Grenadines': { agriculture: 7.8, industry: 25.9, services: 66.3, total: 736, }, Samoa: { agriculture: 9.9, industry: 28.8, services: 61.4, total: 826, }, 'San Marino': { agriculture: 0.1, industry: 39.2, services: 60.7, total: 1786, }, 'Sao Tome and Principe': { agriculture: 15, industry: 24.4, services: 60.6, }, 'Saudi Arabia': { agriculture: 2, industry: 69.1, services: 28.9, total: 752459, }, Senegal: { agriculture: 15, industry: 22.8, services: 62.2, total: 15584, }, Serbia: { agriculture: 11.2, industry: 18.7, services: 70, total: 43866, }, Seychelles: { agriculture: 2, industry: 18.5, services: 79.5, total: 1420, }, 'Sierra Leone': { agriculture: 51.5, industry: 22, services: 26.5, total: 5033, }, Singapore: { agriculture: 0, industry: 26.6, services: 73.4, total: 308051, }, 'Sint Maarten': { agriculture: 0.4, industry: 18.3, services: 81.3, }, Slovakia: { agriculture: 3.8, industry: 35.5, services: 60.7, total: 99971, }, Slovenia: { agriculture: 2.5, industry: 6.9, services: 90.5, total: 49506, }, 'Solomon Islands': { agriculture: 37.7, industry: 6.4, services: 55.9, total: 1155, }, Somalia: { agriculture: 60.2, industry: 7.4, services: 32.5, total: 1071, }, 'South Africa': { agriculture: 2.5, industry: 31.6, services: 65.9, total: 350082, }, Spain: { agriculture: 3.2, industry: 25.8, services: 71, total: 1406855, }, 'Sri Lanka': { agriculture: 13, industry: 29.6, services: 57.4, total: 74588, }, Sudan: { agriculture: 25, industry: 29.3, services: 45.7, total: 73816, }, 'S. Sudan': { total: 12833, }, Suriname: { agriculture: 10.8, industry: 24.4, services: 64.8, total: 5297, }, Swaziland: { agriculture: 8.2, industry: 46.9, services: 44.9, total: 3676, }, Sweden: { agriculture: 1.8, industry: 27.3, services: 70.9, total: 570137, }, Switzerland: { agriculture: 1.3, industry: 27.5, services: 71.3, total: 712050, }, Syria: { agriculture: 16.9, industry: 27.4, services: 55.7, total: 71998, }, Taiwan: { agriculture: 1.3, industry: 32, services: 66.9, total: 529550, }, Tajikistan: { agriculture: 21.4, industry: 21.7, services: 56.8, total: 9242, }, Tanzania: { agriculture: 27.8, industry: 24.2, services: 48, total: 47932, }, Thailand: { agriculture: 13.3, industry: 34, services: 52.7, total: 373804, }, 'Timor-Leste': { agriculture: 26.5, industry: 17.8, services: 55.6, total: 4478, }, Togo: { agriculture: 46, industry: 23, services: 31, total: 4604, }, Tonga: { agriculture: 20.8, industry: 18.1, services: 61.1, total: 454, }, 'Trinidad and Tobago': { agriculture: 0.3, industry: 58.4, services: 41.3, total: 28788, }, Tunisia: { agriculture: 10.6, industry: 34.6, services: 54.8, total: 48553, }, Turkey: { agriculture: 9.3, industry: 28.1, services: 62.6, total: 806108, }, Turkmenistan: { agriculture: 7.9, industry: 24.5, services: 67.6, total: 47932, }, 'Turks and Caicos Islands': { agriculture: 1, industry: 24.2, services: 74.8, }, Tuvalu: { agriculture: 16.6, industry: 27.2, services: 56.2, total: 38, }, Uganda: { agriculture: 22, industry: 25.4, services: 52.6, total: 27616, }, Ukraine: { agriculture: 9.4, industry: 34.4, services: 56.2, total: 130660, }, 'United Arab Emirates': { agriculture: 0.8, industry: 53.9, services: 45.3, total: 401647, }, 'United Kingdom': { agriculture: 0.7, industry: 21.4, services: 77.8, total: 2945146, }, 'United States': { agriculture: 1.2, industry: 19.2, services: 79.6, total: 17418925, }, Uruguay: { agriculture: 9.4, industry: 21.7, services: 68.9, total: 55143, }, Uzbekistan: { agriculture: 21.9, industry: 37.7, services: 40.3, total: 62619, }, Vanuatu: { agriculture: 21.2, industry: 10.4, services: 68.4, total: 812, }, Venezuela: { agriculture: 3.8, industry: 35.8, services: 60.4, total: 205787, }, Vietnam: { agriculture: 22, industry: 40.3, services: 37.7, total: 186049, }, 'U.S. Virgin Islands': { agriculture: 1, industry: 19, services: 80, }, 'West Bank and Gaza': { agriculture: 3.7, industry: 13.6, services: 82.7, }, 'Western Sahara': { agriculture: 0, industry: 0, services: 40, }, Yemen: { agriculture: 7.9, industry: 42.2, services: 49.9, total: 43229, }, Zambia: { agriculture: 21.4, industry: 35.1, services: 43.5, total: 26758, }, Zimbabwe: { agriculture: 20.4, industry: 24.6, services: 54.9, total: 13672, }, };
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
h4 { font-size: 14px; margin-bottom: 5px; } #gdp-sectors { width: 400px; height: 200px; }