From e2268f682b77fdff1db5ddc6c410e226eb3dc1d5 Mon Sep 17 00:00:00 2001 From: Josh Blum Date: Mon, 4 Mar 2013 02:08:50 -0600 Subject: stats: sweet pie charts for per block stats --- python/gras/stats/charts.js | 91 +++++++++++++++++++++++++++++++++++-------- python/gras/stats/main.css | 3 +- python/gras/stats/main.html | 5 ++- python/gras/stats/main.js | 4 +- python/gras/stats/registry.js | 1 + python/gras/stats/utils.js | 12 ++++++ 6 files changed, 96 insertions(+), 20 deletions(-) (limited to 'python/gras') 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(''); + var 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(' '); +} + +var gras_setup_per_block_charts = function(id, registry) +{ + var div = $('#per_block_charts'); + var table = $(''); + table.attr('name', id); + div.append(table); + table.append(''); + $('th:last', table).text(id); + table.append(''); + 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(''); - var 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(' '); + 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 @@

GRAS Status Monitor

- + @@ -46,6 +46,9 @@
Overall chart config
Throughput options
Updates/sec:
+
+ +
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()), + }; +} -- cgit