Organization Chart Mod for Spotfire®

Trellis By

Node ID

Parent Node ID

Mandatory for rows that have parents. The unique identifier for the parent node for each row passed into the mod.

Image

Color

Configuring the Mod

Node Content

This mod supports customization of the node display content. The content is composed using HTML and CSS so some knowledge of these technologies are required to be able to customize. 

By default, with no user configuration, a node will be composed as follows:

• Node size as specified in the mod configuration
• Image axis column displayed to the left. Image must be a text column in Base64 format. Multiple image columns are ignored, only the first is used.
• Content axis columns displayed to the right, one row per column, centered in remaining space
• Background color set to the color axis

If no image is specified, then the node will look like this:

The node content can be influenced with custom expressions in the column configuration. For example, if first name and last name are in separate columns, then a custom expression for the first Content column can be used to combine these into one. For example, using this expression:
 

Concatenate([First Name], " ", [Last Name])

would give the following node display:

Note the full name is now on a single line.

Because the node content is HTML and CSS, this can be embedded into custom expressions as well to influence how the data is displayed. For example, using this expression:

Concatenate("<b><font size='3' color='orange'>",[First Name]," ",[Last Name],"</font></b>")

would give the following node display:

This uses basic HTML tags to bold the name, change it to orange, and set the size to 3.

For more advanced control over the node content, the Node element content mod configuration can be customized. The default node configuration that renders the previous examples is this:

<div class="border flex-row start-center">
  <img src="${image}"/>
  <div class="fill">${contentStr}</div>
</div>

Bear in mind that the content must fit within the defined Node height and Node width settings. Any elements going outside this area will be clipped. 

There are a number of classes included here, which users can make use of to compose their own content.

Beyond these sample classes, any custom styling can be applied using style attributes and standard CSS configuration.

Data can be accessed using JavaScript literal template notation. For example, to refer to the image data, use this expression:

${image}

The following template literals are available:

${nodeId}

${parentNodeId}

${contentStr}

${contentObj}

${contentObj["First Name"]}

${contentArr}

${contentObj[0]}

${image}

data:image/png;base64

${color}

The template engine replaces null or undefined expression evaluations with empty strings, so if your expected output isn't visible, this may be why. Also, if an expression results in an error, the template engine will return ERROR and the error details will be visible in the console.

Here are a few examples of customized node content.

<div class="border flex-row start-center">
  <img src="${image}"/>
  <div class="fill flex-col center-center">
	<div style="font-weight:bold;">${contentObj["First Name"]} ${contentObj["Last Name"]}</div>
	<div style="font-style:italic;font-size:10px">${contentObj["Job Title"]}</div>
  </div>
</div>

For the following example Set node color configuration is set to false.

<div class="border flex-row start-center">
  <img src="${image}"/>
  <div class="fill flex-col center-center" style="color:white;background-color:${color}">
	<div style="font-weight:bold;">${contentObj["First Name"]} ${contentObj["Last Name"]}</div>
	<div style="font-style:italic;font-size:10px">${contentObj["Job Title"]}</div>
  </div>
</div>

For the following example Set node color configuration is set to false.

<div style="margin-left:33px;width:calc(100% - 33px);color:white;background-color:${color};" class="border flex-row start-center">
  <img style="margin-left:-33px;height:60px" class="circle" src="${image}"/>
  <div class="fill flex-col center-center">
	<div style="font-weight:bold;">${contentObj["First Name"]} ${contentObj["Last Name"]}</div>
	<div style="font-style:italic;font-size:10px">${contentObj["Job Title"]}</div>
  </div>
</div>

These are all using flex-row layouts. But components can be displayed in a column as well using flex-col layouts.

For the following example Node height is set to 140 and Node width is set to 70.

<div class="border flex-col start-center">
  <img src="${image}"/>
  <div class="fill flex-col center-center">
	<div style="font-weight:bold;">${contentObj["First Name"]} ${contentObj["Last Name"]}</div>
	<div style="font-style:italic;font-size:10px">${contentObj["Job Title"]}</div>
  </div>
</div>

For the following example Node height is set to 140, Node width is set to 70, and Set node color is set to false.

<div style="margin-top:40px;height:calc(100% - 40px);color:white;background-color:${color};" class="border flex-col start-center">
  <img style="margin-top:-40px;width:70px;" class="circle" src="${image}"/>
  <div class="fill flex-col center-center">
    <div style="font-weight:bold;">${contentArr[0]} ${contentArr[1]}</div>
    <div style="font-style:italic;font-size:10px">${contentArr[2]}</div>
  </div>
</div>

Using the Mod

Once the mod is configured it will render a hierarchy of nodes. The mod will keep track of the node open/close state and positions for vertical and horizontal scroll bars so the view will re-render as last displayed when switching between pages.

Marking

Building the Project

Help and Support

This Mod is not supported by Spotfire® Support.
In the event of issues or to suggest features and enhancements, submit an issue in the Mod's GitHub repository.
For general questions about Mods, please post a question in the Forum for Extensions & Mods to make it visible and routed to the appropriate team(s) to respond.

More Information About Spotfire® Mods