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
62       </tbody>
63      </table>
64     </div>
65    </div>
66    <div class="col-md-6">
67     <h3>Project Risks</h3>
68     <div class="scrollbox">
69      <table class="table">
70       <thead>
71        <tr>
72         <th>Class</th>
73         <th class="text-right"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></th>
74        </tr>
75       </thead>
76       <tbody>
77
78       </tbody>
79      </table>
80     </div>
81    </div>
82   </div>
83   <div class="row">
84    <div class="col-md-12">
85     <h2>Methods</h2>
86    </div>
87   </div>
88   <div class="row">
89    <div class="col-md-6">
90     <h3>Coverage Distribution</h3>
91     <div id="methodCoverageDistribution" style="height: 300px;">
92       <svg></svg>
93     </div>
94    </div>
95    <div class="col-md-6">
96     <h3>Complexity</h3>
97     <div id="methodComplexity" style="height: 300px;">
98       <svg></svg>
99     </div>
100    </div>
101   </div>
102   <div class="row">
103    <div class="col-md-6">
104     <h3>Insufficient Coverage</h3>
105     <div class="scrollbox">
106      <table class="table">
107       <thead>
108        <tr>
109         <th>Method</th>
110         <th class="text-right">Coverage</th>
111        </tr>
112       </thead>
113       <tbody>
114
115       </tbody>
116      </table>
117     </div>
118    </div>
119    <div class="col-md-6">
120     <h3>Project Risks</h3>
121     <div class="scrollbox">
122      <table class="table">
123       <thead>
124        <tr>
125         <th>Method</th>
126         <th class="text-right"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></th>
127        </tr>
128       </thead>
129       <tbody>
130
131       </tbody>
132      </table>
133     </div>
134    </div>
135   </div>
136   <footer>
137    <hr/>
138    <p>
139     <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>
140    </p>
141   </footer>
142  </div>
143  <script src="js/jquery.min.js" type="text/javascript"></script>
144  <script src="js/bootstrap.min.js" type="text/javascript"></script>
145  <script src="js/holder.min.js" type="text/javascript"></script>
146  <script src="js/d3.min.js" type="text/javascript"></script>
147  <script src="js/nv.d3.min.js" type="text/javascript"></script>
148  <script type="text/javascript">
149$(document).ready(function() {
150  nv.addGraph(function() {
151    var chart = nv.models.multiBarChart();
152    chart.tooltips(false)
153      .showControls(false)
154      .showLegend(false)
155      .reduceXTicks(false)
156      .staggerLabels(true)
157      .yAxis.tickFormat(d3.format('d'));
158
159    d3.select('#classCoverageDistribution svg')
160      .datum(getCoverageDistributionData([0,0,0,0,0,0,0,0,0,0,0,2], "Class Coverage"))
161      .transition().duration(500).call(chart);
162
163    nv.utils.windowResize(chart.update);
164
165    return chart;
166  });
167
168  nv.addGraph(function() {
169    var chart = nv.models.multiBarChart();
170    chart.tooltips(false)
171      .showControls(false)
172      .showLegend(false)
173      .reduceXTicks(false)
174      .staggerLabels(true)
175      .yAxis.tickFormat(d3.format('d'));
176
177    d3.select('#methodCoverageDistribution svg')
178      .datum(getCoverageDistributionData([0,0,0,0,0,0,0,0,0,0,0,2], "Method Coverage"))
179      .transition().duration(500).call(chart);
180
181    nv.utils.windowResize(chart.update);
182
183    return chart;
184  });
185
186  function getCoverageDistributionData(data, label) {
187    var labels = [
188      '0%',
189      '0-10%',
190      '10-20%',
191      '20-30%',
192      '30-40%',
193      '40-50%',
194      '50-60%',
195      '60-70%',
196      '70-80%',
197      '80-90%',
198      '90-100%',
199      '100%'
200    ];
201    var values = [];
202    $.each(labels, function(key) {
203      values.push({x: labels[key], y: data[key]});
204    });
205
206    return [
207      {
208        key: label,
209        values: values,
210        color: "#4572A7"
211      }
212    ];
213  }
214  nv.addGraph(function() {
215    var chart = nv.models.scatterChart()
216      .showDistX(true)
217      .showDistY(true)
218      .showLegend(false)
219      .forceX([0, 100]);
220    chart.tooltipContent(function(graph) {
221      return '<p>' + graph.point.class + '</p>';
222    });
223
224    chart.xAxis.axisLabel('Code Coverage (in percent)');
225    chart.yAxis.axisLabel('Cyclomatic Complexity');
226
227    d3.select('#classComplexity svg')
228      .datum(getComplexityData([[100,1,"<a href=\"source_with_ignore.php.html#11\">Foo<\/a>"],[100,1,"<a href=\"source_with_ignore.php.html#18\">Bar<\/a>"]], 'Class Complexity'))
229      .transition()
230      .duration(500)
231      .call(chart);
232
233    nv.utils.windowResize(chart.update);
234
235    return chart;
236  });
237
238  nv.addGraph(function() {
239    var chart = nv.models.scatterChart()
240      .showDistX(true)
241      .showDistY(true)
242      .showLegend(false)
243      .forceX([0, 100]);
244    chart.tooltipContent(function(graph) {
245      return '<p>' + graph.point.class + '</p>';
246    });
247
248    chart.xAxis.axisLabel('Code Coverage (in percent)');
249    chart.yAxis.axisLabel('Method Complexity');
250
251    d3.select('#methodComplexity svg')
252      .datum(getComplexityData([[100,1,"<a href=\"source_with_ignore.php.html#13\">Foo::bar<\/a>"],[100,1,"<a href=\"source_with_ignore.php.html#23\">Bar::foo<\/a>"]], 'Method Complexity'))
253      .transition()
254      .duration(500)
255      .call(chart);
256
257    nv.utils.windowResize(chart.update);
258
259    return chart;
260  });
261
262  function getComplexityData(data, label) {
263    var values = [];
264    $.each(data, function(key) {
265      var value = Math.round(data[key][0]*100) / 100;
266      values.push({
267        x: value,
268        y: data[key][1],
269        class: data[key][2],
270        size: 0.05,
271        shape: 'diamond'
272      });
273    });
274
275    return [
276      {
277        key: label,
278        values: values,
279        color: "#4572A7"
280      }
281    ];
282  }
283});
284  </script>
285 </body>
286</html>
287