Yon can add a header element as
Step 1:
Initialize the treemap and enable the drill-down option.
import { Component, ViewEncapsulation } from '@angular/core';
import { TreeMap, IDrillEndEventArgs, ILoadEventArgs } from '@syncfusion/ej2-angular-treemap';
import { DrillDown } from './datasource';
@Component({
selector: 'app-container',
template: '<ejs-treemap id="container" #treemap style="display:block;" [dataSource]="dataSource" [weightValuePath]="weightValuePath"[leafItemSettings]="leafItemSettings" [palette]="palette" format="n" useGroupingSeparator="true" enableDrillDown="true"><e-levels><e-level groupPath="Continent" fill="#336699" [border]="border"> </e-level><e-level groupPath="States" fill="#336699" [border]="border"> </e-level><e-level groupPath="Region" showHeader="false" fill="#336699" [border]="border"></e-level></e-levels></ejs-treemap>',
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public palette: string[] = ['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66'];
public dataSource: object[] = DrillDown;
public weightValuePath: string = 'Population';
public leafItemSettings: object = {
labelPath: 'Name',
showLabels: false,
labelStyle: { size: '0px' },
border: { color: 'black', width: 0.5 }
};
border: object = {
color: 'black',
width: 0.5
};
};Step 2:
Show the population of a particular continent in the treemap loaded event. In this event, you can get the header element.
public loaded = (args: ILoadEventArgs) => {
let header: Element = document.getElementById('header');
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.
import { Component, ViewEncapsulation } from '@angular/core';
import { TreeMap, IDrillEndEventArgs, ILoadEventArgs } from '@syncfusion/ej2-angular-treemap';
import { DrillDown } from './datasource';
@Component({
selector: 'app-container',
template: '<ejs-treemap id="container" #treemap style="display:block;" [dataSource]="dataSource" [weightValuePath]="weightValuePath"[leafItemSettings]="leafItemSettings" [palette]="palette" format="n" useGroupingSeparator="true" enableDrillDown="true"(loaded)="loaded($event)" (drillEnd)="drillEnd($event)"><e-levels><e-level groupPath="Continent" fill="#336699" [border]="border"> </e-level><e-level groupPath="States" fill="#336699" [border]="border"> </e-level><e-level groupPath="Region" showHeader="false" fill="#336699" [border]="border"></e-level></e-levels></ejs-treemap>',
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public loaded = (args: ILoadEventArgs) => {
let header: Element = document.getElementById('header');
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
}
public drillEnd = (args: IDrillEndEventArgs) => {
let header: Element = document.getElementById('header');
let layout: Element = document.getElementById("container_TreeMap_Squarified_Layout");
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;
}
}
public palette: string[] = ['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66'];
public dataSource: object[] = DrillDown;
public weightValuePath: string = 'Population';
public leafItemSettings: object = {
labelPath: 'Name',
showLabels: false,
labelStyle: { size: '0px' },
border: { color: 'black', width: 0.5 }
};
border: object = {
color: 'black',
width: 0.5
};
};import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class AppModule { }/**
* 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 { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);