Commit 1189b06c authored by Pettersson Tomas's avatar Pettersson Tomas

first

parents
node_modules/
\ No newline at end of file
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\index.js"
}
]
}
\ No newline at end of file
# package-graph
## Description
A clickable interactive overview of used components/packages in stwapp
![](image.png)
## Demo
Open index.html in browser by double click or draging it to browser
## Reinstallation
To regenerate results, edit index.js 'appath' to match your local checkout of stwapp, then run
> node index.js
This source diff could not be displayed because it is too large. You can view the blob instead.
let packageGraph = {"name":"stwapp@1.0.22","size":1000,"children":[{"name":"passport-cas@1.0.2","size":1000,"children":[]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"admin@1.0.5","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"navigation@1.0.6","size":1000,"children":[{"name":"passport-cas@1.0.2","size":1000,"children":[]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"statistic@1.0.3","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"stwlayers-control@1.0.5","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"measure-control@1.0.6","size":1000,"children":[]},{"name":"fo-control@1.0.11","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"stwkit@1.0.23","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]}]},{"name":"ex-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"observation@1.0.3","size":1000,"children":[]},{"name":"stwkit@1.0.23","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]}]},{"name":"oo-control@1.0.11","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"observation@1.0.3","size":1000,"children":[]},{"name":"stwkit@1.0.23","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]}]},{"name":"os-control@1.0.9","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"stwkit@1.0.23","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]}]},{"name":"al-control@1.0.10","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"stwkit@1.0.23","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]}]},{"name":"ps-control@1.0.9","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"stwkit@1.0.23","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]}]},{"name":"sim-control@1.0.28","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"padmws-export@1.0.4","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"padmws-graph@1.0.5","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"particle-layers@1.0.6","size":1000,"children":[]},{"name":"player-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"particle-layers@1.0.6","size":1000,"children":[]}]},{"name":"stwkit@1.0.23","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]}]},{"name":"weather-control@1.0.10","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"particle-layers@1.0.6","size":1000,"children":[]},{"name":"player-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"particle-layers@1.0.6","size":1000,"children":[]}]},{"name":"stwkit@1.0.23","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"wms-store@1.0.4","size":1000,"children":[{"name":"weather-layers@1.0.1","size":1000,"children":[]}]}]},{"name":"stwkit@1.0.23","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"forcing-boundary@1.0.8","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"observation@1.0.3","size":1000,"children":[]},{"name":"wms-store@1.0.4","size":1000,"children":[{"name":"weather-layers@1.0.1","size":1000,"children":[]}]},{"name":"player-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]},{"name":"particle-layers@1.0.6","size":1000,"children":[]}]},{"name":"particle-layers@1.0.6","size":1000,"children":[]},{"name":"padmws-export@1.0.4","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"padmws-graph@1.0.5","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"coordinates-control@1.0.12","size":1000,"children":[{"name":"container-control@1.0.7","size":1000,"children":[{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]},{"name":"uikit-stw@1.0.0","size":1000,"children":[]}]}]};
\ No newline at end of file
This diff is collapsed.
image.png

159 KB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Package Graph</title>
<style>
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: white;
}
.label {
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
</style>
</head>
<body>
<svg width="960" height="960"></svg>
<script src="dist/package.graph.js"></script>
<script src="dist/d3.min.js"></script>
<script>
var root = packageGraph;
var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
var color = d3.scaleLinear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.pack()
.size([diameter - margin, diameter - margin])
.padding(2);
root = d3.hierarchy(root)
.sum(function (d) { return d.size; })
.sort(function (a, b) { return b.value - a.value; });
var focus = root,
nodes = pack(root).descendants(),
view;
var circle = g.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function (d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function (d) { return d.children ? color(d.depth) : null; })
.on("click", function (d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
var text = g.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function (d) { return d.parent === root ? 1 : 0; })
.style("display", function (d) { return d.parent === root ? "inline" : "none"; })
.text(function (d) { return d.data.name; });
var node = g.selectAll("circle,text");
svg
.style("background", color(-1))
.on("click", function () { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function (d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function (t) { zoomTo(i(t)); };
});
transition.selectAll("text")
.filter(function (d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function (d) { return d.parent === focus ? 1 : 0; })
.on("start", function (d) { if (d.parent === focus) this.style.display = "inline"; })
.on("end", function (d) { if (d.parent !== focus) this.style.display = "none"; });
}
function zoomTo(v) {
var k = diameter / v[2]; view = v;
node.attr("transform", function (d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function (d) { return d.r * k; });
}
</script>
</body>
</html>
\ No newline at end of file
const fs = require('fs-extra');
const createPackageGraph = require('./lib/create-package-graph');
const appath = "D:\\gitrepo\\stw\\wg\\stwapp";
fs.mkdirpSync('dist');
fs.writeFileSync('dist/package.graph.js', createPackageGraph(appath));
fs.copySync('node_modules/d3/build/d3.min.js', 'dist/d3.min.js');
const fs = require('fs-extra');
const findUp = require('find-up');
const path = require('path');
const nodeList = Object.create(null);
function findNearestPackage(cwd) {
let packagePath = findUp.sync('package.json', { cwd });
return fs.readJsonSync(packagePath);
}
function initNode(dir, package, options = {}) {
let name = `${package.name}@${package.version}`;
let node = nodeList[name] = {
name,
size: 1000,
children: []
};
let deps = Object.keys(package.dependencies || []);
let devDeps = Object.keys(package.devDependencies || []);
deps = deps.concat(devDeps);
for (let i = 0; i < deps.length; i++) {
let dep = deps[i];
let depPath = dir + '\\node_modules\\' + dep;
if (fs.existsSync(depPath)) {
let depPackage = findNearestPackage(depPath);
if (depPackage.repository && depPackage.repository.url && depPackage.repository.url.includes('git.smhi.se')) {
let depNode = initNode(dir, depPackage);
node.children.push(depNode);
}
}
}
return node;
}
module.exports = function createPackageGraph(dir) {
if (!dir) dir = process.cwd();
let startingPackage = findNearestPackage(dir);
let rootNode = initNode(dir, startingPackage, {
includeDevDeps: false
});
return 'let packageGraph = ' + JSON.stringify(nodeList[Object.keys(nodeList)[0]]) + ';';
}
This diff is collapsed.
{
"name": "package-graph",
"version": "1.0.0",
"description": "Visualize your npm package graph",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"graph",
"visualization",
"package"
],
"author": "Trent Willis <trentmwillis@gmail.com>",
"license": "MIT",
"dependencies": {
"commander": "^2.9.0",
"d3": "^4.5.0",
"find-up": "^2.1.0",
"fs-extra": "^2.0.0"
},
"devDependencies": {
"mocha": "^3.2.0"
},
"bin": {
"package-graph": "bin/package-graph"
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment