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 - Overview

DevExtreme React Maps include two interactive UI components for creating GPS navigation maps and vector maps. The Map component works with Google Maps and Bing Maps API, supports roadmap, satellite, and hybrid views, and allows a user to create markers and routes. The Vector Map component comes with predefined data sources, a variety of colorization modes, and multiple legends. Learn more about DevExtreme React components.

www.wikipedia.org
Backend API
import React from 'react'; import Map, { Export, Label, Layer, Legend, Source, Subtitle, Title, Tooltip, Size, ILegendProps, ILayerProps, } 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 customizeLayer: ILayerProps['customize'] = (elements) => { elements.forEach((element) => { const countryGDPData = countriesGDP[element.attribute('name')]; element.attribute('total', (countryGDPData && countryGDPData.total) || 0); }); }; const format = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, }).format; const customizeLegendText: ILegendProps['customizeText'] = (arg) => `${format(arg.start)} to ${format(arg.end)}`; export default function App() { return ( <Map bounds={mapBounds}> <Size height={500} /> <Layer name="areas" dataSource={mapsData.world} colorGroups={colorGroups} colorGroupingField="total" customize={customizeLayer} > <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} /> </Map>); }
import React from 'react'; import Map, { 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 customizeLayer = (elements) => { elements.forEach((element) => { const countryGDPData = countriesGDP[element.attribute('name')]; element.attribute('total', (countryGDPData && countryGDPData.total) || 0); }); }; const format = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, }).format; const customizeLegendText = (arg) => `${format(arg.start)} to ${format(arg.end)}`; export default function App() { return ( <Map bounds={mapBounds}> <Size height={500} /> <Layer name="areas" dataSource={mapsData.world} colorGroups={colorGroups} colorGroupingField="total" customize={customizeLayer} > <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} /> </Map> ); }
import React from 'react'; import PieChart, { Series, Label, Legend, Connector, ILabelProps, } from 'devextreme-react/pie-chart'; const customizeText: ILabelProps['customizeText'] = (pointInfo) => `${pointInfo.argument[0].toUpperCase()}${pointInfo.argument.slice(1)}: $${pointInfo.value}M`; 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> ); } 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'; const customizeText = (pointInfo) => `${pointInfo.argument[0].toUpperCase()}${pointInfo.argument.slice(1)}: $${pointInfo.value}M`; 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> ); } 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; }
NOTE

Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.

The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.

The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).

The Web Dashboard is available as a part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos