add grunt, see more in README.md about how to use intstall and use grunt

master-patched
lihongxun 11 years ago
parent 7e9b8c013c
commit 2a394feab3

3
.gitignore vendored

@ -22,3 +22,6 @@ _site
ehthumbs.db ehthumbs.db
Icon? Icon?
Thumbs.db Thumbs.db
# nodejs packages #
######################
node_modules

@ -0,0 +1,3 @@
{
"asi": true
}

@ -0,0 +1,87 @@
module.exports = function(grunt) {
//Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ''
},
dist: {
src: [
'src/intro.js',
'src/core.js',
'src/tooltip.js',
'src/utils.js',
'src/models/axis.js',
'src/models/historicalBar.js',
'src/models/bullet.js',
'src/models/bulletChart.js',
'src/models/cumulativeLineChart.js',
'src/models/discreteBar.js',
'src/models/discreteBarChart.js',
'src/models/distribution.js',
'src/models/indentedTree.js',
'src/models/legend.js',
'src/models/line.js',
'src/models/lineChart.js',
'src/models/linePlusBarChart.js',
'src/models/lineWithFocusChart.js',
'src/models/linePlusBarWithFocusChart.js',
'src/models/multiBar.js',
'src/models/multiBarChart.js',
'src/models/multiBarHorizontal.js',
'src/models/multiBarHorizontalChart.js',
'src/models/multiChart.js',
'src/models/ohlcBar.js',
'src/models/pie.js',
'src/models/pieChart.js',
'src/models/scatter.js',
'src/models/scatterChart.js',
'src/models/scatterPlusLineChart.js',
'src/models/sparkline.js',
'src/models/sparklinePlus.js',
'src/models/stackedArea.js',
'src/models/stackedAreaChart.js',
'src/outro.js'
],
dest: 'nv.d3.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
js: {
files: {
'nv.d3.min.js': ['nv.d3.js']
}
}
},
jshint: {
foo: {
src: "src/**/*.js"
},
options: {
jshintrc: '.jshintrc'
}
},
watch: {
js: {
files: ["src/**/*.js"],
tasks: ['concat']
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat']);
grunt.registerTask('production', ['concat', 'uglify']);
grunt.registerTask('lint', ['jshint']);
};

@ -41,6 +41,19 @@ fork's root directory will rebuild both `nv.d3.js` and `nv.d3.min.js`.
Without UglifyJS, you won't get the minified version when running make. Without UglifyJS, you won't get the minified version when running make.
## use grunt
You can use grunt insteadof makefile to build js file. See more about [grunt](http://gruntjs.com/).
***[Nodejs](http://nodejs.org/) must be installed before you can use grunt.***
Run `npm install` in root dir to install grunt and it's dependencies.
Then, you can use these commands:
grunt # build nv.d3.js
grunt production # build nv.d3.js and nv.d3.min.js
grunt watch # watch file changes in src/, and rebuild nv.d3.js, it's very helpful when delevop nvd3
grunt lint # run jshint on src/**/*.js
**We ask that you DO NOT minify pull requests... **We ask that you DO NOT minify pull requests...
If you need to minify please build pull request in separate branch, and If you need to minify please build pull request in separate branch, and
merge and minify in your master. merge and minify in your master.

@ -3147,323 +3147,324 @@ nv.models.distribution = function() {
return chart; return chart;
} }
nv.models.indentedTree = function() { nv.models.indentedTree = function() {
//============================================================ //============================================================
// Public Variables with Default Settings // Public Variables with Default Settings
//------------------------------------------------------------ //------------------------------------------------------------
var margin = {top: 0, right: 0, bottom: 0, left: 0} //TODO: implement, maybe as margin on the containing div var margin = {top: 0, right: 0, bottom: 0, left: 0} //TODO: implement, maybe as margin on the containing div
, width = 960 , width = 960
, height = 500 , height = 500
, color = nv.utils.defaultColor() , color = nv.utils.defaultColor()
, id = Math.floor(Math.random() * 10000) , id = Math.floor(Math.random() * 10000)
, header = true , header = true
, filterZero = false , filterZero = false
, noData = "No Data Available." , noData = "No Data Available."
, childIndent = 20 , childIndent = 20
, columns = [{key:'key', label: 'Name', type:'text'}] //TODO: consider functions like chart.addColumn, chart.removeColumn, instead of a block like this , columns = [{key:'key', label: 'Name', type:'text'}] //TODO: consider functions like chart.addColumn, chart.removeColumn, instead of a block like this
, tableClass = null , tableClass = null
, iconOpen = 'images/grey-plus.png' //TODO: consider removing this and replacing with a '+' or '-' unless user defines images , iconOpen = 'images/grey-plus.png' //TODO: consider removing this and replacing with a '+' or '-' unless user defines images
, iconClose = 'images/grey-minus.png' , iconClose = 'images/grey-minus.png'
, dispatch = d3.dispatch('elementClick', 'elementDblclick', 'elementMouseover', 'elementMouseout') , dispatch = d3.dispatch('elementClick', 'elementDblclick', 'elementMouseover', 'elementMouseout')
; ;
//============================================================ //============================================================
var idx = 0; var idx = 0;
function chart(selection) { function chart(selection) {
selection.each(function(data) { selection.each(function(data) {
var depth = 1, var depth = 1,
container = d3.select(this); container = d3.select(this);
var tree = d3.layout.tree() var tree = d3.layout.tree()
.children(function(d) { return d.values }) .children(function(d) { return d.values })
.size([height, childIndent]); //Not sure if this is needed now that the result is HTML .size([height, childIndent]); //Not sure if this is needed now that the result is HTML
chart.update = function() { container.transition().duration(600).call(chart) }; chart.update = function() { container.transition().duration(600).call(chart) };
//------------------------------------------------------------ //------------------------------------------------------------
// Display No Data message if there's nothing to show. // Display No Data message if there's nothing to show.
if (!data[0]) data[0] = {key: noData}; if (!data[0]) data[0] = {key: noData};
//------------------------------------------------------------ //------------------------------------------------------------
var nodes = tree.nodes(data[0]); var nodes = tree.nodes(data[0]);
// nodes.map(function(d) { // nodes.map(function(d) {
// d.id = i++; // d.id = i++;
// }) // })
//------------------------------------------------------------ //------------------------------------------------------------
// Setup containers and skeleton of chart // Setup containers and skeleton of chart
var wrap = d3.select(this).selectAll('div').data([[nodes]]); var wrap = d3.select(this).selectAll('div').data([[nodes]]);
var wrapEnter = wrap.enter().append('div').attr('class', 'nvd3 nv-wrap nv-indentedtree'); var wrapEnter = wrap.enter().append('div').attr('class', 'nvd3 nv-wrap nv-indentedtree');
var tableEnter = wrapEnter.append('table'); var tableEnter = wrapEnter.append('table');
var table = wrap.select('table').attr('width', '100%').attr('class', tableClass); var table = wrap.select('table').attr('width', '100%').attr('class', tableClass);
//------------------------------------------------------------ //------------------------------------------------------------
if (header) { if (header) {
var thead = tableEnter.append('thead'); var thead = tableEnter.append('thead');
var theadRow1 = thead.append('tr'); var theadRow1 = thead.append('tr');
columns.forEach(function(column) { columns.forEach(function(column) {
theadRow1 theadRow1
.append('th') .append('th')
.attr('width', column.width ? column.width : '10%') .attr('width', column.width ? column.width : '10%')
.style('text-align', column.type == 'numeric' ? 'right' : 'left') .style('text-align', column.type == 'numeric' ? 'right' : 'left')
.append('span') .append('span')
.text(column.label); .text(column.label);
}); });
} }
var tbody = table.selectAll('tbody') var tbody = table.selectAll('tbody')
.data(function(d) { return d }); .data(function(d) { return d });
tbody.enter().append('tbody'); tbody.enter().append('tbody');
//compute max generations //compute max generations
depth = d3.max(nodes, function(node) { return node.depth }); depth = d3.max(nodes, function(node) { return node.depth });
tree.size([height, depth * childIndent]); //TODO: see if this is necessary at all tree.size([height, depth * childIndent]); //TODO: see if this is necessary at all
// Update the nodes… // Update the nodes…
var node = tbody.selectAll('tr') var node = tbody.selectAll('tr')
// .data(function(d) { return d; }, function(d) { return d.id || (d.id == ++i)}); // .data(function(d) { return d; }, function(d) { return d.id || (d.id == ++i)});
.data(function(d) { return d.filter(function(d) { return (filterZero && !d.children) ? filterZero(d) : true; } )}, function(d,i) { return d.id || (d.id || ++idx)}); .data(function(d) { return d.filter(function(d) { return (filterZero && !d.children) ? filterZero(d) : true; } )}, function(d,i) { return d.id || (d.id || ++idx)});
//.style('display', 'table-row'); //TODO: see if this does anything //.style('display', 'table-row'); //TODO: see if this does anything
node.exit().remove(); node.exit().remove();
node.select('img.nv-treeicon') node.select('img.nv-treeicon')
.attr('src', icon) .attr('src', icon)
.classed('folded', folded); .classed('folded', folded);
var nodeEnter = node.enter().append('tr'); var nodeEnter = node.enter().append('tr');
columns.forEach(function(column, index) { columns.forEach(function(column, index) {
var nodeName = nodeEnter.append('td') var nodeName = nodeEnter.append('td')
.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 .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
.style('text-align', column.type == 'numeric' ? 'right' : 'left'); .style('text-align', column.type == 'numeric' ? 'right' : 'left');
if (index == 0) { if (index == 0) {
nodeName.append('img') nodeName.append('img')
.classed('nv-treeicon', true) .classed('nv-treeicon', true)
.classed('nv-folded', folded) .classed('nv-folded', folded)
.attr('src', icon) .attr('src', icon)
.style('width', '14px') .style('width', '14px')
.style('height', '14px') .style('height', '14px')
.style('padding', '0 1px') .style('padding', '0 1px')
.style('display', function(d) { return icon(d) ? 'inline-block' : 'none'; }) .style('display', function(d) { return icon(d) ? 'inline-block' : 'none'; })
.on('click', click); .on('click', click);
} }
nodeName.append('span') nodeName.append('span')
.attr('class', d3.functor(column.classes) ) .attr('class', d3.functor(column.classes) )
.text(function(d) { return column.format ? column.format(d) : .text(function(d) { return column.format ? column.format(d) :
(d[column.key] || '-') }); (d[column.key] || '-') });
if (column.showCount) { if (column.showCount) {
nodeName.append('span') nodeName.append('span')
.attr('class', 'nv-childrenCount'); .attr('class', 'nv-childrenCount');
node.selectAll('span.nv-childrenCount').text(function(d) { node.selectAll('span.nv-childrenCount').text(function(d) {
return ((d.values && d.values.length) || (d._values && d._values.length)) ? //If this is a parent return ((d.values && d.values.length) || (d._values && d._values.length)) ? //If this is a parent
'(' + ((d.values && (d.values.filter(function(d) { return filterZero ? filterZero(d) : true; }).length)) //If children are in values check its children and filter '(' + ((d.values && (d.values.filter(function(d) { return filterZero ? filterZero(d) : true; }).length)) //If children are in values check its children and filter
|| (d._values && d._values.filter(function(d) { return filterZero ? filterZero(d) : true; }).length) //Otherwise, do the same, but with the other name, _values... || (d._values && d._values.filter(function(d) { return filterZero ? filterZero(d) : true; }).length) //Otherwise, do the same, but with the other name, _values...
|| 0) + ')' //This is the catch-all in case there are no children after a filter || 0) + ')' //This is the catch-all in case there are no children after a filter
: '' //If this is not a parent, just give an empty string : '' //If this is not a parent, just give an empty string
}); });
} }
if (column.click) if (column.click)
nodeName.select('span').on('click', column.click); nodeName.select('span').on('click', column.click);
}); });
node node
.order() .order()
.on('click', function(d) { .on('click', function(d) {
dispatch.elementClick({ dispatch.elementClick({
row: this, //TODO: decide whether or not this should be consistent with scatter/line events or should be an html link (a href) row: this, //TODO: decide whether or not this should be consistent with scatter/line events or should be an html link (a href)
data: d, data: d,
pos: [d.x, d.y] pos: [d.x, d.y]
}); });
}) })
.on('dblclick', function(d) { .on('dblclick', function(d) {
dispatch.elementDblclick({ dispatch.elementDblclick({
row: this, row: this,
data: d, data: d,
pos: [d.x, d.y] pos: [d.x, d.y]
}); });
}) })
.on('mouseover', function(d) { .on('mouseover', function(d) {
dispatch.elementMouseover({ dispatch.elementMouseover({
row: this, row: this,
data: d, data: d,
pos: [d.x, d.y] pos: [d.x, d.y]
}); });
}) })
.on('mouseout', function(d) { .on('mouseout', function(d) {
dispatch.elementMouseout({ dispatch.elementMouseout({
row: this, row: this,
data: d, data: d,
pos: [d.x, d.y] pos: [d.x, d.y]
}); });
}); });
// Toggle children on click. // Toggle children on click.
function click(d, _, unshift) { function click(d, _, unshift) {
d3.event.stopPropagation(); d3.event.stopPropagation();
if(d3.event.shiftKey && !unshift) { if(d3.event.shiftKey && !unshift) {
//If you shift-click, it'll toggle fold all the children, instead of itself //If you shift-click, it'll toggle fold all the children, instead of itself
d3.event.shiftKey = false; d3.event.shiftKey = false;
d.values && d.values.forEach(function(node){ d.values && d.values.forEach(function(node){
if (node.values || node._values) { if (node.values || node._values) {
click(node, 0, true); click(node, 0, true);
} }
}); });
return true; return true;
} }
if(!hasChildren(d)) { if(!hasChildren(d)) {
//download file //download file
//window.location.href = d.url; //window.location.href = d.url;
return true; return true;
} }
if (d.values) { if (d.values) {
d._values = d.values; d._values = d.values;
d.values = null; d.values = null;
} else { } else {
d.values = d._values; d.values = d._values;
d._values = null; d._values = null;
} }
chart.update(); chart.update();
} }
function icon(d) { function icon(d) {
return (d._values && d._values.length) ? iconOpen : (d.values && d.values.length) ? iconClose : ''; return (d._values && d._values.length) ? iconOpen : (d.values && d.values.length) ? iconClose : '';
} }
function folded(d) { function folded(d) {
return (d._values && d._values.length); return (d._values && d._values.length);
} }
function hasChildren(d) { function hasChildren(d) {
var values = d.values || d._values; var values = d.values || d._values;
return (values && values.length); return (values && values.length);
} }
}); });
return chart; return chart;
} }
//============================================================ //============================================================
// Expose Public Variables // Expose Public Variables
//------------------------------------------------------------ //------------------------------------------------------------
chart.margin = function(_) { chart.margin = function(_) {
if (!arguments.length) return margin; if (!arguments.length) return margin;
margin.top = typeof _.top != 'undefined' ? _.top : margin.top; margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
margin.right = typeof _.right != 'undefined' ? _.right : margin.right; margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom; margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
margin.left = typeof _.left != 'undefined' ? _.left : margin.left; margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
return chart; return chart;
}; };
chart.width = function(_) { chart.width = function(_) {
if (!arguments.length) return width; if (!arguments.length) return width;
width = _; width = _;
return chart; return chart;
}; };
chart.height = function(_) { chart.height = function(_) {
if (!arguments.length) return height; if (!arguments.length) return height;
height = _; height = _;
return chart; return chart;
}; };
chart.color = function(_) { chart.color = function(_) {
if (!arguments.length) return color; if (!arguments.length) return color;
color = nv.utils.getColor(_); color = nv.utils.getColor(_);
scatter.color(color); scatter.color(color);
return chart; return chart;
}; };
chart.id = function(_) { chart.id = function(_) {
if (!arguments.length) return id; if (!arguments.length) return id;
id = _; id = _;
return chart; return chart;
}; };
chart.header = function(_) { chart.header = function(_) {
if (!arguments.length) return header; if (!arguments.length) return header;
header = _; header = _;
return chart; return chart;
}; };
chart.noData = function(_) { chart.noData = function(_) {
if (!arguments.length) return noData; if (!arguments.length) return noData;
noData = _; noData = _;
return chart; return chart;
}; };
chart.filterZero = function(_) { chart.filterZero = function(_) {
if (!arguments.length) return filterZero; if (!arguments.length) return filterZero;
filterZero = _; filterZero = _;
return chart; return chart;
}; };
chart.columns = function(_) { chart.columns = function(_) {
if (!arguments.length) return columns; if (!arguments.length) return columns;
columns = _; columns = _;
return chart; return chart;
}; };
chart.tableClass = function(_) { chart.tableClass = function(_) {
if (!arguments.length) return tableClass; if (!arguments.length) return tableClass;
tableClass = _; tableClass = _;
return chart; return chart;
}; };
chart.iconOpen = function(_){ chart.iconOpen = function(_){
if (!arguments.length) return iconOpen; if (!arguments.length) return iconOpen;
iconOpen = _; iconOpen = _;
return chart; return chart;
} }
chart.iconClose = function(_){ chart.iconClose = function(_){
if (!arguments.length) return iconClose; if (!arguments.length) return iconClose;
iconClose = _; iconClose = _;
return chart; return chart;
} }
//============================================================ //============================================================
return chart; return chart;
};nv.models.legend = function() { };
nv.models.legend = function() {
//============================================================ //============================================================
// Public Variables with Default Settings // Public Variables with Default Settings

11
nv.d3.min.js vendored

File diff suppressed because one or more lines are too long

@ -0,0 +1,11 @@
{
"name": "nvd3",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.3.0",
"grunt-contrib-watch": "~0.3.1",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-concat": "~0.2.0"
}
}

@ -1,317 +1,317 @@
nv.models.indentedTree = function() { nv.models.indentedTree = function() {
//============================================================ //============================================================
// Public Variables with Default Settings // Public Variables with Default Settings
//------------------------------------------------------------ //------------------------------------------------------------
var margin = {top: 0, right: 0, bottom: 0, left: 0} //TODO: implement, maybe as margin on the containing div var margin = {top: 0, right: 0, bottom: 0, left: 0} //TODO: implement, maybe as margin on the containing div
, width = 960 , width = 960
, height = 500 , height = 500
, color = nv.utils.defaultColor() , color = nv.utils.defaultColor()
, id = Math.floor(Math.random() * 10000) , id = Math.floor(Math.random() * 10000)
, header = true , header = true
, filterZero = false , filterZero = false
, noData = "No Data Available." , noData = "No Data Available."
, childIndent = 20 , childIndent = 20
, columns = [{key:'key', label: 'Name', type:'text'}] //TODO: consider functions like chart.addColumn, chart.removeColumn, instead of a block like this , columns = [{key:'key', label: 'Name', type:'text'}] //TODO: consider functions like chart.addColumn, chart.removeColumn, instead of a block like this
, tableClass = null , tableClass = null
, iconOpen = 'images/grey-plus.png' //TODO: consider removing this and replacing with a '+' or '-' unless user defines images , iconOpen = 'images/grey-plus.png' //TODO: consider removing this and replacing with a '+' or '-' unless user defines images
, iconClose = 'images/grey-minus.png' , iconClose = 'images/grey-minus.png'
, dispatch = d3.dispatch('elementClick', 'elementDblclick', 'elementMouseover', 'elementMouseout') , dispatch = d3.dispatch('elementClick', 'elementDblclick', 'elementMouseover', 'elementMouseout')
; ;
//============================================================ //============================================================
var idx = 0; var idx = 0;
function chart(selection) { function chart(selection) {
selection.each(function(data) { selection.each(function(data) {
var depth = 1, var depth = 1,
container = d3.select(this); container = d3.select(this);
var tree = d3.layout.tree() var tree = d3.layout.tree()
.children(function(d) { return d.values }) .children(function(d) { return d.values })
.size([height, childIndent]); //Not sure if this is needed now that the result is HTML .size([height, childIndent]); //Not sure if this is needed now that the result is HTML
chart.update = function() { container.transition().duration(600).call(chart) }; chart.update = function() { container.transition().duration(600).call(chart) };
//------------------------------------------------------------ //------------------------------------------------------------
// Display No Data message if there's nothing to show. // Display No Data message if there's nothing to show.
if (!data[0]) data[0] = {key: noData}; if (!data[0]) data[0] = {key: noData};
//------------------------------------------------------------ //------------------------------------------------------------
var nodes = tree.nodes(data[0]); var nodes = tree.nodes(data[0]);
// nodes.map(function(d) { // nodes.map(function(d) {
// d.id = i++; // d.id = i++;
// }) // })
//------------------------------------------------------------ //------------------------------------------------------------
// Setup containers and skeleton of chart // Setup containers and skeleton of chart
var wrap = d3.select(this).selectAll('div').data([[nodes]]); var wrap = d3.select(this).selectAll('div').data([[nodes]]);
var wrapEnter = wrap.enter().append('div').attr('class', 'nvd3 nv-wrap nv-indentedtree'); var wrapEnter = wrap.enter().append('div').attr('class', 'nvd3 nv-wrap nv-indentedtree');
var tableEnter = wrapEnter.append('table'); var tableEnter = wrapEnter.append('table');
var table = wrap.select('table').attr('width', '100%').attr('class', tableClass); var table = wrap.select('table').attr('width', '100%').attr('class', tableClass);
//------------------------------------------------------------ //------------------------------------------------------------
if (header) { if (header) {
var thead = tableEnter.append('thead'); var thead = tableEnter.append('thead');
var theadRow1 = thead.append('tr'); var theadRow1 = thead.append('tr');
columns.forEach(function(column) { columns.forEach(function(column) {
theadRow1 theadRow1
.append('th') .append('th')
.attr('width', column.width ? column.width : '10%') .attr('width', column.width ? column.width : '10%')
.style('text-align', column.type == 'numeric' ? 'right' : 'left') .style('text-align', column.type == 'numeric' ? 'right' : 'left')
.append('span') .append('span')
.text(column.label); .text(column.label);
}); });
} }
var tbody = table.selectAll('tbody') var tbody = table.selectAll('tbody')
.data(function(d) { return d }); .data(function(d) { return d });
tbody.enter().append('tbody'); tbody.enter().append('tbody');
//compute max generations //compute max generations
depth = d3.max(nodes, function(node) { return node.depth }); depth = d3.max(nodes, function(node) { return node.depth });
tree.size([height, depth * childIndent]); //TODO: see if this is necessary at all tree.size([height, depth * childIndent]); //TODO: see if this is necessary at all
// Update the nodes… // Update the nodes…
var node = tbody.selectAll('tr') var node = tbody.selectAll('tr')
// .data(function(d) { return d; }, function(d) { return d.id || (d.id == ++i)}); // .data(function(d) { return d; }, function(d) { return d.id || (d.id == ++i)});
.data(function(d) { return d.filter(function(d) { return (filterZero && !d.children) ? filterZero(d) : true; } )}, function(d,i) { return d.id || (d.id || ++idx)}); .data(function(d) { return d.filter(function(d) { return (filterZero && !d.children) ? filterZero(d) : true; } )}, function(d,i) { return d.id || (d.id || ++idx)});
//.style('display', 'table-row'); //TODO: see if this does anything //.style('display', 'table-row'); //TODO: see if this does anything
node.exit().remove(); node.exit().remove();
node.select('img.nv-treeicon') node.select('img.nv-treeicon')
.attr('src', icon) .attr('src', icon)
.classed('folded', folded); .classed('folded', folded);
var nodeEnter = node.enter().append('tr'); var nodeEnter = node.enter().append('tr');
columns.forEach(function(column, index) { columns.forEach(function(column, index) {
var nodeName = nodeEnter.append('td') var nodeName = nodeEnter.append('td')
.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 .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
.style('text-align', column.type == 'numeric' ? 'right' : 'left'); .style('text-align', column.type == 'numeric' ? 'right' : 'left');
if (index == 0) { if (index == 0) {
nodeName.append('img') nodeName.append('img')
.classed('nv-treeicon', true) .classed('nv-treeicon', true)
.classed('nv-folded', folded) .classed('nv-folded', folded)
.attr('src', icon) .attr('src', icon)
.style('width', '14px') .style('width', '14px')
.style('height', '14px') .style('height', '14px')
.style('padding', '0 1px') .style('padding', '0 1px')
.style('display', function(d) { return icon(d) ? 'inline-block' : 'none'; }) .style('display', function(d) { return icon(d) ? 'inline-block' : 'none'; })
.on('click', click); .on('click', click);
} }
nodeName.append('span') nodeName.append('span')
.attr('class', d3.functor(column.classes) ) .attr('class', d3.functor(column.classes) )
.text(function(d) { return column.format ? column.format(d) : .text(function(d) { return column.format ? column.format(d) :
(d[column.key] || '-') }); (d[column.key] || '-') });
if (column.showCount) { if (column.showCount) {
nodeName.append('span') nodeName.append('span')
.attr('class', 'nv-childrenCount'); .attr('class', 'nv-childrenCount');
node.selectAll('span.nv-childrenCount').text(function(d) { node.selectAll('span.nv-childrenCount').text(function(d) {
return ((d.values && d.values.length) || (d._values && d._values.length)) ? //If this is a parent return ((d.values && d.values.length) || (d._values && d._values.length)) ? //If this is a parent
'(' + ((d.values && (d.values.filter(function(d) { return filterZero ? filterZero(d) : true; }).length)) //If children are in values check its children and filter '(' + ((d.values && (d.values.filter(function(d) { return filterZero ? filterZero(d) : true; }).length)) //If children are in values check its children and filter
|| (d._values && d._values.filter(function(d) { return filterZero ? filterZero(d) : true; }).length) //Otherwise, do the same, but with the other name, _values... || (d._values && d._values.filter(function(d) { return filterZero ? filterZero(d) : true; }).length) //Otherwise, do the same, but with the other name, _values...
|| 0) + ')' //This is the catch-all in case there are no children after a filter || 0) + ')' //This is the catch-all in case there are no children after a filter
: '' //If this is not a parent, just give an empty string : '' //If this is not a parent, just give an empty string
}); });
} }
if (column.click) if (column.click)
nodeName.select('span').on('click', column.click); nodeName.select('span').on('click', column.click);
}); });
node node
.order() .order()
.on('click', function(d) { .on('click', function(d) {
dispatch.elementClick({ dispatch.elementClick({
row: this, //TODO: decide whether or not this should be consistent with scatter/line events or should be an html link (a href) row: this, //TODO: decide whether or not this should be consistent with scatter/line events or should be an html link (a href)
data: d, data: d,
pos: [d.x, d.y] pos: [d.x, d.y]
}); });
}) })
.on('dblclick', function(d) { .on('dblclick', function(d) {
dispatch.elementDblclick({ dispatch.elementDblclick({
row: this, row: this,
data: d, data: d,
pos: [d.x, d.y] pos: [d.x, d.y]
}); });
}) })
.on('mouseover', function(d) { .on('mouseover', function(d) {
dispatch.elementMouseover({ dispatch.elementMouseover({
row: this, row: this,
data: d, data: d,
pos: [d.x, d.y] pos: [d.x, d.y]
}); });
}) })
.on('mouseout', function(d) { .on('mouseout', function(d) {
dispatch.elementMouseout({ dispatch.elementMouseout({
row: this, row: this,
data: d, data: d,
pos: [d.x, d.y] pos: [d.x, d.y]
}); });
}); });
// Toggle children on click. // Toggle children on click.
function click(d, _, unshift) { function click(d, _, unshift) {
d3.event.stopPropagation(); d3.event.stopPropagation();
if(d3.event.shiftKey && !unshift) { if(d3.event.shiftKey && !unshift) {
//If you shift-click, it'll toggle fold all the children, instead of itself //If you shift-click, it'll toggle fold all the children, instead of itself
d3.event.shiftKey = false; d3.event.shiftKey = false;
d.values && d.values.forEach(function(node){ d.values && d.values.forEach(function(node){
if (node.values || node._values) { if (node.values || node._values) {
click(node, 0, true); click(node, 0, true);
} }
}); });
return true; return true;
} }
if(!hasChildren(d)) { if(!hasChildren(d)) {
//download file //download file
//window.location.href = d.url; //window.location.href = d.url;
return true; return true;
} }
if (d.values) { if (d.values) {
d._values = d.values; d._values = d.values;
d.values = null; d.values = null;
} else { } else {
d.values = d._values; d.values = d._values;
d._values = null; d._values = null;
} }
chart.update(); chart.update();
} }
function icon(d) { function icon(d) {
return (d._values && d._values.length) ? iconOpen : (d.values && d.values.length) ? iconClose : ''; return (d._values && d._values.length) ? iconOpen : (d.values && d.values.length) ? iconClose : '';
} }
function folded(d) { function folded(d) {
return (d._values && d._values.length); return (d._values && d._values.length);
} }
function hasChildren(d) { function hasChildren(d) {
var values = d.values || d._values; var values = d.values || d._values;
return (values && values.length); return (values && values.length);
} }
}); });
return chart; return chart;
} }
//============================================================ //============================================================
// Expose Public Variables // Expose Public Variables
//------------------------------------------------------------ //------------------------------------------------------------
chart.margin = function(_) { chart.margin = function(_) {
if (!arguments.length) return margin; if (!arguments.length) return margin;
margin.top = typeof _.top != 'undefined' ? _.top : margin.top; margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
margin.right = typeof _.right != 'undefined' ? _.right : margin.right; margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom; margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
margin.left = typeof _.left != 'undefined' ? _.left : margin.left; margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
return chart; return chart;
}; };
chart.width = function(_) { chart.width = function(_) {
if (!arguments.length) return width; if (!arguments.length) return width;
width = _; width = _;
return chart; return chart;
}; };
chart.height = function(_) { chart.height = function(_) {
if (!arguments.length) return height; if (!arguments.length) return height;
height = _; height = _;
return chart; return chart;
}; };
chart.color = function(_) { chart.color = function(_) {
if (!arguments.length) return color; if (!arguments.length) return color;
color = nv.utils.getColor(_); color = nv.utils.getColor(_);
scatter.color(color); scatter.color(color);
return chart; return chart;
}; };
chart.id = function(_) { chart.id = function(_) {
if (!arguments.length) return id; if (!arguments.length) return id;
id = _; id = _;
return chart; return chart;
}; };
chart.header = function(_) { chart.header = function(_) {
if (!arguments.length) return header; if (!arguments.length) return header;
header = _; header = _;
return chart; return chart;
}; };
chart.noData = function(_) { chart.noData = function(_) {
if (!arguments.length) return noData; if (!arguments.length) return noData;
noData = _; noData = _;
return chart; return chart;
}; };
chart.filterZero = function(_) { chart.filterZero = function(_) {
if (!arguments.length) return filterZero; if (!arguments.length) return filterZero;
filterZero = _; filterZero = _;
return chart; return chart;
}; };
chart.columns = function(_) { chart.columns = function(_) {
if (!arguments.length) return columns; if (!arguments.length) return columns;
columns = _; columns = _;
return chart; return chart;
}; };
chart.tableClass = function(_) { chart.tableClass = function(_) {
if (!arguments.length) return tableClass; if (!arguments.length) return tableClass;
tableClass = _; tableClass = _;
return chart; return chart;
}; };
chart.iconOpen = function(_){ chart.iconOpen = function(_){
if (!arguments.length) return iconOpen; if (!arguments.length) return iconOpen;
iconOpen = _; iconOpen = _;
return chart; return chart;
} }
chart.iconClose = function(_){ chart.iconClose = function(_){
if (!arguments.length) return iconClose; if (!arguments.length) return iconClose;
iconClose = _; iconClose = _;
return chart; return chart;
} }
//============================================================ //============================================================
return chart; return chart;
}; };

Loading…
Cancel
Save