alicestrt
/
vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

no progress

master
nglk 4 years ago
parent
b4ee54ba80
commit
9c9acd13b1
4 changed files with 5122 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 326
      static/data/data.json
  2. 149
      static/js/CodeFlower.js
  3. 4645
      static/js/d3/d3.js
  4. 4
      templates/hello.html

326
static/data/data.json
View 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
View 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
View File

File diff suppressed because it is too large

4
templates/hello.html
View File

@ -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()

Write Preview
Loading…
Cancel
Save