Treemap Node Conent

treemapNodeContent.png

Starting in JET 3.0.0, leaf nodes are customizable using a JavaScript callback function or a Knockout template that specifies HTML DOM elements for each node. This allows a developer to place any desired content within the nodes. If using a Knockout template, specify the template name using the nodeContent.template attribute. Otherwise, pass a function to the nodeContent.renderer. By default, the custom div will intercept any mouse or touch events allowing for interactive content in each node. In order to disable this behavior and retain the treemap default interactivity set the CSS pointer-events property to 'none'.

 

Here's an example of a template used for rendering custom content:

    <div id="treemap" data-bind="ojComponent: {
            component: 'ojTreemap',
            animationOnDisplay: 'auto',
            animationOnDataChange: 'auto',
            nodes: nodeValues,
            nodeContent: {template: 'nodeTemplate'}                     
        }" 
        style="min-width:300px;height:450px;">
    </div>
    <script type="text/html" id="nodeTemplate">
      <div data-bind="style: {
            position: 'absolute',
            display:'flex',
            justifyContent:'center',
            width: bounds.width + 'px',
            height: bounds.height+ 'px',
            top: bounds.y + 'px',
            left: bounds.x + 'px',
            pointerEvents: 'none'}">
        <div style="align-self:center;height:88px;text-align:center">      
          <div data-bind="style: {
              backgroundImage: 'url(\'images/' + id + '.png\')',
              marginLeft:'auto',
              marginRight:'auto',
              backgroundSize: 'cover',
              borderRadius: '20%',
              width: '50px',
              height: '50px'}"/>
          <div data-bind="text: data.title, style:{fontSize:'12px',fontStyle:'italic;fontWeight:bold'}"/>
       </div>
      </div>
  </script>

 

Demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=treemap&demo=nodeContent

 

Sunburst Root Node Content

 

sunburstRootContent.png

The root node area is now customizable similarly to the center of donut charts and circular status meter gauges. Use the rootNodeContent.renderer or rootNodeContent.template attribute to specify a callback function or KO template for the root node.

 

Demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=sunburst&demo=rootNodeContent

 

Labeling changes

Treemap node labels will now wrap by default instead of being displayed in a single line. In order to disable label wrapping, the white-space property on nodeDefaults.labelStyle or nodes[].labelStyle can be set to "nowrap" instead of the default "normal" value.

 

In addition, we've added the nodeDefaults.labelMinLength attribute to both sunburst and treemap which defines the minimum number of visible characters needed in order to render a truncated label. If this minimum is not met when calculating the truncated label then the label is not displayed. The default value of this variable is 1 character.