drilldown-plnkr.json

{"index.css":"","treemap-data/drilldown-sample":"/**\r\n * drill down sample\r\n */\r\n//tslint:disable\r\nexport let DrillDown: Object[] = [\r\n\t{\r\n\t\tContinent: [\r\n\t\t\t{\r\n\t\t\t\tName: \"Africa\", Population: 1216130000, States: [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Eastern Africa\", Population: 410637987, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Ethiopia\", Population: 107534882 },\r\n\t\t\t\t\t\t\t{ Name: \"Tanzania\", Population: 59091392 },\r\n\t\t\t\t\t\t\t{ Name: \"Kenya\", Population: 50950879 },\r\n\t\t\t\t\t\t\t{ Name: \"Uganda\", Population: 44270563 },\r\n\t\t\t\t\t\t\t{ Name: \"Mozambique\", Population: 30528673 },\r\n\t\t\t\t\t\t\t{ Name: \"Madagascar\", Population: 26262810 },\r\n\t\t\t\t\t\t\t{ Name: \"Malawi\", Population: 19164728 },\r\n\t\t\t\t\t\t\t{ Name: \"Zambia\", Population: 17609178 },\r\n\t\t\t\t\t\t\t{ Name: \"Zimbabwe\", Population: 16913261 },\r\n\t\t\t\t\t\t\t{ Name: \"Somalia\", Population: 15181925 },\r\n\t\t\t\t\t\t\t{ Name: \"South, Sudan\", Population: 12919053 },\r\n\t\t\t\t\t\t\t{ Name: \"Rwanda\", Population: 12501156 },\r\n\t\t\t\t\t\t\t{ Name: \"Burundi\", Population: 11216450 },\r\n\t\t\t\t\t\t\t{ Name: \"Eritrea\", Population: 5187948 },\r\n\t\t\t\t\t\t\t{ Name: \"Mauritius\", Population: 1268315 },\r\n\t\t\t\t\t\t\t{ Name: \"Djibouti\", Population: 971408 },\r\n\t\t\t\t\t\t\t{ Name: \"Réunion\", Population: 883247 },\r\n\t\t\t\t\t\t\t{ Name: \"Comoros\", Population: 832347 },\r\n\t\t\t\t\t\t\t{ Name: \"Mayotte\", Population: 259682 },\r\n\t\t\t\t\t\t\t{ Name: \"Seychelles\", Population: 95235 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Middle Africa\", Population: 158562976, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Democratic, Republic of the Congo\", Population: 84004989 },\r\n\t\t\t\t\t\t\t{ Name: \"Angola\", Population: 30774205 },\r\n\t\t\t\t\t\t\t{ Name: \"Cameroon\", Population: 24678234 },\r\n\t\t\t\t\t\t\t{ Name: \"Chad\", Population: 15353184 },\r\n\t\t\t\t\t\t\t{ Name: \"Congo\", Population: 5399895 },\r\n\t\t\t\t\t\t\t{ Name: \"Central African, Republic\", Population: 4737423 },\r\n\t\t\t\t\t\t\t{ Name: \"Gabon\", Population: 2067561 },\r\n\t\t\t\t\t\t\t{ Name: \"Equatorial Guinea\", Population: 1313894 },\r\n\t\t\t\t\t\t\t{ Name: \"Sao Tome and Principe\", Population: 208818 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Northern Africa\", Population: 229385603, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Egypt\", Population: 99375741 },\r\n\t\t\t\t\t\t\t{ Name: \"Algeria\", Population: 42008054 },\r\n\t\t\t\t\t\t\t{ Name: \"Sudan\", Population: 41511526 },\r\n\t\t\t\t\t\t\t{ Name: \"Morocco\", Population: 36191805 },\r\n\t\t\t\t\t\t\t{ Name: \"Tunisia\", Population: 11659174 },\r\n\t\t\t\t\t\t\t{ Name: \"Libya\", Population: 6470956 },\r\n\t\t\t\t\t\t\t{ Name: \"Western, Sahara\", Population: 567421 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Southern Africa\", Population: 64292365, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"South Africa\", Population: 57398421 },\r\n\t\t\t\t\t\t\t{ Name: \"Namibia\", Population: 2587801 },\r\n\t\t\t\t\t\t\t{ Name: \"Botswana\", Population: 2333201 },\r\n\t\t\t\t\t\t\t{ Name: \"Lesotho\", Population: 2263010 },\r\n\t\t\t\t\t\t\t{ Name: \"Swaziland\", Population: 1391385 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Western Africa\", Population: 362201579, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Nigeria\", Population: 195875237 },\r\n\t\t\t\t\t\t\t{ Name: \"Ghana\", Population: 29463643 },\r\n\t\t\t\t\t\t\t{ Name: \"Côte d'Ivoire\", Population: 24905843 },\r\n\t\t\t\t\t\t\t{ Name: \"Niger\", Population: 22311375 },\r\n\t\t\t\t\t\t\t{ Name: \"Burkina Faso\", Population: 19751651 },\r\n\t\t\t\t\t\t\t{ Name: \"Mali\", Population: 19107706 },\r\n\t\t\t\t\t\t\t{ Name: \"Senegal\", Population: 16294270 },\r\n\t\t\t\t\t\t\t{ Name: \"Guinea\", Population: 13052608 },\r\n\t\t\t\t\t\t\t{ Name: \"Benin\", Population: 11485674 },\r\n\t\t\t\t\t\t\t{ Name: \"Togo\", Population: 7990926 },\r\n\t\t\t\t\t\t\t{ Name: \"Sierra Leone\", Population: 7719729 },\r\n\t\t\t\t\t\t\t{ Name: \"Liberia\", Population: 4853516 },\r\n\t\t\t\t\t\t\t{ Name: \"Mauritania\", Population: 4540068 },\r\n\t\t\t\t\t\t\t{ Name: \"Gambia\", Population: 2163765 },\r\n\t\t\t\t\t\t\t{ Name: \"Guinea-Bissau\", Population: 1907268 },\r\n\t\t\t\t\t\t\t{ Name: \"Cabo Verde\", Population: 553335 },\r\n\t\t\t\t\t\t\t{ Name: \"Saint Helena\", Population: 4074 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t]\r\n\t\t\t}]\r\n\t},\r\n\r\n\r\n\r\n\t{\r\n\t\tContinent: [\r\n\t\t\t{\r\n\t\t\t\tName: \"Asia\", Population: 4436224000, States: [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Central Asia\", Population: 69787760, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Uzbekistan\", Population: 32364996 },\r\n\t\t\t\t\t\t\t{ Name: \"Kazakhstan\", Population: 18403860 },\r\n\t\t\t\t\t\t\t{ Name: \"Tajikistan\", Population: 9107211 },\r\n\t\t\t\t\t\t\t{ Name: \"Kyrgyzstan\", Population: 6132932 },\r\n\t\t\t\t\t\t\t{ Name: \"Turkmenistan\", Population: 5851466 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Eastern Asia\", Population: 1641908531, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"China\", Population: 1415045928 },\r\n\t\t\t\t\t\t\t{ Name: \"Japan\", Population: 127185332 },\r\n\t\t\t\t\t\t\t{ Name: \"South Korea\", Population: 51164435 },\r\n\t\t\t\t\t\t\t{ Name: \"North Korea\", Population: 25610672 },\r\n\t\t\t\t\t\t\t{ Name: \"Taiwan\", Population: 23694089 },\r\n\t\t\t\t\t\t\t{ Name: \"Hong Kong\", Population: 7428887 },\r\n\t\t\t\t\t\t\t{ Name: \"Mongolia\", Population: 3121772 },\r\n\t\t\t\t\t\t\t{ Name: \"Macao\", Population: 632418 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Southeastern Asia\", Population: 641775797, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Indonesia\", Population: 266794980 },\r\n\t\t\t\t\t\t\t{ Name: \"Philippines\", Population: 106512074 },\r\n\t\t\t\t\t\t\t{ Name: \"Viet Nam\", Population: 96491146 },\r\n\t\t\t\t\t\t\t{ Name: \"Thailand\", Population: 69183173 },\r\n\t\t\t\t\t\t\t{ Name: \"Myanmar\", Population: 53855735 },\r\n\t\t\t\t\t\t\t{ Name: \"Malaysia\", Population: 32042458 },\r\n\t\t\t\t\t\t\t{ Name: \"Cambodia\", Population: 16245729 },\r\n\t\t\t\t\t\t\t{ Name: \"Laos\", Population: 6961210 },\r\n\t\t\t\t\t\t\t{ Name: \"Singapore\", Population: 5791901 },\r\n\t\t\t\t\t\t\t{ Name: \"Timor-Leste\", Population: 1324094 },\r\n\t\t\t\t\t\t\t{ Name: \"Brunei Darussalam\", Population: 434076 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Southern Asia\", Population: 1846266634, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"India\", Population: 1354051854 },\r\n\t\t\t\t\t\t\t{ Name: \"Pakistan\", Population: 200813818 },\r\n\t\t\t\t\t\t\t{ Name: \"Bangladesh\", Population: 166368149 },\r\n\t\t\t\t\t\t\t{ Name: \"Iran\", Population: 82011735 },\r\n\t\t\t\t\t\t\t{ Name: \"Afghanistan\", Population: 36373176 },\r\n\t\t\t\t\t\t\t{ Name: \"Nepal\", Population: 29624035 },\r\n\t\t\t\t\t\t\t{ Name: \"Sri Lanka\", Population: 20950041 },\r\n\t\t\t\t\t\t\t{ Name: \"Bhutan\", Population: 817054 },\r\n\t\t\t\t\t\t\t{ Name: \"Maldives\", Population: 444259 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Western Asia\", Population: 262938009, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Turkey\", Population: 81916871 },\r\n\t\t\t\t\t\t\t{ Name: \"Iraq\", Population: 39339753 },\r\n\t\t\t\t\t\t\t{ Name: \"Saudi Arabia\", Population: 33554343 },\r\n\t\t\t\t\t\t\t{ Name: \"Yemen\", Population: 28915284 },\r\n\t\t\t\t\t\t\t{ Name: \"Syria\", Population: 18284407 },\r\n\t\t\t\t\t\t\t{ Name: \"Azerbaijan\", Population: 9923914 },\r\n\t\t\t\t\t\t\t{ Name: \"Jordan\", Population: 9903802 },\r\n\t\t\t\t\t\t\t{ Name: \"United Arab Emirates\", Population: 9541615 },\r\n\t\t\t\t\t\t\t{ Name: \"Israel\", Population: 8452841 },\r\n\t\t\t\t\t\t\t{ Name: \"Lebanon\", Population: 6093509 },\r\n\t\t\t\t\t\t\t{ Name: \"State of Palestine\", Population: 5052776 },\r\n\t\t\t\t\t\t\t{ Name: \"Oman\", Population: 4829946 },\r\n\t\t\t\t\t\t\t{ Name: \"Kuwait\", Population: 4197128 },\r\n\t\t\t\t\t\t\t{ Name: \"Georgia\", Population: 3907131 },\r\n\t\t\t\t\t\t\t{ Name: \"Armenia\", Population: 2934152 },\r\n\t\t\t\t\t\t\t{ Name: \"Qatar\", Population: 2694849 },\r\n\t\t\t\t\t\t\t{ Name: \"Bahrain\", Population: 1566993 },\r\n\t\t\t\t\t\t\t{ Name: \"Cyprus\", Population: 1189085 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t]\r\n\t\t\t}]\r\n\t},\r\n\r\n\r\n\t{\r\n\t\tContinent: [\r\n\t\t\t{\r\n\t\t\t\tName: \"North America\", Population: 579024000, States: [\r\n\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Central America\", Population: 174988756, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Mexico\", Population: 130759074 },\r\n\t\t\t\t\t\t\t{ Name: \"Guatemala\", Population: 17245346 },\r\n\t\t\t\t\t\t\t{ Name: \"Honduras\", Population: 9417167 },\r\n\t\t\t\t\t\t\t{ Name: \"El, Salvador\", Population: 6411558 },\r\n\t\t\t\t\t\t\t{ Name: \"Nicaragua\", Population: 6284757 },\r\n\t\t\t\t\t\t\t{ Name: \"Costa, Rica\", Population: 4953199 },\r\n\t\t\t\t\t\t\t{ Name: \"Panama\", Population: 4162618 },\r\n\t\t\t\t\t\t\t{ Name: \"Belize\", Population: 382444 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Northern America\", Population: 358593810, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"U.S.\", Population: 322179605 },\r\n\t\t\t\t\t\t\t{ Name: \"Canada\", Population: 36953765 },\r\n\t\t\t\t\t\t\t{ Name: \"Bermuda\", Population: 61070 },\r\n\t\t\t\t\t\t\t{ Name: \"Greenland\", Population: 56565 },\r\n\t\t\t\t\t\t\t{ Name: \"Saint Pierre & Miquelon\", Population: 6342 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t]\r\n\t\t\t}]\r\n\t},\r\n\r\n\r\n\t{\r\n\t\tContinent: [\r\n\t\t\t{\r\n\t\t\t\tName: \"South America\", Population: 422535000, States: [\r\n\t\t\t\t\t{ Name: \"Brazil\", Population: 204519000 },\r\n\t\t\t\t\t{ Name: \"Colombia\", Population: 48549000 },\r\n\t\t\t\t\t{ Name: \"Argentina\", Population: 43132000 },\r\n\t\t\t\t\t{ Name: \"Peru\", Population: 31153000 },\r\n\t\t\t\t\t{ Name: \"Venezuela\", Population: 30620000 },\r\n\t\t\t\t\t{ Name: \"Chile\", Population: 18006000 },\r\n\t\t\t\t\t{ Name: \"Ecuador\", Population: 16279000 },\r\n\t\t\t\t\t{ Name: \"Bolivia\", Population: 10520000 },\r\n\t\t\t\t\t{ Name: \"Paraguay\", Population: 7003000 },\r\n\t\t\t\t\t{ Name: \"Uruguay\", Population: 3310000 },\r\n\t\t\t\t\t{ Name: \"Guyana\", Population: 747000 },\r\n\t\t\t\t\t{ Name: \"Suriname\", Population: 560000 },\r\n\t\t\t\t\t{ Name: \"French Guiana\", Population: 262000 },\r\n\t\t\t\t\t{ Name: \"Falkland Islands\", Population: 3000 },\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t]\r\n\t},\r\n\r\n\r\n\t{\r\n\t\tContinent: [\r\n\t\t\t{\r\n\t\t\t\tName: \"Europe\", Population: 738849000, States: [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Eastern Europe\", Population: 291953328, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Russia\", Population: 143964709 },\r\n\t\t\t\t\t\t\t{ Name: \"Ukraine\", Population: 44009214 },\r\n\t\t\t\t\t\t\t{ Name: \"Poland\", Population: 38104832 },\r\n\t\t\t\t\t\t\t{ Name: \"Romania\", Population: 19580634 },\r\n\t\t\t\t\t\t\t{ Name: \"Crech, Republic\", Population: 10625250 },\r\n\t\t\t\t\t\t\t{ Name: \"Hungary\", Population: 9688847 },\r\n\t\t\t\t\t\t\t{ Name: \"Belarus\", Population: 9452113 },\r\n\t\t\t\t\t\t\t{ Name: \"Bulgaria\", Population: 7036848 },\r\n\t\t\t\t\t\t\t{ Name: \"Slovakia\", Population: 5449816 },\r\n\t\t\t\t\t\t\t{ Name: \"Moldova\", Population: 4041065 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Northern Europe\", Population: 103642971, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"United Kingdom\", Population: 66573504 },\r\n\t\t\t\t\t\t\t{ Name: \"Sweden\", Population: 9982709 },\r\n\t\t\t\t\t\t\t{ Name: \"Denmark\", Population: 5754356 },\r\n\t\t\t\t\t\t\t{ Name: \"Finland\", Population: 5542517 },\r\n\t\t\t\t\t\t\t{ Name: \"Norway\", Population: 5353363 },\r\n\t\t\t\t\t\t\t{ Name: \"Ireland\", Population: 4803748 },\r\n\t\t\t\t\t\t\t{ Name: \"Lithuania\", Population: 2876475 },\r\n\t\t\t\t\t\t\t{ Name: \"Latvia\", Population: 1929938 },\r\n\t\t\t\t\t\t\t{ Name: \"Estonia\", Population: 1306788 },\r\n\t\t\t\t\t\t\t{ Name: \"Iceland\", Population: 337780 },\r\n\t\t\t\t\t\t\t{ Name: \"Channel Islands\", Population: 166083 },\r\n\t\t\t\t\t\t\t{ Name: \"Isle of Man\", Population: 84831 },\r\n\t\t\t\t\t\t\t{ Name: \"Faeroe Islands\", Population: 49489 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Southern Europe\", Population: 152172107, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Italy\", Population: 59290969 },\r\n\t\t\t\t\t\t\t{ Name: \"Spain\", Population: 46397452 },\r\n\t\t\t\t\t\t\t{ Name: \"Greece\", Population: 11142161 },\r\n\t\t\t\t\t\t\t{ Name: \"Portugal\", Population: 10291196 },\r\n\t\t\t\t\t\t\t{ Name: \"Serbia\", Population: 8762027 },\r\n\t\t\t\t\t\t\t{ Name: \"Croatia\", Population: 4164783 },\r\n\t\t\t\t\t\t\t{ Name: \"Bosnia and Herzegovina\", Population: 3503554 },\r\n\t\t\t\t\t\t\t{ Name: \"Albania\", Population: 2934363 },\r\n\t\t\t\t\t\t\t{ Name: \"Macedonia\", Population: 2085051 },\r\n\t\t\t\t\t\t\t{ Name: \"Slovenia\", Population: 2081260 },\r\n\t\t\t\t\t\t\t{ Name: \"Montenegro\", Population: 629219 },\r\n\t\t\t\t\t\t\t{ Name: \"Malta\", Population: 432089 },\r\n\t\t\t\t\t\t\t{ Name: \"Andorra\", Population: 76953 },\r\n\t\t\t\t\t\t\t{ Name: \"Gibraltar\", Population: 34733 },\r\n\t\t\t\t\t\t\t{ Name: \"San Marino\", Population: 33557 },\r\n\t\t\t\t\t\t\t{ Name: \"Holy, See\", Population: 801 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tName: \"Western Europe\", Population: 92746859, Region: [\r\n\t\t\t\t\t\t\t{ Name: \"Germany\", Population: 82293457 },\r\n\t\t\t\t\t\t\t{ Name: \"France\", Population: 65233271 },\r\n\t\t\t\t\t\t\t{ Name: \"Netherlands\", Population: 17084459 },\r\n\t\t\t\t\t\t\t{ Name: \"Belgium\", Population: 11498519 },\r\n\t\t\t\t\t\t\t{ Name: \"Austria\", Population: 8751820 },\r\n\t\t\t\t\t\t\t{ Name: \"Switzerland\", Population: 8544034 },\r\n\t\t\t\t\t\t\t{ Name: \"Luxembourg\", Population: 590321 },\r\n\t\t\t\t\t\t\t{ Name: \"Monaco\", Population: 38897 },\r\n\t\t\t\t\t\t\t{ Name: \"Liechtenstein\", Population: 38155 },\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t]\r\n\t\t\t}]\r\n\t}\r\n\r\n]","systemjs.config.js":"System.config({\r\n    transpiler: \"ts\",\r\n    typescriptOptions: {\r\n            target: \"es5\",\r\n            module: \"commonjs\",\r\n            moduleResolution: \"node\",\r\n            emitDecoratorMetadata: true,\r\n            experimentalDecorators: true,\r\n            \"jsx\": \"react\"\r\n    },\r\n     meta: {\r\n      'typescript': {\r\n        \"exports\": \"ts\"\r\n      },\r\n      '*.json': { loader: 'plugin-json' }\r\n    },\r\n    paths: {\r\n        \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n    map: {\r\n        app: 'app',\r\n        ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n        \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n        \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n        \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n        \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n        \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n    },\r\n    packages: {\r\n        'app': { main: 'index', defaultExtension: 'tsx' },\r\n    }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Treemap · Drilldown · Essential JS 2 for React · Syncfusion</title>\r\n    <meta charset=\"utf-8\" />\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n    <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n    <!-- {{:meta}} -->\r\n    <meta name=\"author\" content=\"Syncfusion\" />\r\n    <script type=\"text/javascript\">\r\n        var themeName = location.hash || 'material';\r\n        themeName = themeName.replace('#','');\r\n        window.ripple = (themeName === \"material\")\r\n        document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n    </script>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n    <script src=\"systemjs.config.js\"></script>\r\n    <link href=\"index.css\" rel=\"stylesheet\" />\r\n     <style>\r\n        #loader {\r\n            color: #008cff;\r\n            height: 40px;\r\n            left: 45%;\r\n            position: absolute;\r\n            top: 45%;\r\n            width: 30%;\r\n        }\r\n        body {\r\n            touch-action:none;\r\n        }\r\n        .body {\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n        }\r\n\r\n        .e-view {\r\n            bottom: 0;\r\n            left: 0;\r\n            overflow: hidden;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n\r\n        .sb-left {\r\n            float: left;\r\n        }\r\n\r\n        .sb-right {\r\n            float: right;\r\n        }\r\n\r\n        .sb-block {\r\n            display: block;\r\n        }\r\n\r\n        .sb-table {\r\n            display: table;\r\n        }\r\n\r\n        .sb-table-cell {\r\n            display: table-cell;\r\n            vertical-align: middle;\r\n        }\r\n\r\n        /*sample header*/\r\n\r\n\r\n        .sb-header {\r\n            height: 48px;\r\n            background: #FFFFFF;\r\n            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n            z-index: 1001;\r\n            opacity: 100;\r\n        }\r\n\r\n\r\n        .sb-header-left, .sb-header-right {\r\n            height: 100%;\r\n        }\r\n\r\n        #sb-header-text {\r\n            padding-left: 22px;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        .header-logo {\r\n            float: left;\r\n            padding-left: 8px;\r\n            padding-right: 22px;\r\n        }\r\n\r\n        .footer-logo {\r\n            background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n            height: 40px;\r\n            width: 140px;\r\n        }\r\n\r\n        .sb-header-splitter {\r\n            float: left;\r\n            border-left: 1px solid rgb(196, 196, 196);\r\n            height: 32px;\r\n            margin-top: 8px;\r\n            padding-left: 22 px;\r\n        }\r\n\r\n        .sb-header-settings {\r\n            display: none;\r\n        }\r\n\r\n        .product-style a{\r\n        padding-right: 15px;\r\n        font-family:Roboto;\r\n        font-weight: 500;\r\n        font-size: 13px;\r\n        color: #363636;\r\n        text-align: center;\r\n        text-decoration: none;\r\n        }\r\n        .product-style a:hover {\r\n            color:#3C78EF;\r\n        }\r\n\r\n        .sb-download-btn a {\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-download-text {\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-wrapper {\r\n            padding-right: 27px;\r\n        }\r\n\r\n        .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\";\r\n            font-weight: bold;\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-btn:hover {\r\n            background: #006CE6;\r\n        }\r\n\r\n        .sb-download-btn:focus {\r\n            background: #0051CB;\r\n        }\r\n\r\n        .sb-download-btn.active {\r\n            background: #0036B1;\r\n        }\r\n\r\n        .sb-download-btn {\r\n            background-color: #3C78EF;\r\n            opacity: 100;\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n            font-weight: 500;\r\n            line-height: 18px;\r\n            height: 32px;\r\n            border-color: transparent;\r\n        }\r\n\r\n        .sb-bread-crumb {\r\n            padding-left: 20px;\r\n            padding-top: 24px;\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        .category-allcontrols a, .category-text a, .crumb-sample {\r\n            display: table;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #3C78EF;\r\n            text-align: left;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-bread-crumb .sb-bread-crumb-text>div {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            padding-right: 8px;\r\n            cursor: default;\r\n            display: table-cell;\r\n        }\r\n\r\n        .sb-bread-crumb-text>div.seperator {\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            vertical-align: bottom;\r\n        } \r\n\r\n        .content {\r\n        overflow: auto;\r\n        height: calc(100% - 50px);\r\n        top: 50px;\r\n        }\r\n\r\n\r\n        .sample-content {\r\n            top: 48px;\r\n            background: #FFFFFF;\r\n        }\r\n\r\n        .div {\r\n        display: block;\r\n        }\r\n\r\n        .control-section {\r\n            padding-left: 4px;\r\n        }\r\n\r\n        .crumb-sample {\r\n            color: #000000;\r\n            line-height: 18px;\r\n        }\r\n\r\n        #description {\r\n            padding-bottom: 16px;\r\n            padding-left: 20px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n            padding-top: 14px;\r\n        }\r\n\r\n        #action-description {\r\n            padding-left: 20px;\r\n            padding-bottom: 15px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        #description-section {\r\n            padding-left: 20px;\r\n            padding-top: 30px;\r\n            opacity: 0.87;\r\n            font-family:Roboto;\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n\r\n\r\n    </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n        <div class=\"sample-browser\">\r\n            <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n                <div class='sb-header-left sb-left sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"header-logo\">\r\n                            <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n                                <div class=\"footer-logo\"> </div>\r\n                            </a>\r\n                        </div>\r\n    \r\n                    </div>\r\n                    <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div id='sb-header-text' class='e-sb-header-text'>\r\n    \r\n                            <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class='sb-header-right sb-right sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class='product-style'>\r\n                            <div><a href=\"https://www.syncfusion.com/products/react/treemap\">PRODUCT DETAILS</a></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n                            <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n                                <button id=\"download-now\" class=\"sb-download-btn\">\r\n                                    <span class=\"sb-download-text\">DOWNLOAD</span>\r\n                                </button>\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n    \r\n            </div>\r\n            <div class ='content e-view'>\r\n            <div class='sample-content'>\r\n                <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n                    <div class=\"sb-bread-crumb-text\">\r\n                        <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/treemap/default.html\"><span>Treemap</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"crumb-sample\">Drilldown</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-content\">\r\n                <div id=\"action-description\">\r\n                        <p>\r\n                            \n\t\t\t\t\t<p>\n\t\t\t\t\t\tThis sample demonstrates drill-down with the continents at the top level followed by regions and countries. By clicking a continent, you can view all the countries available in that continent clearly.\n            </p>\n\t\t\t\t\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"container-fluid\">\r\n                        <div class=\"control-section\">\r\n                            <div id='sample'>\r\n                                <div id='loader'>Loading....</div>\r\n                            </div>\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <div id=\"description-section\">Description</div>    \r\n                    <div id=\"description\">\r\n                        <p>\r\n                           \n\t\t\t\t\t<p>\n\t\t\t\t\t\tIn this example you can see how to render a TreeMap with multiple items and drill it further. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item in touch enabled devices.\n\t\t\t\t\t</p>\n\t\t\t\t\r\n                         </p>     \r\n                    </div>    \r\n                </div>             \r\n            </div>\r\n                \r\n            </div>\r\n        </div>\r\n          \r\n</body>\r\n</html>\r\n","app/index.tsx":"/**\r\n * Drilldown sample for treemap\r\n */\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport {\r\n\tTreeMapComponent, LevelsDirective, LevelDirective, Inject, TreeMapTooltip,\r\n\tILoadedEventArgs, TreeMapTheme, IDrillStartEventArgs, ITreeMapTooltipRenderEventArgs\r\n} from '@syncfusion/ej2-react-treemap';\r\nimport { DrillDown } from '../treemap-data/drilldown-sample';\r\nimport { SampleBase } from './sample-base';\r\nconst SAMPLE_CSS = `\r\n    .control-fluid {\r\n\t\tpadding: 0px !important;\r\n    }`;\r\n\r\nexport class Drilldown extends SampleBase<{}, {}> {\r\n\tprivate treemapInstance: TreeMapComponent;\r\n\tprivate prevTime: Date;\r\n\tprivate curTime: Date;\r\n\r\n\tpublic load(args: ILoadedEventArgs): void {\r\n\t\tlet theme: string = location.hash.split('/')[1];\r\n\t\ttheme = theme ? theme : 'Material';\r\n\t\targs.treemap.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)) as TreeMapTheme;\r\n\t}\r\n\r\n\t/* tslint:disable:no-string-literal */\r\n\tpublic drillStart(args: IDrillStartEventArgs): void {\r\n\t\tif (args.item[Object.keys(args.item)[0]].length === 1) {\r\n\t\t\targs.treemap.levels[2].showHeader = true;\r\n\t\t} else {\r\n\t\t\targs.treemap.levels[2].showHeader = false;\r\n\t\t}\r\n\t}\r\n\r\n\tpublic tooltipRendering(args: ITreeMapTooltipRenderEventArgs): void {\r\n\t\tif (args.item['groupIndex'] !== 2) {\r\n\t\t\targs.cancel = true;\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<div className='control-pane'>\r\n\t\t\t\t<style>\r\n\t\t\t\t\t{SAMPLE_CSS}\r\n\t\t\t\t</style>\r\n\t\t\t\t<div className='control-section'>\r\n\t\t\t\t\t<TreeMapComponent drillStart={this.drillStart.bind(this)} tooltipRendering={this.tooltipRendering.bind(this)} load={this.load.bind(this)} id='treemap-container'\r\n\t\t\t\t\t\tpalette={['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66']}\r\n\t\t\t\t\t\ttitleSettings={{\t\t\t//To config title for treemap\r\n\t\t\t\t\t\t\ttext: 'List of countries by population',\r\n\t\t\t\t\t\t\ttextStyle: { size: '15px' }\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tenableDrillDown={true}\r\n\t\t\t\t\t\tformat={\"n\"}\r\n\t\t\t\t\t\tuseGroupingSeparator={true}\r\n\t\t\t\t\t\tdataSource={DrillDown}\r\n\t\t\t\t\t\tweightValuePath='Population'\r\n\t\t\t\t\t\ttooltipSettings={{\t\t\t// To config tooltip for treemap\r\n\t\t\t\t\t\t\tvisible: true,\r\n\t\t\t\t\t\t\tformat: '${Name} : ${Population}'\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tleafItemSettings={{         // To config leafitem customization for treemap\r\n\t\t\t\t\t\t\tlabelPath: 'Name',\r\n\t\t\t\t\t\t\tshowLabels: false,\r\n\t\t\t\t\t\t\tlabelStyle: { size: '0px' },\r\n\t\t\t\t\t\t\tborder: { color: 'black', width: 0.5 }\r\n\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t<Inject services={[TreeMapTooltip]} />\r\n\t\t\t\t\t\t<LevelsDirective>\r\n\t\t\t\t\t\t\t<LevelDirective groupPath= 'Continent' fill= '#336699' border={{ color: 'black', width: 0.5 }} />\r\n\t\t\t\t\t\t\t<LevelDirective groupPath='States' fill='#336699' border={{ color: 'black', width: 0.5 }} />\r\n\t\t\t\t\t\t\t<LevelDirective groupPath='Region' showHeader={false} fill='#336699' border={{ color: 'black', width: 0.5 }} />\r\n\t\t\t\t\t\t</LevelsDirective>\r\n\t\t\t\t\t</TreeMapComponent>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div style={{ float: 'right', marginright: '10px' }}>Source:\r\n       <a href=\"https://en.wikipedia.org/wiki/List_of_continents_by_population\" target=\"_blank\">en.wikipedia.org</a>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t)\r\n\t}\r\n}\nReactDOM.render(<Drilldown />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n    public rendereComplete(): void {\r\n        /**custom render complete function */\r\n    }\r\n    componentDidMount(): void {\r\n        setTimeout(() => {\r\n            this.rendereComplete();\r\n        }\r\n        );\r\n    }\r\n}"}