nglk
4 years ago
4 changed files with 5122 additions and 2 deletions
@ -0,0 +1,326 @@ |
|||
{ |
|||
"name": "root", |
|||
"children": [{ |
|||
"name": "app", |
|||
"children": [{ |
|||
"name": "dashboard", |
|||
"children": [{ |
|||
"name": "public", |
|||
"children": [{ |
|||
"name": "stylesheets", |
|||
"children": [{ |
|||
"name": "bootstrap.css", |
|||
"size": 4945, |
|||
"language": "CSS" |
|||
}, { |
|||
"name": "style.css", |
|||
"size": 254, |
|||
"language": "CSS" |
|||
}, { |
|||
"name": "jquery.tagsinput.css", |
|||
"size": 7, |
|||
"language": "CSS" |
|||
}], |
|||
"size": 5206 |
|||
}, { |
|||
"name": "javascripts", |
|||
"children": [{ |
|||
"name": "dateNavigation.js", |
|||
"size": 155, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "dateInterval.js", |
|||
"size": 83, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "bootstrap-affix.js", |
|||
"size": 56, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "bootstrap-button.js", |
|||
"size": 52, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "uptimeBar.js", |
|||
"size": 47, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "checkState.js", |
|||
"size": 31, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "flashcanvas", |
|||
"children": [{ |
|||
"name": "canvas2png.js", |
|||
"size": 27, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "flashcanvas.js", |
|||
"size": 21, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 48 |
|||
}, { |
|||
"name": "statNavigation.js", |
|||
"size": 26, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "flotr2.min.js", |
|||
"size": 3, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "jquery.min.js", |
|||
"size": 3, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "jquery.tablesorter.min.js", |
|||
"size": 1, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "moment.min.js", |
|||
"size": 1, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "ejs.min.js", |
|||
"size": 1, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "jquery.tagsinput.min.js", |
|||
"size": 1, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 508 |
|||
}], |
|||
"size": 5714 |
|||
}, { |
|||
"name": "app.js", |
|||
"size": 126, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 5840 |
|||
}, { |
|||
"name": "api", |
|||
"children": [{ |
|||
"name": "routes", |
|||
"children": [{ |
|||
"name": "check.js", |
|||
"size": 95, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "ping.js", |
|||
"size": 68, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "tag.js", |
|||
"size": 64, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 227 |
|||
}, { |
|||
"name": "app.js", |
|||
"size": 59, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 286 |
|||
}], |
|||
"size": 6126 |
|||
}, { |
|||
"name": "lib", |
|||
"children": [{ |
|||
"name": "qosAggregator.js", |
|||
"size": 476, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "intervalBuilder.js", |
|||
"size": 144, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "monitor.js", |
|||
"size": 109, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "pollers", |
|||
"children": [{ |
|||
"name": "https.js", |
|||
"size": 81, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "http.js", |
|||
"size": 80, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "icmp.js", |
|||
"size": 53, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "udp.js", |
|||
"size": 47, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "base.js", |
|||
"size": 33, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 294 |
|||
}, { |
|||
"name": "proxy.js", |
|||
"size": 61, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "analyzer.js", |
|||
"size": 40, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "timer.js", |
|||
"size": 15, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 1139 |
|||
}, { |
|||
"name": "models", |
|||
"children": [{ |
|||
"name": "check.js", |
|||
"size": 313, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "tag.js", |
|||
"size": 176, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "migrations", |
|||
"children": [{ |
|||
"name": "upgrade2to3.js", |
|||
"size": 137, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 137 |
|||
}, { |
|||
"name": "checkEvent.js", |
|||
"size": 56, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "ping.js", |
|||
"size": 51, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "checkYearlyStat.js", |
|||
"size": 16, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "tagYearlyStat.js", |
|||
"size": 16, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "checkMonthlyStat.js", |
|||
"size": 16, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "tagMonthlyStat.js", |
|||
"size": 16, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "tagDailyStat.js", |
|||
"size": 15, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "checkHourlyStat.js", |
|||
"size": 15, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "tagHourlyStat.js", |
|||
"size": 15, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "checkDailyStat.js", |
|||
"size": 15, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 857 |
|||
}, { |
|||
"name": "test", |
|||
"children": [{ |
|||
"name": "lib", |
|||
"children": [{ |
|||
"name": "test_intervalBuilder.js", |
|||
"size": 133, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 133 |
|||
}], |
|||
"size": 133 |
|||
}, { |
|||
"name": "fixtures", |
|||
"children": [{ |
|||
"name": "computeStats.js", |
|||
"size": 117, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "populate.js", |
|||
"size": 70, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "fixEvents.js", |
|||
"size": 28, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "dummyTargetUdp.js", |
|||
"size": 19, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "dummyTarget.js", |
|||
"size": 13, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 247 |
|||
}, { |
|||
"name": "plugins", |
|||
"children": [{ |
|||
"name": "console", |
|||
"children": [{ |
|||
"name": "index.js", |
|||
"size": 86, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 86 |
|||
}, { |
|||
"name": "email", |
|||
"children": [{ |
|||
"name": "index.js", |
|||
"size": 36, |
|||
"language": "Javascript" |
|||
}], |
|||
"size": 36 |
|||
}], |
|||
"size": 122 |
|||
}, { |
|||
"name": "app.js", |
|||
"size": 75, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "config", |
|||
"children": [{ |
|||
"name": "default.yaml", |
|||
"size": 36, |
|||
"language": "YAML" |
|||
}, { |
|||
"name": "test.yaml", |
|||
"size": 4, |
|||
"language": "YAML" |
|||
}], |
|||
"size": 40 |
|||
}, { |
|||
"name": "bootstrap.js", |
|||
"size": 32, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "monitor.js", |
|||
"size": 4, |
|||
"language": "Javascript" |
|||
}, { |
|||
"name": "makefile", |
|||
"size": 3, |
|||
"language": "make" |
|||
}], |
|||
"nbFiles": 81, |
|||
"size": 8778 |
|||
} |
@ -0,0 +1,149 @@ |
|||
var CodeFlower = function(selector, w, h) { |
|||
this.w = w; |
|||
this.h = h; |
|||
|
|||
d3.select(selector).selectAll("svg").remove(); |
|||
|
|||
this.svg = d3.select(selector).append("svg:svg") |
|||
.attr('width', w) |
|||
.attr('height', h); |
|||
|
|||
this.svg.append("svg:rect") |
|||
.style("stroke", "#999") |
|||
.style("fill", "#fff") |
|||
.attr('width', w) |
|||
.attr('height', h); |
|||
|
|||
this.force = d3.layout.force() |
|||
.on("tick", this.tick.bind(this)) |
|||
.charge(function(d) { return d._children ? -d.size / 100 : -40; }) |
|||
.linkDistance(function(d) { return d.target._children ? 80 : 25; }) |
|||
.size([h, w]); |
|||
}; |
|||
|
|||
CodeFlower.prototype.update = function(json) { |
|||
if (json) this.json = json; |
|||
|
|||
this.json.fixed = true; |
|||
this.json.x = this.w / 2; |
|||
this.json.y = this.h / 2; |
|||
|
|||
var nodes = this.flatten(this.json); |
|||
var links = d3.layout.tree().links(nodes); |
|||
var total = nodes.length || 1; |
|||
|
|||
// remove existing text (will readd it afterwards to be sure it's on top)
|
|||
this.svg.selectAll("text").remove(); |
|||
|
|||
// Restart the force layout
|
|||
this.force |
|||
.gravity(Math.atan(total / 50) / Math.PI * 0.4) |
|||
.nodes(nodes) |
|||
.links(links) |
|||
.start(); |
|||
|
|||
// Update the links
|
|||
this.link = this.svg.selectAll("line.link") |
|||
.data(links, function(d) { return d.target.name; }); |
|||
|
|||
// Enter any new links
|
|||
this.link.enter().insert("svg:line", ".node") |
|||
.attr("class", "link") |
|||
.attr("x1", function(d) { return d.source.x; }) |
|||
.attr("y1", function(d) { return d.source.y; }) |
|||
.attr("x2", function(d) { return d.target.x; }) |
|||
.attr("y2", function(d) { return d.target.y; }); |
|||
|
|||
// Exit any old links.
|
|||
this.link.exit().remove(); |
|||
|
|||
// Update the nodes
|
|||
this.node = this.svg.selectAll("circle.node") |
|||
.data(nodes, function(d) { return d.name; }) |
|||
.classed("collapsed", function(d) { return d._children ? 1 : 0; }); |
|||
|
|||
this.node.transition() |
|||
.attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; }); |
|||
|
|||
// Enter any new nodes
|
|||
this.node.enter().append('svg:circle') |
|||
.attr("class", "node") |
|||
.classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; }) |
|||
.attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; }) |
|||
.style("fill", function color(d) { |
|||
return "hsl(" + parseInt(360 / total * d.id, 10) + ",90%,70%)"; |
|||
}) |
|||
.call(this.force.drag) |
|||
.on("click", this.click.bind(this)) |
|||
.on("mouseover", this.mouseover.bind(this)) |
|||
.on("mouseout", this.mouseout.bind(this)); |
|||
|
|||
// Exit any old nodes
|
|||
this.node.exit().remove(); |
|||
|
|||
this.text = this.svg.append('svg:text') |
|||
.attr('class', 'nodetext') |
|||
.attr('dy', 0) |
|||
.attr('dx', 0) |
|||
.attr('text-anchor', 'middle'); |
|||
|
|||
return this; |
|||
}; |
|||
|
|||
CodeFlower.prototype.flatten = function(root) { |
|||
var nodes = [], i = 0; |
|||
|
|||
function recurse(node) { |
|||
if (node.children) { |
|||
node.size = node.children.reduce(function(p, v) { |
|||
return p + recurse(v); |
|||
}, 0); |
|||
} |
|||
if (!node.id) node.id = ++i; |
|||
nodes.push(node); |
|||
return node.size; |
|||
} |
|||
|
|||
root.size = recurse(root); |
|||
return nodes; |
|||
}; |
|||
|
|||
CodeFlower.prototype.click = function(d) { |
|||
// Toggle children on click.
|
|||
if (d.children) { |
|||
d._children = d.children; |
|||
d.children = null; |
|||
} else { |
|||
d.children = d._children; |
|||
d._children = null; |
|||
} |
|||
this.update(); |
|||
}; |
|||
|
|||
CodeFlower.prototype.mouseover = function(d) { |
|||
this.text.attr('transform', 'translate(' + d.x + ',' + (d.y - 5 - (d.children ? 3.5 : Math.sqrt(d.size) / 2)) + ')') |
|||
.text(d.name + ": " + d.size + " loc") |
|||
.style('display', null); |
|||
}; |
|||
|
|||
CodeFlower.prototype.mouseout = function(d) { |
|||
this.text.style('display', 'none'); |
|||
}; |
|||
|
|||
CodeFlower.prototype.tick = function() { |
|||
var h = this.h; |
|||
var w = this.w; |
|||
this.link.attr("x1", function(d) { return d.source.x; }) |
|||
.attr("y1", function(d) { return d.source.y; }) |
|||
.attr("x2", function(d) { return d.target.x; }) |
|||
.attr("y2", function(d) { return d.target.y; }); |
|||
|
|||
this.node.attr("transform", function(d) { |
|||
return "translate(" + Math.max(5, Math.min(w - 5, d.x)) + "," + Math.max(5, Math.min(h - 5, d.y)) + ")"; |
|||
}); |
|||
}; |
|||
|
|||
CodeFlower.prototype.cleanup = function() { |
|||
this.update([]); |
|||
this.force.stop(); |
|||
}; |
File diff suppressed because it is too large
Loading…
Reference in new issue