source-map-explorer
Version:
Analyze and debug space usage through source maps
91 lines (75 loc) • 1.73 kB
HTML
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="INSERT webtreemap.css HERE">
<title>INSERT TITLE HERE - Source Map Explorer</title>
<style>
html, body {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 0.8em;
margin: 0;
}
#map {
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
position: absolute;
cursor: pointer;
-webkit-user-select: none;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
<script>
var tree = INSERT TREE HERE;
</script>
<script src="INSERT underscore.js HERE"></script>
<script src="INSERT prettybytes.js HERE"></script>
<script src="INSERT webtreemap.js HERE"></script>
<script>
function newNode(name) {
return {
name: name,
data: {
'$area': 0
},
children: []
};
}
var treeData = newNode('/');
function addNode(path, size) {
var parts = path.split('/');
var node = treeData;
node.data['$area'] += size;
parts.forEach(function(part) {
var child = _.find(node.children, function(child) { return child.name == part; });
if (!child) {
var child = newNode(part);
node.children.push(child);
}
node = child;
node.data['$area'] += size;
});
}
function addSizeToTitle(node, total) {
var size = node.data['$area'],
pct = 100.0 * size / total;
node.name += ' • ' + prettyBytes(size) + ' • ' + pct.toFixed(1) + '%';
node.children.forEach(function(x) { addSizeToTitle(x, total) });
}
for (var source in tree) {
addNode(source, tree[source]);
}
addSizeToTitle(treeData, treeData.data['$area']);
var map = document.getElementById('map');
appendTreemap(map, treeData);
window.addEventListener('resize', function() {
appendTreemap(map, treeData);
});
</script>