feat(notgraph): heatmap coloring, symbol counts, per-crate module graphs, cycle callouts
This commit is contained in:
@@ -13,12 +13,15 @@
|
||||
--text: #e0e0e0;
|
||||
--accent: #4a9eff;
|
||||
--heading-border: #4a9eff;
|
||||
--cycle-bg: #3a1a1a;
|
||||
--cycle-text: #f44336;
|
||||
}}
|
||||
* {{ 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; }}
|
||||
h2 {{ border-bottom: 2px solid var(--heading-border); padding-bottom: 0.3rem; color: var(--text); margin-top: 2.5rem; }}
|
||||
h3 {{ color: var(--accent); margin-top: 1.5rem; margin-bottom: 0.5rem; }}
|
||||
.graph-wrap {{ background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; margin-bottom: 1.5rem; 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); }}
|
||||
@@ -26,16 +29,30 @@
|
||||
td {{ background: var(--bg2); }}
|
||||
tr:hover td {{ background: var(--bg3); }}
|
||||
p {{ color: var(--text); }}
|
||||
.cycle-entry {{ background: var(--cycle-bg); color: var(--cycle-text); padding: 0.4rem 0.8rem; border-left: 3px solid var(--cycle-text); border-radius: 2px; font-family: monospace; }}
|
||||
.legend {{ display: flex; gap: 1.5rem; margin-bottom: 1rem; font-size: 0.85rem; color: #888; }}
|
||||
.legend-item {{ display: flex; align-items: center; gap: 0.4rem; }}
|
||||
.legend-swatch {{ width: 14px; height: 14px; border-radius: 2px; border: 1px solid #4a9eff; }}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>notgraph Report</h1>
|
||||
|
||||
<h2>Crate Dependency Graph</h2>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-swatch" style="background:#1e3a5f"></div> low fan-in</div>
|
||||
<div class="legend-item"><div class="legend-swatch" style="background:#1e72ff"></div> high fan-in</div>
|
||||
<div class="legend-item"><div class="legend-swatch" style="background:#7a1a1a;border-color:#f44336"></div> cycle</div>
|
||||
</div>
|
||||
<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>Module Graphs</h2>
|
||||
{module_diagrams}
|
||||
|
||||
<h2>Hotspots</h2>
|
||||
<table id="hotspots">
|
||||
<thead><tr>
|
||||
@@ -45,8 +62,10 @@
|
||||
</tr></thead>
|
||||
<tbody>{hotspot_rows}</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Cycle Report</h2>
|
||||
{cycle_html}
|
||||
|
||||
<script>
|
||||
mermaid.initialize({{ startOnLoad: true }});
|
||||
function sortTable(id, col, th) {{
|
||||
|
||||
Reference in New Issue
Block a user