1<!DOCTYPE html>
2<html lang="en">
3 <head>
4  <meta charset="UTF-8">
5  <title>Dashboard for %s</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link href="css/bootstrap.min.css" rel="stylesheet">
8  <link href="css/nv.d3.min.css" rel="stylesheet">
9  <link href="css/style.css" rel="stylesheet">
10  <!--[if lt IE 9]>
11  <script src="js/html5shiv.min.js"></script>
12  <script src="js/respond.min.js"></script>
13  <![endif]-->
14 </head>
15 <body>
16  <header>
17   <div class="container">
18    <div class="row">
19     <div class="col-md-12">
20      <ol class="breadcrumb">
21        <li><a href="index.html">%s</a></li>
22        <li class="active">(Dashboard)</li>
23
24      </ol>
25     </div>
26    </div>
27   </div>
28  </header>
29  <div class="container">
30   <div class="row">
31    <div class="col-md-12">
32     <h2>Classes</h2>
33    </div>
34   </div>
35   <div class="row">
36    <div class="col-md-6">
37     <h3>Coverage Distribution</h3>
38     <div id="classCoverageDistribution" style="height: 300px;">
39       <svg></svg>
40     </div>
41    </div>
42    <div class="col-md-6">
43     <h3>Complexity</h3>
44     <div id="classComplexity" style="height: 300px;">
45       <svg></svg>
46     </div>
47    </div>
48   </div>
49   <div class="row">
50    <div class="col-md-6">
51     <h3>Insufficient Coverage</h3>
52     <div class="scrollbox">
53      <table class="table">
54       <thead>
55        <tr>
56         <th>Class</th>
57         <th class="text-right">Coverage</th>
58        </tr>
59       </thead>
60       <tbody>
61       <tr><td><a href="BankAccount.php.html#2">BankAccount</a></td><td class="text-right">50%</td></tr>
62
63       </tbody>
64      </table>
65     </div>
66    </div>
67    <div class="col-md-6">
68     <h3>Project Risks</h3>
69     <div class="scrollbox">
70      <table class="table">
71       <thead>
72        <tr>
73         <th>Class</th>
74         <th class="text-right"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></th>
75        </tr>
76       </thead>
77       <tbody>
78       <tr><td><a href="BankAccount.php.html#2">BankAccount</a></td><td class="text-right">8</td></tr>
79
80       </tbody>
81      </table>
82     </div>
83    </div>
84   </div>
85   <div class="row">
86    <div class="col-md-12">
87     <h2>Methods</h2>
88    </div>
89   </div>
90   <div class="row">
91    <div class="col-md-6">
92     <h3>Coverage Distribution</h3>
93     <div id="methodCoverageDistribution" style="height: 300px;">
94       <svg></svg>
95     </div>
96    </div>
97    <div class="col-md-6">
98     <h3>Complexity</h3>
99     <div id="methodComplexity" style="height: 300px;">
100       <svg></svg>
101     </div>
102    </div>
103   </div>
104   <div class="row">
105    <div class="col-md-6">
106     <h3>Insufficient Coverage</h3>
107     <div class="scrollbox">
108      <table class="table">
109       <thead>
110        <tr>
111         <th>Method</th>
112         <th class="text-right">Coverage</th>
113        </tr>
114       </thead>
115       <tbody>
116       <tr><td><a href="BankAccount.php.html#11"><abbr title="BankAccount::setBalance">setBalance</abbr></a></td><td class="text-right">0%</td></tr>
117
118       </tbody>
119      </table>
120     </div>
121    </div>
122    <div class="col-md-6">
123     <h3>Project Risks</h3>
124     <div class="scrollbox">
125      <table class="table">
126       <thead>
127        <tr>
128         <th>Method</th>
129         <th class="text-right"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></th>
130        </tr>
131       </thead>
132       <tbody>
133       <tr><td><a href="BankAccount.php.html#11"><abbr title="BankAccount::setBalance">setBalance</abbr></a></td><td class="text-right">6</td></tr>
134
135       </tbody>
136      </table>
137     </div>
138    </div>
139   </div>
140   <footer>
141    <hr/>
142    <p>
143     <small>Generated by <a href="https://github.com/sebastianbergmann/php-code-coverage" target="_top">php-code-coverage %s</a> using <a href="%s" target="_top">%s</a> at %s.</small>
144    </p>
145   </footer>
146  </div>
147  <script src="js/jquery.min.js" type="text/javascript"></script>
148  <script src="js/bootstrap.min.js" type="text/javascript"></script>
149  <script src="js/holder.min.js" type="text/javascript"></script>
150  <script src="js/d3.min.js" type="text/javascript"></script>
151  <script src="js/nv.d3.min.js" type="text/javascript"></script>
152  <script type="text/javascript">
153$(document).ready(function() {
154  nv.addGraph(function() {
155    var chart = nv.models.multiBarChart();
156    chart.tooltips(false)
157      .showControls(false)
158      .showLegend(false)
159      .reduceXTicks(false)
160      .staggerLabels(true)
161      .yAxis.tickFormat(d3.format('d'));
162
163    d3.select('#classCoverageDistribution svg')
164      .datum(getCoverageDistributionData([0,0,0,0,0,0,1,0,0,0,0,0], "Class Coverage"))
165      .transition().duration(500).call(chart);
166
167    nv.utils.windowResize(chart.update);
168
169    return chart;
170  });
171
172  nv.addGraph(function() {
173    var chart = nv.models.multiBarChart();
174    chart.tooltips(false)
175      .showControls(false)
176      .showLegend(false)
177      .reduceXTicks(false)
178      .staggerLabels(true)
179      .yAxis.tickFormat(d3.format('d'));
180
181    d3.select('#methodCoverageDistribution svg')
182      .datum(getCoverageDistributionData([1,0,0,0,0,0,0,0,0,0,0,3], "Method Coverage"))
183      .transition().duration(500).call(chart);
184
185    nv.utils.windowResize(chart.update);
186
187    return chart;
188  });
189
190  function getCoverageDistributionData(data, label) {
191    var labels = [
192      '0%',
193      '0-10%',
194      '10-20%',
195      '20-30%',
196      '30-40%',
197      '40-50%',
198      '50-60%',
199      '60-70%',
200      '70-80%',
201      '80-90%',
202      '90-100%',
203      '100%'
204    ];
205    var values = [];
206    $.each(labels, function(key) {
207      values.push({x: labels[key], y: data[key]});
208    });
209
210    return [
211      {
212        key: label,
213        values: values,
214        color: "#4572A7"
215      }
216    ];
217  }
218  nv.addGraph(function() {
219    var chart = nv.models.scatterChart()
220      .showDistX(true)
221      .showDistY(true)
222      .showLegend(false)
223      .forceX([0, 100]);
224    chart.tooltipContent(function(graph) {
225      return '<p>' + graph.point.class + '</p>';
226    });
227
228    chart.xAxis.axisLabel('Code Coverage (in percent)');
229    chart.yAxis.axisLabel('Cyclomatic Complexity');
230
231    d3.select('#classComplexity svg')
232      .datum(getComplexityData([[50,5,"<a href=\"BankAccount.php.html#2\">BankAccount<\/a>"]], 'Class Complexity'))
233      .transition()
234      .duration(500)
235      .call(chart);
236
237    nv.utils.windowResize(chart.update);
238
239    return chart;
240  });
241
242  nv.addGraph(function() {
243    var chart = nv.models.scatterChart()
244      .showDistX(true)
245      .showDistY(true)
246      .showLegend(false)
247      .forceX([0, 100]);
248    chart.tooltipContent(function(graph) {
249      return '<p>' + graph.point.class + '</p>';
250    });
251
252    chart.xAxis.axisLabel('Code Coverage (in percent)');
253    chart.yAxis.axisLabel('Method Complexity');
254
255    d3.select('#methodComplexity svg')
256      .datum(getComplexityData([[100,1,"<a href=\"BankAccount.php.html#6\">BankAccount::getBalance<\/a>"],[0,2,"<a href=\"BankAccount.php.html#11\">BankAccount::setBalance<\/a>"],[100,1,"<a href=\"BankAccount.php.html#20\">BankAccount::depositMoney<\/a>"],[100,1,"<a href=\"BankAccount.php.html#27\">BankAccount::withdrawMoney<\/a>"]], 'Method Complexity'))
257      .transition()
258      .duration(500)
259      .call(chart);
260
261    nv.utils.windowResize(chart.update);
262
263    return chart;
264  });
265
266  function getComplexityData(data, label) {
267    var values = [];
268    $.each(data, function(key) {
269      var value = Math.round(data[key][0]*100) / 100;
270      values.push({
271        x: value,
272        y: data[key][1],
273        class: data[key][2],
274        size: 0.05,
275        shape: 'diamond'
276      });
277    });
278
279    return [
280      {
281        key: label,
282        values: values,
283        color: "#4572A7"
284      }
285    ];
286  }
287});
288  </script>
289 </body>
290</html>
291