Aggregate Timeline Measures (php-debugbar#287)

Author: dan-iway

src/DebugBar/Resources/widgets.js

@@ -428,10 +428,29 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
         render: function() {
             this.bindAttr('data', function(data) {
+
+                // ported from php DataFormatter
+                var formatDuration = function(seconds) {
+                    if (seconds < 0.001)
+                        return (seconds * 1000000).toFixed() + 'μs';
+                    else if (seconds < 1)
+                        return (seconds * 1000).toFixed(2) + 'ms';
+                    return (seconds).toFixed(2) +  's';
+                };
+
                 this.$el.empty();
                 if (data.measures) {
+                    var aggregate = {};
+
                     for (var i = 0; i < data.measures.length; i++) {
                         var measure = data.measures[i];
+
+                        if(!aggregate[measure.label])
+                            aggregate[measure.label] = { count: 0, duration: 0 };
+
+                        aggregate[measure.label]['count'] += 1;
+                        aggregate[measure.label]['duration'] += measure.duration;
+
                         var m = $('<div />').addClass(csscls('measure')),
                             li = $('<li />'),
                             left = (measure.relative_start * 100 / data.duration).toFixed(2),
@@ -468,6 +487,30 @@ if (typeof(PhpDebugBar) == 'undefined') {
                             });
                         }
                     }
+
+                    // convert to array and sort by duration
+                    aggregate = $.map(aggregate, function(data, label) {
+                       return {
+                           label: label,
+                           data: data
+                       }
+                    }).sort(function(a, b) {
+                        return b.data.duration - a.data.duration
+                    });
+
+                    // build table and add
+                    var aggregateTable = $('<table style="display: table; border: 0; width: 99%"></table>').addClass(csscls('params'));
+                    $.each(aggregate, function(i, aggregate) {
+                        width = Math.min((aggregate.data.duration * 100 / data.duration).toFixed(2), 100);
+
+                        aggregateTable.append('<tr><td class="' + csscls('name') + '">' + aggregate.data.count + ' x ' + aggregate.label + ' (' + width + '%)</td><td class="' + csscls('value') + '">' +
+                            '<div class="' + csscls('measure') +'">' +
+                                '<span class="' + csscls('value') + '" style="width:' + width + '%"></span>' +
+                                '<span class="' + csscls('label') + '">' + formatDuration(aggregate.data.duration) + '</span>' +
+                            '</div></td></tr>');
+                    });
+
+                    this.$el.append('<li/>').find('li:last').append(aggregateTable);
                 }
             });
         }