no progress
This commit is contained in:
parent
b4ee54ba80
commit
9c9acd13b1
326
static/data/data.json
Normal file
326
static/data/data.json
Normal file
@ -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
|
||||||
|
}
|
||||||
149
static/js/CodeFlower.js
Normal file
149
static/js/CodeFlower.js
Normal file
@ -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();
|
||||||
|
};
|
||||||
4645
static/js/d3/d3.js
vendored
Normal file
4645
static/js/d3/d3.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@ -2,12 +2,13 @@
|
|||||||
{% block title %}Hello{% endblock %}
|
{% block title %}Hello{% endblock %}
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<div id="visualization"></div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<div class="map_area">Map area
|
<div class="map_area">Map area
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-1 col-sm-4">
|
<div class="col-md-1 col-sm-4">
|
||||||
|
|
||||||
<svg id="first_circle" onclick="scrolldiv();play();">
|
<svg id="first_circle" onclick="scrolldiv();play();">
|
||||||
<circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
|
<circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
|
||||||
<text id="angela" x="50" y="50" text-anchor="middle">hello </text>
|
<text id="angela" x="50" y="50" text-anchor="middle">hello </text>
|
||||||
@ -79,7 +80,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$("#angela").click(function() {
|
$("#angela").click(function() {
|
||||||
$("#show1").fadeIn()
|
$("#show1").fadeIn()
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user