flamegraph.html in flamegraph-0.0.3

- old
+ new

@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
+
 <meta charset=utf-8 />
+
 <title>Flame Graph of Page</title>
 <style>
   .info {height: 40px;}
   .legend div {
     display: block;
@@ -70,11 +73,11 @@
     if(split.length == 1) {
       split = frame.split('/lib/');
     }
 
     split = split[Math.max(split.length-2,0)].split('/');
-    return split[split.length-1];
+    return split[split.length-1].split(':')[0];
   }
   else
   {
     return split[split.length -1].split('/')[0];
   }
@@ -224,11 +227,11 @@
 
   var gem = guessGem(this.frame);
   var stat = gemStats[gem];
 
   if(!stat) {
-    gemStats[gem] = stat = {samples: [], frames: []};
+    gemStats[gem] = stat = {name: gem, samples: [], frames: []};
   }
 
   stat.frames.push(this.frame);
   for(var j=0; j < this.width; j++){
     stat.samples.push(this.x + j);
@@ -252,27 +255,37 @@
 }
 topFrame.exclusiveCount += 1;
 lastFrame.topFrame = topFrame;
 
 var totalGems = 0;
-$.each(gemStats, function(){totalGems++;});
+$.each(gemStats, function(k,stat){
+  totalGems++;
+  stat.samples = stat.samples.getUnique();
+});
 
 
+var gemsSorted = _(gemStats).pairs()
+                          .sortBy(function(item){
+                              return -item[1].samples.length;
+                            })
+                          .map(function(item){return item[1]})
+                          .value();
+
 var currentIndex = 0;
-$.each(gemStats, function(k,stat){
+_.each(gemsSorted, function(stat){
 
   stat.color = rainbow(totalGems, currentIndex);
-  stat.samples = stat.samples.getUnique();
 
   for(var x=0; x < stat.frames.length; x++) {
     info[stat.frames[x]] = {nodes: [], samples: [], color: stat.color};
   }
 
   currentIndex += 1;
 });
 
 
+
 // see: http://bl.ocks.org/mundhradevang/1387786
 function fontSize(d,i) {
   var size = yScale(1) / 3;
   // var words = d.shortName.split(' ');
   var word = d.shortName; // words[0];
@@ -333,13 +346,13 @@
   }
 };
 
 
 // render the legend
-$.each(gemStats, function(k,v){
+_.each(gemsSorted, function(gem){
   var node = $("<div></div>")
-    .css("background-color", v.color)
-    .text(k + " " + samplePercent(v.samples.length)) ;
+    .css("background-color", gem.color)
+    .text(gem.name + " " + samplePercent(gem.samples.length)) ;
   $('.legend').append(node);
 });
 
 
 