Merge pull request #3 from netsage-project/render-fix

visual fixes
netsage-project · Feb 13, 2020 · 4677041 · 4677041
2 parents 5148af2 + 0be23fb
commit 4677041
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 16 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -4,21 +4,22 @@
 
 div.tooltip {	
     position: absolute;			
-    text-align: center;
+    text-align: left;
     color: black;			
-    width: 60px;					
-    height: 28px;					
-    padding: 5px;				
+    width: 200px;					
+    height: auto;					
+    padding: 8px 8px 0px 8px;				
     font: 12px sans-serif;		
-    background: lightsteelblue;	
-    border: 0px;		
+    background: #dde4ed;	
+    border: 5px solid white;		
     border-radius: 8px;			
-    pointer-events: none;			
+    pointer-events: none;	
 }
 
 .header-text {
     font-weight: bold;
     text-align: center;
+    font-size: 14px;
 }
 
 .tick {

diff --git a/src/js/parser.js b/src/js/parser.js
@@ -87,13 +87,21 @@ module.exports = function ParseData(data, num_pairs) {
     console.log("max val: " + max_value);
 
     for (i in top_10_pairs) {
-        let color_scale = Math.floor(top_10_pairs[i][2] / max_value * 10)
+        let color_scale = Math.ceil(top_10_pairs[i][2] / max_value * 10)
         if (color_scale > 0) {
             color_scale--;
         }
         top_10_pairs[i].coords[0].color = color_palette[color_scale];
+
+        // add source/dest to coords
+        top_10_pairs[i].coords[0].source = top_10_pairs[i][0];
+        top_10_pairs[i].coords[0].dest = top_10_pairs[i][1];
     }
 
+
+
+
+
     console.log(top_10_pairs)
 
     let objToReturn = {

diff --git a/src/js/svghandler.js b/src/js/svghandler.js
@@ -139,7 +139,7 @@ class SvgHandler {
                 //     var color = "rgba(51, 102, 255," + alpha + ")";
                 //     return color;
                 // })
-                .attr("stroke-width", w(top_10_pairs[i][2]))
+                .attr("stroke-width", 8) // w(top_10_pairs[i][2]))
                 .attr("d", d3.line()
                     .x(function (d) { return x(d.x) })
                     .y(function (d) {
@@ -150,30 +150,37 @@ class SvgHandler {
                         }
                     }))
                 .on("mouseover", function (d) {
-                    d3.select(this).attr("stroke", "darkblue")
+                    d3.select(this).attr("stroke", "orange")
                         .attr("class", "path-hover");
                     div.transition()
                         .duration(200)
                         .style("opacity", .9);
                     div.html(() => {                    // takes in value in BYTES and converts to appropriate MB,GB, etc
-                        var value = d[0].value;
-                        value = value / 1000
+                        var value = d[0].value 
+                        value = value / 1000;
+                        var volume = value;
                         if (value < 1000) {
-                            return (Math.round(value * 10) / 10) + "KB";
+                            volume = (Math.round(value * 10) / 10) + " KB";
                         } else {
                             value = value / 1000;
                             if (value < 1000) {
-                                return (Math.round(value * 10) / 10) + "MB"
+                                volume = (Math.round(value * 10) / 10) + " MB"
                             } else {
                                 value = value / 1000;
                                 if (value < 1000) {
-                                    return (Math.round(value * 10) / 10) + "GB"
+                                    volume = (Math.round(value * 10) / 10) + " GB"
                                 } else {
                                     value = value / 1000;
-                                    return (Math.round(value * 10) / 10) + "TB"
+                                    if (value < 1000) {
+                                        volume = (Math.round(value * 10) / 10) + " TB"
+                                    } else {
+                                        volume = (Math.round(value * 10) / 10) + " PB"
+                                    }
                                 }
                             }
                         }
+                        var text = "<p><b>Source:</b> " + d[0].source + "</p><p><b>Destination:</b> " + d[0].dest + "</p><p><b>Volume:</b> " + volume;
+                        return text;
                     })
                         .style("left", (d3.event.pageX) + "px")
                         .style("top", (d3.event.pageY - 28) + "px")

diff --git a/src/slope_graph.js b/src/slope_graph.js
@@ -101,3 +101,5 @@ export class SlopeGraph extends MetricsPanelCtrl {
 }
 
 SlopeGraph.templateUrl = 'module.html';
+
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -101,3 +101,5 @@ export class SlopeGraph extends MetricsPanelCtrl {
		}

		SlopeGraph.templateUrl = 'module.html';