Tree Map

dvtm:treeMap

The Tree Map component displays hierarchical data values as a collection of nested tiles (rectangles). It provides an overview of hierarchical data values. Supports the following layouts: Squarified (default), Slice-and-dice horizontal, and Slice-and-dice vertical.

This component is used on tablets and phones.

Appearance

Appearance characteristics for this component.

Colors: Tile colors can be completely customized. Use of gradients and patterns is also permitted.
Layouts: Tree Map supports the following layouts:

Squarified (default)
Slice-and-dice horizontal
Slice-and-dice vertical

Behavior

Common behaviors for this component.

Selection: Supports single data selection, multiple data selection, or no data selection.
Tool Tips: These can be present on press and hold on a tile.
Menu: If contextual menu supplied, it can be present on press, hold, and release.
Animation: Data animates on a change in the map.
Drilling: Drilling causes the group to consume the entire space of the Tree Map and show its subgroups. (Due to the missing TreeModel support in ADF Mobile (ER 16607143), Tree Map is capable of visualizing single-level data only.)
Isolate: Similar to Drilling, selected group will consume the entire space of the Tree Map. This feature is also dependent on the missing TreeModel support.

Usage

Usage guidelines for this component.

It is recommended to show a title above each map on the page that clearly describes its content.
Product teams decide the themes that appear on the map.
The recommended size of the map is to be close to full page on the Phone and a majority of the page on the tablet. However, it is recommended that an application dedicate as much space as possible to the Map component so that users can see and work with the map easily.
It is recommended to show the Legend by default when the page loads and data is visible on the map.

Sample

DVTM sample code for this component.

 <dvtm:treemap id="treemap1"
    value="#{bindings.treemapData.collectionModel}"
    var="row"
    animationDuration="#{pageFlowScope.animationDuration}"
    animationOnDataChange="#{pageFlowScope.animationOnDataChange}"
    animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
    layout="#{pageFlowScope.layout}"
    nodeSelection="#{pageFlowScope.nodeSelection}"
    rendered="#{pageFlowScope.rendered}"
    emptyText="#{pageFlowScope.emptyText}"
    inlineStyle="#{pageFlowScope.inlineStyle}"
    sizeLabel="#{pageFlowScope.sizeLabel}"
    styleClass=" dvtm-gallery-component"
    colorLabel="#{pageFlowScope.colorLabel}"
    sorting="#{pageFlowScope.sorting}"
    selectedRowKeys="#{pageFlowScope.selectedRowKeys}"
    isolatedRowKey="#{pageFlowScope.isolatedRowKey}"
    legendSource="ag1">

    <dvtm:treemapNode id="node1"
    fillPattern="#{pageFlowScope.fillPattern}"
    label="#{row.label}"
    labelDisplay="#{pageFlowScope.labelDisplay}"
    value="#{row.marketShare}"
    labelHalign="#{pageFlowScope.labelHalign}"
    labelValign="#{pageFlowScope.labelValign}">

    <dvtm:attributeGroups id="ag1"
    type="color"
    value="#{row.deltaInPosition}"
    attributeType="continuous"
    minLabel="-1.5%"
    maxLabel="+1.5%"
    minValue="-1.5"
    maxValue="1.5">

    <amx:attribute name="color1"
    value="#ed6647" />

    <amx:attribute name="color2"
    value="#f7f37b" />

    <amx:attribute name="color3"
    value="#68c182" />

    </dvtm:attributeGroups>

    </dvtm:treemapNode>

    </dvtm:treemap>

Used On: Phone, Tablet
Also Called: None
Related Components: Geographic Map, Thematic Map
Resources: None

Fig 1. iOS and Android - Tree Map Squarified

Fig 2. iOS and Android - Tree Map Slice And Dice Horizontal

Fig 3. iOS and Android - Tree Map Slice And Dice Vertical