Files
notfiles/crates/notgraph/templates/report.html.template

69 lines
2.5 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>notgraph Report</title>
<script src="https://unpkg.com/mermaid@11/dist/mermaid.min.js"></script>
<style>
:root {{
--bg: #1a1a1a;
--bg2: #242424;
--bg3: #2e2e2e;
--border: #3a3a3a;
--text: #e0e0e0;
--accent: #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-wrap {{ background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; margin-bottom: 2rem; overflow-x: auto; }}
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); }}
</style>
</head>
<body>
<h1>notgraph Report</h1>
<h2>Crate Dependency Graph</h2>
<div class="graph-wrap">
<pre class="mermaid">
%%{{init: {{'theme':'dark','themeVariables':{{'darkMode':true,'background':'#242424','primaryColor':'#1e3a5f','primaryBorderColor':'#4a9eff','primaryTextColor':'#e0e0e0','lineColor':'#4a9eff','edgeLabelBackground':'#242424'}}}}}}%%
{graph_diagram}</pre>
</div>
<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>
mermaid.initialize({{ startOnLoad: true }});
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>