Author: bpoussin Date: 2013-01-25 22:35:52 +0100 (Fri, 25 Jan 2013) New Revision: 2473 Url: http://nuiton.org/projects/nuiton-utils/repository/revisions/2473 Log: - amelioration du style du bouton download - ajout des graphes Modified: trunk/nuiton-profiling/src/main/resources/nuiton-js/wro.xml trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/index.html trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/nuiton-profiling.css trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/nuiton-profiling.js Modified: trunk/nuiton-profiling/src/main/resources/nuiton-js/wro.xml =================================================================== --- trunk/nuiton-profiling/src/main/resources/nuiton-js/wro.xml 2013-01-22 19:23:35 UTC (rev 2472) +++ trunk/nuiton-profiling/src/main/resources/nuiton-js/wro.xml 2013-01-25 21:35:52 UTC (rev 2473) @@ -6,21 +6,16 @@ <group-ref>jquery-ui</group-ref> <group-ref>jquery-ui-base</group-ref> <group-ref>jquery-ui-fr</group-ref> - <group-ref>jqplot</group-ref> - <!-- plugin jqplot --> - <group-ref>jqplot.dateAxisRenderer</group-ref> - <group-ref>jqplot.canvasAxisTickRenderer</group-ref> - <group-ref>jqplot.canvasTextRenderer</group-ref> - <group-ref>jqplot.categoryAxisRenderer</group-ref> - <group-ref>jqplot.cursor</group-ref> - <group-ref>jqplot.highlighter</group-ref> - <group-ref>jqplot.barRenderer</group-ref> - <!-- plugin jqgrid --> <group-ref>jqgrid-fr</group-ref> <group-ref>jqgrid</group-ref> + <!-- jqplot --> + <group-ref>jqplot</group-ref> + <group-ref>jqplot.pieRenderer</group-ref> + <group-ref>jqplot.highlighter</group-ref> + <!-- scpecifique nuiton profiling --> <css>/nuiton-profiling.css</css> <js>/nuiton-profiling.js</js> Modified: trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/index.html =================================================================== --- trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/index.html 2013-01-22 19:23:35 UTC (rev 2472) +++ trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/index.html 2013-01-25 21:35:52 UTC (rev 2473) @@ -43,8 +43,14 @@ <div class="container"> <div class="well"> - <span id="download">download</span> + <div id="graph"> + <div class="graph" id="graphCall"></div> + <div class="graph" id="graphTime"></div> + <div class="graph" id="graphTimeWithNest"></div> + </div> + <button class="btn btn-primary" id="download"><i class="icon-download"></i> download</button> + <table id="treegrid"></table> <div id="ptreegrid"></div> Modified: trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/nuiton-profiling.css =================================================================== --- trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/nuiton-profiling.css 2013-01-22 19:23:35 UTC (rev 2472) +++ trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/nuiton-profiling.css 2013-01-25 21:35:52 UTC (rev 2473) @@ -4,3 +4,10 @@ form { display: inline; } +#download { + margin-bottom: 5px; +} +.graph { + display: inline-block; + width: 250px; +} Modified: trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/nuiton-profiling.js =================================================================== --- trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/nuiton-profiling.js 2013-01-22 19:23:35 UTC (rev 2472) +++ trunk/nuiton-profiling/src/main/resources/org/nuiton/profiling/web/nuiton-profiling.js 2013-01-25 21:35:52 UTC (rev 2473) @@ -100,6 +100,7 @@ */ function loadData(data) { currentData = data; + createGraph(currentData); getGrid().trigger("reloadGrid") } @@ -250,3 +251,74 @@ // var result = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + "." + time.getMilliseconds(); // return result; } + +function createGraph(data) { + var callSum = 0; + var timeSum = 0; + var timeWithNestSum = 0; + var call = []; + var time = []; + var timeWithNest = []; + jQuery.each( data, function(method, info){ + + var shortName = method.replace(/[^\(]*\.([_\w\$]+\.[_\w\$]+).*/, "$1"); + + call.push([shortName, info.call]); + time.push([shortName, info.total]); + timeWithNest.push([shortName, info.total_with_nest]); + + callSum += info.call; + timeSum += info.total; + timeWithNestSum += info.total_with_nest; + }); + + graph('Call','graphCall', call, callSum); + graph('Time','graphTime', time, timeSum); + graph('Time with nest','graphTimeWithNest', timeWithNest, timeWithNestSum); +} + +/** + * @param name titre du graph + * @param id l'identifiant de l'element HTML a utiliser pour mettre le graph + * @param data les donnees de type: [ ['Heavy Industry', 12],['Retail', 9], ...] + * @param total le total de la somme des donnees + */ +function graph(name, id, data, total){ + data.sort(function(a,b) { + var result = a[1] - b[1]; + return result; + }); + data.reverse(); + data = data.slice(0, 5); + + + var others = total; + jQuery.each( data, function(i, info){ + var val = info[1]; + others -= val; + info[1] = val; + }); + + data.push(['others', others]); + + var plot = jQuery.jqplot (id, [data], { + title: name, + seriesDefaults: { + // Make this a pie chart. + renderer: jQuery.jqplot.PieRenderer, + rendererOptions: { + diameter: '200', + showDataLabels: true, + sliceMargin: 5, + startAngle: 180 + } + }, + highlighter: { + show: true, + formatString:'%s', + tooltipLocation:'se', + useAxesFormatters:false + }, + legend: {show:false, location: 's'} + }); +}