查找

在任何列中选择一个单元格并开始键入以进行搜索。

如果 autoSearch 属性设置为true,则网格将在您键入不可编辑的列时进行搜索。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // var grid = new wjGrid.FlexGrid('#theGrid', { autoSearch: true, isReadOnly: true, selectionMode: 'ListBox', autoGenerateColumns: false, columns: [ { binding: 'name', header: 'Country', width: '2*' }, { binding: 'pop', header: 'Population (mi)', format: 'n0,,', width: '*' }, { binding: 'gdp', header: 'GDP (US$mi/yr)', format: 'n0', width: '*' }, { binding: 'pci', header: 'Income (US$/yr/cap)', format: 'n0', width: '*' }, ], itemsSource: getData() }); // } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Searching</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="theGrid"></div> </div> </body> </html> export function getData() { var countries = [ { name: 'United States', pop: 320723000, gdp: 17348075 }, { name: 'China', pop: 1357000000, gdp: 10356508 }, { name: 'Japan', pop: 127300000, gdp: 4602367 }, { name: 'Germany', pop: 80620000, gdp: 3874437 }, { name: 'United Kingdom', pop: 64596800, gdp: 2950039 }, { name: 'France', pop: 65821885, gdp: 2833687 }, { name: 'Brazil', pop: 200400000, gdp: 2346583 }, { name: 'Italy', pop: 60705991, gdp: 2147744 }, { name: 'India', pop: 1252000000, gdp: 2051228 }, { name: 'Russia', pop: 143500000, gdp: 1860598 }, { name: 'Canada', pop: 34482779, gdp: 1785387 }, { name: 'Australia', pop: 24170869, gdp: 1442722 }, { name: 'South Korea', pop: 48219000, gdp: 1410383 }, { name: 'Spain', pop: 46162024, gdp: 1406538 }, { name: 'Mexico', pop: 122300000, gdp: 1291062 }, { name: 'Indonesia', pop: 249900000, gdp: 888648 }, { name: 'Netherlands', pop: 16715489, gdp: 880716 }, { name: 'Turkey', pop: 76667864, gdp: 798332 }, { name: 'Saudi Arabia', pop: 27136977, gdp: 746248 }, { name: 'Switzerland', pop: 8039060, gdp: 703852 }, { name: 'Nigeria', pop: 173600000, gdp: 573999 }, { name: 'Sweden', pop: 9471174, gdp: 570591 }, { name: 'Poland', pop: 38092000, gdp: 547894 }, { name: 'Argentina', pop: 40117096, gdp: 543061 }, { name: 'Belgium', pop: 10839905, gdp: 534230 }, { name: 'Taiwan', pop: 23197947, gdp: 529597 }, { name: 'Norway', pop: 5316800, gdp: 499817 }, { name: 'Austria', pop: 8419776, gdp: 437582 }, { name: 'Iran', pop: 80117000, gdp: 416490 }, { name: 'Thailand', pop: 69519000, gdp: 404824 }, { name: 'United Arab Emirates', pop: 8264070, gdp: 399451 }, { name: 'Colombia', pop: 48389000, gdp: 377867 }, { name: 'South Africa', pop: 50586757, gdp: 350082 }, { name: 'Denmark', pop: 5579204, gdp: 342362 }, { name: 'Malaysia', pop: 28334135, gdp: 338108 }, { name: 'Singapore', pop: 5183700, gdp: 307872 }, { name: 'Israel', pop: 7798600, gdp: 305673 }, { name: 'Hong Kong', pop: 7108100, gdp: 290896 }, { name: 'Egypt', pop: 88094000, gdp: 286435 }, { name: 'Philippines', pop: 98390000, gdp: 284618 }, { name: 'Finland', pop: 5394389, gdp: 272649 }, { name: 'Chile', pop: 17248450, gdp: 258017 }, { name: 'Ireland', pop: 4581269, gdp: 250814 }, { name: 'Pakistan', pop: 191282000, gdp: 246849 }, { name: 'Greece', pop: 10787690, gdp: 237970 }, { name: 'Portugal', pop: 10555853, gdp: 229948 }, { name: 'Iraq', pop: 32105000, gdp: 223508 }, { name: 'Kazakhstan', pop: 16615000, gdp: 216036 }, { name: 'Algeria', pop: 36300000, gdp: 213518 }, { name: 'Qatar', pop: 1699435, gdp: 210109 }, { name: 'Venezuela', pop: 31220000, gdp: 206252 }, { name: 'Czech Republic', pop: 10542080, gdp: 205270 }, { name: 'Peru', pop: 29797694, gdp: 202642 }, { name: 'Romania', pop: 21436000, gdp: 199093 }, { name: 'New Zealand', pop: 4577100, gdp: 197502 }, { name: 'Vietnam', pop: 89700000, gdp: 185897 }, { name: 'Bangladesh', pop: 156600000, gdp: 183824 }, { name: 'Kuwait', pop: 2818000, gdp: 172608 }, { name: 'Hungary', pop: 9985722, gdp: 136989 }, { name: 'Ukraine', pop: 45668028, gdp: 130660 }, { name: 'Angola', pop: 19618000, gdp: 129326 }, { name: 'Morocco', pop: 33803400, gdp: 110009 }, { name: 'Ecuador', pop: 14483499, gdp: 100543 }, { name: 'Slovakia', pop: 5437126, gdp: 99869 }, { name: 'Oman', pop: 2773479, gdp: 77779 }, { name: 'Syria', pop: 23362000, gdp: 77460 }, { name: 'Belarus', pop: 9468000, gdp: 76139 }, { name: 'Sri Lanka', pop: 20653000, gdp: 74924 }, { name: 'Sudan', pop: 30894000, gdp: 74766 }, { name: 'Azerbaijan', pop: 9111100, gdp: 74145 }, { name: 'Luxembourg', pop: 511840, gdp: 65683 }, { name: 'Dominican Republic', pop: 9378818, gdp: 64058 }, { name: 'Myanmar', pop: 48337000, gdp: 63135 }, { name: 'Uzbekistan', pop: 28000000, gdp: 62613 }, { name: 'Kenya', pop: 38610097, gdp: 60937 }, { name: 'Guatemala', pop: 14713763, gdp: 58728 }, { name: 'Uruguay', pop: 3368595, gdp: 57471 }, { name: 'Croatia', pop: 4290612, gdp: 57073 }, { name: 'Bulgaria', pop: 7364570, gdp: 55824 }, { name: 'Ethiopia', pop: 94100000, gdp: 54809 }, { name: 'Lebanon', pop: 4259000, gdp: 50028 }, { name: 'Slovenia', pop: 2081660, gdp: 49570 }, { name: 'Costa Rica', pop: 4563539, gdp: 49553 }, { name: 'Tunisia', pop: 10673800, gdp: 48633 }, { name: 'Lithuania', pop: 3207100, gdp: 48288 }, { name: 'Tanzania', pop: 43188000, gdp: 48089 }, { name: 'Turkmenistan', pop: 5105000, gdp: 47932 }, { name: 'Serbia', pop: 7120666, gdp: 43866 }, { name: 'Panama', pop: 3405813, gdp: 43777 }, { name: 'Yemen', pop: 23833000, gdp: 43229 }, { name: 'Libya', pop: 6423000, gdp: 41148 }, { name: 'Ghana', pop: 24233431, gdp: 38616 }, { name: 'Democratic Republic of the Congo', pop: 67758000, gdp: 35918 }, { name: 'Jordan', pop: 6783300, gdp: 35878 }, { name: 'Bahrain', pop: 1234571, gdp: 33862 }, { name: 'Côte d\'Ivoire', pop: 21395000, gdp: 33741 }, { name: 'Bolivia', pop: 10426154, gdp: 33237 }, { name: 'Latvia', pop: 2209000, gdp: 31972 }, { name: 'Cameroon', pop: 19406100, gdp: 31777 }, { name: 'Paraguay', pop: 6337127, gdp: 30220 }, { name: 'Trinidad and Tobago', pop: 1317714, gdp: 28874 }, { name: 'Uganda', pop: 32939800, gdp: 27616 }, { name: 'Zambia', pop: 13046508, gdp: 26611 }, { name: 'Estonia', pop: 1340194, gdp: 26506 }, { name: 'El Salvador', pop: 6227000, gdp: 25164 }, { name: 'Cyprus', pop: 803200, gdp: 23263 }, { name: 'Afghanistan', pop: 32358000, gdp: 20444 }, { name: 'Nepal', pop: 26620809, gdp: 19761 }, { name: 'Honduras', pop: 8215313, gdp: 19511 }, { name: 'Gabon', pop: 1534000, gdp: 18209 }, { name: 'Bosnia and Herzegovina', pop: 3843126, gdp: 18165 }, { name: 'Brunei', pop: 422700, gdp: 17104 }, { name: 'Iceland', pop: 318452, gdp: 17036 }, { name: 'Papua New Guinea', pop: 7014000, gdp: 16809 }, { name: 'Mozambique', pop: 23049621, gdp: 16684 }, { name: 'Cambodia', pop: 13395682, gdp: 16551 }, { name: 'Georgia', pop: 4469200, gdp: 16536 }, { name: 'Senegal', pop: 12855153, gdp: 15683 }, { name: 'Equatorial Guinea', pop: 720000, gdp: 15530 }, { name: 'Botswana', pop: 2031000, gdp: 15217 }, { name: 'South Sudan', pop: 8260490, gdp: 14304 }, { name: 'Chad', pop: 10329208, gdp: 13945 }, { name: 'Zimbabwe', pop: 12754000, gdp: 13833 }, { name: 'Jamaica', pop: 2705800, gdp: 13709 }, { name: 'Namibia', pop: 2324000, gdp: 13632 }, { name: 'Republic of the Congo', pop: 4140000, gdp: 13552 }, { name: 'Albania', pop: 3194972, gdp: 13276 }, { name: 'Mauritius', pop: 1280924, gdp: 12588 }, { name: 'Burkina Faso', pop: 15730977, gdp: 12503 }, { name: 'Mali', pop: 14517176, gdp: 12094 }, { name: 'Mongolia', pop: 2736800, gdp: 12037 }, { name: 'Nicaragua', pop: 5815524, gdp: 11806 }, { name: 'Laos', pop: 6348800, gdp: 11681 }, { name: 'Armenia', pop: 3266300, gdp: 11644 }, { name: 'Macedonia', pop: 2057284, gdp: 11342 }, { name: 'Madagascar', pop: 18866000, gdp: 10674 }, { name: 'Malta', pop: 417617, gdp: 10514 }, { name: 'Tajikistan', pop: 7616000, gdp: 9242 }, { name: 'Haiti', pop: 10085214, gdp: 8711 }, { name: 'Benin', pop: 9100000, gdp: 8685 }, { name: 'Bahamas', pop: 353658, gdp: 8511 }, { name: 'Niger', pop: 15730754, gdp: 8024 }, { name: 'Moldova', pop: 3560400, gdp: 7962 }, { name: 'Rwanda', pop: 10412826, gdp: 7897 }, { name: 'Kyrgyzstan', pop: 5477600, gdp: 7402 }, { name: 'Kosovo', pop: 1870981, gdp: 7319 }, { name: 'Guinea', pop: 10217591, gdp: 6707 }, { name: 'Malawi', pop: 13077160, gdp: 6055 }, { name: 'Suriname', pop: 529000, gdp: 5210 }, { name: 'Mauritania', pop: 3340627, gdp: 5081 }, { name: 'Timor-Leste', pop: 1066409, gdp: 4970 }, { name: 'Sierra Leone', pop: 5997000, gdp: 4815 }, { name: 'Togo', pop: 5753324, gdp: 4594 }, { name: 'Montenegro', pop: 620029, gdp: 4551 }, { name: 'Swaziland', pop: 1203000, gdp: 4416 }, { name: 'Barbados', pop: 276302, gdp: 4354 }, { name: 'Fiji', pop: 868000, gdp: 4289 }, { name: 'Eritrea', pop: 5415000, gdp: 3858 }, { name: 'Burundi', pop: 8575000, gdp: 3094 }, { name: 'Guyana', pop: 784894, gdp: 3059 }, { name: 'Maldives', pop: 317280, gdp: 2885 }, { name: 'Lesotho', pop: 2194000, gdp: 2220 }, { name: 'Liberia', pop: 3476608, gdp: 2013 }, { name: 'Bhutan', pop: 708265, gdp: 1983 }, { name: 'Cape Verde', pop: 491575, gdp: 1858 }, { name: 'San Marino', pop: 32093, gdp: 1786 }, { name: 'Central African Republic', pop: 4487000, gdp: 1726 }, { name: 'Belize', pop: 312698, gdp: 1699 }, { name: 'Djibouti', pop: 818159, gdp: 1589 }, { name: 'Seychelles', pop: 90945, gdp: 1423 }, { name: 'Saint Lucia', pop: 166526, gdp: 1404 }, { name: 'Antigua and Barbuda', pop: 89138, gdp: 1248 }, { name: 'Solomon Islands', pop: 542287, gdp: 1155 }, { name: 'Guinea-Bissau', pop: 1520830, gdp: 1111 }, { name: 'Grenada', pop: 110821, gdp: 912 }, { name: 'Saint Kitts and Nevis', pop: 51970, gdp: 852 }, { name: 'Samoa', pop: 184032, gdp: 827 }, { name: 'The Gambia', pop: 1776000, gdp: 824 }, { name: 'Vanuatu', pop: 234023, gdp: 822 }, { name: 'Saint Vincent and the Grenadines', pop: 100892, gdp: 729 }, { name: 'Comoros', pop: 754000, gdp: 697 }, { name: 'Dominica', pop: 71685, gdp: 524 }, { name: 'Tonga', pop: 105000, gdp: 438 }, { name: 'São Tomé and Príncipe', pop: 169000, gdp: 338 }, { name: 'Micronesia', pop: 102624, gdp: 308 }, { name: 'Palau', pop: 21000, gdp: 249 }, { name: 'Marshall Islands', pop: 54305, gdp: 193 }, { name: 'Kiribati', pop: 101000, gdp: 181 }, { name: 'Tuvalu', pop: 10000, gdp: 38 } ]; // // calculate the per-capita income and add that to each data point countries.forEach(function (country) { country.pci = country.gdp / country.pop * 1e6; // US$/year/capita }); // return countries; } .wj-flexgrid { max-height: 250px; margin-bottom: 12px; } .header { display: inline-block; width: 150px; text-align: right; font-weight: normal; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule, Inject } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { DataService } from './app.data'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; // DataSvc will be passed by derived classes constructor(@Inject(DataService) dataSvc: DataService) { this.data = dataSvc.getData(); } } @NgModule({ imports: [WjGridModule, BrowserModule], providers: [DataService], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Searching</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid #flex [autoSearch]="true" [isReadOnly]="true" [selectionMode]="'ListBox'" [(itemsSource)]="data"> <wj-flex-grid-column [binding]="'name'" [header]="'Country'" [width]="'2*'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'pop'" [header]="'Population (mi)'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'gdp'" [header]="'GDP (US$mi/yr)'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'pci'" [header]="'Income (US$/yr/cap)'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; @Injectable() export class DataService { getData(): any[] { let countries = [ { name: 'United States', pop: 320723000, gdp: 17348075 }, { name: 'China', pop: 1357000000, gdp: 10356508 }, { name: 'Japan', pop: 127300000, gdp: 4602367 }, { name: 'Germany', pop: 80620000, gdp: 3874437 }, { name: 'United Kingdom', pop: 64596800, gdp: 2950039 }, { name: 'France', pop: 65821885, gdp: 2833687 }, { name: 'Brazil', pop: 200400000, gdp: 2346583 }, { name: 'Italy', pop: 60705991, gdp: 2147744 }, { name: 'India', pop: 1252000000, gdp: 2051228 }, { name: 'Russia', pop: 143500000, gdp: 1860598 }, { name: 'Canada', pop: 34482779, gdp: 1785387 }, { name: 'Australia', pop: 24170869, gdp: 1442722 }, { name: 'South Korea', pop: 48219000, gdp: 1410383 }, { name: 'Spain', pop: 46162024, gdp: 1406538 }, { name: 'Mexico', pop: 122300000, gdp: 1291062 }, { name: 'Indonesia', pop: 249900000, gdp: 888648 }, { name: 'Netherlands', pop: 16715489, gdp: 880716 }, { name: 'Turkey', pop: 76667864, gdp: 798332 }, { name: 'Saudi Arabia', pop: 27136977, gdp: 746248 }, { name: 'Switzerland', pop: 8039060, gdp: 703852 }, { name: 'Nigeria', pop: 173600000, gdp: 573999 }, { name: 'Sweden', pop: 9471174, gdp: 570591 }, { name: 'Poland', pop: 38092000, gdp: 547894 }, { name: 'Argentina', pop: 40117096, gdp: 543061 }, { name: 'Belgium', pop: 10839905, gdp: 534230 }, { name: 'Taiwan', pop: 23197947, gdp: 529597 }, { name: 'Norway', pop: 5316800, gdp: 499817 }, { name: 'Austria', pop: 8419776, gdp: 437582 }, { name: 'Iran', pop: 80117000, gdp: 416490 }, { name: 'Thailand', pop: 69519000, gdp: 404824 }, { name: 'United Arab Emirates', pop: 8264070, gdp: 399451 }, { name: 'Colombia', pop: 48389000, gdp: 377867 }, { name: 'South Africa', pop: 50586757, gdp: 350082 }, { name: 'Denmark', pop: 5579204, gdp: 342362 }, { name: 'Malaysia', pop: 28334135, gdp: 338108 }, { name: 'Singapore', pop: 5183700, gdp: 307872 }, { name: 'Israel', pop: 7798600, gdp: 305673 }, { name: 'Hong Kong', pop: 7108100, gdp: 290896 }, { name: 'Egypt', pop: 88094000, gdp: 286435 }, { name: 'Philippines', pop: 98390000, gdp: 284618 }, { name: 'Finland', pop: 5394389, gdp: 272649 }, { name: 'Chile', pop: 17248450, gdp: 258017 }, { name: 'Ireland', pop: 4581269, gdp: 250814 }, { name: 'Pakistan', pop: 191282000, gdp: 246849 }, { name: 'Greece', pop: 10787690, gdp: 237970 }, { name: 'Portugal', pop: 10555853, gdp: 229948 }, { name: 'Iraq', pop: 32105000, gdp: 223508 }, { name: 'Kazakhstan', pop: 16615000, gdp: 216036 }, { name: 'Algeria', pop: 36300000, gdp: 213518 }, { name: 'Qatar', pop: 1699435, gdp: 210109 }, { name: 'Venezuela', pop: 31220000, gdp: 206252 }, { name: 'Czech Republic', pop: 10542080, gdp: 205270 }, { name: 'Peru', pop: 29797694, gdp: 202642 }, { name: 'Romania', pop: 21436000, gdp: 199093 }, { name: 'New Zealand', pop: 4577100, gdp: 197502 }, { name: 'Vietnam', pop: 89700000, gdp: 185897 }, { name: 'Bangladesh', pop: 156600000, gdp: 183824 }, { name: 'Kuwait', pop: 2818000, gdp: 172608 }, { name: 'Hungary', pop: 9985722, gdp: 136989 }, { name: 'Ukraine', pop: 45668028, gdp: 130660 }, { name: 'Angola', pop: 19618000, gdp: 129326 }, { name: 'Morocco', pop: 33803400, gdp: 110009 }, { name: 'Ecuador', pop: 14483499, gdp: 100543 }, { name: 'Slovakia', pop: 5437126, gdp: 99869 }, { name: 'Oman', pop: 2773479, gdp: 77779 }, { name: 'Syria', pop: 23362000, gdp: 77460 }, { name: 'Belarus', pop: 9468000, gdp: 76139 }, { name: 'Sri Lanka', pop: 20653000, gdp: 74924 }, { name: 'Sudan', pop: 30894000, gdp: 74766 }, { name: 'Azerbaijan', pop: 9111100, gdp: 74145 }, { name: 'Luxembourg', pop: 511840, gdp: 65683 }, { name: 'Dominican Republic', pop: 9378818, gdp: 64058 }, { name: 'Myanmar', pop: 48337000, gdp: 63135 }, { name: 'Uzbekistan', pop: 28000000, gdp: 62613 }, { name: 'Kenya', pop: 38610097, gdp: 60937 }, { name: 'Guatemala', pop: 14713763, gdp: 58728 }, { name: 'Uruguay', pop: 3368595, gdp: 57471 }, { name: 'Croatia', pop: 4290612, gdp: 57073 }, { name: 'Bulgaria', pop: 7364570, gdp: 55824 }, { name: 'Ethiopia', pop: 94100000, gdp: 54809 }, { name: 'Lebanon', pop: 4259000, gdp: 50028 }, { name: 'Slovenia', pop: 2081660, gdp: 49570 }, { name: 'Costa Rica', pop: 4563539, gdp: 49553 }, { name: 'Tunisia', pop: 10673800, gdp: 48633 }, { name: 'Lithuania', pop: 3207100, gdp: 48288 }, { name: 'Tanzania', pop: 43188000, gdp: 48089 }, { name: 'Turkmenistan', pop: 5105000, gdp: 47932 }, { name: 'Serbia', pop: 7120666, gdp: 43866 }, { name: 'Panama', pop: 3405813, gdp: 43777 }, { name: 'Yemen', pop: 23833000, gdp: 43229 }, { name: 'Libya', pop: 6423000, gdp: 41148 }, { name: 'Ghana', pop: 24233431, gdp: 38616 }, { name: 'Democratic Republic of the Congo', pop: 67758000, gdp: 35918 }, { name: 'Jordan', pop: 6783300, gdp: 35878 }, { name: 'Bahrain', pop: 1234571, gdp: 33862 }, { name: 'Côte d\'Ivoire', pop: 21395000, gdp: 33741 }, { name: 'Bolivia', pop: 10426154, gdp: 33237 }, { name: 'Latvia', pop: 2209000, gdp: 31972 }, { name: 'Cameroon', pop: 19406100, gdp: 31777 }, { name: 'Paraguay', pop: 6337127, gdp: 30220 }, { name: 'Trinidad and Tobago', pop: 1317714, gdp: 28874 }, { name: 'Uganda', pop: 32939800, gdp: 27616 }, { name: 'Zambia', pop: 13046508, gdp: 26611 }, { name: 'Estonia', pop: 1340194, gdp: 26506 }, { name: 'El Salvador', pop: 6227000, gdp: 25164 }, { name: 'Cyprus', pop: 803200, gdp: 23263 }, { name: 'Afghanistan', pop: 32358000, gdp: 20444 }, { name: 'Nepal', pop: 26620809, gdp: 19761 }, { name: 'Honduras', pop: 8215313, gdp: 19511 }, { name: 'Gabon', pop: 1534000, gdp: 18209 }, { name: 'Bosnia and Herzegovina', pop: 3843126, gdp: 18165 }, { name: 'Brunei', pop: 422700, gdp: 17104 }, { name: 'Iceland', pop: 318452, gdp: 17036 }, { name: 'Papua New Guinea', pop: 7014000, gdp: 16809 }, { name: 'Mozambique', pop: 23049621, gdp: 16684 }, { name: 'Cambodia', pop: 13395682, gdp: 16551 }, { name: 'Georgia', pop: 4469200, gdp: 16536 }, { name: 'Senegal', pop: 12855153, gdp: 15683 }, { name: 'Equatorial Guinea', pop: 720000, gdp: 15530 }, { name: 'Botswana', pop: 2031000, gdp: 15217 }, { name: 'South Sudan', pop: 8260490, gdp: 14304 }, { name: 'Chad', pop: 10329208, gdp: 13945 }, { name: 'Zimbabwe', pop: 12754000, gdp: 13833 }, { name: 'Jamaica', pop: 2705800, gdp: 13709 }, { name: 'Namibia', pop: 2324000, gdp: 13632 }, { name: 'Republic of the Congo', pop: 4140000, gdp: 13552 }, { name: 'Albania', pop: 3194972, gdp: 13276 }, { name: 'Mauritius', pop: 1280924, gdp: 12588 }, { name: 'Burkina Faso', pop: 15730977, gdp: 12503 }, { name: 'Mali', pop: 14517176, gdp: 12094 }, { name: 'Mongolia', pop: 2736800, gdp: 12037 }, { name: 'Nicaragua', pop: 5815524, gdp: 11806 }, { name: 'Laos', pop: 6348800, gdp: 11681 }, { name: 'Armenia', pop: 3266300, gdp: 11644 }, { name: 'Macedonia', pop: 2057284, gdp: 11342 }, { name: 'Madagascar', pop: 18866000, gdp: 10674 }, { name: 'Malta', pop: 417617, gdp: 10514 }, { name: 'Tajikistan', pop: 7616000, gdp: 9242 }, { name: 'Haiti', pop: 10085214, gdp: 8711 }, { name: 'Benin', pop: 9100000, gdp: 8685 }, { name: 'Bahamas', pop: 353658, gdp: 8511 }, { name: 'Niger', pop: 15730754, gdp: 8024 }, { name: 'Moldova', pop: 3560400, gdp: 7962 }, { name: 'Rwanda', pop: 10412826, gdp: 7897 }, { name: 'Kyrgyzstan', pop: 5477600, gdp: 7402 }, { name: 'Kosovo', pop: 1870981, gdp: 7319 }, { name: 'Guinea', pop: 10217591, gdp: 6707 }, { name: 'Malawi', pop: 13077160, gdp: 6055 }, { name: 'Suriname', pop: 529000, gdp: 5210 }, { name: 'Mauritania', pop: 3340627, gdp: 5081 }, { name: 'Timor-Leste', pop: 1066409, gdp: 4970 }, { name: 'Sierra Leone', pop: 5997000, gdp: 4815 }, { name: 'Togo', pop: 5753324, gdp: 4594 }, { name: 'Montenegro', pop: 620029, gdp: 4551 }, { name: 'Swaziland', pop: 1203000, gdp: 4416 }, { name: 'Barbados', pop: 276302, gdp: 4354 }, { name: 'Fiji', pop: 868000, gdp: 4289 }, { name: 'Eritrea', pop: 5415000, gdp: 3858 }, { name: 'Burundi', pop: 8575000, gdp: 3094 }, { name: 'Guyana', pop: 784894, gdp: 3059 }, { name: 'Maldives', pop: 317280, gdp: 2885 }, { name: 'Lesotho', pop: 2194000, gdp: 2220 }, { name: 'Liberia', pop: 3476608, gdp: 2013 }, { name: 'Bhutan', pop: 708265, gdp: 1983 }, { name: 'Cape Verde', pop: 491575, gdp: 1858 }, { name: 'San Marino', pop: 32093, gdp: 1786 }, { name: 'Central African Republic', pop: 4487000, gdp: 1726 }, { name: 'Belize', pop: 312698, gdp: 1699 }, { name: 'Djibouti', pop: 818159, gdp: 1589 }, { name: 'Seychelles', pop: 90945, gdp: 1423 }, { name: 'Saint Lucia', pop: 166526, gdp: 1404 }, { name: 'Antigua and Barbuda', pop: 89138, gdp: 1248 }, { name: 'Solomon Islands', pop: 542287, gdp: 1155 }, { name: 'Guinea-Bissau', pop: 1520830, gdp: 1111 }, { name: 'Grenada', pop: 110821, gdp: 912 }, { name: 'Saint Kitts and Nevis', pop: 51970, gdp: 852 }, { name: 'Samoa', pop: 184032, gdp: 827 }, { name: 'The Gambia', pop: 1776000, gdp: 824 }, { name: 'Vanuatu', pop: 234023, gdp: 822 }, { name: 'Saint Vincent and the Grenadines', pop: 100892, gdp: 729 }, { name: 'Comoros', pop: 754000, gdp: 697 }, { name: 'Dominica', pop: 71685, gdp: 524 }, { name: 'Tonga', pop: 105000, gdp: 438 }, { name: 'São Tomé and Príncipe', pop: 169000, gdp: 338 }, { name: 'Micronesia', pop: 102624, gdp: 308 }, { name: 'Palau', pop: 21000, gdp: 249 }, { name: 'Marshall Islands', pop: 54305, gdp: 193 }, { name: 'Kiribati', pop: 101000, gdp: 181 }, { name: 'Tuvalu', pop: 10000, gdp: 38 } ]; // calculate the per-capita income and add that to each data point countries.forEach((country: any) => { country.pci = country.gdp / country.pop * 1e6; // US$/year/capita }); return countries; } } .wj-flexgrid { max-height: 250px; margin-bottom: 12px; } .header { display: inline-block; width: 150px; text-align: right; font-weight: normal; } <template> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid :autoSearch="true" :isReadOnly="true" :selectionMode="'ListBox'" :itemsSource="data"> <wj-flex-grid-column :binding="'name'" :header="'Country'" :width="'2*'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'pop'" :header="'Population (mi)'" :format="'n0'" :width="'*'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'gdp'" :header="'GDP (US$mi/yr)'" :format="'n0'" :width="'*'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'pci'" :header="'Income (US$/yr/cap)'" :format="'n0'" :width="'*'"></wj-flex-grid-column> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.grid'; import { getData } from './data'; let App = Vue.extend({ name: 'app', data: function(){ return { data: getData() } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .wj-flexgrid { max-height: 250px; margin-bottom: 12px; } .header { display: inline-block; width: 150px; text-align: right; font-weight: normal; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { var countries = [ { name: 'United States', pop: 320723000, gdp: 17348075 }, { name: 'China', pop: 1357000000, gdp: 10356508 }, { name: 'Japan', pop: 127300000, gdp: 4602367 }, { name: 'Germany', pop: 80620000, gdp: 3874437 }, { name: 'United Kingdom', pop: 64596800, gdp: 2950039 }, { name: 'France', pop: 65821885, gdp: 2833687 }, { name: 'Brazil', pop: 200400000, gdp: 2346583 }, { name: 'Italy', pop: 60705991, gdp: 2147744 }, { name: 'India', pop: 1252000000, gdp: 2051228 }, { name: 'Russia', pop: 143500000, gdp: 1860598 }, { name: 'Canada', pop: 34482779, gdp: 1785387 }, { name: 'Australia', pop: 24170869, gdp: 1442722 }, { name: 'South Korea', pop: 48219000, gdp: 1410383 }, { name: 'Spain', pop: 46162024, gdp: 1406538 }, { name: 'Mexico', pop: 122300000, gdp: 1291062 }, { name: 'Indonesia', pop: 249900000, gdp: 888648 }, { name: 'Netherlands', pop: 16715489, gdp: 880716 }, { name: 'Turkey', pop: 76667864, gdp: 798332 }, { name: 'Saudi Arabia', pop: 27136977, gdp: 746248 }, { name: 'Switzerland', pop: 8039060, gdp: 703852 }, { name: 'Nigeria', pop: 173600000, gdp: 573999 }, { name: 'Sweden', pop: 9471174, gdp: 570591 }, { name: 'Poland', pop: 38092000, gdp: 547894 }, { name: 'Argentina', pop: 40117096, gdp: 543061 }, { name: 'Belgium', pop: 10839905, gdp: 534230 }, { name: 'Taiwan', pop: 23197947, gdp: 529597 }, { name: 'Norway', pop: 5316800, gdp: 499817 }, { name: 'Austria', pop: 8419776, gdp: 437582 }, { name: 'Iran', pop: 80117000, gdp: 416490 }, { name: 'Thailand', pop: 69519000, gdp: 404824 }, { name: 'United Arab Emirates', pop: 8264070, gdp: 399451 }, { name: 'Colombia', pop: 48389000, gdp: 377867 }, { name: 'South Africa', pop: 50586757, gdp: 350082 }, { name: 'Denmark', pop: 5579204, gdp: 342362 }, { name: 'Malaysia', pop: 28334135, gdp: 338108 }, { name: 'Singapore', pop: 5183700, gdp: 307872 }, { name: 'Israel', pop: 7798600, gdp: 305673 }, { name: 'Hong Kong', pop: 7108100, gdp: 290896 }, { name: 'Egypt', pop: 88094000, gdp: 286435 }, { name: 'Philippines', pop: 98390000, gdp: 284618 }, { name: 'Finland', pop: 5394389, gdp: 272649 }, { name: 'Chile', pop: 17248450, gdp: 258017 }, { name: 'Ireland', pop: 4581269, gdp: 250814 }, { name: 'Pakistan', pop: 191282000, gdp: 246849 }, { name: 'Greece', pop: 10787690, gdp: 237970 }, { name: 'Portugal', pop: 10555853, gdp: 229948 }, { name: 'Iraq', pop: 32105000, gdp: 223508 }, { name: 'Kazakhstan', pop: 16615000, gdp: 216036 }, { name: 'Algeria', pop: 36300000, gdp: 213518 }, { name: 'Qatar', pop: 1699435, gdp: 210109 }, { name: 'Venezuela', pop: 31220000, gdp: 206252 }, { name: 'Czech Republic', pop: 10542080, gdp: 205270 }, { name: 'Peru', pop: 29797694, gdp: 202642 }, { name: 'Romania', pop: 21436000, gdp: 199093 }, { name: 'New Zealand', pop: 4577100, gdp: 197502 }, { name: 'Vietnam', pop: 89700000, gdp: 185897 }, { name: 'Bangladesh', pop: 156600000, gdp: 183824 }, { name: 'Kuwait', pop: 2818000, gdp: 172608 }, { name: 'Hungary', pop: 9985722, gdp: 136989 }, { name: 'Ukraine', pop: 45668028, gdp: 130660 }, { name: 'Angola', pop: 19618000, gdp: 129326 }, { name: 'Morocco', pop: 33803400, gdp: 110009 }, { name: 'Ecuador', pop: 14483499, gdp: 100543 }, { name: 'Slovakia', pop: 5437126, gdp: 99869 }, { name: 'Oman', pop: 2773479, gdp: 77779 }, { name: 'Syria', pop: 23362000, gdp: 77460 }, { name: 'Belarus', pop: 9468000, gdp: 76139 }, { name: 'Sri Lanka', pop: 20653000, gdp: 74924 }, { name: 'Sudan', pop: 30894000, gdp: 74766 }, { name: 'Azerbaijan', pop: 9111100, gdp: 74145 }, { name: 'Luxembourg', pop: 511840, gdp: 65683 }, { name: 'Dominican Republic', pop: 9378818, gdp: 64058 }, { name: 'Myanmar', pop: 48337000, gdp: 63135 }, { name: 'Uzbekistan', pop: 28000000, gdp: 62613 }, { name: 'Kenya', pop: 38610097, gdp: 60937 }, { name: 'Guatemala', pop: 14713763, gdp: 58728 }, { name: 'Uruguay', pop: 3368595, gdp: 57471 }, { name: 'Croatia', pop: 4290612, gdp: 57073 }, { name: 'Bulgaria', pop: 7364570, gdp: 55824 }, { name: 'Ethiopia', pop: 94100000, gdp: 54809 }, { name: 'Lebanon', pop: 4259000, gdp: 50028 }, { name: 'Slovenia', pop: 2081660, gdp: 49570 }, { name: 'Costa Rica', pop: 4563539, gdp: 49553 }, { name: 'Tunisia', pop: 10673800, gdp: 48633 }, { name: 'Lithuania', pop: 3207100, gdp: 48288 }, { name: 'Tanzania', pop: 43188000, gdp: 48089 }, { name: 'Turkmenistan', pop: 5105000, gdp: 47932 }, { name: 'Serbia', pop: 7120666, gdp: 43866 }, { name: 'Panama', pop: 3405813, gdp: 43777 }, { name: 'Yemen', pop: 23833000, gdp: 43229 }, { name: 'Libya', pop: 6423000, gdp: 41148 }, { name: 'Ghana', pop: 24233431, gdp: 38616 }, { name: 'Democratic Republic of the Congo', pop: 67758000, gdp: 35918 }, { name: 'Jordan', pop: 6783300, gdp: 35878 }, { name: 'Bahrain', pop: 1234571, gdp: 33862 }, { name: 'Côte d\'Ivoire', pop: 21395000, gdp: 33741 }, { name: 'Bolivia', pop: 10426154, gdp: 33237 }, { name: 'Latvia', pop: 2209000, gdp: 31972 }, { name: 'Cameroon', pop: 19406100, gdp: 31777 }, { name: 'Paraguay', pop: 6337127, gdp: 30220 }, { name: 'Trinidad and Tobago', pop: 1317714, gdp: 28874 }, { name: 'Uganda', pop: 32939800, gdp: 27616 }, { name: 'Zambia', pop: 13046508, gdp: 26611 }, { name: 'Estonia', pop: 1340194, gdp: 26506 }, { name: 'El Salvador', pop: 6227000, gdp: 25164 }, { name: 'Cyprus', pop: 803200, gdp: 23263 }, { name: 'Afghanistan', pop: 32358000, gdp: 20444 }, { name: 'Nepal', pop: 26620809, gdp: 19761 }, { name: 'Honduras', pop: 8215313, gdp: 19511 }, { name: 'Gabon', pop: 1534000, gdp: 18209 }, { name: 'Bosnia and Herzegovina', pop: 3843126, gdp: 18165 }, { name: 'Brunei', pop: 422700, gdp: 17104 }, { name: 'Iceland', pop: 318452, gdp: 17036 }, { name: 'Papua New Guinea', pop: 7014000, gdp: 16809 }, { name: 'Mozambique', pop: 23049621, gdp: 16684 }, { name: 'Cambodia', pop: 13395682, gdp: 16551 }, { name: 'Georgia', pop: 4469200, gdp: 16536 }, { name: 'Senegal', pop: 12855153, gdp: 15683 }, { name: 'Equatorial Guinea', pop: 720000, gdp: 15530 }, { name: 'Botswana', pop: 2031000, gdp: 15217 }, { name: 'South Sudan', pop: 8260490, gdp: 14304 }, { name: 'Chad', pop: 10329208, gdp: 13945 }, { name: 'Zimbabwe', pop: 12754000, gdp: 13833 }, { name: 'Jamaica', pop: 2705800, gdp: 13709 }, { name: 'Namibia', pop: 2324000, gdp: 13632 }, { name: 'Republic of the Congo', pop: 4140000, gdp: 13552 }, { name: 'Albania', pop: 3194972, gdp: 13276 }, { name: 'Mauritius', pop: 1280924, gdp: 12588 }, { name: 'Burkina Faso', pop: 15730977, gdp: 12503 }, { name: 'Mali', pop: 14517176, gdp: 12094 }, { name: 'Mongolia', pop: 2736800, gdp: 12037 }, { name: 'Nicaragua', pop: 5815524, gdp: 11806 }, { name: 'Laos', pop: 6348800, gdp: 11681 }, { name: 'Armenia', pop: 3266300, gdp: 11644 }, { name: 'Macedonia', pop: 2057284, gdp: 11342 }, { name: 'Madagascar', pop: 18866000, gdp: 10674 }, { name: 'Malta', pop: 417617, gdp: 10514 }, { name: 'Tajikistan', pop: 7616000, gdp: 9242 }, { name: 'Haiti', pop: 10085214, gdp: 8711 }, { name: 'Benin', pop: 9100000, gdp: 8685 }, { name: 'Bahamas', pop: 353658, gdp: 8511 }, { name: 'Niger', pop: 15730754, gdp: 8024 }, { name: 'Moldova', pop: 3560400, gdp: 7962 }, { name: 'Rwanda', pop: 10412826, gdp: 7897 }, { name: 'Kyrgyzstan', pop: 5477600, gdp: 7402 }, { name: 'Kosovo', pop: 1870981, gdp: 7319 }, { name: 'Guinea', pop: 10217591, gdp: 6707 }, { name: 'Malawi', pop: 13077160, gdp: 6055 }, { name: 'Suriname', pop: 529000, gdp: 5210 }, { name: 'Mauritania', pop: 3340627, gdp: 5081 }, { name: 'Timor-Leste', pop: 1066409, gdp: 4970 }, { name: 'Sierra Leone', pop: 5997000, gdp: 4815 }, { name: 'Togo', pop: 5753324, gdp: 4594 }, { name: 'Montenegro', pop: 620029, gdp: 4551 }, { name: 'Swaziland', pop: 1203000, gdp: 4416 }, { name: 'Barbados', pop: 276302, gdp: 4354 }, { name: 'Fiji', pop: 868000, gdp: 4289 }, { name: 'Eritrea', pop: 5415000, gdp: 3858 }, { name: 'Burundi', pop: 8575000, gdp: 3094 }, { name: 'Guyana', pop: 784894, gdp: 3059 }, { name: 'Maldives', pop: 317280, gdp: 2885 }, { name: 'Lesotho', pop: 2194000, gdp: 2220 }, { name: 'Liberia', pop: 3476608, gdp: 2013 }, { name: 'Bhutan', pop: 708265, gdp: 1983 }, { name: 'Cape Verde', pop: 491575, gdp: 1858 }, { name: 'San Marino', pop: 32093, gdp: 1786 }, { name: 'Central African Republic', pop: 4487000, gdp: 1726 }, { name: 'Belize', pop: 312698, gdp: 1699 }, { name: 'Djibouti', pop: 818159, gdp: 1589 }, { name: 'Seychelles', pop: 90945, gdp: 1423 }, { name: 'Saint Lucia', pop: 166526, gdp: 1404 }, { name: 'Antigua and Barbuda', pop: 89138, gdp: 1248 }, { name: 'Solomon Islands', pop: 542287, gdp: 1155 }, { name: 'Guinea-Bissau', pop: 1520830, gdp: 1111 }, { name: 'Grenada', pop: 110821, gdp: 912 }, { name: 'Saint Kitts and Nevis', pop: 51970, gdp: 852 }, { name: 'Samoa', pop: 184032, gdp: 827 }, { name: 'The Gambia', pop: 1776000, gdp: 824 }, { name: 'Vanuatu', pop: 234023, gdp: 822 }, { name: 'Saint Vincent and the Grenadines', pop: 100892, gdp: 729 }, { name: 'Comoros', pop: 754000, gdp: 697 }, { name: 'Dominica', pop: 71685, gdp: 524 }, { name: 'Tonga', pop: 105000, gdp: 438 }, { name: 'São Tomé and Príncipe', pop: 169000, gdp: 338 }, { name: 'Micronesia', pop: 102624, gdp: 308 }, { name: 'Palau', pop: 21000, gdp: 249 }, { name: 'Marshall Islands', pop: 54305, gdp: 193 }, { name: 'Kiribati', pop: 101000, gdp: 181 }, { name: 'Tuvalu', pop: 10000, gdp: 38 } ]; // // calculate the per-capita income and add that to each data point countries.forEach(function (country) { country.pci = country.gdp / country.pop * 1e6; // US$/year/capita }); // return countries; } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjcGrid from "@grapecity/wijmo.react.grid"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <wjcGrid.FlexGrid autoSearch={true} isReadOnly={true} selectionMode="ListBox" itemsSource={this.state.data}> <wjcGrid.FlexGridColumn binding="name" header="Country" width="2*"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="pop" header="Population (mi)" format="n0" width="*"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="gdp" header="GDP (US$mi/yr)" format="n0" width="*"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="pci" header="Income (US$/yr/cap)" format="n0" width="*"></wjcGrid.FlexGridColumn> </wjcGrid.FlexGrid> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { max-height: 250px; margin-bottom: 12px; } .header { display: inline-block; width: 150px; text-align: right; font-weight: normal; } export function getData() { var countries = [ { name: 'United States', pop: 320723000, gdp: 17348075 }, { name: 'China', pop: 1357000000, gdp: 10356508 }, { name: 'Japan', pop: 127300000, gdp: 4602367 }, { name: 'Germany', pop: 80620000, gdp: 3874437 }, { name: 'United Kingdom', pop: 64596800, gdp: 2950039 }, { name: 'France', pop: 65821885, gdp: 2833687 }, { name: 'Brazil', pop: 200400000, gdp: 2346583 }, { name: 'Italy', pop: 60705991, gdp: 2147744 }, { name: 'India', pop: 1252000000, gdp: 2051228 }, { name: 'Russia', pop: 143500000, gdp: 1860598 }, { name: 'Canada', pop: 34482779, gdp: 1785387 }, { name: 'Australia', pop: 24170869, gdp: 1442722 }, { name: 'South Korea', pop: 48219000, gdp: 1410383 }, { name: 'Spain', pop: 46162024, gdp: 1406538 }, { name: 'Mexico', pop: 122300000, gdp: 1291062 }, { name: 'Indonesia', pop: 249900000, gdp: 888648 }, { name: 'Netherlands', pop: 16715489, gdp: 880716 }, { name: 'Turkey', pop: 76667864, gdp: 798332 }, { name: 'Saudi Arabia', pop: 27136977, gdp: 746248 }, { name: 'Switzerland', pop: 8039060, gdp: 703852 }, { name: 'Nigeria', pop: 173600000, gdp: 573999 }, { name: 'Sweden', pop: 9471174, gdp: 570591 }, { name: 'Poland', pop: 38092000, gdp: 547894 }, { name: 'Argentina', pop: 40117096, gdp: 543061 }, { name: 'Belgium', pop: 10839905, gdp: 534230 }, { name: 'Taiwan', pop: 23197947, gdp: 529597 }, { name: 'Norway', pop: 5316800, gdp: 499817 }, { name: 'Austria', pop: 8419776, gdp: 437582 }, { name: 'Iran', pop: 80117000, gdp: 416490 }, { name: 'Thailand', pop: 69519000, gdp: 404824 }, { name: 'United Arab Emirates', pop: 8264070, gdp: 399451 }, { name: 'Colombia', pop: 48389000, gdp: 377867 }, { name: 'South Africa', pop: 50586757, gdp: 350082 }, { name: 'Denmark', pop: 5579204, gdp: 342362 }, { name: 'Malaysia', pop: 28334135, gdp: 338108 }, { name: 'Singapore', pop: 5183700, gdp: 307872 }, { name: 'Israel', pop: 7798600, gdp: 305673 }, { name: 'Hong Kong', pop: 7108100, gdp: 290896 }, { name: 'Egypt', pop: 88094000, gdp: 286435 }, { name: 'Philippines', pop: 98390000, gdp: 284618 }, { name: 'Finland', pop: 5394389, gdp: 272649 }, { name: 'Chile', pop: 17248450, gdp: 258017 }, { name: 'Ireland', pop: 4581269, gdp: 250814 }, { name: 'Pakistan', pop: 191282000, gdp: 246849 }, { name: 'Greece', pop: 10787690, gdp: 237970 }, { name: 'Portugal', pop: 10555853, gdp: 229948 }, { name: 'Iraq', pop: 32105000, gdp: 223508 }, { name: 'Kazakhstan', pop: 16615000, gdp: 216036 }, { name: 'Algeria', pop: 36300000, gdp: 213518 }, { name: 'Qatar', pop: 1699435, gdp: 210109 }, { name: 'Venezuela', pop: 31220000, gdp: 206252 }, { name: 'Czech Republic', pop: 10542080, gdp: 205270 }, { name: 'Peru', pop: 29797694, gdp: 202642 }, { name: 'Romania', pop: 21436000, gdp: 199093 }, { name: 'New Zealand', pop: 4577100, gdp: 197502 }, { name: 'Vietnam', pop: 89700000, gdp: 185897 }, { name: 'Bangladesh', pop: 156600000, gdp: 183824 }, { name: 'Kuwait', pop: 2818000, gdp: 172608 }, { name: 'Hungary', pop: 9985722, gdp: 136989 }, { name: 'Ukraine', pop: 45668028, gdp: 130660 }, { name: 'Angola', pop: 19618000, gdp: 129326 }, { name: 'Morocco', pop: 33803400, gdp: 110009 }, { name: 'Ecuador', pop: 14483499, gdp: 100543 }, { name: 'Slovakia', pop: 5437126, gdp: 99869 }, { name: 'Oman', pop: 2773479, gdp: 77779 }, { name: 'Syria', pop: 23362000, gdp: 77460 }, { name: 'Belarus', pop: 9468000, gdp: 76139 }, { name: 'Sri Lanka', pop: 20653000, gdp: 74924 }, { name: 'Sudan', pop: 30894000, gdp: 74766 }, { name: 'Azerbaijan', pop: 9111100, gdp: 74145 }, { name: 'Luxembourg', pop: 511840, gdp: 65683 }, { name: 'Dominican Republic', pop: 9378818, gdp: 64058 }, { name: 'Myanmar', pop: 48337000, gdp: 63135 }, { name: 'Uzbekistan', pop: 28000000, gdp: 62613 }, { name: 'Kenya', pop: 38610097, gdp: 60937 }, { name: 'Guatemala', pop: 14713763, gdp: 58728 }, { name: 'Uruguay', pop: 3368595, gdp: 57471 }, { name: 'Croatia', pop: 4290612, gdp: 57073 }, { name: 'Bulgaria', pop: 7364570, gdp: 55824 }, { name: 'Ethiopia', pop: 94100000, gdp: 54809 }, { name: 'Lebanon', pop: 4259000, gdp: 50028 }, { name: 'Slovenia', pop: 2081660, gdp: 49570 }, { name: 'Costa Rica', pop: 4563539, gdp: 49553 }, { name: 'Tunisia', pop: 10673800, gdp: 48633 }, { name: 'Lithuania', pop: 3207100, gdp: 48288 }, { name: 'Tanzania', pop: 43188000, gdp: 48089 }, { name: 'Turkmenistan', pop: 5105000, gdp: 47932 }, { name: 'Serbia', pop: 7120666, gdp: 43866 }, { name: 'Panama', pop: 3405813, gdp: 43777 }, { name: 'Yemen', pop: 23833000, gdp: 43229 }, { name: 'Libya', pop: 6423000, gdp: 41148 }, { name: 'Ghana', pop: 24233431, gdp: 38616 }, { name: 'Democratic Republic of the Congo', pop: 67758000, gdp: 35918 }, { name: 'Jordan', pop: 6783300, gdp: 35878 }, { name: 'Bahrain', pop: 1234571, gdp: 33862 }, { name: 'Côte d\'Ivoire', pop: 21395000, gdp: 33741 }, { name: 'Bolivia', pop: 10426154, gdp: 33237 }, { name: 'Latvia', pop: 2209000, gdp: 31972 }, { name: 'Cameroon', pop: 19406100, gdp: 31777 }, { name: 'Paraguay', pop: 6337127, gdp: 30220 }, { name: 'Trinidad and Tobago', pop: 1317714, gdp: 28874 }, { name: 'Uganda', pop: 32939800, gdp: 27616 }, { name: 'Zambia', pop: 13046508, gdp: 26611 }, { name: 'Estonia', pop: 1340194, gdp: 26506 }, { name: 'El Salvador', pop: 6227000, gdp: 25164 }, { name: 'Cyprus', pop: 803200, gdp: 23263 }, { name: 'Afghanistan', pop: 32358000, gdp: 20444 }, { name: 'Nepal', pop: 26620809, gdp: 19761 }, { name: 'Honduras', pop: 8215313, gdp: 19511 }, { name: 'Gabon', pop: 1534000, gdp: 18209 }, { name: 'Bosnia and Herzegovina', pop: 3843126, gdp: 18165 }, { name: 'Brunei', pop: 422700, gdp: 17104 }, { name: 'Iceland', pop: 318452, gdp: 17036 }, { name: 'Papua New Guinea', pop: 7014000, gdp: 16809 }, { name: 'Mozambique', pop: 23049621, gdp: 16684 }, { name: 'Cambodia', pop: 13395682, gdp: 16551 }, { name: 'Georgia', pop: 4469200, gdp: 16536 }, { name: 'Senegal', pop: 12855153, gdp: 15683 }, { name: 'Equatorial Guinea', pop: 720000, gdp: 15530 }, { name: 'Botswana', pop: 2031000, gdp: 15217 }, { name: 'South Sudan', pop: 8260490, gdp: 14304 }, { name: 'Chad', pop: 10329208, gdp: 13945 }, { name: 'Zimbabwe', pop: 12754000, gdp: 13833 }, { name: 'Jamaica', pop: 2705800, gdp: 13709 }, { name: 'Namibia', pop: 2324000, gdp: 13632 }, { name: 'Republic of the Congo', pop: 4140000, gdp: 13552 }, { name: 'Albania', pop: 3194972, gdp: 13276 }, { name: 'Mauritius', pop: 1280924, gdp: 12588 }, { name: 'Burkina Faso', pop: 15730977, gdp: 12503 }, { name: 'Mali', pop: 14517176, gdp: 12094 }, { name: 'Mongolia', pop: 2736800, gdp: 12037 }, { name: 'Nicaragua', pop: 5815524, gdp: 11806 }, { name: 'Laos', pop: 6348800, gdp: 11681 }, { name: 'Armenia', pop: 3266300, gdp: 11644 }, { name: 'Macedonia', pop: 2057284, gdp: 11342 }, { name: 'Madagascar', pop: 18866000, gdp: 10674 }, { name: 'Malta', pop: 417617, gdp: 10514 }, { name: 'Tajikistan', pop: 7616000, gdp: 9242 }, { name: 'Haiti', pop: 10085214, gdp: 8711 }, { name: 'Benin', pop: 9100000, gdp: 8685 }, { name: 'Bahamas', pop: 353658, gdp: 8511 }, { name: 'Niger', pop: 15730754, gdp: 8024 }, { name: 'Moldova', pop: 3560400, gdp: 7962 }, { name: 'Rwanda', pop: 10412826, gdp: 7897 }, { name: 'Kyrgyzstan', pop: 5477600, gdp: 7402 }, { name: 'Kosovo', pop: 1870981, gdp: 7319 }, { name: 'Guinea', pop: 10217591, gdp: 6707 }, { name: 'Malawi', pop: 13077160, gdp: 6055 }, { name: 'Suriname', pop: 529000, gdp: 5210 }, { name: 'Mauritania', pop: 3340627, gdp: 5081 }, { name: 'Timor-Leste', pop: 1066409, gdp: 4970 }, { name: 'Sierra Leone', pop: 5997000, gdp: 4815 }, { name: 'Togo', pop: 5753324, gdp: 4594 }, { name: 'Montenegro', pop: 620029, gdp: 4551 }, { name: 'Swaziland', pop: 1203000, gdp: 4416 }, { name: 'Barbados', pop: 276302, gdp: 4354 }, { name: 'Fiji', pop: 868000, gdp: 4289 }, { name: 'Eritrea', pop: 5415000, gdp: 3858 }, { name: 'Burundi', pop: 8575000, gdp: 3094 }, { name: 'Guyana', pop: 784894, gdp: 3059 }, { name: 'Maldives', pop: 317280, gdp: 2885 }, { name: 'Lesotho', pop: 2194000, gdp: 2220 }, { name: 'Liberia', pop: 3476608, gdp: 2013 }, { name: 'Bhutan', pop: 708265, gdp: 1983 }, { name: 'Cape Verde', pop: 491575, gdp: 1858 }, { name: 'San Marino', pop: 32093, gdp: 1786 }, { name: 'Central African Republic', pop: 4487000, gdp: 1726 }, { name: 'Belize', pop: 312698, gdp: 1699 }, { name: 'Djibouti', pop: 818159, gdp: 1589 }, { name: 'Seychelles', pop: 90945, gdp: 1423 }, { name: 'Saint Lucia', pop: 166526, gdp: 1404 }, { name: 'Antigua and Barbuda', pop: 89138, gdp: 1248 }, { name: 'Solomon Islands', pop: 542287, gdp: 1155 }, { name: 'Guinea-Bissau', pop: 1520830, gdp: 1111 }, { name: 'Grenada', pop: 110821, gdp: 912 }, { name: 'Saint Kitts and Nevis', pop: 51970, gdp: 852 }, { name: 'Samoa', pop: 184032, gdp: 827 }, { name: 'The Gambia', pop: 1776000, gdp: 824 }, { name: 'Vanuatu', pop: 234023, gdp: 822 }, { name: 'Saint Vincent and the Grenadines', pop: 100892, gdp: 729 }, { name: 'Comoros', pop: 754000, gdp: 697 }, { name: 'Dominica', pop: 71685, gdp: 524 }, { name: 'Tonga', pop: 105000, gdp: 438 }, { name: 'São Tomé and Príncipe', pop: 169000, gdp: 338 }, { name: 'Micronesia', pop: 102624, gdp: 308 }, { name: 'Palau', pop: 21000, gdp: 249 }, { name: 'Marshall Islands', pop: 54305, gdp: 193 }, { name: 'Kiribati', pop: 101000, gdp: 181 }, { name: 'Tuvalu', pop: 10000, gdp: 38 } ]; // // calculate the per-capita income and add that to each data point countries.forEach(function (country) { country["pci"] = country.gdp / country.pop * 1e6; // US$/year/capita }); // return countries; }