Skip to content

Commit 7173b6b

Browse files
DeGraciaMathieuDeGraciaMathieu
committed
Adds interactive bubble chart for folder deps
Implements a new interactive bubble chart visualization to represent folder dependencies, offering insights into project structure and coupling. This visualization allows users to explore module relationships, identify potential instability, and understand dependencies at a high level. It includes features for customizing the displayed data (metrics, depth), highlighting dependency cycles, and exporting the chart.
1 parent a0eb62c commit 7173b6b

File tree

6 files changed

+1394
-0
lines changed

6 files changed

+1394
-0
lines changed

‎resources/views/bubble/index.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Cartographie des dépendances par dossier</title>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
9+
<link rel="stylesheet" href="../bubble/styles.css">
10+
<style>
11+
/* Élargir la zone de contenu pour cette page uniquement */
12+
.container { max-width: 1800px; }
13+
/* Augmenter la hauteur visible du SVG pour aérer */
14+
#chart { height: 800px; min-height: 800px; }
15+
.legend { max-height: 180px; overflow: auto; }
16+
.chart-title { margin-bottom: 8px; }
17+
.chart-btn { font-size: 13px; }
18+
.dep-link { pointer-events: none; }
19+
/* Autoriser pointer-events pour liens de cycle quand actif, géré inline via style */
20+
/* Styles de surbrillance */
21+
.bubble.highlight circle { stroke: #111827; stroke-width: 3; opacity: 1; }
22+
.bubble.adjacent circle { stroke: #2563eb; stroke-width: 2; opacity: 0.95; }
23+
.bubble.dimmed { opacity: 0.25; }
24+
.dep-link.highlight { stroke-width: 3 !important; opacity: 1 !important; }
25+
.dep-link.dimmed { opacity: 0.15 !important; }
26+
</style>
27+
</head>
28+
29+
<body>
30+
<div class="container">
31+
<div class="header">
32+
<h1>Cartographie des dépendances par dossier</h1>
33+
<p>Vue en bulles des relations entre dossiers de premier niveau</p>
34+
</div>
35+
36+
<div class="navigation">
37+
<div class="nav-links">
38+
<a href="../bubble/index.html">Bubble Chart</a>
39+
<a href="../circle-packing/index.html">Circle Packing</a>
40+
<a href="../heatmap/index.html">Heatmap</a>
41+
<a href="../scatterplot/index.html">Scatterplot</a>
42+
<a href="./index.html" class="active">Dossiers (Bulles)</a>
43+
</div>
44+
</div>
45+
46+
<div class="main-content">
47+
<div class="controls">
48+
<div class="form-section">
49+
<h3>Chargement du fichier d'analyse</h3>
50+
<div class="form-group">
51+
<div class="input-group">
52+
<label for="jsonFile">Fichier JSON :</label>
53+
<input type="file" id="jsonFile" accept=".json">
54+
<div class="file-info" id="fileInfo"></div>
55+
</div>
56+
57+
</div>
58+
<div class="status" id="fileStatus"></div>
59+
</div>
60+
61+
<div class="form-section">
62+
<h3>Configuration</h3>
63+
<div class="form-group">
64+
<div class="input-group">
65+
<label for="parentFolder">Dossier parent (optionnel) :</label>
66+
<input type="text" id="parentFolder" placeholder="Ex: app/Modules">
67+
</div>
68+
<div class="input-group">
69+
<label for="metricSelect">Taille des bulles basée sur :</label>
70+
<select id="metricSelect">
71+
<option value="total">Total (classes+interfaces+abstracts)</option>
72+
<option value="constant">Taille standard</option>
73+
<option value="classes">Nombre de classes</option>
74+
<option value="interfaces">Nombre d'interfaces</option>
75+
<option value="abstracts">Nombre d'abstraites</option>
76+
<option value="efferent_coupling">Efferent Coupling (Σ)</option>
77+
<option value="afferent_coupling">Afferent Coupling (Σ)</option>
78+
<option value="instability_avg">Instabilité (moyenne)</option>
79+
<option value="loc_total">Lignes de code (Σ)</option>
80+
<option value="ccn_total">Complexité cyclomatique (Σ)</option>
81+
</select>
82+
</div>
83+
<div class="input-group">
84+
<label for="colorSelect">Couleur des bulles basée sur :</label>
85+
<select id="colorSelect">
86+
<option value="group" selected>Par dossier (palette)</option>
87+
<option value="instability_avg">Instabilité (moyenne)</option>
88+
</select>
89+
</div>
90+
<div class="input-group">
91+
<label>Profondeur des dossiers :</label>
92+
<div id="depthRadios" style="display: inline-flex; gap: 10px; align-items: center;">
93+
<label style="display: inline-flex; align-items: center; gap: 4px;">
94+
<input type="radio" name="depthSelect" value="1" checked>
95+
1
96+
</label>
97+
<label style="display: inline-flex; align-items: center; gap: 4px;">
98+
<input type="radio" name="depthSelect" value="2">
99+
2
100+
</label>
101+
<label style="display: inline-flex; align-items: center; gap: 4px;">
102+
<input type="radio" name="depthSelect" value="3">
103+
3
104+
</label>
105+
<label style="display: inline-flex; align-items: center; gap: 4px;">
106+
<input type="radio" name="depthSelect" value="4">
107+
4
108+
</label>
109+
</div>
110+
</div>
111+
<button class="btn" id="analyzeBtn">Générer</button>
112+
</div>
113+
<div class="status" id="analysisStatus"></div>
114+
</div>
115+
</div>
116+
117+
<div class="chart-container">
118+
<div class="chart-controls" id="chartControls" style="display: none;">
119+
<button class="chart-btn" id="resetZoomBtn" title="Réinitialiser le zoom">🔍 Reset</button>
120+
<button class="chart-btn" id="resetFiltersBtn" title="Réafficher toutes les bulles supprimées">🧹 Filtres</button>
121+
<button class="chart-btn" id="downloadBtn" title="Télécharger en PNG">📥 PNG</button>
122+
<button class="chart-btn" id="downloadSvgBtn" title="Télécharger en SVG">📥 SVG</button>
123+
<label style="margin-left: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px;">
124+
Type dependance:
125+
<select id="cycleModeSelect" style="padding: 4px 8px; font-size: 13px;">
126+
<option value="all" selected>Toutes</option>
127+
<option value="weak">Dépendances faibles uniquement</option>
128+
<option value="direct">Cycles directs (A↔B)</option>
129+
<option value="multi">Cycles multi (A→B→C→A)</option>
130+
</select>
131+
</label>
132+
</div>
133+
134+
<div class="loading" id="loading">
135+
<div class="spinner"></div>
136+
<p>Analyse en cours...</p>
137+
</div>
138+
139+
<div class="empty-state" id="emptyState">
140+
<svg viewBox="0 0 24 24" fill="currentColor">
141+
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
142+
</svg>
143+
<h3>Aucun fichier chargé</h3>
144+
<p>Veuillez charger un fichier JSON d'analyse (dossiers → relations) pour commencer</p>
145+
</div>
146+
147+
<div class="chart-title" id="chartTitle" style="display: none;"></div>
148+
<svg id="chart" style="display: none;"></svg>
149+
<div class="legend" id="legend" style="display: none;"></div>
150+
</div>
151+
</div>
152+
</div>
153+
154+
<div class="tooltip" id="tooltip"></div>
155+
156+
<script src="js/data-processor.js"></script>
157+
<script src="js/chart-generator.js"></script>
158+
<script src="js/file-handler.js"></script>
159+
<script src="js/download-handler.js"></script>
160+
<script src="js/main.js"></script>
161+
</body>
162+
163+
</html>

0 commit comments

Comments
 (0)