80 lines
3.0 KiB
Plaintext
80 lines
3.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>notgraph Report</title>
|
|
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
|
|
<style>
|
|
:root {{
|
|
--bg: #1a1a1a;
|
|
--bg2: #242424;
|
|
--bg3: #2e2e2e;
|
|
--border: #3a3a3a;
|
|
--text: #e0e0e0;
|
|
--text-dim: #888;
|
|
--accent: #4a9eff;
|
|
--accent2: #2a5fa0;
|
|
--node-bg: #1e3a5f;
|
|
--node-border: #4a9eff;
|
|
--heading-border: #4a9eff;
|
|
}}
|
|
* {{ box-sizing: border-box; }}
|
|
body {{ font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 2rem; max-width: 1200px; }}
|
|
h1 {{ color: var(--accent); margin-bottom: 0.5rem; }}
|
|
h2 {{ border-bottom: 2px solid var(--heading-border); padding-bottom: 0.3rem; color: var(--text); margin-top: 2rem; }}
|
|
#graph {{ height: 480px; border: 1px solid var(--border); margin-bottom: 2rem; background: var(--bg2); border-radius: 4px; }}
|
|
table {{ border-collapse: collapse; width: 100%; margin-bottom: 2rem; }}
|
|
th, td {{ border: 1px solid var(--border); padding: 0.4rem 0.8rem; text-align: left; }}
|
|
th {{ background: var(--bg3); cursor: pointer; user-select: none; color: var(--accent); }}
|
|
th:hover {{ background: var(--border); }}
|
|
td {{ background: var(--bg2); }}
|
|
tr:hover td {{ background: var(--bg3); }}
|
|
p {{ color: var(--text); }}
|
|
.ok {{ color: #4caf50; }}
|
|
.cycle {{ color: #f44336; }}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>notgraph Report</h1>
|
|
<h2>Crate Dependency Graph</h2>
|
|
<div id="graph"></div>
|
|
<script>
|
|
const nodes = new vis.DataSet([{nodes_js}]);
|
|
const edges = new vis.DataSet([{edges_js}]);
|
|
new vis.Network(document.getElementById('graph'), {{nodes, edges}}, {{
|
|
layout: {{ hierarchical: {{ direction: 'LR', sortMethod: 'directed', levelSeparation: 180 }} }},
|
|
physics: false,
|
|
edges: {{ arrows: {{ to: {{ enabled: true, scaleFactor: 0.8 }} }}, color: {{ color: '#4a9eff', opacity: 0.8 }}, smooth: {{ type: 'cubicBezier' }} }},
|
|
nodes: {{ shape: 'box', font: {{ color: '#e0e0e0', size: 14 }}, color: {{ background: '#1e3a5f', border: '#4a9eff', highlight: {{ background: '#2a5fa0', border: '#7bbfff' }} }}, margin: 8 }}
|
|
}});
|
|
</script>
|
|
<h2>Hotspots</h2>
|
|
<table id="hotspots">
|
|
<thead><tr>
|
|
<th onclick="sortTable('hotspots',0,this)">Name</th>
|
|
<th onclick="sortTable('hotspots',1,this)">Kind</th>
|
|
<th onclick="sortTable('hotspots',2,this)">Score</th>
|
|
</tr></thead>
|
|
<tbody>{hotspot_rows}</tbody>
|
|
</table>
|
|
<h2>Cycle Report</h2>
|
|
{cycle_html}
|
|
<script>
|
|
function sortTable(id, col, th) {{
|
|
const t = document.getElementById(id);
|
|
const asc = th.dataset.dir !== 'asc';
|
|
th.dataset.dir = asc ? 'asc' : 'desc';
|
|
const rows = Array.from(t.querySelectorAll('tbody tr'));
|
|
rows.sort((a, b) => {{
|
|
const av = a.cells[col].textContent.trim();
|
|
const bv = b.cells[col].textContent.trim();
|
|
const cmp = av.localeCompare(bv, undefined, {{numeric: true}});
|
|
return asc ? cmp : -cmp;
|
|
}});
|
|
const tbody = t.querySelector('tbody');
|
|
rows.forEach(r => tbody.appendChild(r));
|
|
}}
|
|
</script>
|
|
</body>
|
|
</html>
|