dirtree 0.4.0 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/dirtree/version.rb +1 -1
- data/templates/treemap.html.erb +127 -0
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 29ccafc03b49b0f8c15caaf5bd30f4f93be5c02a04bc4ec7e92e9260a4343e12
|
|
4
|
+
data.tar.gz: acce9976160e5f322a5cce3a46b96e0af166f3f5f3ef156e4433ab1b498e46b1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 48fcb84d12b4024c99916e8d7970e998914c5294aa396b44747082b028718c304a2305b0904a97b66ddeabf7c005c76e738da89b211467f6ad4e48dc344e8855
|
|
7
|
+
data.tar.gz: 5a12ae063ed9e336833cd265c71a4a41480fe8242b61055a340773be454c5a7295e538c98d132c5c5409f4f66df0b5f389734c85bf8f69f165f24bc49a17bbe8
|
data/lib/dirtree/version.rb
CHANGED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<style>
|
|
6
|
+
html, body {
|
|
7
|
+
padding: 0;
|
|
8
|
+
margin: 0;
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 100%;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
text {
|
|
15
|
+
font: 12px sans-serif;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
tspan:last-child {
|
|
19
|
+
font-size: 12px;
|
|
20
|
+
fill-opacity: 0.8;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.node rect {
|
|
24
|
+
shape-rendering: crispEdges;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.node--hover rect {
|
|
28
|
+
stroke: #000;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
</style>
|
|
32
|
+
<svg width="100%" height="100%"></svg>
|
|
33
|
+
<script src="http://d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
|
|
34
|
+
<script>
|
|
35
|
+
|
|
36
|
+
var svg = d3.select("svg"),
|
|
37
|
+
width = window.innerWidth,
|
|
38
|
+
height = window.innerHeight;
|
|
39
|
+
|
|
40
|
+
svg.attr("width", width + "px");
|
|
41
|
+
svg.attr("height", height + "px");
|
|
42
|
+
|
|
43
|
+
var format = d3.format(",d");
|
|
44
|
+
|
|
45
|
+
var color = d3.scaleMagma()
|
|
46
|
+
.domain([-4, 4]);
|
|
47
|
+
|
|
48
|
+
var treemap = d3.treemap()
|
|
49
|
+
.size([width, height])
|
|
50
|
+
.paddingOuter(3)
|
|
51
|
+
.paddingTop(19)
|
|
52
|
+
.paddingInner(1)
|
|
53
|
+
.round(true);
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
var data = <%= tree.to_json %>
|
|
57
|
+
var root = d3.hierarchy(data)
|
|
58
|
+
.sum(function(d) {
|
|
59
|
+
var value = 1;
|
|
60
|
+
d.children.forEach(function(i){ value += i.value; })
|
|
61
|
+
return value;
|
|
62
|
+
})
|
|
63
|
+
.sort(function(a, b) { return b.height - a.height || b.value - a.value; })
|
|
64
|
+
|
|
65
|
+
var counter = 0;
|
|
66
|
+
root.each(function(d){ d.id = counter++; })
|
|
67
|
+
treemap(root)
|
|
68
|
+
|
|
69
|
+
var cell = svg
|
|
70
|
+
.selectAll(".node")
|
|
71
|
+
.data(root.descendants())
|
|
72
|
+
.enter().append("g")
|
|
73
|
+
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
|
|
74
|
+
.attr("class", "node")
|
|
75
|
+
.each(function(d) { d.node = this; })
|
|
76
|
+
.on("mouseover", hovered(true))
|
|
77
|
+
.on("mouseout", hovered(false));
|
|
78
|
+
|
|
79
|
+
cell.append("rect")
|
|
80
|
+
.attr("id", function(d) { return "rect-" + d.id; })
|
|
81
|
+
.attr("width", function(d) { return d.x1 - d.x0; })
|
|
82
|
+
.attr("height", function(d) { return d.y1 - d.y0; })
|
|
83
|
+
.style("fill", function(d) { return color(d.depth); });
|
|
84
|
+
|
|
85
|
+
cell.append("clipPath")
|
|
86
|
+
.attr("id", function(d) { return "clip-" + d.id; })
|
|
87
|
+
.append("use")
|
|
88
|
+
.attr("xlink:href", function(d) { return "#rect-" + d.id + ""; });
|
|
89
|
+
|
|
90
|
+
var label = cell.append("text")
|
|
91
|
+
.attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; });
|
|
92
|
+
|
|
93
|
+
label
|
|
94
|
+
.filter(function(d) { return d.children; })
|
|
95
|
+
.selectAll("tspan")
|
|
96
|
+
.data(function(d) { return [d.data.name]; })
|
|
97
|
+
.enter().append("tspan")
|
|
98
|
+
.attr("x", function(d, i) { return i ? null : 4; })
|
|
99
|
+
.attr("y", 13)
|
|
100
|
+
.text(function(d) { return d; });
|
|
101
|
+
|
|
102
|
+
label
|
|
103
|
+
.filter(function(d) { return !d.children; })
|
|
104
|
+
.selectAll("tspan")
|
|
105
|
+
.data(function(d) { return [d.data.name]; })
|
|
106
|
+
.enter().append("tspan")
|
|
107
|
+
.attr("x", 4)
|
|
108
|
+
.attr("y", function(d, i) { return 13 + i * 10; })
|
|
109
|
+
.text(function(d) { return d; });
|
|
110
|
+
|
|
111
|
+
cell.append("title")
|
|
112
|
+
.text(function(d) { return d.data.name; });
|
|
113
|
+
|
|
114
|
+
function hovered(hover) {
|
|
115
|
+
return function(d) {
|
|
116
|
+
d3.selectAll(d.ancestors().map(function(d) { return d.node; }))
|
|
117
|
+
.classed("node--hover", hover)
|
|
118
|
+
.select("rect")
|
|
119
|
+
.attr("width", function(d) { return d.x1 - d.x0 - hover; })
|
|
120
|
+
.attr("height", function(d) { return d.y1 - d.y0 - hover; });
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
</script>
|
|
125
|
+
</head>
|
|
126
|
+
<body></body>
|
|
127
|
+
</head>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: dirtree
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.5.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Emad Elsaid
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-
|
|
11
|
+
date: 2018-02-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -59,6 +59,7 @@ files:
|
|
|
59
59
|
- templates/circles.html.erb
|
|
60
60
|
- templates/flame.html.erb
|
|
61
61
|
- templates/tree.html.erb
|
|
62
|
+
- templates/treemap.html.erb
|
|
62
63
|
homepage: https://www.github.com/blazeeboy/dirtree
|
|
63
64
|
licenses:
|
|
64
65
|
- MIT
|