cxviz-rawtree/index.js

Raw Tree Visualization

'use strict';

var d3      = require('d3')
var $       = require('jquery')
var color   = require('cxviz-color')
var Emitter = require('component-emitter')
var itemTemplate = require('./item.html')
var format = d3.format('.3s')

function RawTree() {
  if (!(this instanceof RawTree)) return new RawTree()
  return this
}

Emitter(RawTree.prototype)

//exported functions

RawTree.prototype.init = function init(element, options) {
  var self = this
  this.width = 1000
  this.height = 1000
  this.cb = options && options.cb
  this.color = (options && options.cb) || color
  this.el = element
  this.scale = 1

  this.root = d3.select(element).append('div')
    .attr('class', 'cxviz-rawtree')

  return this
}

RawTree.prototype.setActive = function setActive(){
  //set ourselves to the zoomControl
  this.cb.zoomControl.setZoom(this.zoom)
  this.cb.zoomControl.show()
}

RawTree.prototype.setInactive = function setInactive(){
  this.cb.zoomControl.hide()
}

RawTree.prototype.resize = function resize() {
  if (!this.lastData) return
  this.update(this.lastData, this.lastFunctions)
}

RawTree.prototype.update = function update(data, functions) {
  var self = this
  this.outerCost = data.costTree.childCost
  this.lastData = data
  this.lastFunctions = functions
  this.updateList(this.root, data.costTree, 0)
}

RawTree.prototype.updateList = function updateList(sel, root, level){
  level++
  var self = this
  if( root.children && root.children.length ){
    var update = sel.selectAll('ul.cxviz-rawtree-' + level).data([root], function key(d){ return d.uid})
    update.enter().append('ul')
      .attr('class', 'cxviz-rawtree-' + level )

    update.each(function(d){
      var ulSel = d3.select(this)
      self.updateItems(ulSel, d.children, level)
    })
    update.exit().remove()
  }
}

RawTree.prototype.updateItems = function updateItems(sel, items, level){
  var self = this
  if( items ){
    var update = sel.selectAll('li.cxviz-rawtree-'+ level).data(items, function key(d){ return d.uid })
    update.enter()
      .append('li')
      .attr('class', 'cxviz-rawtree-item cxviz-rawtree-' + level)
      .append('div')
        .on('mouseenter', function(d){ self.mouseEnter(d3.select(this), d)})
        .on('mouseleave', function(d){ self.mouseLeave(d3.select(this), d)})
        .on('click', function(d){ self.click(d3.select(this), d)})

    update.select('div').html(function(d){
      return itemTemplate({ item: d, msFormat: msFormat })
    })
    update.each(function(d){ return self.updateList(d3.select(this), d, level)})
    update.exit().remove()
  }
}

RawTree.prototype.mouseEnter = function mouseEnter(sel, d){
  var self = this
  this.emit('mouseenter', {
    type: "rawTree",
    item: d
  })
}

RawTree.prototype.mouseLeave = function mouseLeave(sel, d){
  var self = this
  this.emit('mouseleave', {
    type: 'rawTree',
    item: d
  })
}

RawTree.prototype.click = function click(sel, d){
  var self = this
  this.emit('click', {
    type: 'rawTree',
    item: d
  })

}

RawTree.prototype.clearSelection = function clearSelection(){
  this.root.selectAll('.cxviz-rawtree-selected').classed('cxviz-rawtree-selected', false)
}

RawTree.prototype.highlight = function (data) {
  var sel = d3.select(this.el).selectAll('.cxviz-rawtree-item')
  sel.each(function (item) {
    d3.select(this).classed('cxviz-rawtree-highlight', function(d){
      return data === d
    })
  })
}

RawTree.prototype.select = function(data) {
  var sel = d3.select(this.el).selectAll('.cxviz-rawtree-item')
  sel.each(function (item) {
    d3.select(this).classed('cxviz-rawtree-selected', function(d){
      return data === d
    })
  })
}


module.exports = RawTree


function msFormat(val){
  return format(val/1000000) + 's'
}