50 lines
1.7 KiB
Plaintext
50 lines
1.7 KiB
Plaintext
|
{% layout 'layout.liquid' %}
|
||
|
|
|
||
|
|
{% block head %}
|
||
|
|
<script src="/static/lib/sigma.min.js"></script>
|
||
|
|
<script src="/static/lib/graphology.umd.min.js"></script>
|
||
|
|
|
||
|
|
<title>Depyth</title>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<main class="p-4 flex-1 flex flex-col container mx-auto">
|
||
|
|
<header class="w-fit mx-auto mb-8">
|
||
|
|
<h1 class="text-5xl my-4 text-center">Depyth</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<h2 class="text-4xl my-3">Analysis of your requirements.txt</h2>
|
||
|
|
|
||
|
|
<h3 class="text-3xl my-3">General</h3>
|
||
|
|
|
||
|
|
<p>Installing your requirements.txt would mean installing up to <span class="font-bold">{{ nb_deps }}</span> packages, for a total download size of around <span class="font-bold">{{totalWeight.value}}</span>.</p>
|
||
|
|
<p>Note: this estimation does not take into account platforms and architectures, and includes all optional packages.</p>
|
||
|
|
|
||
|
|
<h3 class="text-3xl my-3">Weight chart</h3>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="grid grid-cols-[auto_1fr]">
|
||
|
|
{% for package in packageByWeight %}
|
||
|
|
<div class="flex flex-col justify-center h-16">
|
||
|
|
<p class="w-fit text-xl font-bold">{{package.name}}</p>
|
||
|
|
<p>{{package.humanWeight}} - {{ package.weight | divided_by: totalWeight.raw | times: 100 | round }}%</p>
|
||
|
|
</div>
|
||
|
|
<progress value="{{ package.weight }}" max="{{ totalWeight.raw }}" min="0" class="w-full h-16"></progress>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 class="text-3xl my-3">Dependency graph</h3>
|
||
|
|
|
||
|
|
<div id="graph" class="w-full h-[60vh] bg-white border border-black"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const graph = new graphology.Graph();
|
||
|
|
|
||
|
|
graph.import( JSON.parse(`{{ graph | json }}`) );
|
||
|
|
|
||
|
|
// Instantiate sigma.js and render the graph
|
||
|
|
const sigmaInstance = new Sigma(graph, document.getElementById("graph"));
|
||
|
|
</script>
|
||
|
|
</main>
|
||
|
|
{% endblock %}
|