Update network-connections-chart.html
Costa Tsaousis committed
Feb 3, 2024 at 11:41 UTC
a4abbc62813f2f1b3ee0ec8c39bcbc4b49c50ac5
1 file changed
+50
-5
collectors/network-viewer.plugin/network-connections-chart.html
+50
-5
@@ -11,6 +11,7 @@
11
padding: 0;
12
height: 100%;
13
width: 100%;
14
+ overflow: hidden;
15
}
16
17
#d3-canvas {
@@ -284,9 +285,6 @@
285
}
286
287
function drawInitialChart(svg, data, w, h, borderPadding, theme) {
287
- console.log("drawInitialChart");
288
- d3.select("#d3-canvas").selectAll("svg > *").remove()
289
-
288
const cw = w / 2;
289
const ch = h / 2;
290
@@ -309,6 +307,7 @@
307
.style("stop-color", getRgbColor(theme.clientColor, 0));
308
309
svg.append("rect")
310
+ .attr("id", "clientsGradientRect")
311
.attr("x", 0)
312
.attr("y", 0)
313
.attr("width", "100%")
@@ -342,6 +341,7 @@
341
.style("stop-color", getRgbColor(theme.serverColor, 0));
342
343
svg.append("rect")
344
+ .attr("id", "serversGradientRect")
345
.attr("x", 0)
346
.attr("y", h - borderPadding / 2)
347
.attr("width", "100%")
@@ -375,6 +375,7 @@
375
.style("stop-color", getRgbColor(theme.publicColor, 0));
376
377
svg.append("rect")
378
+ .attr("id", "publicGradientRect")
379
.attr("x", w - borderPadding / 2)
380
.attr("y", 0)
381
.attr("width", borderPadding / 2)
@@ -410,6 +411,7 @@
411
.style("stop-color", getRgbColor(theme.privateColor, 0));
412
413
svg.append("rect")
414
+ .attr("id", "privateGradientRect")
415
.attr("x", 0)
416
.attr("y", 0)
417
.attr("width", borderPadding / 2)
@@ -429,6 +431,46 @@
431
.style("fill", theme.borderFontColor);
432
}
433
434
+ function updateGradientBoxes(svg, w, h, borderPadding, theme) {
435
+ // Assuming the IDs for gradients are set during their creation, update here accordingly
436
+
437
+ // Update clientsGradient (top gradient) - mainly adjusting width
438
+ svg.select("rect#clientsGradientRect")
439
+ .attr("width", w); // Stretch across the new width
440
+
441
+ // Update text position if necessary
442
+ svg.select("text#clientsText")
443
+ .attr("x", w / 2); // Center text
444
+
445
+ // Update serversGradient (bottom gradient) - adjust Y position and width
446
+ svg.select("rect#serversGradientRect")
447
+ .attr("y", h - borderPadding / 2) // Move to the new bottom position
448
+ .attr("width", w) // Stretch across the new width
449
+ .attr("fill", "red");
450
+
451
+ // Update text position if necessary
452
+ svg.select("text#serversText")
453
+ .attr("x", w / 2) // Center text
454
+ .attr("y", h - borderPadding / 2 + 16); // Adjust based on your specific offset
455
+
456
+ // Update publicGradient (right gradient) - adjust X position and height
457
+ svg.select("rect#publicGradientRect")
458
+ .attr("x", w - borderPadding / 2) // Move to the new right side position
459
+ .attr("height", h); // Stretch across the new height
460
+
461
+ // Update text position if necessary, adjusting for rotation
462
+ svg.select("text#publicText")
463
+ .attr("transform", `rotate(90, ${w - (borderPadding / 2)}, ${h / 2})`);
464
+
465
+ // Update privateGradient (left gradient) - height adjustment only as it's already at x = 0
466
+ svg.select("rect#privateGradientRect")
467
+ .attr("height", h); // Stretch across the new height
468
+
469
+ // Update text position if necessary, adjusting for rotation
470
+ svg.select("text#privateText")
471
+ .attr("transform", `rotate(-90, ${borderPadding / 2 - 10}, ${h / 2})`);
472
+ }
473
+
474
let positionsMap = new Map();
475
function saveCurrentPositions(svg) {
476
svg.selectAll('.app').each(function(d) {
@@ -547,7 +589,8 @@
589
function drawApplications(data, w, h, borderPadding, theme) {
590
let svg = d3.select('#d3-canvas').select('svg');
591
550
- if(svg.empty() || forceInit) {
592
+ if(svg.empty()) {
593
+ svg = d3.select('#d3-canvas').select('svg');
594
svg = d3.select('#d3-canvas').append('svg')
595
.attr('width', '100%')
596
.attr('height', '100%');
@@ -556,6 +599,8 @@
599
forceInit = false;
600
}
601
602
+ updateGradientBoxes(svg, w, h, borderPadding, theme);
603
+
604
const app = updateApps(svg, data, w, h, borderPadding, theme);
605
606
app.transition().duration(5000)
@@ -616,7 +661,7 @@
661
}
662
663
// Debounce function to optimize performance
619
- function debounce(func, timeout = 300) {
664
+ function debounce(func, timeout = 50) {
665
let timer;
666
return (...args) => {
667
clearTimeout(timer);