Skip to content

Commit

Permalink
Add HTML report samples and show snapshot of html report in readme
Browse files Browse the repository at this point in the history 
let's make this project more attractive
  • Loading branch information
@boris-42
boris-42 committed Apr 2, 2015
1 parent 9a81110 commit cb5b3f5
Show file tree
Hide file tree
Showing 9 changed files with 28,104 additions and 2 deletions.
19 changes: 17 additions & 2 deletions README.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,23 @@ Samples:
prpfimp --html "import multiprocessing"
Results
-------
Pretty HTML reports
-------------------

if you run prpfimp with --html key you will get pretty html output

.. code-block::
profimp "import collections"
.. image:: doc/source/images/collections_import_trace.png
:alt: American Gothic
:width: 650 px


Raw JSON Results
----------------

In output you will see something like:

Expand Down
Binary file added doc/source/images/collections_import_trace.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
284 changes: 284 additions & 0 deletions samples/collections.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
<!doctype html>
<html ng-app="Application">

<head>
<script> var TraceData = {
"level": 0,
"finished_at": 1.0738372802734375,
"import_line": "root",
"duration": 1.0738372802734375,
"started_at": 0.0,
"children": [
{
"level": 1,
"finished_at": 1.0709762573242188,
"import_line": "import collections",
"duration": 1.0530948638916016,
"started_at": 0.017881393432617188,
"children": [
{
"level": 2,
"finished_at": 0.2548694610595703,
"import_line": "from _abcoll import *",
"duration": 0.007867813110351562,
"started_at": 0.24700164794921875,
"children": []
},
{
"level": 2,
"finished_at": 0.26297569274902344,
"import_line": "import _abcoll",
"duration": 0.0021457672119140625,
"started_at": 0.2608299255371094,
"children": []
},
{
"level": 2,
"finished_at": 0.4508495330810547,
"import_line": "from _collections import deque, defaultdict",
"duration": 0.1850128173828125,
"started_at": 0.2658367156982422,
"children": []
},
{
"level": 2,
"finished_at": 0.45800209045410156,
"import_line": "from operator import itemgetter, eq",
"duration": 0.0030994415283203125,
"started_at": 0.45490264892578125,
"children": []
},
{
"level": 2,
"finished_at": 0.6229877471923828,
"import_line": "from keyword import iskeyword",
"duration": 0.1621246337890625,
"started_at": 0.4608631134033203,
"children": []
},
{
"level": 2,
"finished_at": 0.6299018859863281,
"import_line": "import sys",
"duration": 0.00286102294921875,
"started_at": 0.6270408630371094,
"children": []
},
{
"level": 2,
"finished_at": 0.9720325469970703,
"import_line": "import heapq",
"duration": 0.34117698669433594,
"started_at": 0.6308555603027344,
"children": [
{
"level": 3,
"finished_at": 0.8058547973632812,
"import_line": "from itertools import islice, count, imap, izip, tee, chain",
"duration": 0.003814697265625,
"started_at": 0.8020401000976562,
"children": []
},
{
"level": 3,
"finished_at": 0.8130073547363281,
"import_line": "from operator import itemgetter",
"duration": 0.0021457672119140625,
"started_at": 0.8108615875244141,
"children": []
},
{
"level": 3,
"finished_at": 0.9608268737792969,
"import_line": "from _heapq import *",
"duration": 0.1418590545654297,
"started_at": 0.8189678192138672,
"children": []
}
]
},
{
"level": 2,
"finished_at": 0.9789466857910156,
"import_line": "from itertools import repeat, chain, starmap",
"duration": 0.0030994415283203125,
"started_at": 0.9758472442626953,
"children": []
},
{
"level": 2,
"finished_at": 0.9839534759521484,
"import_line": "from itertools import imap",
"duration": 0.0021457672119140625,
"started_at": 0.9818077087402344,
"children": []
},
{
"level": 2,
"finished_at": 1.0259151458740234,
"import_line": "from thread import get_ident",
"duration": 0.0400543212890625,
"started_at": 0.9858608245849609,
"children": []
}
]
}
]
} </script>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

<style>
.trace {
min-width: 900px;
}

.trace tr.active-true {
background-color: #D9EDF7!important;
}

.trace tr td {
white-space: nowrap;
padding: 2px;
border-right: 1px solid #eee;
}

.trace tr td.level{
width: 100px;
}

.import_line{
width: 450px;
max-width: 450px;
overflow: scroll;
}

.import_line span{
font-size: 10px;
}


.trace .level {
width: 10%;
font-weight: bold;
}

.bold {
font-weight: bold;
}

div.duration {
width: 25px;
margin: 0px;
padding: 0px;
background-color: #C6F3DD;
border-radius: 4px;
font-size: 10px;

}

div.duration div{
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
}
</style>

<script type="text/ng-template" id="tree_item_renderer.html">
<div>
<table class="trace cursor_pointer_on_hover">
<tr class="active-{{hover}}"
ng-init="hover=false"
ng-mouseenter="hover=true"
ng-mouseleave="hover=false">
<td class="level"
style="padding-left:{{data.level * 5}}px;">
<button type="button"
class="btn btn-default btn-xs"
ng-disabled="data.is_leaf"
ng-click="data.hide_children=!data.hide_children">
<span class="glyphicon glyphicon-{{ (data.is_leaf) ? 'minus' : ((data.hide_children) ? 'plus': 'minus')}}"></span>
{{data.level || 0}}
</button>
</td>
<td class="{{ is_important(data) ? 'bold' : ''}} import_line" >
<span>{{data.input_line_prefix}} {{data.import_line}}</span>
</td>
<td ng-click="display(data);" class="text-center">
<div class="duration" style="width: {{get_width(data)}}%; margin-left: {{get_started(data)}}%">
<div>{{data.duration.toFixed(2)}} ms</div>
</div>
</td>
</tr>
</table>

<div ng-hide="data.hide_children">
<div ng-repeat="data in data.children"
ng-include="'tree_item_renderer.html'">
</div>
</div>
</div>

</script>

<script>
angular.module("Application", ['ui.bootstrap']);

function ProfilerCtlr($scope, $modal) {

var convert_input = function(input, full_duration){
input.is_leaf = !input.children.length
input.input_line_prefix = Array(input.level + 1).join("-")


input.hide_children = full_duration > 10 * input.duration ? true : false;

for (var i = 0; i < input.children.length; i++)
convert_input(input.children[i], full_duration);
return input;
}

$scope.get_width = function(data){
var duration = (data.duration) * 100.0 / $scope.tree[0].duration;
return (duration >= 0.5) ? duration : 0.5;
}

$scope.get_started = function(data) {
return data.started_at * 100.0 / $scope.tree[0].duration;
}

$scope.is_important = function(data) {
// we assume that point is important if import takes more then 10 ms
return data.duration > 10;
}

$scope.tree = [convert_input(TraceData, TraceData.duration)];
}

</script>
</head>

<body>
<div ng-controller="ProfilerCtlr">
<table>

</table>
<table class="trace">
<tr class="bold text-left" style="border-bottom: solid 1px gray">
<td class="level">Level</td>
<td class="import_line">Import line</td>
<td>Duration</td>
</tr>
</table>
<div ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></div>
</div>

</body>

</html>
Loading

0 comments on commit cb5b3f5

Please sign in to comment.