How To

Customize the header for treemap drilldown

Yon can add a header element as

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.

 <template>
<div>
    <div id="header" style="background-color: #179bd7"></div>
      <div class='control_wrapper'>
         <ejs-treemap id='container' :dataSource="dataSource" weightValuePath="Population" format="n"
                     useGroupingSeparator="true" enableDrillDown="true" :palette="palette"
         :leafItemSettings='leafItemSettings' :levels='levels'>
         </ejs-treemap>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';
import { data } from './datasource.js';

Vue.use(TreeMapPlugin);
export default {
   data () {
    return {
      dataSource:  data,
        palette: ["#9999ff", "#CCFF99", "#FFFF99", "#FF9999", "#FF99FF", "#FFCC66"],
        levels: [
            {
                groupPath: 'Continent', border: { color: 'black', width: 0.5 },
            },
            {
              groupPath: 'States', border: { color: 'black', width: 0.5 },
            },
            {
              groupPath: 'Region', border: { color: 'black', width: 0.5 },
            }
        ],
        leafItemSettings: {
          labelPath:'Name',
          showLabels: false
        }
    }
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-treemap/styles/material.css';
</style>

Step 2:

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

    loaded:function(args) {
      let header = document.getElementById('header');
        var population = 0;
        for (let 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
    }

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.

Source
Preview
app.vue
<template>
<div>
    <div id="header" style="background-color: #179bd7"></div>
      <div class='control_wrapper'>
         <ejs-treemap id='container' :dataSource="dataSource" weightValuePath="Population" format="n"
                     useGroupingSeparator="true" enableDrillDown="true" :palette="palette"
         :leafItemSettings='leafItemSettings' :levels='levels' :drillEnd='drillEnd' :loaded="loaded">
         </ejs-treemap>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';
import { data } from './datasource.js';

Vue.use(TreeMapPlugin);
export default {
   data () {
    return {
      dataSource:  data,
        palette: ["#9999ff", "#CCFF99", "#FFFF99", "#FF9999", "#FF99FF", "#FFCC66"],
        levels: [
            {
                groupPath: 'Continent', border: { color: 'black', width: 0.5 },
            },
            {
              groupPath: 'States', border: { color: 'black', width: 0.5 },
            },
            {
              groupPath: 'Region', border: { color: 'black', width: 0.5 },
            }
        ],
        leafItemSettings: {
          labelPath:'Name',
          showLabels: false
        }
    }
  },
  methods:{
    drillEnd:function(args){
        let header = document.getElementById('header');
        let layout = document.getElementById("container_TreeMap_Squarified_Layout");
        let population = 0;
        if (args.treemap.layout.renderItems[0]['isDrilled']) {
            for (let 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 (let 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;
        }
    },
    loaded:function(args) {
      let header = document.getElementById('header');
        var population = 0;
        for (let 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
    }
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-treemap/styles/material.css';
</style>

Add label template with drill down

Yon can add a label template as

element to the tree map control when using the label template. To add a label template to the tree map control, you have to hide another labels by setting the showLabels property to false in leafItemSettings to show only the label template.

To add label template to tree map drilldown, follow the given steps:

Step 1:

Create a tree map control and enable the drill-down option.

<template>
      <div class='control_wrapper'>
         <ejs-treemap id='container' :dataSource="dataSource" weightValuePath="Sales" enableDrillDown="true" :palette="palette"
         :leafItemSettings='leafItemSettings' :levels='levels' >
         </ejs-treemap>
      </div>
</template>

<script>
import Vue from 'vue';
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';

Vue.use(TreeMapPlugin);
export default {
   data () {
    return {
      dataSource:  [
            { Continent: "China", Company: "Volkswagen", Sales: 3005994 },
            { Continent: "China", Company: "General Motors", Sales: 1230044 },
            { Continent: "China", Company: "Honda", Sales: 1197023 },
            { Continent: "United States", Company: "General Motors", Sales: 3042775 },
            { Continent: "United States", Company: "Ford", Sales: 2599193 },
            { Continent: "United States", Company: "Toyota", Sales: 2449587 },
            { Continent: "Japan", Company: "Toyota", Sales: 1527977 },
            { Continent: "Japan", Company: "Honda", Sales: 706982 },
            { Continent: "Japan", Company: "Suzuki", Sales: 623041 },
            { Continent: "Germany", Company: "Volkswagen", Sales: 655977 },
            { Continent: "Germany", Company: "Mercedes", Sales: 310845 },
            { Continent: "Germany", Company: "BMW", Sales: 261931 },
            { Continent: "United Kingdom", Company: "Ford ", Sales: 319442 },
            { Continent: "United Kingdom", Company: "Vauxhall", Sales: 251146 },
            { Continent: "United Kingdom", Company: "Volkswagen", Sales: 206994 }
        ],
        palette: ['white'],
        levels: [
            {
                groupPath: 'Continent', border: { color: 'black', width: 0.5 },
            },
            {
              groupPath: 'Company', border: { color: 'black', width: 0.5 },
            }
        ],
        leafItemSettings: {
          showLabels: false,
          labelTemplate: '<div style="background-color: red">{{:Company}}</div>',
          templatePosition: 'Center'
        }
    }
  }
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-treemap/styles/material.css';
</style>

Step 2:

Add the label template in the leafItemSettings options, and then set the showLabels property to false to hide another labels and show only label template.

Source
Preview
app.vue
<template>
      <div class='control_wrapper'>
         <ejs-treemap id='container' :dataSource="dataSource" weightValuePath="Sales" enableDrillDown="true" :palette="palette"
         :leafItemSettings='leafItemSettings' :levels='levels' :drillStart='drillStart' >
         </ejs-treemap>
      </div>
</template>

<script>
import Vue from 'vue';
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';

Vue.use(TreeMapPlugin);
export default {
   data () {
    return {
      dataSource:  [
            { Continent: "China", Company: "Volkswagen", Sales: 3005994 },
            { Continent: "China", Company: "General Motors", Sales: 1230044 },
            { Continent: "China", Company: "Honda", Sales: 1197023 },
            { Continent: "United States", Company: "General Motors", Sales: 3042775 },
            { Continent: "United States", Company: "Ford", Sales: 2599193 },
            { Continent: "United States", Company: "Toyota", Sales: 2449587 },
            { Continent: "Japan", Company: "Toyota", Sales: 1527977 },
            { Continent: "Japan", Company: "Honda", Sales: 706982 },
            { Continent: "Japan", Company: "Suzuki", Sales: 623041 },
            { Continent: "Germany", Company: "Volkswagen", Sales: 655977 },
            { Continent: "Germany", Company: "Mercedes", Sales: 310845 },
            { Continent: "Germany", Company: "BMW", Sales: 261931 },
            { Continent: "United Kingdom", Company: "Ford ", Sales: 319442 },
            { Continent: "United Kingdom", Company: "Vauxhall", Sales: 251146 },
            { Continent: "United Kingdom", Company: "Volkswagen", Sales: 206994 }
        ],
        palette: ['white'],
        levels: [
            {
                groupPath: 'Continent', border: { color: 'black', width: 0.5 },
            },
            {
              groupPath: 'Company', border: { color: 'black', width: 0.5 },
            }
        ],
        leafItemSettings: {
          showLabels: false,
          labelTemplate: '<div style="background-color: red">{{:Company}}</div>',
          templatePosition: 'Center'
        }
    }
  },
  methods:{
    drillStart:function(args){
        let labelElementGroup = document.getElementById('container_Label_Template_Group');
        labelElementGroup.remove();
    }
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-treemap/styles/material.css';
</style>