ecomp-sdk-app/src/main/webapp/static/fusion/d3/js/models/indentedTree.js

   1 nv.models.indentedTree = function() {
   2   "use strict";
   3   //============================================================
   4   // Public Variables with Default Settings
   5   //------------------------------------------------------------
   6
   7   var margin = {top: 0, right: 0, bottom: 0, left: 0} //TODO: implement, maybe as margin on the containing div
   8     , width = 960
   9     , height = 500
  10     , color = nv.utils.defaultColor()
  11     , id = Math.floor(Math.random() * 10000)
  12     , header = true
  13     , filterZero = false
  14     , noData = "No Data Available."
  15     , childIndent = 20
  16     , columns = [{key:'key', label: 'Name', type:'text'}] //TODO: consider functions like chart.addColumn, chart.removeColumn, instead of a block like this
  17     , tableClass = null
  18     , iconOpen = 'images/grey-plus.png' //TODO: consider removing this and replacing with a '+' or '-' unless user defines images
  19     , iconClose = 'images/grey-minus.png'
  20     , dispatch = d3.dispatch('elementClick', 'elementDblclick', 'elementMouseover', 'elementMouseout')
  21     , getUrl = function(d) { return d.url }
  22     ;
  23
  24   //============================================================
  25
  26   var idx = 0;
  27
  28   function chart(selection) {
  29     selection.each(function(data) {
  30       var depth = 1,
  31           container = d3.select(this);
  32
  33       var tree = d3.layout.tree()
  34           .children(function(d) { return d.values })
  35           .size([height, childIndent]); //Not sure if this is needed now that the result is HTML
  36
  37       chart.update = function() { container.transition().duration(600).call(chart) };
  38
  39
  40       //------------------------------------------------------------
  41       // Display No Data message if there's nothing to show.
  42       if (!data[0]) data[0] = {key: noData};
  43
  44       //------------------------------------------------------------
  45
  46
  47       var nodes = tree.nodes(data[0]);
  48
  49       // nodes.map(function(d) {
  50       //   d.id = i++;
  51       // })
  52
  53       //------------------------------------------------------------
  54       // Setup containers and skeleton of chart
  55
  56       var wrap = d3.select(this).selectAll('div').data([[nodes]]);
  57       var wrapEnter = wrap.enter().append('div').attr('class', 'nvd3 nv-wrap nv-indentedtree');
  58       var tableEnter = wrapEnter.append('table');
  59       var table = wrap.select('table').attr('width', '100%').attr('class', tableClass);
  60
  61       //------------------------------------------------------------
  62
  63
  64       if (header) {
  65         var thead = tableEnter.append('thead');
  66
  67         var theadRow1 = thead.append('tr');
  68
  69         columns.forEach(function(column) {
  70           theadRow1
  71             .append('th')
  72               .attr('width', column.width ? column.width : '10%')
  73               .style('text-align', column.type == 'numeric' ? 'right' : 'left')
  74             .append('span')
  75               .text(column.label);
  76         });
  77       }
  78
  79
  80       var tbody = table.selectAll('tbody')
  81                     .data(function(d) { return d });
  82       tbody.enter().append('tbody');
  83
  84
  85
  86       //compute max generations
  87       depth = d3.max(nodes, function(node) { return node.depth });
  88       tree.size([height, depth * childIndent]); //TODO: see if this is necessary at all
  89
  90
  91       // Update the nodes…
  92       var node = tbody.selectAll('tr')
  93           // .data(function(d) { return d; }, function(d) { return d.id || (d.id == ++i)});
  94           .data(function(d) { return d.filter(function(d) { return (filterZero && !d.children) ? filterZero(d) :  true; } )}, function(d,i) { return d.id || (d.id || ++idx)});
  95           //.style('display', 'table-row'); //TODO: see if this does anything
  96
  97       node.exit().remove();
  98
  99       node.select('img.nv-treeicon')
 100           .attr('src', icon)
 101           .classed('folded', folded);
 102
 103       var nodeEnter = node.enter().append('tr');
 104
 105
 106       columns.forEach(function(column, index) {
 107
 108         var nodeName = nodeEnter.append('td')
 109             .style('padding-left', function(d) { return (index ? 0 : d.depth * childIndent + 12 + (icon(d) ? 0 : 16)) + 'px' }, 'important') //TODO: check why I did the ternary here
 110             .style('text-align', column.type == 'numeric' ? 'right' : 'left');
 111
 112
 113         if (index == 0) {
 114           nodeName.append('img')
 115               .classed('nv-treeicon', true)
 116               .classed('nv-folded', folded)
 117               .attr('src', icon)
 118               .style('width', '14px')
 119               .style('height', '14px')
 120               .style('padding', '0 1px')
 121               .style('display', function(d) { return icon(d) ? 'inline-block' : 'none'; })
 122               .on('click', click);
 123         }
 124
 125
 126         nodeName.each(function(d) {
 127           if (!index && getUrl(d))
 128             d3.select(this)
 129               .append('a')
 130               .attr('href',getUrl)
 131               .attr('class', d3.functor(column.classes))
 132               .append('span')
 133           else
 134             d3.select(this)
 135               .append('span')
 136
 137             d3.select(this).select('span')
 138               .attr('class', d3.functor(column.classes) )
 139               .text(function(d) { return column.format ? column.format(d) :
 140                                         (d[column.key] || '-') });
 141           });
 142
 143         if  (column.showCount) {
 144           nodeName.append('span')
 145               .attr('class', 'nv-childrenCount');
 146
 147           node.selectAll('span.nv-childrenCount').text(function(d) {
 148                 return ((d.values && d.values.length) || (d._values && d._values.length)) ?                                   //If this is a parent
 149                     '(' + ((d.values && (d.values.filter(function(d) { return filterZero ? filterZero(d) :  true; }).length)) //If children are in values check its children and filter
 150                     || (d._values && d._values.filter(function(d) { return filterZero ? filterZero(d) :  true; }).length)     //Otherwise, do the same, but with the other name, _values...
 151                     || 0) + ')'                                                                                               //This is the catch-all in case there are no children after a filter
 152                     : ''                                                                                                     //If this is not a parent, just give an empty string
 153             });
 154         }
 155
 156         // if (column.click)
 157         //   nodeName.select('span').on('click', column.click);
 158
 159       });
 160
 161       node
 162         .order()
 163         .on('click', function(d) {
 164           dispatch.elementClick({
 165             row: this, //TODO: decide whether or not this should be consistent with scatter/line events or should be an html link (a href)
 166             data: d,
 167             pos: [d.x, d.y]
 168           });
 169         })
 170         .on('dblclick', function(d) {
 171           dispatch.elementDblclick({
 172             row: this,
 173             data: d,
 174             pos: [d.x, d.y]
 175           });
 176         })
 177         .on('mouseover', function(d) {
 178           dispatch.elementMouseover({
 179             row: this,
 180             data: d,
 181             pos: [d.x, d.y]
 182           });
 183         })
 184         .on('mouseout', function(d) {
 185           dispatch.elementMouseout({
 186             row: this,
 187             data: d,
 188             pos: [d.x, d.y]
 189           });
 190         });
 191
 192
 193
 194
 195       // Toggle children on click.
 196       function click(d, _, unshift) {
 197         d3.event.stopPropagation();
 198
 199         if(d3.event.shiftKey && !unshift) {
 200           //If you shift-click, it'll toggle fold all the children, instead of itself
 201           d3.event.shiftKey = false;
 202           d.values && d.values.forEach(function(node){
 203             if (node.values || node._values) {
 204               click(node, 0, true);
 205             }
 206           });
 207           return true;
 208         }
 209         if(!hasChildren(d)) {
 210           //download file
 211           //window.location.href = d.url;
 212           return true;
 213         }
 214         if (d.values) {
 215           d._values = d.values;
 216           d.values = null;
 217         } else {
 218           d.values = d._values;
 219           d._values = null;
 220         }
 221         chart.update();
 222       }
 223
 224
 225       function icon(d) {
 226         return (d._values && d._values.length) ? iconOpen : (d.values && d.values.length) ? iconClose : '';
 227       }
 228
 229       function folded(d) {
 230         return (d._values && d._values.length);
 231       }
 232
 233       function hasChildren(d) {
 234         var values = d.values || d._values;
 235
 236         return (values && values.length);
 237       }
 238
 239
 240     });
 241
 242     return chart;
 243   }
 244
 245
 246   //============================================================
 247   // Expose Public Variables
 248   //------------------------------------------------------------
 249   chart.options = nv.utils.optionsFunc.bind(chart);
 250
 251   chart.margin = function(_) {
 252     if (!arguments.length) return margin;
 253     margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
 254     margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
 255     margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
 256     margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
 257     return chart;
 258   };
 259
 260   chart.width = function(_) {
 261     if (!arguments.length) return width;
 262     width = _;
 263     return chart;
 264   };
 265
 266   chart.height = function(_) {
 267     if (!arguments.length) return height;
 268     height = _;
 269     return chart;
 270   };
 271
 272   chart.color = function(_) {
 273     if (!arguments.length) return color;
 274     color = nv.utils.getColor(_);
 275     scatter.color(color);
 276     return chart;
 277   };
 278
 279   chart.id = function(_) {
 280     if (!arguments.length) return id;
 281     id = _;
 282     return chart;
 283   };
 284
 285   chart.header = function(_) {
 286     if (!arguments.length) return header;
 287     header = _;
 288     return chart;
 289   };
 290
 291   chart.noData = function(_) {
 292     if (!arguments.length) return noData;
 293     noData = _;
 294     return chart;
 295   };
 296
 297   chart.filterZero = function(_) {
 298     if (!arguments.length) return filterZero;
 299     filterZero = _;
 300     return chart;
 301   };
 302
 303   chart.columns = function(_) {
 304     if (!arguments.length) return columns;
 305     columns = _;
 306     return chart;
 307   };
 308
 309   chart.tableClass = function(_) {
 310     if (!arguments.length) return tableClass;
 311     tableClass = _;
 312     return chart;
 313   };
 314
 315   chart.iconOpen = function(_){
 316      if (!arguments.length) return iconOpen;
 317     iconOpen = _;
 318     return chart;
 319   }
 320
 321   chart.iconClose = function(_){
 322      if (!arguments.length) return iconClose;
 323     iconClose = _;
 324     return chart;
 325   }
 326
 327   chart.getUrl = function(_){
 328      if (!arguments.length) return getUrl;
 329     getUrl = _;
 330     return chart;
 331   }
 332
 333   //============================================================
 334
 335
 336   return chart;
 337 };