-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathFileMap.html
117 lines (112 loc) · 3.82 KB
/
FileMap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<head>
<script src="//unpkg.com/d3"></script>
<script src="//unpkg.com/treemap-chart"></script>
<style>
body {
margin: 0
}
#header {
overflow-y: scroll;
text-align: center;
}
#chart {
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
}
#errorText {
border: red 2px solid;
display: inline-block;
padding-right: 10px;
padding-left: 10px;
margin-bottom: 10px;
width: 50%;
max-width: 420px;
border-radius: 5px;
}
#scanPath {
width: 50%;
max-width: 420px;
border-radius: 5px;
}
#submitButton {
border-radius: 5px;
}
#langSelect {
border-radius: 5px;
}
h1 {
font-family:'Courier New', Courier, monospace;
}
* {
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
#blur{
font-size: 40px;
color: transparent;
text-shadow: 0 0 10px #000;
}
</style>
<title>🔍 Source Code Visualizer</title>
</head>
<body id="body">
<script>
document.addEventListener('DOMContentLoaded', function () {
var blr = document.querySelector("#Blur");
var i = 10.0
var intervalID = setInterval(function () {
if (i > 0){
blr.style.textShadow = "0 0 " + i + "px #000";
i -= 1
}
else {
clearInterval(intervalID);
blr.style.textShadow = "0 0 0px #000";
}
}, 10);
}, false);
</script>
<div id="header">
<h1 id="Blur">Source Code Visualizer</h1>
<p>{{.DisplayTitle}}</p>
<form action="/display" method="post">
<input id="scanPath" type="text" name="scanPath" placeholder="Source Code Directory">
<select id="langSelect" name="wantedExts">
<option value="*">All Files</option>
<option value=".c .cpp .h .hpp .cc .cxx">C/C++</option>
<option value=".py">Python</option>
<option value=".pl .pm">Perl</option>
<option value=".go">Go</option>
</select>
<input id="submitButton" type="submit" value="Analyse">
</form>
{{ if .ErrorStr}}
<div id="errorText"><p>{{.ErrorStr}}</p></div>
{{ else }}
<p>Hover, scroll, click, and drag to explore the source code hierchy.</p>
{{ end }}
</div>
<div id="chart"></div>
<script>
function clearChart() {
document.getElementById('chart').innerHTML = ""
}
function displayTree() {
const color = d3.scaleOrdinal(d3.schemePaired);
fetch('dirdata.json').then(res => res.json()).then(data => {
Treemap()
.data(data)
.height(window.innerHeight - document.getElementById('header').getBoundingClientRect().height - 7) // - padding from #chart
.width(window.innerWidth-14) // sum of padding on #chart
.label('name')
.size('size')
.padding(7)
.excludeRoot(true)
.color((d, parent) => color(parent ? parent.data.name : null))
.tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
(document.getElementById('chart'));
});
}
displayTree();
</script>
</body>