Drilldown in React Treemap component

3 Mar 202324 minutes to read

Customize the header for treemap drilldown

Yon can add a header element as <div> and customize it to show the population of a particular country or continent on treemap drill-down.

To customize the header for treemap drill-down, follow the given steps:

Step 1:

Initialize the treemap and enable the drill-down option.

import { TreeMapComponent, LevelDirective, LevelsDirective, ILoadedEventArgs, IDrillEndEventArgs } from '@syncfusion/ej2-react-treemap';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DrillDown } from './datasource';
export function App() {
    return (
      <TreeMapComponent  palette={ ['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66'] } enableDrillDown={true} format={"n"} useGroupingSeparator={true} dataSource={DrillDown} weightValuePath='Population' leafItemSettings={ {
            labelPath: 'Name',
            showLabels: false,
            labelStyle: { size: '0px' },
            border: { color: 'black', width: 0.5 }
          } }>
            <LevelsDirective>
              <LevelDirective groupPath='Continent' fill='#336699' border={ { color: 'black', width: 0.5 } } />
              <LevelDirective groupPath='States' fill='#336699' border={ { color: 'black', width: 0.5 } } />
              <LevelDirective groupPath='Region' showHeader={false} fill='#336699' border={ { color: 'black', width: 0.5 } } />
            </LevelsDirective>
          </TreeMapComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Step 2:

Show the population of a particular continent in the treemap loaded event. In this event, you can get the header element.

   function loaded(args: ILoadedEventArgs): void {
    let header: Element = document.getElementById('header') as Element;
    let population: number = 0;
    for (let i: number = 0; i < args.treemap.layout.renderItems[0]['parent'].Continent.length; i++) {
      population += +(args.treemap.layout.renderItems[0]['parent'].Continent[i]['data'].Population);
    }
    header.innerHTML = 'Continent - Population : ' + population
  }

Step 3:

Customize the population for drilled countries or states in the header element when drill-down the treemap. The drillEnd event will be triggered when treemap is drilled.

/**
 * drill down sample
 */
//tslint:disable
export let DrillDown = [
    { Continent: [
            { Name: "Africa", Population: 1216130000, States: [
                    { Name: "Eastern Africa", Population: 410637987, Region: [
                            { Name: "Ethiopia", Population: 107534882 },
                            { Name: "Tanzania", Population: 59091392 },
                            { Name: "Kenya", Population: 50950879 },
                            { Name: "Uganda", Population: 44270563 },
                            { Name: "Mozambique", Population: 30528673 },
                            { Name: "Madagascar", Population: 26262810 },
                            { Name: "Malawi", Population: 19164728 },
                            { Name: "Zambia", Population: 17609178 },
                            { Name: "Zimbabwe", Population: 16913261 },
                            { Name: "Somalia", Population: 15181925 },
                            { Name: "South, Sudan", Population: 12919053 },
                            { Name: "Rwanda", Population: 12501156 },
                            { Name: "Burundi", Population: 11216450 },
                            { Name: "Eritrea", Population: 5187948 },
                            { Name: "Mauritius", Population: 1268315 },
                            { Name: "Djibouti", Population: 971408 },
                            { Name: "Réunion", Population: 883247 },
                            { Name: "Comoros", Population: 832347 },
                            { Name: "Mayotte", Population: 259682 },
                            { Name: "Seychelles", Population: 95235 },
                        ] },
                    { Name: "Middle Africa", Population: 158562976, Region: [
                            { Name: "Democratic, Republic of the Congo", Population: 84004989 },
                            { Name: "Angola", Population: 30774205 },
                            { Name: "Cameroon", Population: 24678234 },
                            { Name: "Chad", Population: 15353184 },
                            { Name: "Congo", Population: 5399895 },
                            { Name: "Central African, Republic", Population: 4737423 },
                            { Name: "Gabon", Population: 2067561 },
                            { Name: "Equatorial Guinea", Population: 1313894 },
                            { Name: "Sao Tome and Principe", Population: 208818 },
                        ] },
                    { Name: "Northern Africa", Population: 229385603, Region: [
                            { Name: "Egypt", Population: 99375741 },
                            { Name: "Algeria", Population: 42008054 },
                            { Name: "Sudan", Population: 41511526 },
                            { Name: "Morocco", Population: 36191805 },
                            { Name: "Tunisia", Population: 11659174 },
                            { Name: "Libya", Population: 6470956 },
                            { Name: "Western, Sahara", Population: 567421 },
                        ] },
                    { Name: "Southern Africa", Population: 64292365, Region: [
                            { Name: "South Africa", Population: 57398421 },
                            { Name: "Namibia", Population: 2587801 },
                            { Name: "Botswana", Population: 2333201 },
                            { Name: "Lesotho", Population: 2263010 },
                            { Name: "Swaziland", Population: 1391385 },
                        ] },
                    { Name: "Western Africa", Population: 362201579, Region: [
                            { Name: "Nigeria", Population: 195875237 },
                            { Name: "Ghana", Population: 29463643 },
                            { Name: "Côte d'Ivoire", Population: 24905843 },
                            { Name: "Niger", Population: 22311375 },
                            { Name: "Burkina Faso", Population: 19751651 },
                            { Name: "Mali", Population: 19107706 },
                            { Name: "Senegal", Population: 16294270 },
                            { Name: "Guinea", Population: 13052608 },
                            { Name: "Benin", Population: 11485674 },
                            { Name: "Togo", Population: 7990926 },
                            { Name: "Sierra Leone", Population: 7719729 },
                            { Name: "Liberia", Population: 4853516 },
                            { Name: "Mauritania", Population: 4540068 },
                            { Name: "Gambia", Population: 2163765 },
                            { Name: "Guinea-Bissau", Population: 1907268 },
                            { Name: "Cabo Verde", Population: 553335 },
                            { Name: "Saint Helena", Population: 4074 },
                        ] },
                ]
            }
        ]
    },
    { Continent: [
            {
                Name: "Asia", Population: 4436224000, States: [
                    { Name: "Central Asia", Population: 69787760, Region: [
                            { Name: "Uzbekistan", Population: 32364996 },
                            { Name: "Kazakhstan", Population: 18403860 },
                            { Name: "Tajikistan", Population: 9107211 },
                            { Name: "Kyrgyzstan", Population: 6132932 },
                            { Name: "Turkmenistan", Population: 5851466 },
                        ] },
                    { Name: "Eastern Asia", Population: 1641908531, Region: [
                            { Name: "China", Population: 1415045928 },
                            { Name: "Japan", Population: 127185332 },
                            { Name: "South Korea", Population: 51164435 },
                            { Name: "North Korea", Population: 25610672 },
                            { Name: "Taiwan", Population: 23694089 },
                            { Name: "Hong Kong", Population: 7428887 },
                            { Name: "Mongolia", Population: 3121772 },
                            { Name: "Macao", Population: 632418 },
                        ] },
                    { Name: "Southeastern Asia", Population: 641775797, Region: [
                            { Name: "Indonesia", Population: 266794980 },
                            { Name: "Philippines", Population: 106512074 },
                            { Name: "Viet Nam", Population: 96491146 },
                            { Name: "Thailand", Population: 69183173 },
                            { Name: "Myanmar", Population: 53855735 },
                            { Name: "Malaysia", Population: 32042458 },
                            { Name: "Cambodia", Population: 16245729 },
                            { Name: "Laos", Population: 6961210 },
                            { Name: "Singapore", Population: 5791901 },
                            { Name: "Timor-Leste", Population: 1324094 },
                            { Name: "Brunei Darussalam", Population: 434076 },
                        ] },
                    { Name: "Southern Asia", Population: 1846266634, Region: [
                            { Name: "India", Population: 1354051854 },
                            { Name: "Pakistan", Population: 200813818 },
                            { Name: "Bangladesh", Population: 166368149 },
                            { Name: "Iran", Population: 82011735 },
                            { Name: "Afghanistan", Population: 36373176 },
                            { Name: "Nepal", Population: 29624035 },
                            { Name: "Sri Lanka", Population: 20950041 },
                            { Name: "Bhutan", Population: 817054 },
                            { Name: "Maldives", Population: 444259 },
                        ] },
                    { Name: "Western Asia", Population: 262938009, Region: [
                            { Name: "Turkey", Population: 81916871 },
                            { Name: "Iraq", Population: 39339753 },
                            { Name: "Saudi Arabia", Population: 33554343 },
                            { Name: "Yemen", Population: 28915284 },
                            { Name: "Syria", Population: 18284407 },
                            { Name: "Azerbaijan", Population: 9923914 },
                            { Name: "Jordan", Population: 9903802 },
                            { Name: "United Arab Emirates", Population: 9541615 },
                            { Name: "Israel", Population: 8452841 },
                            { Name: "Lebanon", Population: 6093509 },
                            { Name: "State of Palestine", Population: 5052776 },
                            { Name: "Oman", Population: 4829946 },
                            { Name: "Kuwait", Population: 4197128 },
                            { Name: "Georgia", Population: 3907131 },
                            { Name: "Armenia", Population: 2934152 },
                            { Name: "Qatar", Population: 2694849 },
                            { Name: "Bahrain", Population: 1566993 },
                            { Name: "Cyprus", Population: 1189085 },
                        ] },
                ]
            }
        ]
    },
    { Continent: [
            {
                Name: "North America", Population: 579024000, States: [
                    { Name: "Central America", Population: 174988756, Region: [
                            { Name: "Mexico", Population: 130759074 },
                            { Name: "Guatemala", Population: 17245346 },
                            { Name: "Honduras", Population: 9417167 },
                            { Name: "El, Salvador", Population: 6411558 },
                            { Name: "Nicaragua", Population: 6284757 },
                            { Name: "Costa, Rica", Population: 4953199 },
                            { Name: "Panama", Population: 4162618 },
                            { Name: "Belize", Population: 382444 },
                        ] },
                    { Name: "Northern America", Population: 358593810, Region: [
                            { Name: "U.S.", Population: 3267667480 },
                            { Name: "Canada", Population: 36953765 },
                            { Name: "Bermuda", Population: 61070 },
                            { Name: "Greenland", Population: 56565 },
                            { Name: "Saint Pierre & Miquelon", Population: 6342 },
                        ] },
                ]
            }
        ]
    },
    {
        Continent: [
            {
                Name: "South America", Population: 422535000, States: [
                    { Name: "Brazil", Population: 204519000 },
                    { Name: "Colombia", Population: 48549000 },
                    { Name: "Argentina", Population: 43132000 },
                    { Name: "Peru", Population: 31153000 },
                    { Name: "Venezuela", Population: 30620000 },
                    { Name: "Chile", Population: 18006000 },
                    { Name: "Ecuador", Population: 16279000 },
                    { Name: "Bolivia", Population: 10520000 },
                    { Name: "Paraguay", Population: 7003000 },
                    { Name: "Uruguay", Population: 3310000 },
                    { Name: "Guyana", Population: 747000 },
                    { Name: "Suriname", Population: 560000 },
                    { Name: "French Guiana", Population: 262000 },
                    { Name: "Falkland Islands", Population: 3000 },
                ]
            },
        ]
    },
    { Continent: [
            {
                Name: "Europe", Population: 738849000, States: [
                    { Name: "Eastern Europe", Population: 291953328, Region: [
                            { Name: "Russia", Population: 143964709 },
                            { Name: "Ukraine", Population: 44009214 },
                            { Name: "Poland", Population: 38104832 },
                            { Name: "Romania", Population: 19580634 },
                            { Name: "Crech, Republic", Population: 10625250 },
                            { Name: "Hungary", Population: 9688847 },
                            { Name: "Belarus", Population: 9452113 },
                            { Name: "Bulgaria", Population: 7036848 },
                            { Name: "Slovakia", Population: 5449816 },
                            { Name: "Moldova", Population: 4041065 },
                        ] },
                    { Name: "Northern Europe", Population: 103642971, Region: [
                            { Name: "United Kingdom", Population: 66573504 },
                            { Name: "Sweden", Population: 9982709 },
                            { Name: "Denmark", Population: 5754356 },
                            { Name: "Finland", Population: 5542517 },
                            { Name: "Norway", Population: 5353363 },
                            { Name: "Ireland", Population: 4803748 },
                            { Name: "Lithuania", Population: 2876475 },
                            { Name: "Latvia", Population: 1929938 },
                            { Name: "Estonia", Population: 1306788 },
                            { Name: "Iceland", Population: 337780 },
                            { Name: "Channel Islands", Population: 166083 },
                            { Name: "Isle of Man", Population: 84831 },
                            { Name: "Faeroe Islands", Population: 49489 },
                        ] },
                    { Name: "Southern Europe", Population: 152172107, Region: [
                            { Name: "Italy", Population: 59290969 },
                            { Name: "Spain", Population: 46397452 },
                            { Name: "Greece", Population: 11142161 },
                            { Name: "Portugal", Population: 10291196 },
                            { Name: "Serbia", Population: 8762027 },
                            { Name: "Croatia", Population: 4164783 },
                            { Name: "Bosnia and Herzegovina", Population: 3503554 },
                            { Name: "Albania", Population: 2934363 },
                            { Name: "Macedonia", Population: 2085051 },
                            { Name: "Slovenia", Population: 2081260 },
                            { Name: "Montenegro", Population: 629219 },
                            { Name: "Malta", Population: 432089 },
                            { Name: "Andorra", Population: 76953 },
                            { Name: "Gibraltar", Population: 34733 },
                            { Name: "San Marino", Population: 33557 },
                            { Name: "Holy, See", Population: 801 },
                        ] },
                    { Name: "Western Europe", Population: 92746859, Region: [
                            { Name: "Germany", Population: 82293457 },
                            { Name: "France", Population: 65233271 },
                            { Name: "Netherlands", Population: 17084459 },
                            { Name: "Belgium", Population: 11498519 },
                            { Name: "Austria", Population: 8751820 },
                            { Name: "Switzerland", Population: 8544034 },
                            { Name: "Luxembourg", Population: 590321 },
                            { Name: "Monaco", Population: 38897 },
                            { Name: "Liechtenstein", Population: 38155 },
                        ] },
                ]
            }
        ]
    }
];
/**
 * drill down sample
 */
//tslint:disable
export let DrillDown: Object[] = [
    { Continent:[
       { Name: "Africa",Population: 1216130000, States: [
            { Name: "Eastern Africa",Population:410637987, Region:[				
                { Name:"Ethiopia", Population: 107534882},
				{ Name:"Tanzania", Population: 59091392},
				{ Name:"Kenya", Population: 50950879},
				{ Name:"Uganda", Population: 44270563},
				{ Name:"Mozambique", Population: 30528673},
				{ Name:"Madagascar", Population: 26262810},
				{ Name:"Malawi", Population: 19164728},
				{ Name:"Zambia", Population: 17609178},
				{ Name:"Zimbabwe", Population: 16913261},
				{ Name:"Somalia", Population: 15181925},
				{ Name:"South, Sudan", Population: 12919053},
				{ Name:"Rwanda", Population: 12501156},
				{ Name:"Burundi", Population: 11216450},
				{ Name:"Eritrea", Population: 5187948},
				{ Name:"Mauritius", Population: 1268315},
				{ Name:"Djibouti", Population: 971408},
				{ Name:"Réunion", Population: 883247},
				{ Name:"Comoros", Population: 832347},
				{ Name:"Mayotte", Population: 259682},
				{ Name:"Seychelles", Population: 95235},
            ]  },
            { Name: "Middle Africa",Population:158562976, Region:[
				{ Name:"Democratic, Republic of the Congo", Population: 84004989},
				{ Name:"Angola", Population: 30774205},
				{ Name:"Cameroon", Population: 24678234},
				{ Name:"Chad", Population: 15353184},
				{ Name:"Congo", Population: 5399895},
				{ Name:"Central African, Republic", Population: 4737423},
				{ Name:"Gabon", Population: 2067561},
				{ Name:"Equatorial Guinea", Population: 1313894},
				{ Name:"Sao Tome and Principe", Population: 208818},
			] },
            { Name: "Northern Africa",Population:229385603, Region: [
				{ Name:"Egypt", Population: 99375741},
				{ Name:"Algeria", Population: 42008054},
				{ Name:"Sudan", Population: 41511526},
				{ Name:"Morocco", Population: 36191805},
				{ Name:"Tunisia", Population: 11659174},
				{ Name:"Libya", Population: 6470956},
				{ Name:"Western, Sahara", Population: 567421},
			] },
            { Name: "Southern Africa",Population:64292365, Region:[
				{ Name:"South Africa", Population: 57398421},
				{ Name:"Namibia", Population: 2587801},
				{ Name:"Botswana", Population: 2333201},
				{ Name:"Lesotho", Population: 2263010},
				{ Name:"Swaziland", Population: 1391385},
			] },
            { Name: "Western Africa", Population:362201579, Region:[
				{ Name:"Nigeria", Population: 195875237},
				{ Name:"Ghana", Population: 29463643},
				{ Name:"Côte d'Ivoire", Population: 24905843},
				{ Name:"Niger", Population: 22311375},
				{ Name:"Burkina Faso", Population: 19751651},
				{ Name:"Mali", Population: 19107706},
				{ Name:"Senegal", Population: 16294270},
				{ Name:"Guinea", Population: 13052608},
				{ Name:"Benin", Population: 11485674},
				{ Name:"Togo", Population: 7990926},
				{ Name:"Sierra Leone", Population: 7719729},
				{ Name:"Liberia", Population: 4853516},
				{ Name:"Mauritania", Population: 4540068},
				{ Name:"Gambia", Population: 2163765},
				{ Name:"Guinea-Bissau", Population: 1907268},
				{ Name:"Cabo Verde", Population: 553335},
				{ Name:"Saint Helena", Population: 4074},
			] },
        ]
       }]
    },
	
	
	
	{ Continent:[
        {
		Name: "Asia", Population:4436224000, States:[
			{Name: "Central Asia", Population: 69787760, Region:[
				{ Name:"Uzbekistan", Population: 32364996 },
				{ Name:"Kazakhstan", Population: 18403860 },
				{ Name:"Tajikistan", Population: 9107211 },
				{ Name:"Kyrgyzstan", Population: 6132932 },
				{ Name:"Turkmenistan", Population: 5851466 },
			] },
			{Name: "Eastern Asia", Population:1641908531, Region:[
				{ Name:"China", Population: 1415045928}, 
				{ Name:"Japan", Population:	 127185332 },
				{ Name:"South Korea", Population:	51164435 },
				{ Name:"North Korea", Population:25610672 },
				{ Name:"Taiwan", Population: 23694089 },
				{ Name:"Hong Kong", Population: 7428887 },
				{ Name:"Mongolia", Population: 3121772}, 
				{ Name:"Macao", Population: 632418 },
			]  },
			{Name: "Southeastern Asia", Population:641775797, Region: [
				{ Name:"Indonesia", Population:	 266794980 },
				{ Name:"Philippines", Population:	 106512074 },
				{ Name:"Viet Nam", Population:	 96491146 },
				{ Name:"Thailand", Population:	 69183173 },
				{ Name:"Myanmar", Population:	 53855735 },
				{ Name:"Malaysia", Population:	 32042458 },
				{ Name:"Cambodia", Population:	 16245729 },
				{ Name:"Laos", Population:	 6961210 },
				{ Name:"Singapore", Population:	 5791901}, 
				{ Name:"Timor-Leste", Population:	 1324094}, 
				{ Name:"Brunei Darussalam", Population:	 434076}, 
			]  },
			{Name: "Southern Asia", Population: 1846266634, Region: [
				{ Name:"India", Population:	 1354051854},
				{ Name:"Pakistan", Population:	 200813818},
				{ Name:"Bangladesh", Population:	 166368149},
				{ Name:"Iran", Population:	 82011735},
				{ Name:"Afghanistan", Population:	 36373176},
				{ Name:"Nepal", Population:	 29624035},
				{ Name:"Sri Lanka", Population:	 20950041},
				{ Name:"Bhutan", Population:	 817054},
				{ Name:"Maldives", Population:	 444259},
			]},
			{Name: "Western Asia", Population:262938009, Region: [
				{ Name:"Turkey", Population: 81916871},
				{ Name:"Iraq", Population: 39339753},
				{ Name:"Saudi Arabia", Population: 33554343},
				{ Name:"Yemen", Population: 28915284},
				{ Name:"Syria", Population: 18284407},
				{ Name:"Azerbaijan", Population: 9923914},
				{ Name:"Jordan", Population: 9903802},
				{ Name:"United Arab Emirates", Population: 9541615},
				{ Name:"Israel", Population: 8452841},
				{ Name:"Lebanon", Population: 6093509},
				{ Name:"State of Palestine", Population: 5052776},
				{ Name:"Oman", Population: 4829946},
				{ Name:"Kuwait", Population: 4197128},
				{ Name:"Georgia", Population: 3907131},
				{ Name:"Armenia", Population: 2934152},
				{ Name:"Qatar", Population: 2694849},
				{ Name:"Bahrain", Population: 1566993},
				{ Name:"Cyprus", Population: 1189085},
			] },
       ]
        }]
    },
 
 
	{ Continent:[
        {
		Name: "North America", Population:579024000, States:[
			
		{Name:"Central America", Population:174988756 , Region:[
			{ Name:"Mexico", Population: 130759074 },
			{ Name:"Guatemala", Population: 17245346 },
			{ Name:"Honduras", Population: 9417167 },
			{ Name:"El, Salvador", Population: 6411558}, 
			{ Name:"Nicaragua", Population: 6284757 },
			{ Name:"Costa, Rica", Population: 4953199}, 
			{ Name:"Panama", Population: 4162618 },
			{ Name:"Belize", Population: 382444 },
	   ]},
		{ Name:"Northern America", Population:358593810, Region:[
			{ Name:"U.S.", Population:3267667480 }, 
			{ Name:"Canada", Population:36953765},
			{ Name:"Bermuda", Population:61070	},
			{ Name:"Greenland", Population:56565},
			{ Name:"Saint Pierre & Miquelon", Population:6342	},
		]},
      ]
        }]
    },
 
 
	{
        Continent:[
            {
		Name:"South America", Population: 422535000, States:[
			{Name:"Brazil", Population:204519000},
			{Name:"Colombia", Population:48549000 },
			{Name:"Argentina", Population:43132000 },
			{Name:"Peru", Population:31153000 },
			{Name:"Venezuela", Population:30620000},
			{Name:"Chile", Population:18006000 },
			{Name:"Ecuador", Population:16279000},
			{Name:"Bolivia", Population:10520000},
			{Name:"Paraguay", Population:7003000},
			{Name:"Uruguay", Population:3310000},
			{Name:"Guyana", Population:747000},
			{Name:"Suriname", Population:560000 },
			{Name:"French Guiana", Population:262000},
			{Name:"Falkland Islands", Population:3000 },
        ]},
    ]},
        

	{ Continent:[
        {
        Name: "Europe", Population:738849000, States:[
		{Name:"Eastern Europe", Population:291953328, Region:[
			{Name:"Russia", Population:143964709 },
			{Name:"Ukraine", Population: 44009214},
			{Name:"Poland", Population:38104832 },
			{Name:"Romania", Population:19580634 },
			{Name:"Crech, Republic", Population:10625250 },
			{Name:"Hungary", Population:9688847 },
			{Name:"Belarus", Population:9452113 },
			{Name:"Bulgaria", Population: 7036848},
			{Name:"Slovakia", Population: 5449816},
			{Name:"Moldova", Population:4041065 },
		] },
		{Name:"Northern Europe", Population:103642971, Region:[
			{ Name:"United Kingdom", Population: 66573504},
			{ Name:"Sweden", Population: 9982709},
			{ Name:"Denmark", Population: 5754356},
			{ Name:"Finland", Population: 5542517},
			{ Name:"Norway", Population: 5353363},
			{ Name:"Ireland", Population: 4803748},
			{ Name:"Lithuania", Population: 2876475},
			{ Name:"Latvia", Population: 1929938},
			{ Name:"Estonia", Population: 1306788},
			{ Name:"Iceland", Population: 337780},
			{ Name:"Channel Islands", Population: 166083},
			{ Name:"Isle of Man", Population: 84831},
			{ Name:"Faeroe Islands", Population: 49489},
		] },
		{Name:"Southern Europe", Population:152172107, Region:[
			{ Name:"Italy",Population:  59290969 },
			{ Name:"Spain",Population:  46397452}, 
			{ Name:"Greece",Population:  11142161 },
			{ Name:"Portugal",Population:  10291196}, 
			{ Name:"Serbia",Population:  8762027 },
			{ Name:"Croatia",Population:  4164783 },
			{ Name:"Bosnia and Herzegovina",Population:  3503554 },
			{ Name:"Albania",Population:  2934363 },
			{ Name:"Macedonia",Population:  2085051 },
			{ Name:"Slovenia",Population:  2081260 },
			{ Name:"Montenegro",Population:  629219}, 
			{ Name:"Malta",Population:  432089 },
			{ Name:"Andorra",Population:  76953 },
			{ Name:"Gibraltar",Population:  34733 },
			{ Name:"San Marino",Population:  33557 },
			{ Name:"Holy, See",Population:  801 },
		]},
		{Name:"Western Europe", Population:92746859, Region:[
			{ Name:"Germany", Population: 82293457 },
			{ Name:"France", Population: 65233271 },
			{ Name:"Netherlands", Population: 17084459 },
			{ Name:"Belgium", Population: 11498519 },
			{ Name:"Austria", Population: 8751820 },
			{ Name:"Switzerland", Population: 8544034 },
			{ Name:"Luxembourg", Population: 590321 },
			{ Name:"Monaco", Population: 38897 },
			{ Name:"Liechtenstein", Population: 38155 },
		]},
      ]
    }]
    }
 ]
import { TreeMapComponent, LevelDirective, LevelsDirective, ILoadedEventArgs, IDrillEndEventArgs } from '@syncfusion/ej2-react-treemap';

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DrillDown } from './datasource';
export function App() {
  function loaded(args) {
    var header = document.getElementById('header');
    var population = 0;
    for (var i = 0; i < args.treemap.layout.renderItems[0]['parent'].Continent.length; i++) {
      population += +(args.treemap.layout.renderItems[0]['parent'].Continent[i]['data'].Population);
    }
    header.innerHTML = 'Continent - Population : ' + population
  }
  function drillEnd(args) {
      var header = document.getElementById('header');
      var layout = document.getElementById("container_TreeMap_Squarified_Layout");
      var population = 0;
      if (args.treemap.layout.renderItems[0]['isDrilled']) {
        for (var i = 0; i < args.treemap.layout.renderItems.length; i++) {
          population += +(args.treemap.layout.renderItems[i]['data'].Population);
        }
        header.innerHTML = layout.children[0].children[1].innerHTML.split(']')[1] + ' - ' + population;
      }
      else if (args.treemap.layout.renderItems[0]['parent'].Continent) {
        for (var i = 0; i < args.treemap.layout.renderItems[0]['parent'].Continent.length; i++) {
          population += +(args.treemap.layout.renderItems[0]['parent'].Continent[i]['data'].Population);
        }
        header.innerHTML = 'Continent - Population : ' + population;
      } else {
        population = args.treemap.layout.renderItems[0]['data'].Population;
        header.innerHTML = layout.children[0].children[1].innerHTML.split(']')[1] + ' - Population : ' + population;
      }
  }
    return (
      <TreeMapComponent drillEnd={drillEnd} loaded={loaded}  palette={ ['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66'] } enableDrillDown={true} format={"n"} useGroupingSeparator={true} dataSource={DrillDown} weightValuePath='Population' leafItemSettings={ {
            labelPath: 'Name',
            showLabels: false,
            labelStyle: { size: '0px' },
            border: { color: 'black', width: 0.5 }
          } }>
            <LevelsDirective>
              <LevelDirective groupPath='Continent' fill='#336699' border={ { color: 'black', width: 0.5 } } />
              <LevelDirective groupPath='States' fill='#336699' border={ { color: 'black', width: 0.5 } } />
              <LevelDirective groupPath='Region' showHeader={false} fill='#336699' border={ { color: 'black', width: 0.5 } } />
            </LevelsDirective>
          </TreeMapComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { TreeMapComponent, LevelDirective, LevelsDirective, ILoadedEventArgs, IDrillEndEventArgs } from '@syncfusion/ej2-react-treemap';

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DrillDown } from './datasource';
export function App() {
    function loaded(args: ILoadedEventArgs): void {
      let header: Element = document.getElementById('header') as Element;
      let population: number = 0;
      for (let i: number = 0; i < args.treemap.layout.renderItems[0]['parent'].Continent.length; i++) {
        population += +(args.treemap.layout.renderItems[0]['parent'].Continent[i]['data'].Population);
      }
      header.innerHTML = 'Continent - Population : ' + population
    }
    function drillEnd(args: IDrillEndEventArgs): void {
        let header: Element = document.getElementById('header') as Element;
        let layout: Element = document.getElementById("container_TreeMap_Squarified_Layout") as Element;
        let population: number = 0;
        if (args.treemap.layout.renderItems[0]['isDrilled']) {
          for (let i: number = 0; i < args.treemap.layout.renderItems.length; i++) {
            population += +(args.treemap.layout.renderItems[i]['data'].Population);
          }
          header.innerHTML = layout.children[0].children[1].innerHTML.split(']')[1] + ' - ' + population;
        }
        else if (args.treemap.layout.renderItems[0]['parent'].Continent) {
          for (let i: number = 0; i < args.treemap.layout.renderItems[0]['parent'].Continent.length; i++) {
            population += +(args.treemap.layout.renderItems[0]['parent'].Continent[i]['data'].Population);
          }
          header.innerHTML = 'Continent - Population : ' + population;
        } else {
          population = args.treemap.layout.renderItems[0]['data'].Population;
          header.innerHTML = layout.children[0].children[1].innerHTML.split(']')[1] + ' - Population : ' + population;
        }
    }
    return (
      <TreeMapComponent drillEnd={drillEnd} loaded={loaded}  palette={ ['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66'] } enableDrillDown={true} format={"n"} useGroupingSeparator={true} dataSource={DrillDown} weightValuePath='Population' leafItemSettings={ {
            labelPath: 'Name',
            showLabels: false,
            labelStyle: { size: '0px' },
            border: { color: 'black', width: 0.5 }
          } }>
            <LevelsDirective>
              <LevelDirective groupPath='Continent' fill='#336699' border={ { color: 'black', width: 0.5 } } />
              <LevelDirective groupPath='States' fill='#336699' border={ { color: 'black', width: 0.5 } } />
              <LevelDirective groupPath='Region' showHeader={false} fill='#336699' border={ { color: 'black', width: 0.5 } } />
            </LevelsDirective>
          </TreeMapComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);