74 lines
2.2 KiB
HTML
Executable file
74 lines
2.2 KiB
HTML
Executable file
<head>
|
|
<style> body { margin: 0; } </style>
|
|
|
|
<script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>
|
|
<script src="//unpkg.com/dat.gui"></script>
|
|
<script src="//unpkg.com/d3-octree"></script>
|
|
<script src="//unpkg.com/d3-force-3d"></script>
|
|
|
|
<script src="//unpkg.com/3d-force-graph"></script>
|
|
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
|
</head>
|
|
|
|
<body>
|
|
<div id="graph"></div>
|
|
|
|
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
|
|
<script type="module">
|
|
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
|
|
|
|
// controls
|
|
const controls = { 'DAG Orientation': 'lr'};
|
|
const gui = new dat.GUI();
|
|
gui.add(controls, 'DAG Orientation', ['lr', 'td', 'zout', 'radialout', null])
|
|
.onChange(orientation => graph && graph.dagMode(orientation));
|
|
|
|
// graph config
|
|
const graph = ForceGraph3D()
|
|
.backgroundColor('#101020')
|
|
.linkColor(() => 'rgba(255, 255, 255, 0.6)')
|
|
.dagMode('lr')
|
|
.onDagError(() => false)
|
|
.dagLevelDistance(180)
|
|
.nodeId('package')
|
|
.linkCurvature(0.07)
|
|
.nodeThreeObject(node => {
|
|
const sprite = new SpriteText(node.package);
|
|
sprite.material.depthWrite = false;
|
|
sprite.color = 'lightsteelblue';
|
|
sprite.textHeight = 8;
|
|
return sprite;
|
|
})
|
|
.d3Force('collide', d3.forceCollide(13))
|
|
.d3AlphaDecay(0.02)
|
|
.d3VelocityDecay(0.3);
|
|
|
|
fetch('../../yarn.lock')
|
|
.then(r => r.text())
|
|
.then(text => {
|
|
const yarnlock = _yarnpkg_lockfile.parse(text);
|
|
if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
|
|
return yarnlock.object;
|
|
})
|
|
.then(yarnlock => {
|
|
const nodes = [];
|
|
const links = [];
|
|
|
|
Object.entries(yarnlock).forEach(([pkg, details]) => {
|
|
nodes.push({
|
|
package: pkg,
|
|
version: details.version
|
|
});
|
|
|
|
if (details.dependencies) {
|
|
Object.entries(details.dependencies).forEach(([dep, version]) => {
|
|
links.push({source: pkg, target: `${dep}@${version}`});
|
|
});
|
|
}
|
|
});
|
|
|
|
graph(document.getElementById('graph'))
|
|
.graphData({ nodes, links });
|
|
});
|
|
</script>
|
|
</body>
|