stats: sweet pie charts for per block stats

6 files changed, 96 insertions, 20 deletions

diff --git a/python/gras/stats/charts.js b/python/gras/stats/charts.js
index acb07d7..1af39bb 100644
--- a/python/gras/stats/charts.js
+++ b/python/gras/stats/charts.js
@@ -2,6 +2,12 @@
  * charts and visualization stuff
  **********************************************************************/
 
+var gras_animate_show_hide = function(elem, show)
+{
+    if (show) elem.slideDown("fast");
+    else elem.slideUp("fast");
+}
+
 var gras_setup_overall_chart = function(registry)
 {
     var div = $('#overall_chart:first');
@@ -10,6 +16,41 @@ var gras_setup_overall_chart = function(registry)
     registry.overall_chart = chart;
 }
 
+var gras_setup_per_block_enable_checkbox = function(elem, id, registry)
+{
+    $(elem).append('<label>' + id + '</label>');
+    var input = $('<input />').attr({
+        type: 'checkbox',
+        name: id
+    });
+    registry.block_enables[id] = true;
+    input.attr('checked', registry.block_enables[id]);
+    input.change(function()
+    {
+        registry.block_enables[id] = input.is(':checked');
+        gras_update_throughput_chart(registry);
+        var div = $('#per_block_charts');
+        gras_animate_show_hide($('table[name="' + id + '"]', div), registry.block_enables[id]);
+    });
+    $(elem).append(input);
+    $(elem).append('&nbsp;');
+}
+
+var gras_setup_per_block_charts = function(id, registry)
+{
+    var div = $('#per_block_charts');
+    var table = $('<table />');
+    table.attr('name', id);
+    div.append(table);
+    table.append('<tr><th></th></tr>');
+    $('th:last', table).text(id);
+    table.append('<tr><td></td></tr>');
+    var td = $('td:last', table);
+    var chart = new google.visualization.PieChart(td.get(0));
+    registry.block_charts[id] = chart;
+
+}
+
 var gras_setup_individual_charts = function(registry)
 {
     var point = registry.history[0];
@@ -18,20 +59,8 @@ var gras_setup_individual_charts = function(registry)
     var count = 0;
     $.each(registry.getBlockIds(), function(index, id)
     {
-        $(config).append('<label>' + id + '</label>');
-        var input = $('<input />').attr({
-            type: 'checkbox',
-            name: id
-        });
-        registry.block_enables[id] = true;
-        input.attr('checked', registry.block_enables[id]);
-        input.change(function()
-        {
-            registry.block_enables[id] = input.is(':checked');
-            gras_update_throughput_chart(registry);
-        });
-        $(config).append(input);
-        $(config).append('&nbsp;');
+        gras_setup_per_block_enable_checkbox(config, id, registry);
+        gras_setup_per_block_charts(id, registry);
         count++;
         if (count == Math.round(registry.getBlockIds().length/2))
         {
@@ -43,6 +72,36 @@ var gras_setup_individual_charts = function(registry)
 
 }
 
+var gras_update_per_block_chart = function(id, registry)
+{
+    var point = registry.history[registry.history.length-1];
+    var percents = gras_extract_percent_times(point, id);
+    var data = google.visualization.arrayToDataTable([
+          ['Task', 'Percent'],
+          ['Work prep', percents['prep']],
+          ['Work task', percents['work']],
+          ['Work post', percents['post']],
+          ['Input tasks', percents['input']],
+          ['Output tasks', percents['output']],
+    ]);
+
+    var options = {
+        width:$('#page').width()/5,
+        chartArea:{left:5,top:0,right:5,bottom:0,width:"100%",height:"100%"},
+    };
+
+    var chart = registry.block_charts[id];
+    chart.draw(data, options);
+}
+
+var gras_update_per_block_charts = function(registry)
+{
+    if (registry.history.length == 0) return;
+    $.each(registry.getBlockIds(), function(index, id)
+    {
+        gras_update_per_block_chart(id, registry);
+    });
+}
 
 var gras_update_throughput_chart = function(registry)
 {
@@ -76,9 +135,9 @@ var gras_update_throughput_chart = function(registry)
     var chart_data = google.visualization.arrayToDataTable(data_set);
     var options = {
         width:$('#page').width()*0.9,
-        height:'300',
+        height:'250',
         chartArea:{left:0,top:0,right:0,bottom:0,width:"100%",height:"85%"},
-        legend: {'position': 'bottom'}
+        legend: {'position': 'bottom'},
     };
     registry.overall_chart.draw(chart_data, options);
 
diff --git a/python/gras/stats/main.css b/python/gras/stats/main.css
index bfa15d9..84023fe 100644
--- a/python/gras/stats/main.css
+++ b/python/gras/stats/main.css
@@ -10,8 +10,9 @@ color:black;
 background-color:white;
 }
 
-#overall_charts
+#per_block_charts table
 {
+float:left;
 }
 
 #overall_config
diff --git a/python/gras/stats/main.html b/python/gras/stats/main.html
index 02496a5..4032d79 100644
--- a/python/gras/stats/main.html
+++ b/python/gras/stats/main.html
@@ -21,7 +21,7 @@
     <h1>GRAS Status Monitor</h1>
     <div id="overall_config">
         <table>
-        <tr><th colspan="2">Overall chart config</th></tr>
+        <tr><th colspan="2">Throughput options</th></tr>
         <tr>
             <td colspan="2">Updates/sec: <input type="number" name="rate" min="1" max="10" size="4" /></td>
         </tr>
@@ -46,6 +46,9 @@
         </tr>
         </table>
     </div>
+    <div id="per_block_charts">
+    
+    </div>
 </body>
 
 </html>
diff --git a/python/gras/stats/main.js b/python/gras/stats/main.js
index c12b8e7..35287cc 100644
--- a/python/gras/stats/main.js
+++ b/python/gras/stats/main.js
@@ -16,6 +16,7 @@ var gras_query_stats = function(registry)
                 {
                     registry.appendPoint(xml);
                     gras_update_throughput_chart(registry);
+                    gras_update_per_block_charts(registry);
                 }
 
                 var onceHandle = window.setTimeout(function()
@@ -59,8 +60,7 @@ var gras_stats_main = function()
     overall_show.change(function()
     {
         var chart = $('#overall_chart');
-        if (overall_show.is(':checked')) chart.slideDown("slow");
-        else chart.slideUp("slow");
+        gras_animate_show_hide(chart, overall_show.is(':checked'));
     });
 
     gras_setup_overall_chart(registry);
diff --git a/python/gras/stats/registry.js b/python/gras/stats/registry.js
index 04e74b7..e663583 100644
--- a/python/gras/stats/registry.js
+++ b/python/gras/stats/registry.js
@@ -9,6 +9,7 @@ var GrasStatsRegistry = function()
     this.block_enables = new Array();
     this.overall_rate = 2.0;
     this.overall_active = true;
+    this.block_charts = new Array();
 }
 
 GrasStatsRegistry.prototype.appendPoint = function(point)
diff --git a/python/gras/stats/utils.js b/python/gras/stats/utils.js
index 952e76b..de123ff 100644
--- a/python/gras/stats/utils.js
+++ b/python/gras/stats/utils.js
@@ -33,3 +33,15 @@ var gras_extract_throughput = function(point, id)
     var total_items = gras_extract_total_items(point, id);
     return (total_items*tps)/(stats_time-start_time);
 }
+
+var gras_extract_percent_times = function(point, id)
+{
+    var block_data = $('block[id="' + id + '"]', point);
+    return {
+        prep: parseInt($('total_time_prep', block_data).text()),
+        work: parseInt($('total_time_work', block_data).text()),
+        post: parseInt($('total_time_post', block_data).text()),
+        input: parseInt($('total_time_input', block_data).text()),
+        output: parseInt($('total_time_output', block_data).text()),
+    };
+}