test

Warning when upgrading to Spotfire 10

TIBCO has deprecated the JQueryUI Javascript library in the latest Spotfire 10.0 release

TIBCO Community pages show us how to use JQuery properly

Dendogram












data
L0 L1 L2 L3 L4
x a a1
x a a2 a2a
x a a3
x b b1 b1a b1a1
x c c1
x c c2 c2a
x c c3

x d


script
#dataTable and ta (text area) are script parameters

#settings
delim = ","
cr = "\n"

#get list of filtered rows
rows = Document.ActiveFilteringSelectionReference.GetSelection(dataTable).AsIndexSet()

#generate tree
html = "<div class='tree'>"+cr # rendering text
r=0 # row #
l=0 # level
ll=0 # previous level
D=-1 # delta level change 
cc=[""]*(dataTable.Columns.Count+1) # previous level value


for row in rows:
c=0
for column in dataTable.Columns:
#get a cell value
v =  column.RowValues.GetFormattedValue(row) 
v = v if v!="(Empty)"  else ""

#is a node
isNode=v<>""

# record previous level and previous level value
if(isNode):
l=c+1

#calculate delta between levels
isBranch =v<>cc[l]
D=l-ll

if isBranch:

#construct text
if D>0 : html +=  "<ul>" * D + "<li><a>"+v+"</a>"+cr
if D<0 : html += "</ul>" * abs(D) + "<li><a>"+v+"</a>"+cr
if D==0 : html += "       <li><a>"+v+"</a></li</ul>"+cr


#record previous level and previous column value
ll=l
cc[l]=v

#increment col index
c+=1

#new row
#increment row index
r=0
#print cr + html + "</ul></div>"


#render results to a target textArea
from Spotfire.Dxp.Application.Visuals import HtmlTextArea
vis = ta.As[HtmlTextArea]()
vis.HtmlContent = html 

javascript (optional to make nodes collapsible)
//place this in the target textarea

$(function () {
    $('.tree li').hide();
    $('.tree li:first').show();
    $('.tree li').on('click', function (e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    });

});


css (horizontal) 
/*Place this style in a different text area other than the target text area*/

<style>
* {margin: 0; padding: 0;}

.tree ul {
padding-top: 20px; position: relative;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}

.tree li:only-child::after, .tree li:only-child::before {
display: none;
}

.tree li:only-child{ padding-top: 0;}

right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}

.tree li:last-child::before{ border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}


.down-connector {
  position: absolute; top: -100; left: 50%;
border-left: 1px solid #ccc;
width: 0; 
  height: 20px;
}

.connector{
  position: absolute; 
  left: 50%;
border-left: 1px solid #ccc;
width: 0; 
  height: 20px;
}

.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li a:hover, .tree li a:hover + ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
border-color:  #94a0b4;
}

/*Time for some hover effects*/
/*We will apply the hover the the lineage of the element also*/
.tree li a:hover, .tree li a:hover + ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

.tree li a:hover, .tree li a:hover + ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

.tree li a:hover+div+ul li::after, 
.tree li a:hover+div+ul li::before, 
.tree li a:hover+div+ul::before, 
.tree li a:hover+div+ul ul::before{
border-color:  #94a0b4;
}


.tree li a:hover, .tree li a:hover + div+ ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
</style>


css vertical (one or the other)
<style>
.tree li {
    margin: 0px 0;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
}
.tree li::before {
    content:'';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    right: auto;
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}
.tree li::after {
    content:'';
    position: absolute;
    top: 30px;
    width: 25px;
    height: 20px;
    right: auto;
    left: -20px;
    border-top: 1px solid #ccc;
}
.tree li a {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
 .tree > ul > li::before, .tree > ul > li::after {
    border: 0;
}
 .tree li:last-child::before {
    height: 30px;
}

 .tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}
 .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}

</style>

No comments: